Interface Design Guidelines & Web Design General design principles Design principles apply to everything.Some principles are of particular importance to computer interfaces. Following general design principles can ensure meeting basic human factors evaluation criteria.
Eg date field example (which format??)
1. Consistency and predictability
2. Provide shortcuts
3. Provide helpful feedback
4. Completions and exits clearly indicated
5. Prevent errors
6. Allow action reversal
7. Give user a sense of control
8. Minimize memory/cognitive load
These are labels with a raised appearance.
Is it any surprise that people try and click on them?
This will take5 minutes...5: Provide feedback
What’s it doing?
Time for coffee.
How do I get out of this?
Many strategies for reducing error problems
Other interface components such as
"A common thread between conciseness, scannability, and objectivity is that each reduces the user's cognitive load, which results in faster, more efficient processing of information.”
Morkes & Nielsen, 1998
“Happy talk must die”
Don't Make Me Think, p. 46
“The main thing you need to know about instructions is that no one is going to read them--at least not until after repeated attempts at 'muddling through' have failed”.
“It’s just not acceptable for web sites to come with documentation”.
Jakob Nielsen, Designing Web Usability, p. 129.
user interface problems can not be corrected in the documentation
Need to minimise eye movement is even more important online:
The way we are taught to read has implications for how we scan a screen:
Position elements to minimise eye movement
Source:Yale Style Manual
‘above the fold’ = newspaper term
Make sure important informationcan be seen in first screen view
Early studies (19954/5) showed that users would not scroll
Not true of users now, but…
as a rule of thumb
level one page – one screenful
level two page – two screensful
beyond that – ok to be longer
Caution: pages can be directly accessed!
Format of variable contents
Widget to widget spacing
Message text in Arial 14, left adjusted
Standard icon set
Window to widget spacing
Standard icon set
The file was destroyed
Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.
Do you really want to delete the file “myfile.doc” from the folder “junk”?
Logic of organizationalflow
Alignment connects visual elements in a sequence
Grouping by white space
Tip of the day: Monday, Mar 12
OkayG4 Visual Consistency
Mmmm:G5 Relationships between screen elements
Bad alignment Poor choice of colors to distinguish labels from editable fields
No regard fororder andorganization
IBM's Aptiva Communication Center
Left alignment is most commonly used:
Study of font faces and sizes by Software Usability Research LabWichita State University, 2000
for users with good vision
- TNR vs Arial not critical- 10 vs 12 point not critical
but not all users have good vision
- 12 pt would be a safer default- allow user to override
Text is harder to read when
use colours with good contrast
- white on black (‘positive text’) is best
- black on white (‘negative text’) is next best
use plain backgrounds
colour contrast insufficient
‘microcontent’ – very small amount of space to make your message clear