Design Guidelines Marti Hearst UCB SIMS SIMS 213
Design Guidelines Marti Hearst (UCB SIMS) SIMS 213, UI Design & Development February 16, 1999
Working as a Team l l Figure out strengths of team members Assign each person a role – responsible for seeing work is organized & done – not responsible for doing it themselves l l Names/roles should be listed on the next assignment Roles – group manager (coordinate - big picture) – documentation (writing) – design (interaction & visual) – testing/evaluation
Assignment 3 l l l Get to know the group Revised problem statement Task Analysis – target tasks – interviews – sample scenarios l Suggested Solution – functionality (i. e. , what can you do with it) – user interface (i. e. , how you use it - rough sketches) l l l Experiment to test Up to 5 pages plus sketches Due February 25
Outline l Review l Attributes of good UIs l Guidelines for good user interfaces l Problems with slogans & guidelines Adapted from slide by James Landay
Review l Mental models – mental representation of how the object works & how interface controls effect it l Design Model should equal User Model – mismatches lead to errors l Design guidelines – make things visible – map interface controls to user’s model – provide feedback Adapted from slide by James Landay
Attributes of Good UIs ? l Minimal training required – easy to learn l High transfer of training – easy to remember l Predictable l Few errors l Easy to recover from errors l “Invisible” Adapted from slide by James Landay
Attributes of Good UIs (cont. ) l Allow people perform real tasks well – efficient l Flexible l Seem “intelligent” – “do the right thing” l People like it “It is easy to make things hard. It is hard to make things easy. ” -- A. Chapanis, ‘ 82 Adapted from slide by James Landay
Usability Slogans (from Nielsen’s Usability Engineering) l Your best guess is not good enough l The user is always right l The user is not always right l Users are not designers l Designers are not users l Less is more l Details matter Adapted from slide by James Landay
Design Guidelines l Set of design rules to follow l Apply at multiple levels of design l Are neither complete nor orthogonal l Have psychological underpinnings (ideally) Adapted from slide by James Landay
Guidelines for Good UIs l Follow graphic design principles l Use language conventions l Minimize use of short-term memory l Design for consistency l Provide feedback l Prevent errors & provide error correction l Use sensible conceptual models Adapted from slide by James Landay
Good Graphic Design & Color Choice l Appropriately direct attention. How? – use color and layout From IBM’s Real. CD application + black on black is a bad color choice + shouldn’t need label to tell you this is a button Adapted from slide by James Landay
Good Graphic Design & Color Choice (cont. ) l Group related objects – alignment & spacing – decorations A Toolbar from MS Word 4 Balance & white space 4 Few fonts & colors (5 to 7 colors max. ) 4 Remember color deficiency (8% of males) Adapted from slide by James Landay
Speak the User’s Language 4 Use common words, not “techno-jargon” * bad example: Visual Forms Bad? l Refer to user objects in feedback l Allow full-length names – bad example: IE print dialog for header/footer l Avoid spatial-linguistic conversions – two different parts of brain Adapted from slide by James Landay
Less is More l “Keep it simple” l Concise language Prob lem? l Avoid extraneous pictures & information – fewer options and menu choices – reduces planning time (mental) – reduces manual size, etc. Adapted from slide by James Landay
Minimize User Memory Load ? l Short-term memory. Capacity & decay? – capacity of 7+-2; decay of 30 sec. to 2 min. l Recognize, not recall (generate) l Menus rather than type-in l Prompts provide formats l Don’t require retyping remembered info. l Pervasive, generic rules – cut/copy/paste Adapted from slide by James Landay
Next Lectures l Design Guidelines (continued) l Lo-fi prototyping (Landay) Adapted from slide by James Landay
- Slides: 16