1 / 32

Designing for Humans

Designing for Humans. Outline. Four characteristics of a good user interface: Consistency Use of hierarchy and grouping Explicitly shows states and state changes Avoids overload. Consistency. Interface components and layout should be consistent within and across applications

griffin-mayer
Download Presentation

Designing for Humans

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. Designing for Humans

  2. Outline • Four characteristics of a good user interface: • Consistency • Use of hierarchy and grouping • Explicitly shows states and state changes • Avoids overload

  3. Consistency • Interface components and layout should be consistent within and across applications • Consistency refers to… • Presence and absence of features • Physical location of features • Appearance of features (widgets, text, icons) • Method of accessing features

  4. Power Point: Can’t customize keyboard Presence and Absence of Features Word: Customize keyboard

  5. StatView Not available Presence and Absence of Features (2) Word Recently used file list

  6. Physical Location of Features Power Point: Last entryin list Word: First entryin list

  7. Appearance of Features Windows: Windows is searchingfor a file Windows is searchingfor a file

  8. Appearance of Features (2) • Consistent (i.e., same) size within a group is aesthetically pleasing

  9. Method of Accessing Features Word: From INSERT menu: Two ways to insert page numbers! Are they the same? From VIEW menu:

  10. Method of Accessing Features (2) Application on the desktop:launch by double click Application on the toolbar:launch by single click

  11. Outline • Four characteristics of a good user interface: • Consistency • Use of hierarchy and grouping • Explicitly shows states and state changes • Avoids overload

  12. Hierarchy and Grouping • Make relationships obvious • Provide “headings” to categorize groups of related items • Use • Horizontal separators • Borders • Labeled borders • Alignment

  13. ICQ: Hierarchy isambiguous

  14. Yamaha OPL Sound Driver: Good sense ofhierarchy and groupings via labelled borders

  15. Outline • Four characteristics of a good user interface: • Consistency • Use of hierarchy and grouping • Explicitly shows states and state changes • Avoids overload

  16. States and State Changes • The user must • Know the state of the system at all times • Be informed of state changes

  17. If would be nice if Caps Lock were indicated! Caps Lock Caps Lock State What if Caps Lock is on?

  18. Eudora: StateChanges Click here

  19. Eudora: Notes: 1. Compromise: Bad: position changes Good: all entries appear 2. Animation helps Click here

  20. State Uncertainty • Cable modem… CABLE PC TD POWER TEST RD Receive Data (from where?)

  21. What is “Receive Data”? Network Server Cable Modem Receive data My PC

  22. Outline • Four characteristics of a good user interface: • Consistency • Use of hierarchy and grouping • Explicitly shows states and state changes • Avoids overload

  23. Overload • From Miller’s famous essay… • Refers to the number of items a human can reasonably process at once The magical number seven plus or minus two! Reference: Miller, G. A. (1956, March). The magical number seven plus or minus two: Some limits on our capacity for processing information. The Psychological Review, 63(2), 81-97.

  24. Eudora: Too much to digest without groupings

  25. Colour Overload! ICQ: The following people are "offline" Painted in red to indicate "offline" (but we already know that!)

  26. Colour Overload! (2) ICQ: Why is this blue? Why is this purple? Why is this yellow?

  27. Colour Overload! (3) Eudora: Good use ofcolour

  28. Color Design Guideline • Color is good for distinguishing things, but not necessarily for coding things.(People have trouble remembering the association of colors to meanings.) • Design your interface in black and white. Add color for emphasis when your design is complete. • Always honor the system color settings. • Keep in mind that 5% of males have some degree of color blindness.

  29. Coffee Maker on/off Switch On or off? On or off? Discussion: On the left, the switch appears similar to a North American wall switch in the up, or on, position, whereas the reverse observation applies for the picture on the right. However, the label 0 appears above the label 1. So, some confusion exists. The top part of the switch is immediately beside the label 0; so, perhaps pushing the top part of the switch is associated with the label 0. Also, the use of the colour red may be misleading. Does red mean on or off? When colour is used, sometimes red/green pairs exist, typically with green implying on and red implying off.

  30. Are the changes saved? No Confirmation WS-Ftp: Click here to “save Windows location” (for next ftp login) Then what?

  31. Where? What Do I Do Now?

  32. Thank you

More Related