Laws of interaction design

This post is under construction.

This post lists the basic and essential laws that good web interaction design should follow. Understanding these rules will improve your design skills. You can also use them as arguments to test and defend your design solutions as being ´most  usable´.

Contents:

• Simplicity
• Consistency (across your own site)
• Convention  (or consistency across the web; common web patterns)
• Don´t make me think
• Metaphors  (symbols, connotations and conventions within a culture)
• Cognitive processes (attention, memory, gestalt)

Common sense

• Make sure all your links work
• Text should be large enough to read (by your (senior) audience on their screen set with (high)  resolution)

Above the fold

Relative importance: low

One of the first steps of interaction design you should follow is determining the screen resolution. As screen real estate is scarce and users must scroll, you should take into account the scroll-line and avoid creating scroll-stoppers (see my post about the fold). Try to answer for what resolution you want to minimal design for. Find out where is the fold nowadays?

Don Norman´s laws

http://en.wikipedia.org/wiki/Seven_stages_of_action

Fitt’s law

Applies to: performance, physical

Minimise the need of physical movement in an interface. On user performance wise, the ideal interface is circular. Big buttons are easier to hit.

See also: motor, click fatigue

Hick’s law

Applies to: performance, cognitive

Users will more quickly make decisions from a list of 10 items than 2 lists of 5 items.

Gestalt principles

Proximity, similarity, etc.

Good article @ http://www.jungleminds.nl/publicaties/artikelen/een_kwestie_van_perceptie%3A_hoe_gestalt_wetten_helpen_bij_optimalisatie_van_je_website

Links

http://psychology.about.com/od/schoolsofthought/f/gestalt_faq.htm

http://www.usabilityweb.nl/artikel.php?id=41

Visual design principles

Contrast/prominence, rhythm (ritmiek), templates (stramien)

Simplicity

KISS = Keep It Simple, Stupid!
If you can remove anything that doesn’t add value, then do so. Less is more. Progressive disclosure: hide, reduce.
Avoid junk/noise and other excess.

Too much simplicity can be dissapointing to power users. Though the problem is usually the overcomplexity of the system or process.

Related reading: http://52weeksofux.com/post/548149787/simplicity-isnt-that-simple

Take things away till it breaks. A few colours are enough.

Consistency

Consistency is important for learnability (the time/effort needed by a user to have a hunch how a particular UI element works or where to find certain information on a page, or on what page, or what is clickable, etc), recognition rather than recall.

You don’t have to have blue and underlined links if it is clear

Navigation is not always consistent (example: Apple.com). Where consistency fails, convention must take the upper hand.

Consistency should not go in the way of experimentation. Break conventions, but only when the new solution is truly more beneficial than the conventional solution.

Convention

Standards, common practice, familiarity, learnability. People expect certain things and are used to things working alike. Don’t make them think. They don’t always like change. Don’t innovate! Break the convention only if doing so adds significant value.

Don’t make me think!

Relates to simplicity, convention

What makes me think?

• Where can I click? Can I click this?
  
• Where will this link button take me? What will this button do?
• I don’t understand this sentence
• What happened? I didn’t expect that! Now I’m lost.
• Should I trust them?

Match my expectations, cultural differences and norms, etnography

Attention

In Western websites, top-left page elements get more attention than bottom-right. From eye-tracking studies we know that, on most Western websites, the parts that get most attention are those  in the F-shaped pattern.

By correct use of fonts, certain page elements (such as the ‘Attention’ title of this paragraph) gets more attention, or prominence. In other words, it gets relative more noticed (noticable) than other screen elements.

Convention

By applying commonly used principles. For example, on Western websites, logo is top-left. Consistency: Things that look different should act different.

Memory

A user must learn and remember the style conventions, navigation structure and terminology used on a website. See also convention.

Miller´s magic 7.

Related areas

User experience

• If it is good looking (visually) it will be more usable
• Fun, pleasure
• Emotion, touching, triggers
• Convincing
• Empathy
• Trust (not pushing/cheating)

Copywriting

• User don’t read, they scan.
• Scent of information:
  • Users will click the first thing they see where a ‘word association’ has been made (i.e. where the scent is strong)
  • Users will click on that looks clickable (or should be..). Ensure affordance (e.g. 3D buttons afford to be pushed) and consitency in link look and feel (underlined links recommended)

Visual design

-typography
- ease/speed of reading (it is generally better to have two 40-character wide areas than one 80-character wide. One-and-a-half alphabet long)
- legibility  (it is better not to have ALL CAPITALS headings as they are slower to read or recognise)

Layout

(grid and column): Index, Work-area, Index

In essence, the global layout should take care of:

• Where users put most of their attention
• How the page elements, such as MiniApps, are arranged on a page so that they obey the rules for flow of control and dependencies
• The page size and scrolling problems

Micro-layout (within a miniApp on webpage) should take care of:

• Put like with like  [Nielsen in Prioritizing web usability]
• Order of elements: put most used/useful first?
• Presence of elements (“surface commonly-used features” and hide others)

Related principle: Gestalt theory

Flow of control

Flow of control is important in two respects: (1) for the efficiency in performing a task, (2) for the transparency and understandability of a screen or page. Visual flow should be from top-to-bottom and from left to right (reading direction).  Dependencies (or cause-effect relations between the different parts (work areas) on screen) follow the same rule. Neither should ever be zig-zag (i.e. when you initiate an action the effect should not be visible in a part of the screen diagonally upper-left of the action button, but better bottom-right). In effect this is Fitt´s law but then applied to eyes, not to source-target.

Muscle memory, flow, instinct, modes  (e.g. input mode and review mode in inline validation)

Technical requirements: Page updates and refresh

Unique to webpage design is that browsers often must clear the screen (reload or refresh a page) to show the changes. Automatic scrolling might be a solution, but then the context of the starting situation gets lost. Moreover, the changes might affect several areas on the page. The context goes completely lost in such a case, and the user has to take great effort in reestablishing. AJAX-based might be a solution.

Related to attention. Avoid making things jump around on the screen, unless the purpose is to get the user’s attention (even then, animations are usually too distracting and annoying, like the ESPN website). Smooth transitions (shrink, slide, expand) and animations (fade, glow, yellow highlight) and other effects can help eliviate the pain.

Information design: navigation and structure

…

Defensive design

Error prevention, adequate support/help and input forgiveness, good defaults/preferences, feedback.

Bottom line

• A good design is like a friendly person  (empathy, kindness, humour/right tone of voice, trust,  manage expectations/don’t unpleasantly surprise me, exceed my expectations until the point that it’s almost too good to be true)
• Don’t make me have to think – it should be intuitive and clear
• Don’t confuse or annoy/irritate me

Further reading

Designing for Interaction (book) has a chapter on Principles of Interaction Design.

More ‘laws and principles of interaction design, in the sites:

http://www.theuxbookmark.com/2009/11/interaction-design/expert-ratings-of-usability-maxims/ (34 thumb rules)
http://uxmag.com/design/the-psychologists-view-of-ux-design
Interaction-design.org  > Encyclopedia
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ [2 read]
http://www.ixda.org/discuss.php?post=41955 [2read]

Related posts

Interaction designer’s neccesities

Principles of interaction-design