3461 design principles and guidelines hints for good design
TRANSCRIPT
3461
Design Principles and Guidelines
Hints for good design
3461
Attributes of Good UIs Invisible
They don’t get in your way Minimal training
Easy to learn Good manual (perhaps online) emphasizing how users can
meet their goals Training transfers easily to practice
Error savvy Predictable: NO SURPRISES! Prevent the user from making errors Easy to recover from errors
Avoid information overload
3461
Attributes of Good UIs (2)
Allow people to perform their tasks well the good UI promotes efficiency!
Flexible Seem “intelligent”
“do the right thing” without asking; remember user patterns
People have to like it! “It is easy to make things hard. It is hard to make things easy.” -- A.
Chapanis, ‘82
3461
Design Guidelines
There are helpful UI design guidelines Design guidelines are:
a set of design rules to follow at multiple levels of design (e.g., early & late) obvious to users of poorly designed interfaces easy to ignore when deadlines approach not complete hopefully built on psychological underpinnings and an
understanding of users
3461
Guidelines for Building Good UIs
Follow graphic design principles Use standard language conventions Minimize load on short-term memory Design for consistency Provide clear feedback Prevent errors & provide error correction Use sensible conceptual models Let’s discuss some of these…
3461
From IBM’s RealCD application
Graphic Design & Color Choice
A good UI will appropriately direct the user’s attention. How? One way: use color and layout
- black button on black background is bad colour choice- shouldn’t need label to tell you this is a button
3461
Graphic Design & Color Choice (2)
Keep related objects together Appropriate alignment & spacing (readability) Decorations can provide extra information.
Use white space (vital in WWW design) Use only a few fonts & colors (5-7 colors max) Remember colour deficiency (5% of males are colour blind)
A Toolbar from MS Word
3461
Bad?
Speak the User’s Language Use common words, not “techno-jargon” Use the vocabulary of the user
Refer to the user’s objects when giving feedback, e.g., “your document…”, “your graph…”
Allow full-length names in forms Avoid spatial-linguistic conversions, which can be extremely
confusing for users pick one or the other; examples…
3461
Spatial - Linguistic Examples
Placing objects on a canvas by specifying (X, Y) coordinates
linguistic, use keyboard to enter X, Y
by relative positions to other items spatial, use cursor/mouse
Selecting a quantity specify a known value
linguistic, use keyboard to enter value
relative (more, less) spatial, use dial
3461
Problem?
Less is More
The KISS Principle: “Keep it simple, stupid!” Use concise language; avoid verbiage Avoid extraneous pictures & information
fewer options and menu choices reduce planning time reduce manual size, etc. avoid information overload!
3461
Minimize User Memory Load
Short-term memory of people. capacity of 7 +/- 2 items, with decay of 30 seconds to 2 minutes
Recognition is easier for us than recollection! Use menus rather than keyed input Prompts should provide formats for required data Don’t require retyping of remembered info Use pervasive, generic rules for common interactions, e.g., cut,
copy, paste
3461
Memory Examples
CAD example poor: delete template 5 better: delete resistor template. best: delete <select resistor icon>
Error recovery message example poor: message telling user what to type in vanishes when typing
starts better: message maintained on display. best: automatic error recovery
3461
Be Consistent Size, color, wording, location, ordering of objects Same command should always have same effect in different
contexts. Following convention helps
e.g., Cut/Copy/Paste
Seems easy but it’s often not followed Useful since it allows user to generalize from their own experience
3461
Inconsistency
CMS - XEDIT Editor in one context, D10 means “down 10 lines” in another context it means “delete 10 lines”
Current selection (CS) in graphics editor create a new object, it becomes CS duplicate an object, the original remains CS
Macintosh dragging file operations? folder on same disk vs. folder on different disk file to trashcan vs. disk to trashcan
3461
Inconsistency - Example
Moving icon to file cabinet, mailbox, or trash causes icon to disappear (Xerox Star)
What to do when dragging a file icon to the printer icon? delete the file icon (and thus the file) the file icon disappears “into” the printer icon, from where it can be
retrieved (printer icon is also a folder?) return icon to original location
3461
Lexical Consistency
Make use of “words” consistent with common (real-world) usage
Examples: red = bad/stop, green = good/go left arrow = less, right arrow = more
Use consistent abbreviation/capitalization rules CONTROL, CTRL, Ctrl, Control which is it?
Use mnemonic names rather than codes Use devices in the same way in all states
e.g., character delete key is always the same
3461
Syntactic Consistency
Error messages at same (logical) location in all situations Give command first -- or last (e.g., after arguments to the
command) Don’t change ordering based on context! The user will have more to remember
Menu items at same location in menu Muscle memory helps the user here
3461
Semantic Consistency
Global commands should always be available: Help Cancel Undo
Operations should always be valid on all reasonable objects if object of class “X” can be deleted, so can object of class “Y” if it can’t be deleted, the user will want to know why.
3461
Providing Feedback
Lexical feedback on ‘words’ that are used, (the definition of a word)
Syntactic feedback on grammar, i.e., the order in which ‘words’ are used
(subject, action and object of a sentence are determined)
Semantic feedback on the meaning of operations (the meaning of a
sentence) It is vital to provide clear, consistent, meaningful feedback
to users based on their inputs More…
3461
Lexical Feedback
Legal input in the input “language” may be keyboard-based, mouse-based, voice-based, etc.
Using the right tokens, gestures, clicks, etc. Feedback given using
Cursor movement (e.g., valid keypresses only generate cursor movement)
Cursor image (example… ) Keyboard echo (e.g., don’t echo illegal words) Selection highlighting, e.g., for cut & paste or changing text style
3461
Syntactic Feedback
Ensure that the sequence of “words” entered is grammatically valid
Feedback provided when the sequence is illegal Examples…
Wrong number of arguments provided Menu item under cursor in reverse video indicates it will execute if you
release mouse button (absence of this means it will not execute)
3461
Semantic Feedback
Command is understood: it may be helpful to restate the command, e.g., by echo or by
highlighting the icon in some way
Command is underway: provide a count-down or progress bar
makes the processing appear faster (placebo)
3461
Semantic Feedback (2)
Command is completed: provide its results prompt for next command
All three forms of semantic feedback are not always necessary select one or more depending on the task of interest
Examples: Progress bars not needed for short computations Incomplete data might not be displayed
3461
Feedback Placement
Put feedback where the eyes are! Examples…
Insertion point for text Where the screen cursor is located.
Audio output can also provide useful feedback. sounds on error, failure, success voice, for more detailed responses environmental conditions may not permit audio feedback
3461
Error Prevention Preventing errors should take priority over correcting for
them. Why? Avoids “fear of failure” on the part of the user Allows the user to work faster
Things to consider Key placement (e.g., Apple Reset key vs Microsoft Windows
key) “distance” between commands
menu items or typed names
Suppress unavailable commands where appropriate Confirm dangerous actions, e.g., delete files
3461
Error Correction
Lexical typing mistakes (automatic in MS Word)
Syntactic re-specify just the parameter in error, or restart at beginning of command (may be necessary if dependent
words are used)
Semantic cancel the operation underway undo previous command(s)
3461
Mismatch Between Designer & User Conceptual Models
Result in errors on the part of the user Slow the user down Result in a great deal of frustration on the part of the user Coming up with good design models that mesh well with
commonly held conceptual models is very difficult Have to know a lot about the users requirements and typical
characteristics
3461
Conceptual Models
DO NOTENTER
Whichway wouldyou drive?
3461
Why are Design Guidelines Insufficient?
Too specific and/or too general there may be a huge number of guidelines that are not specifically
focused enough to provide useful help
A standard design might not address all the issues Macintosh standard UI could be all dialog boxes and menus. Who
is to say that this will be sufficient for the users?
3461
Usability Slogans
Beware of Slogans Always catchy, rarely useful! Examples…
Your best guess is not good enough! The user is always right! The user is not always right! Users are not designers! Designers are not users! Less is more! Details matter!
3461
Summary
UIs are hard to design - obviously! Slogans do not really help Guidelines can give us general principles to follow Guidelines fail in that they can be hard to apply
too specific or too general especially true for style guides
3461
Thank you!