Understanding the Science Aspect in Interaction Design – a Summary of “Laws” in the Field

The theoretical part of HCI is very rich. There are plenty of guidelines, principles, theories and laws that constitute universal truth designers can depend upon. The first three are in general concrete and usually proposed by gurus and experienced designers, while the laws are more abstract and mostly discovered by experiments. However, many laws are misunderstood or misused by designers. In this blog article, I will be talking about many common HCI “laws/models” that can be expressed by numbers, formulas or graphs. My list of laws/models are not complete, but it includes many useful laws as follows:

  • Fitts’ Law and Accot-Zhai steering Law
  • Hick-Hyman’s Law
  • Weber’s Law, Fechner’s Law and Steven’s Law
  • Miller’s Law of Short-term Memory Load
  • Power Law of Practice
  • Pareto and Zipf Laws
  • Nielsen’s Response Time Limits Law
  • Serieal Position Effect (Hermann Ebbinghaus Law)
  • The Rule of Thirds
  • Gestalt Law and Praegnanz Law

(1) Fitts’ Law and Accot-Zhai steering Law

If you were a student in HCI, then Fitts’ law might be the first law you’ve learned in class. I’ve already talked about Fitts’ law in one of my previous blog articles. This law predicts that the time required to rapidly move to a target area is negatively proportional to the distance to the target and positively proportional to the size of the target.  This law is often used to model the pointing interaction, and is widely applied in interface design. This law can be expressed as the following formula :

  • T = a + b \log_2 \Bigg(1+\frac{2D}{W}\Bigg) (formula image is courtesy of [1])

where T is the average time taken to complete a movement when interacting the user interface,  D is the distance from the starting point to the center of the target, and W is the width of the target measured along the axis of motion. a and b are empirical constant values that are specific to the kind of pointing action.

Since both a and b are constants, and log function with base 2 is a monotone increasing function, so T is totally depend on D/W.  By transforming the law into designer’s language, it says:

  • You should design your user interface element to be large and close to where the user starts the interaction.

Of course the larger and the closer, the less time it will cost, but you have to consider other design constraints like layout and aesthetics as well as the tradeoff between increasing speed and the cost of other factors. My blog article [2] listed some examples of how Fitts’ law is used. By summarising the examples, I list the following two implications of Fitts’ law for designers:

The most frequently used user interface elements should: 

  1.  be designed both large and proximal to the users’ pointing position. (e.g. MS Word’s Menu button)
  2.  be considered to put on the border or the corner of the screen. Due to screen size constraints, at these positions, the size of the elements can be seen as infinite. (e.g. MS Windows’ start button, Mac OS’ hot corners)

***********************************************************************************************************************************

There is another law called “Steering law” or “Accot-Zhai steering Law” needs to be talked about as well. The reason why I put it here is because this law is an extension of Fitts’ law.  This can be seen from the formula:

  • 413a5a0d79a65d7be823b0ba2a71eb2d (formula image courtesy of [3])

It looks pretty similar to Fitts’ formula.  Compared to Fitts’ law , which is a general measure of movement time,  steering’ law describes the time required to navigate, or steer, through a 2-dimensional tunnel. This is where the name “steer” comes from.  It was found by Accot and Zhai in their original paper. In this formula, T is also the average time to navigate through the path;  d is not a variable,  it is the differential function; C is the path parameterized by s, W(s) is the width of the path at s, and a and b are experimentally fitted constants.  Why not a constant W and why not a constant length? Because the path does not need to have constant width and length,  the tunnel may be a curvilinear shape, and this formula gives a general form. If the width and length are really constant (most of the user interface elements are like this), then the integral part can become A/W, where A denotes the length of the tunnel and W the width.

By transforming the law into designer’s language, it says:

  • You should design your tunnel user interface element (e.g. nested dropdown menu) to be wide and short.

Steering law is not widely applicable, because you don’t always have tunnel user interface element. I can give a few steering tasks to illustrate the use.

  1.  Nested menu such as dropdown menu where a users have to navigate her pointing device through the bounding box of the menu (the tunnel) to select a target.
  2.  In virtual reality application, there are many cases e.g. you drive a car on a curvy road. You cannot drive the car outside the road,  so the road is actually a tunnel interface.

In cases like this, if you want to estimate the time to evaluation your design, you can apply the steering law.

(2)Hick-Hyman’s Law

While Fitts’ law and Accot’s law is a measure of time for physical movement, Hick-Hyman’s law aims at estimating the time it takes for a person to make decision as a result of the possible choices she has; that is, increasing the number of choices will increase the decision time logarithmically. The law can be expressed by the following law:

  • hicks (formula image courtesy of [4])

where b is a empirical constance, while n is the number of choices.  There are many myths about this law, both among designers and researchers. I have discussed this law with many UX experts here [5], you can have a look at our discussions. Well, let’s list some myths.

Myth 1 : Hick’s law predicts the time a person spent to select among n items

Here I need to highlight the word “select”, so it means you select something mechanically.  For example, if a user is given a list of countries to select his/her own origin, then he/she scroll the mouse to select the right country. This is actually out of scope of Hick’s law, since Hick’s law is not for predicting the time for deciding a goal (here, the goal is clear even before seeing the interface).  Some articles about Hick’s law came to a conclusion that you cannot show too many options for such selection tasks, otherwise it may reduce users’ reaction time. This is totally wrong, in these cases, users already know what to select, what they do is a simple scanning task to find the right item and click. It has something to do with Fitts’ law, however, since the longer the list, the longer time it takes you to reach the item.

Myth 2: Hick’s law predicts the time a person spent on making a decision among n arbitrary items

This myth depends on how you interpret it.  Hick’s original experiment was that a user performed motor tasks for selecting which of the random light was lighted up. All lights have the same probability to be selected, a user must first saw which one was lighted up, and reacted immediately, like a Whac-A-Mole game. This was the original experimental setting of Hick. In this case, we could say it is within the reach of Hick’s law.  But this applies only to simple decisions, complex decisions may not work.

Regarding applying Hick’s law in HCI, there has been much discussion since the 20 years ago. [6] gave a pretty much full story. The conclusion is that Hick’s law is not popularly used in HCI design, unlike its sister Fitt’s law. One reason is that Hick’s law mainly targets simple artificial tasks (such as pressing a button), but real-world UI tasks are never simple. There are much cognitive and motor processes involved.  Olsen and Nielsen tried to make a general conclusion about their experiments in the use of spreadsheet software that “The more possible alternative responses, the longer it takes to choose any one”. But this message can not be taken easily.  For example, when designing menus, you need to consider both the breath and depth of it. Reducing the number of items for a specific menu may also increase the depth of it, by hierarchical nesting menus. This is not always a good UI design process. However, according to Hick’s law’s logarithmic function, you double the number of menu items will only result in an incremental, but not double the reaction time. So, sometimes breadth of information visualisation might be more favourable. It totally depends on the context, there is no one-for-all solution.  Anyway, in HCI Fitts’ law is much more intuitive and effective than Hick’s law.

(3)Weber’s Law and Fechner’s Law

Weber’s law states that the ratio of the increment threshold to the background intensity is a constant. So when you are in a noisy environment you must shout to be heard while a whisper works in a quite room. And when you measure increment thresholds on various intensity backgrounds, the thresholds increase in proportion to the background. This law can be illustrated with the following equation.

 download

Actually Webber’s law is also called Weber-Fechner’s law, the German psychologist Fechner proposed another similar law with two parts. The first part is that two stimuli will be discrinimable if they generate a visual response that exceeds some threshold. The second part is that the visual response R to an intensity I is given by the equation.

Fechner’s law provides an explanation for Weber’s law. Fechner’s explanation has two parts. The first part is that two stimuli will be discriminable if they generate a visual response that exceeds some threshold. The second part is that the visual response R to an intensity I is given by the equation R = log(I ). This relation is plotted in the next graph. Suppose we call the change in response necessary for discrimination “one”. Then by Fechner’s law the two intensities indicated by arrows will be just discriminable. The discrimination threshold ∆I is given by the distance on the x-axis between I and I+∆I.

Screen Shot 2013-11-03 at 16.24.09

Web’s law and Fechners’ law are mathematically identical. The laws have revealed the relationship between the absolute stimuli increase and the perceived increment. It means, in order to achieve a perceived change, the change must be relative to the current magnitude. In user interface design, Weber’s Law can be used for  various sensory modalities in GUIs such as brightness, loudness, line length, visual weight of fonts in typography, color matching etc. Many times large amount of information is required to be displayed on a limited size computer screen. Information is displayed in various forms viz. text, pictures, drawings, maps, graphs, videos etc. Poor visual design of user interface lacks the ability of differentiating between two close enough visual stimuli e.g. two lines with different thicknesses in a map (for wide roads and narrow lanes).What is  this  threshold  of  line thickness that  may  lead  to  noticeable difference  is governed  by Weber’s law.The threshold of noticeable difference between color shades is also governed by Weber’s law[8].

(4)Miller’s Law of Short-term Memory Load

Observation that an individual normally can retain or process only seven give or take two (7±2) items (chunks) of information in their correct serial-order, in his or her short-term (15 to 30 seconds duration) or working memory. Reported by the Princeton University’s cognitive psychologist George A. Miller in 1956, it is accepted more as a rule of thumb  than a scientifically proven fact. Also called Miller’s Magic Number.

Many people, including HCI professionals often mistakenly use this law to denote the maximum number of items that should be shown in a menu or in a slide. This is wrong, because the items in a menu or on a slide do not require people to hold in memory, instead, they are rather persistent. I don’t really see a real usage of this law in HCI.  I remember having seen an expert from interaction-design.org wrote a blog article about this law. He said an example of applying this law in interaction design is in mainly for usedl when specific information must be memorized for later use. [9]

E-learning applications should make liberal use of chunking to aid in end-user memorization.  Chunking is also ideal in environments where an interface must compete against other stimuli for the attention or working memory of the end user (car navigation systems, cell phone, public kiosks).  Consider a health practitioner in an emergency room scenario.  They are often:

  1. Barraged by a multitude of visual and auditory stimuli such as telephones ringing, people talking, and rapid movement. 
  2. May have only moments to look at an interface to extract and memorize the important information.   
  3. May need to enter this information into disparate systems without the benefit of referring back to the source.   
  4. Use legacy systems that cannot be reprogrammed to  repopulate or carry over data from one screen to the next
  5. Are not allowed to write down information due to privacy legislation.

In the above environment, effective use of chunking can improve the usability and effectiveness of an information system.  In the table below, the left hand column (Column A) does not use chunking while the right hand column (Column B) does.  Of the two scenarios, Column B makes it much easier and faster for a health practitioner to focus on and memorize the Patient ID, especially when faced with the sensory overload of an emergency room.

Column A – Without Chunking Column B – With Chunking
Patient ID:678290234
Name: Joe Smith
DOB:02111973
Patient ID   6782  9023  4
Name: Joe Smith
DOB 02 / 11 / 1973

Well, I have to say that this scenario somewhat makes sense, but it is still not common. The education of interaction design has exaggerated the importance of Miller’s law in design, but it is not the case. Neverthelss, we must note that this law can only be used when we really need working memeory to memorize.

(5)Power Law of Practice

The Power Law of Practice is the law of learning curve. The power law of practice states that the logarithm of the reaction time for a particular task decreases linearly with the logarithm of the number of practice trials taken. It is an example of the learning curve effect on performance. It was first proposed as a psychological law by Newell & Rosenblom[10].  For example, if you know absolutely nothing about a topic, you can learn 50% of the information quickly. But when you have 50% less to learn, it takes more time to learn that final 50%.

This law is not used for guiding interface design, but it is rather a knowledge we must learn for interaction designers : a quantified measure of how our users can learn to use the user interface.

(6) Zipf’s Laws (Law of Least Effort) ad Pareto Principle

Zipf’s law refers to the fact that many types of data studied in the physical and social sciences can be approximated with a Zipfian distribution. It described phenomena where certain types of events are quite frequent, whereas other types of events are rare. In English, for instance, short words such as articles are quite frequent, whereas long words are quite rare. In music, consonant harmonic intervals are more frequent, whereas dissonant harmonic intervals are quite rare, among other examples [11]. Zipf’s law is expressed in terms of the frequency of occurance (quantity) of events, as follows: F ~ r^(-a), where F is the frequency of occurance of an event within a phenomenon, r is its statistical rank (position in an ordered list), and a is close to 1. Another formulation of Zipf’s law is: P(f) ~ 1/f^(n), where P(f) denotes the probability of an event of rank f and n is close to 1.

This law is not usually not directly using in design, but is something that helps us understand the user’s behaviour. For example, with a menu design, we might learn that the “File” menu is the most used item, comes before “Insert”, then we can estimate that the number of usage of the “Insert” item is half the frequency of “File”, etc.

However, compared to Zipf’s law, Pareto’s principle also reflects similar findings. Pareto Principle is also known as the 80/20 rule, which states that 80% of results come from 20% of actions. Named after Vilfredo Pareto who in 1906 observed that 80% of Italy’s land was owned by 20% of the population. It has become a guideline for businesses and can easily be applied to web design. Using this as a guide you can make assumptions towards your design, mainly in regards to content. If you consider that you have a bulky, bloated, web site with 50 pages. You’ve taken care and spent all this time crafting the pages to present the stacks of content as nicely as possible to the user. But of those 50 pages, 10 of them are doing 80% of the work and the other 40 pages are only doing 20%. This could lead to removing the pages, features or content that isn’t being accessed.

(7)Nielsen’s Response Time Limits Law

This law corresponds to human response times. The famous Usability guru Jakob Nielsen wrote a article about 3 response limit in user interface design.

  • 0.1 seconds gives the feeling of instantaneous response — that is, the outcome feels like it was caused by the user, not the computer. This level of responsiveness is essential to support the feeling of direct manipulation (direct manipulation is one of the key GUI techniques to increase user engagement and control.
  • 1 second keeps the user’s flow of thought seamless. Users can sense a delay, and thus know the computer is generating the outcome, but they still feel in control of the overall experience and that they’re moving freely rather than waiting on the computer. This degree of responsiveness is needed for good navigation
  • 10 seconds keeps the user’s attention. From 1–10 seconds, users definitely feel at the mercy of the computer and wish it was faster, but they can handle it. After 10 seconds, they start thinking about other things, making it harder to get their brains back on track once the computer finally does respond.

A 10-second delay will often make users leave a site immediately. And even if they stay, it’s harder for them to understand what’s going on, making it less likely that they’ll succeed in any difficult tasks. Even a few seconds’ delay is enough to create an unpleasant user experience. Users are no longer in control, and they’re consciously annoyed by having to wait for the computer. Thus, with repeated short delays, users will give up unless they’re extremely committed to completing the task[13].

An example use of these laws is Netbeans, where the UI designers applied the UI responsiveness guideline [12].

  1. 0.1 second – navigation and edit actions (e.g. folder expansion, paste in editor, navigation in editor), and painting of all menu bars must finish within this limit
  2. 1.0 second – all window and dialog openings must finish within this limit
  3. 10 seconds – all actions which are finished later than after 1 second and usually take less than 10 seconds must show some sort of busy indication (e.g. hour glass cursor or “please wait…” text); all actions taking longer than this limit are required to provide progress bar using Progress  APIs

(8)Serial Position Effect (Hermann Ebbinghaus Law)

The term serial position effect  was coined by Hermann Ebbinghaus which refers to the finding that recall accuracy of  an  item  from a list varies as a function of  its position within  the list. People tend to recall items at  the end  of  list more  reliably (the recency effect). Also the first few items are recalled more frequently than the middle items (the primacy effect).

Refer to the  list below  and  try  to  remember  the  items  in  the list.

1 Amul  Butter
2 Pen  Pencil
3 Diary Milk
4 Orange  Juice
5 Key  Board
6 Drum Sticks
7 Paper Cup

It  will  be  observed  that  you  will  more reliably recall  items in position 1, 2,6 and 7  than those in the position 3,4 and 5.

This effect can be used in user interface design. The more important or more frequently  used  items or  controls  should be placed in the beginning or end of the list. Items less frequently used should be placed in the middle of the list. A list of written words may be more easy to recall than a set of colors or symbols. In case of a list using colors the serial position effect may not be immediately seen. Here recall depends on various properties of color such as brightness, hue and saturation too. Thus a brighter color regardless of its position in the list is more likely to be recalled. This can be used to over-rule the serial position effect whenever the context demands. Thus color can be used as a design element to aid recall. For example, while designing a tool bar, an important command  which cannot  be accommodated  at  the starting or ending of a list, could be placed in middle part with a slightly brighter color, so that it still receives the attention of the user and the user tends to remember it easily and for a longer time.

(9)The Rule of Thirds

The rule of thirds is a guideline which can be applied to a huge range of things relating to composing of visual images, such as paintings and photographs. The guideline suggests that you take an image and divide it into nine equal parts. This will give you two vertical and two horizontal lines [14]. Visual elements should be placed on the lines, or the intersections between the lines as these are the areas that the user’s eyes naturally focus on. This rule is widely used in photography [14] and visual design. The take away message is that you should place the object of focus at the intersection points. See

(10)Gestalt Law and Praegnanz Law

Gestalt law is the fundamental law of human perception. It is widely used in user interface design. Its principle maintains that the human eye sees objects in their entirety before perceiving their individual parts, suggesting the whole is greater than the sum of its parts. Gestalt psychology tries to understand the laws of our ability to acquire and maintain stable percepts in a noisy world[16]. Gestalt law is composed of many sub-laws. I summarise them as CFPCSS laws:

  • Closure
  • Figure & Ground
  • Proximity
  • Continuation
  • Similarity
  • Symmetry

Gestalt law needs a full article to explain, which I will do later. In this article, I just presented the name of the laws of Gestalt theory.

Reference:

[1] http://en.wikipedia.org/wiki/Fitts’s_law

[2]https://nanlee.wordpress.com/2013/06/11/ui-design-and-fitts-law/

[3]http://en.wikipedia.org/wiki/Steering_law

[4] http://en.wikipedia.org/wiki/Hick’s_law

[5]http://ux.stackexchange.com/questions/42323/confusions-about-applying-hick-hyman-law-in-user-interface-design

[6] Steven C. Seow, Information Theoretic Models of HCI: A Comparison of the Hick-Hyman Law and Fitts’ Law, 2005

[7] Olsen and Nielsen, Analysis of the Cognition Involved in Spreadsheet Software Interaction, 1988

[8] : http://iitg.vlab.co.in/?sub=72&brch=170&sim=750&cnt=1

[9]:http://www.interaction-design.org/encyclopedia/chunking.html

[10]: http://en.wikipedia.org/wiki/Power_law_of_practice

[11]:Manaris, B., Machado, P., McCauley, C., Romero, J., & Krehbiel, D. (2005). Developing fitness functions for pleasant music: Zipf’s law and interactive evolution systems. In Applications of Evolutionary Computing (pp. 498-507). Springer Berlin Heidelberg.

[12]:http://wiki.netbeans.org/UI_Responsiveness

[13]:http://www.nngroup.com/articles/website-response-times/

[14]:http://en.wikipedia.org/wiki/Rule_of_thirds

[15]: http://upload.wikimedia.org/wikipedia/commons/f/f0/RuleOfThirds-SideBySide.gif

[16]:http://en.wikipedia.org/wiki/Gestalt_psychology