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´.
- 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)
- 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
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
Applies to: performance, cognitive
Users will more quickly make decisions from a list of 10 items than 2 lists of 5 items.
Proximity, similarity, etc.
Application @ http://sixrevisions.com/web_design/using-power-structure-and-gestalt-for-visual-hierarchy/
Good article @ http://www.jungleminds.nl/publicaties/artikelen/een_kwestie_van_perceptie%3A_hoe_gestalt_wetten_helpen_bij_optimalisatie_van_je_website
Visual design principles
Contrast/prominence, rhythm (ritmiek), templates (stramien)
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.
Reduce, hide, merge, remove
Also: swap, replace
Related reading: http://52weeksofux.com/post/548149787/simplicity-isnt-that-simple
Take things away till it breaks. A few colours are enough.
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.
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
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.
By applying commonly used principles. For example, on Western websites, logo is top-left. Consistency: Things that look different should act different.
A user must learn and remember the style conventions, navigation structure and terminology used on a website. See also convention.
Miller´s magic 7.
Direct manipulation is more a type of interface (consideration) than a strict law. Examples are WYSIWYG, Wacom, Wii (body as control), and video game controller devices. There is a direct correlation between what you see and what you can manipulate. Interaction practice examples that follows from this are:
- The button/control IS the feedback (think of a button that changes colour to indicate that what it underlying represents is in On or Off state). Compare this to a separate button where the state is shown elsewhere on the screen. NB: This is more an application of the simplicity rule of combination, but also demonstrates “Immediate display of the results of an action.”
- “Rapid action and display”. A real-time relation between action and reaction/response.
- Spatial response. The trigger does the action on-the-spot. For example, by clicking the monkey on the screen makes it jump, dragging it moves it. Compare this to layout out separate controls for jump and move.
The advantages are usually: the user can feel the control, predict the response, easy to reverse the response (undo).
- If it is good looking (visually) it will be more usable
- Fun, pleasure
- Emotion, touching, triggers
- Trust (not pushing/cheating)
- 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)
– 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)
(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
Error prevention, adequate support/help and input forgiveness, good defaults/preferences, feedback.
- 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
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)
Interaction-design.org > Encyclopedia
http://www.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/ [2 read]
Interaction designer’s neccesities
Principles of interaction-design