Interface Design Guidelines

1
Interface Design Guidelines Web Design
2
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.

3
General HCI Design Concepts

• Visible affordances
• Visible constraints
• Mapping
• Causality
• Transfer effects
• Population stereotypes/idioms
• Individual differences

4
Affordance

• How do the following objects provide affordance?

5
Visible Constraints

• Limitations of the actions possible perceived
  from objects appearance
• Eg date field example (which format??)
• Sim City2000 (see hall of shame) where some
  toolbar buttons (not all!) have submenus
  associated with them, available only when the
  user holds the mouse button down for a period of
  time after clicking on the toolbar button.

6
Mapping

• Why is this a poor mapping of video control
  buttons?

• Is this better?

7
Causality

• the thing that happens right after an action is
  assumed by people to be caused by that action
• interpretation of feedback (more on this
  later)
• false causality
• incorrect effect
• starting up an unfamiliar application just as
  computer crashes
• causes superstitious behaviors
• invisible effect
• command with no apparent result often re-entered
  repeatedly
• e.g. mouse click to raise menu on unresponsive
  system

8
Transfer effects

• People transfer their learning/expectations of
  similar objects to the current objects
• positive transfer previous learning's also apply
  to new situation
• negative transfer previous learning's conflict
  with the new situation

9
Idioms

• Populations learn idioms that work in a certain
  way
• red means danger
• green means safe
• But idioms vary in different cultures!
• Light switches
• America down is off
• Britain down is on
• Icons may not transfer well eg trash (word and
  symbol)

10
Individual differences

• There is no average user Difficult/impossible?
  to cater for everyone well, so design often a
  compromise
• Rule of thumb
• design should cater for 95 of audience (ie for
  5th or 95th percentile)
• but means 5 of population may be (seriously!)
  compromised
• Designing for the average is a mistake
• may exclude half the audience
• Examples
• computers and visibility
• font size, line thickness, color for color blind
  people?

11
Interface Design Guidelines

• Human factors design principles provide good
  basis for design. More specific computer
  interface design guidelines have also been
  developed by evaluating common design problems
  across many systems.
• These guidelines can be used in the design
  process and also to evaluate an interface for
  usability.

12
General Interface Design guidelines.

• 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
• (Shneiderman, 1998)

13
Be consistent

• Consistency of effects
• same words, commands, actions will always have
  the same effect in equivalent situations
• Predictability
• Consistency of language and graphics
• same information/controls in same location on all
  screens / dialog boxes
• forms follow boiler plate
• same visual appearance across the system (e.g.
  widgets)
• e.g. different scroll bars in a single window
  system!
• Consistency of input
• consistent syntax across complete system

Ok
Cancel
Ok
Cancel
Done
Never Mind
Accept
Dismiss
Ok
Cancel
CONNECT MODEM
14
Be Consistent
These are labels with a raised appearance. Is it
any surprise that people try and click on them?
15
Shortcuts

• Should provide fast way for experienced users
  eg
• Auto completion of commands
• Functions keys
• Skipping instructions - Eg bill paying over
  phone, choice for new/experienced users

16
Feedback

• Keep user informed about what is happening
• Includes sound, highlighting, animation and
  combinations of these
• Eg. The hourglass tells user something is
  happening, but not how long its going to take.
  Has it hung? Or is it just taking a long time?

17
5 Provide feedback

• Continuously inform the user about
• what it is doing
• how it is interpreting the users input
• user should always be aware of what is going on

Whats it doing?
Time for coffee.
18
Feedback

• Should be as specific as possible, based on
  users input
• Get users attention (is the feedback noticed?)
  but dont drive them crazy! (eg harsh tones,
  large intrusive pop-ups, constantly blinking
  text)

19
6. Provide clearly marked exits
How do I get out of this?
20
Exits

• Users often change mind, are interrupted, or
  become confused about a process Offer easy way
  out wherever possible
• Cancel button (for dialogs waiting for input)
• Undo (can get back to previous state)
• Quit (for leaving the program at any time)
• Defaults (for restoring to known state)

21
Prevent errors!

• Design it so its hard to make mistakes!!
• Menu selection vs form fill-in
• No alphabetic characters where numbers expected
• Check before proceeding with major actions (eg
  save before exit prompt)
• Feedback for errors including simple specific
  instructions for recovery

22
Designing for error

• Many strategies for reducing error problems
• Make errors detectable
• feedback on effects of action evaluation of goal
• Reduce potential for slips
• E.g., simplify and indicate modes
• Reduce potential for mistakes
• E.g., make system state visible
• Reduce consequences of error
• E.g., make actions undo-able

23
Give user sense of control.

• Use the users own language - simple, user-
  friendly - e.g cd player vs DNS configuration (
  techspeak)
• Present exactly and obviously the information the
  user needs
• remove or hide irrelevant or rarely needed
  information as it competes with important
  information on screen
• Provide help Online, context-driven help

24
Short term memory/Cognitive load

• Dont make navigation and window management
  excessively complex
• Use meaningful mnemonics, icons, and
  abbreviations ie promote Promote recognition over
  recall
• eg File / Save
• Cf icon with Ctrl/S

25
Short term memory/Cognitive Load

• Describe required input format using example,
  and provide default eg calendar
• Dont require users to remember data from one
  screen for use on another

26
Web Design

• Knowing basic interface design guidelines is just
  the beginning of designing a good interface.
• Web design has three main components
• Information Architecture (site content)
• Navigation Structure (site navigation)
• Graphical Design
• General screen layout, Legibility and readability
  (typefaces), Icons, Colour, Data Display Data
  Entry (eg menus, forms, dialog boxes)
• Must also consider use of specific guidelines
  for
• Other interface components such as
• Use of animations, audio, video
• Degree of automation

27
I1 Content is king

• Ultimately, users visit your website for its
  content. Everything else is just the backdrop.
• Jakob NielsenDesigning Web Usability, p. 99

28
I2 Essential strategies for web writing

• concise
• easy to scan
• objective

"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
29
I3 Be concise

• Every sentence, every phrase, every word has to
  fight for its life
• Crawford KilianWriting for the Web, pp. 58-9

• omit unnecessary sentences in a paragraph
• omit unnecessary words in a sentence
• use a short word over a long one

30
I4 Be concise
Happy talk must die Steve Krug Don't Make Me
Think, p. 46

• get rid of welcome messages and introductory
  text
• dont waste words telling users where they are
  or what they can do
• dont waffle on with explanations of whats on
  the site

31
I5 Example of happy talk
32
I6 Getting rid of happy talk
33
I7 Be concise

• Instructions must die
• Steve Krug
• 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.
34
I8 Improve scanning

• use simple sentence structures

• keep paragraphs short

• one-topic per paragraph1

• opening sentence in a paragraph should be
  the topic sentence

35
I9 Techniques for longer text

• normal style of writing
• introduction
• background material
• details/facts
• conclusions
• needs to be reversed
• Conclusion first, then details, then other
  background info.

36
I10 Online documentation
help doesnt!
Its 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
37
I11 Minimise eye movement
Need to minimise eye movement is even more
important online

• users attention span is short

• harder to read from screen

• users dont read, they scan

38
I12 Eye movement during reading
The way we are taught to read has implications
for how we scan a screen

• left to right

• top to bottom

39
I13 Eye movement and shapes
Position elements to minimise eye movement
SourceYale Style Manual
40
I14 Design above the fold
above the fold newspaper term
Make sure important informationcan be seen in
first screen view
41
I15 Scrolling behaviour
Early studies (19954/5) showed that users would
not scroll
Not true of users now, but

• users will only scroll if they think they are on
  the right page

42
I16 Above the fold (example 1a)
43
I17 Above the fold(example 1b)
44
I18 Page length and scrolling
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!
45
G1 Grids

• Horizontal and vertical lines to locate window
  components
• aligns related components
• Organization
• contrast to bring out dominant elements
• grouping of elements by proximity
• show organizational structure
• alignment
• Consistency
• location
• format
• repetition
• organization

Format of variable contents
Widget to widget spacing
Message text in Arial 14, left adjusted
Standard icon set
Window to widget spacing
No
Ok
Fixed components
46
G2 Grids
Do you really want to delete the file
myfile.doc from the folder junk?
?
No
Ok
47
G3 Another grid

• Two-level Hierarchy
• indentation
• contrast

Logic of organizationalflow
Alignment connects visual elements in a sequence
Grouping by white space
48
G4 Visual Consistency

• internal consistency
• same conventions and rules for all elements of
  the GUI unless strong reason
• set of application-specific grids enforce this
• external consistency
• follow platform and interface style conventions
• use platform and widget-specific grids
• deviate from conventions only when it provides a
  clear benefit to user

49
G5 Relationships between screen elements

• Link related elements, disassociate unrelated
  elements
• proxemic clusters
• white (negative) space
• alignment
• explicit structure

50
G6 Webforms
Bad alignment Poor choice of colors to
distinguish labels from editable fields
51
G7 No regard fororder andorganization
IBM's Aptiva Communication Center
52
G8 Text alignment and readability
Left alignment is most commonly used

• eye scans from left to right

• easier to read

53
G9 Text alignment example (1)
54
G10 Legibility

• Factors that affect legibility

• font size, face
• use of colours
• contrast

55
G11 Font size and face (1)
Study of font faces and sizes by Software
Usability Research LabWichita State University,
2000

• 35 participants
• all 20/20 vision
• read 8 short passages of text

56
G12 Font size and face (2)
tested for

• speed
• accuracy

tested between

• Arial vs Times New Roman
• 10 points vs 12 points
• anti-aliased vs dot matrix fonts

57
G13 What fonts do we use?
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
58
G14 More on text
Text is harder to read when

• ITS ALL IN UPPERCASE

• it is blinking

• it is moving (marquee style)

• it is zooming

59
G15 Colour and contrast
use colours with good contrast
- white on black (positive text) is best
- black on white (negative text) is next best
use plain backgrounds
60
G16 Contrast example (1)
colour contrast insufficient
61
G17 Contrast example (2)

• busy background image
• insufficient colour contrast

62
Navigation

• how can window navigation be reduced?
• avoid long paths
• avoid deep hierarchies

63
Navigation -1
64
Navigation-2
65
Navigation-3
66
What is microcontent?

• page titles
• page headings sub-headings
• text hyperlinks

microcontent very small amount of space to
make your message clear
67
Graphics and multimedia content
disadvantages

• take more time to download

• (some) require special plug-ins

• not accessible to all users
• - non-graphical browsers- dont have/dont
  want/cant install plug-in- sight/hearing
  disabilities

68
Graphics and multimedia content
advantages

• can convey information quickly

• enhance e-commerce

• useful for cognitively impaired

• useful for deaf community