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  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 NOT ENTER Which way would you 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!