1 / 58

Design Principles and Guidelines

Design Principles and Guidelines. Hints for good design. 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

kdoris
Télécharger la présentation

Design Principles and Guidelines

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  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

More Related