Introduction
There are several principles involved in designing interactive products. Some of these are:
- Grouping: people naturally assume that controls which are close to together have similiar functions, so interfaces should be layed out to reflect this
- Constraints: good constraints minimise the possible interpretations of a system and make it easier to understand or use
- Conceptual model: a mental picture of how something works, informed by its appearance, or 'system image'
- Affordance: "perceived and actual properties of an object"; "how it could be used". For example, a button affords pushing, and to aid efficient interaction, it should also look "pushable"
Examples of each are shown in the following sections.
Grouping
Figure 1
A video rental machine
Problem
Where do you insert your rental card? Every time I used this machine, I spent several minutes in confusion trying to find the right slot. This is especially annoying around midnight when there are shady characters loitering a few metres away!
Analysis
I watched 5 people in a row trying to use the machine and they also had a long moment of confusion while trying different slots without success. This illustrates what happens when the principle of grouping is neglected - similar things should go together.
The correct slot is actually located in the lower right of the group of four.
Recommendation
Put the correct slot near the screen and keyboard. People will naturally try this one first.
Constraints
Figure 2
A label attached to the end of a laptop power lead
Problem
What do you think the label says?
You might guess that it's some standard warning about the dangers of electricity, but you'd be wrong. This is what it actually says:
NOT TO BE REMOVED, EXCEPT BY END USER
! WARNING
Improper use of keyboards and other input devices have been associated with ergonomic injury.
For information about reducing your own risk, see the WORKING IN COMFORT instructions provided with your equipment.
You may also view WORKING IN COMFORT at our website, http://www.hp.com/ergo
I ignored this label for a whole year after buying the computer, assuming it was the standard electricity warning - I would have appreciated the advice on working in comfort!
Analysis
Normally, attaching a warning sticker to a power cable constrains your expectations of what it says to something about that particular power cable or electricity in general. Here the product managers forgot the power of such constraints.
Recommendation
Put the sticker on the keyboard. This constrains its association to the business end of the computer, where it is needed. This would also act as a forcing function - users are obliged to remove the sticker to use the computer properly, and are much more likely to notice the advice as a result.
Conceptual Models
Figure 3
A jar of string beans
Problem
This is no ordinary jar! - if you try to open it by twisting the lid you will never succeed and probably injure yourself in the process. Why? Because it is sealed under negative pressure -the only way to open it is to jab a sharp knife under the lid and lever it until the pressure is equalised; only then can you twist the lid open.
Analysis
The problem here is that the jar has a misleading appearance (or 'system image'). There is nothing to indicate that this jar opens differently to the rest - even the thread is identical to standard jars:
Figure 4
Thread on the jar top
The product designer should craft the appearance of the system or object so that users can build up a conceptual model of how it works. Here the appearance (or 'system image') of the jar invites us to use our standard conceptual model of how a jar works - 'twist lid to open', when in fact we should be employing our conceptual model for 'prise lid to open'.
Recommendation
Put a knife-sized indentation in the side of the lid. This (perceptual) affordance should ensure that we use our conceptual model for 'prising' lids instead of 'twisting' lids.