Design Principles and Guidelines

1. Design Principles and Guidelines Hints for good design

2. Attributes of Good UIs • Invisible • They don’t get in your way • User focuses on task, not on the tool • 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

3. Attributes of Good UIs (2) • Allow people to perform their tasks well • a good UI promotes efficiency! • Flexible • Seems “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

4. 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

5. 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…

6. From IBM’s RealCD application Graphic Design & Colour Choice • A good UI will appropriately direct the user’s attention. How? • One way: use colour and layout - black button on black background is bad colour choice - shouldn’t need label to tell you this is a button

7. Use white space (vital in WWW design) Use only a few fonts & colours (5-7 colours max) Remember colour deficiency (5% of males are colour blind) A Toolbar from MS Word Graphic Design & Colour Choice (2) • Keep related objects together • Appropriate alignment & spacing (readability) • Decorations can provide extra information

8. 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…

9. 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

10. 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!

11. 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

12. Be Consistent • Size, colour, 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

13. 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

14. 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

15. 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

16. 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

17. Providing Feedback • Lexical • feedback on ‘words’ that are used • Syntactic • feedback on grammar, i.e., the order in which ‘words’ are used • Semantic • feedback on the meaning of operations • It is vital to provide clear, consistent, meaningful feedback to users based on their inputs • More…

18. 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 • Keyboard echo (e.g., don’t echo illegal words) • Selection highlighting, e.g., for cut & paste or changing text style

19. 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)

20. 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)

21. 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

22. 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

23. 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 • “distance” between commands • menu items or typed names • Suppress unavailable commands where appropriate • Confirm dangerous actions, e.g., delete files

24. 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)

25. Click for“Full Story” Samespacing Which one? Layout is Important • From the Winter Olympics web site…

26. 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

27. 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?

28. Summary • UIs are hard to design! • Guidelines can give us general principles to follow • Guidelines can be hard to apply (too specific or too general)

29. Course Summary

30. Program Categories • Sequential • Event-driven • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

31. Types of Events • User-initiated events • System-initiated events • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

32. Java Events • Event class hierarchy • Event sources • E.g., mouse events, key events • Listening for events • Using Listeners vs. Adapters

33. Swing Basics • AWT vs. Swing • Creating a window using JFrame • JFrame’s content pane

34. Wimp Elements • Windows • Icons • Pointers • Menus • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

35. Containment Hierarchy • Top-level containers • E.g., JFrame • Intermediate containers • E.g., JPanel • Atomic components • E.g. JButton

36. Menus • Recognize vs. recall • Parts • E.g., menu bar • Types • E.g., popup, cascading • Features • e.g., separators • Designing

37. Widgets • Buttons • Combo boxes • Tool bars • Text components • Sliders • Scrollbars • etc. • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

38. Buttons • Push • Radio • Checkbox • Modal • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

39. Text Components • Output (aka non-editable) • Labels • Labeled borders • Tool tips • Message Boxes • Input/output (aka editable) • Text fields • Text areas • Editable combo boxes • Dialog boxes • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

40. Validating Input • Keystroke-level • Focus-level • Data-model level • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

41. Navigation Techniques • Clicking with mouse pointer • Generates mouse/focus events • TAB key • Generates focus event • ENTER key • Generates key/action events • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

42. Widget/Component Layout • The task: determine size and position of each component • Component size properties critical • These are… • Preferred size • Minimum size • Maximum size • Used in different ways (sometimes ignored!) by layout managers

43. Widget Layout Models • Absolute (aka fixed) • Control for component size and position • Struts and springs • Control for component position • Variable intrinsic size • Control for component size • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

44. Java’s Layout Managers • BorderLayout • FlowLayout • GridLayout • BoxLayout • GridBagLayout • CardLayout • OverlayLayout • etc. • Know.. • What they are • Advantages • Disadvantages • Features • Comparisons • Etc.

45. Output Model • Coordinate systems • Device • Physical • Things to know about: • Pixels, raster, display size, resolution, video RAM requirements, aspect ratio, dot pitch • Color models • RGB, HSB

46. Java’s Graphics Features • Drawing primitives for… • Shapes, lines, curves, images, text • Text characteristics • Font family, size, style • Font metrics • Images • File formats

47. Images • Images • File formats • gif, jpg, tiff, bmp • Drawing images in panels

48. MVC Architecture • Model • Holds & manages data • View • Implements visual display of data/component • Controller • Maps input into commands

49. MVC and Java/Swing • Know how MVC is implemented in Swing component • View & controller combined into UI delegate

50. Design for Humans • SR Compatibility • S = Stimulus, the input device that is being manipulated or stimulated • R = Response, the visual, aural, or kinesthetic sense that is affected by the stimulus • Compatibility refers to the correctness of the match between the stimulus and the response