interface design guidelines & web design. general design principles design principles apply to...
Post on 21-Dec-2015
234 views
TRANSCRIPT
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.
General HCI Design Concepts
• Visible affordances
• Visible constraints
• Mapping
• Causality
• Transfer effects
• Population stereotypes/idioms
• Individual differences
Affordance
• How do the following objects provide affordance?
Visible Constraints
• Limitations of the actions possible perceived from object’s appearanceEg 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.
Mapping
•Why is this a poor mapping of video control buttons?
• Is this better?
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
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
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)
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?
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.
General Interface Design guidelines.
1. Consistency and predictability2. Provide shortcuts 3. Provide helpful feedback4. Completions and exits clearly indicated5. Prevent errors 6. Allow action reversal 7. Give user a sense of control8. Minimize memory/cognitive load
(Shneiderman, 1998)
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 CONNECT MODEM
Ok Cancel OkCancel Done Never Mind Accept Dismiss
Cancel
Ok
Be Consistent
These are labels with a raised appearance.
Is it any surprise that people try and click on them?
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
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?
5: Provide feedback
• Continuously inform the user about – what it is doing– how it is interpreting the user’s input– user should always be aware of what is going on
•
•
> Doit
What’s it doing? > Doit
This will take5 minutes...
Time for coffee.
Feedback
• Should be as specific as possible, based on user’s input
• Get users attention (is the feedback noticed?) but don’t drive them crazy! (eg harsh tones, large intrusive pop-ups, constantly blinking text)
How do I get
out of this?
6. Provide clearly marked exits
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)
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
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
Give user sense of control.
• Use the user’s 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
Short term memory/Cognitive load
• Don’t 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
Short term memory/Cognitive Load
• Describe required input format using example, and provide default eg calendar
• Don’t require users to remember data from one screen for use on another
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
I1 Content is king• Ultimately, users visit your
website for its content. Everything else is just the backdrop.
• Jakob NielsenDesigning Web Usability, p. 99
I2 Essential strategies for web writing
1. concise2. easy to scan3. 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
I3 Be concise• “Every sentence, every phrase, every word has
to fight for its life”• Crawford Kilian
Writing 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
I4 Be concise
“Happy talk must die”Steve Krug
Don't Make Me Think, p. 46
• get rid of welcome messages and introductory text
• don’t waste words telling users where they are or what they can do
• don’t waffle on with explanations of what’s on the site
I5 Example of ‘happy talk’
I6 Getting rid of ‘happy talk’
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”.
I8 Improve scanning
• use simple sentence structures
• keep paragraphs short
• one-topic per paragraph1
• opening sentence in a paragraph should be the topic sentence
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.
I10 Online documentation
“help doesn’t!”
“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
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’ don’t read, they scan
I12 Eye movement during reading
• left to right
• top to bottom
The way we are taught to read has implications for how we scan a screen:
I13 Eye movement and shapes
Position elements to minimise eye movement
Source:Yale Style Manual
I14 Design ‘above the fold’
‘above the fold’ = newspaper term
Make sure important informationcan be seen in first screen view
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
I16 ‘Above the fold’ (example 1a)
I17 ‘Above the fold’(example 1b)
I18 Page length and scrollingas 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!
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
Window to widget
spacing
Widget to widget
spacing
No Ok
Message text in Arial 14, left adjusted
Standard icon set
Fixed components
Format of variable contents
G2 Grids
No Ok
Message text in Arial 14, left adjusted
Standard icon set
No Ok
Do you really want to delete the file “myfile.doc” from the folder “junk”?
?
Ok
Cannot move the file “myfile.doc” to the folder “junk” because the disc is full.
!
Apply
Cancel
The file was destroyed
G3 Another gridTwo-level Hierarchy•indentation•contrast
Grouping by white space
Alignment connects visual elements in a sequence
Logic of organizationalflow
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
Warning
mmmm mmmmmm
Okay
!
Help
mmmm mmmmmm mmm
Okay
?
Tip of the day: Monday, Mar 12
mmmm mmmmmm
Dismiss
G5 Relationships between screen elements– Link related elements, disassociate unrelated elements
• proxemic clusters
• white (negative) space
• alignment
• explicit structure
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Mmmm:
Bad alignment Poor choice of colors to distinguish labels from editable fields
G6 Webforms
IBM's Aptiva Communication Center
G7 No regard fororder andorganization
G8 Text alignment and readability
Left alignment is most commonly used:
• eye scans from left to right
• easier to read
G9 Text alignment example (1)
G10 Legibility
• Factors that affect legibility
• font size, face
• use of colours
• contrast
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
G12 Font size and face (2)
• speed
• accuracy
• Arial vs Times New Roman
• 10 points vs 12 points
• anti-aliased vs dot matrix fonts
tested for
tested between
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
G14 More on textText is harder to read when
• IT’S ALL IN UPPERCASE
• it is blinking
• it is moving (marquee style)
• it is zooming
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
G16 Contrast – example (1)
colour contrast insufficient
G17 Contrast – example (2)• busy background image
• insufficient colour contrast
Navigation
– how can window navigation be reduced?• avoid long paths
• avoid deep hierarchies
Navigation -1
Navigation-2
Navigation-3
What is microcontent?
• page titles
• page headings & sub-headings
• text hyperlinks
‘microcontent’ – very small amount of space to make your message clear
Graphics and multimedia content
disadvantages
• take more time to download
• (some) require special plug-ins
• not accessible to all users
- non-graphical browsers- don’t have/don’t want/can’t install plug-in- sight/hearing disabilities
Graphics and multimedia content
advantages
• can convey information quickly
• enhance e-commerce
• useful for cognitively impaired
• useful for deaf community