1 / 50

Design of Everyday Things + Human Cognition

Loren Terveen CS 5115, Fall 2010 September 20. Design of Everyday Things + Human Cognition. Design of Everyday Things. Seven Stages of Action. Goals. Evaluation of the interpretations. Intention to act. Interpreting the perception. Sequence of actions. Execution of the

grant
Download Presentation

Design of Everyday Things + Human Cognition

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. Loren Terveen CS 5115, Fall 2010 September 20 Design of Everyday Things + Human Cognition

  2. Design of Everyday Things

  3. Seven Stages of Action Goals Evaluation of the interpretations Intention to act Interpreting the perception Sequence of actions Execution of the action sequence Perceiving the state of the world The World

  4. But things can go wrong at any of these stages

  5. Gulfs of Execution & Evaluation Goals Evaluation of the interpretations Intention to act GULF OF EXECUTION Interpreting the perception GULF OF EVALUATION Sequence of actions Execution of the action sequence Perceiving the state of the world The World

  6. The Gulf of Execution • Does the system provide actions that correspond to the user’s intentions? • The difference between intentions and allowable actions is the Gulf of Execution

  7. The Gulf of Evaluation • Does the system provide a physical representation that can be readily perceived and interpreted in terms of the user’s intentions and expectations? • The Gulf of Evaluation reflects the amount of effort that the person must exert to interpret the physical state of the system and determine how well the intentions have been met.

  8. The Seven Stages as Design Aids Ask yourself how easily can the user: Determine the function of the system? Tell if the system is in the desired state? Tell what actions are possible? Determine a mapping from system state to interpretation Determine a mapping from intention to physical action? Perform the action? Tell what state the system is in?

  9. Determine the function of the system? “The Big Picture” http://www.peachpit.com/articles/article.aspx?p=1216150

  10. … principles for good design • Conceptual models • Visibility and affordances • Mappings • Feedback  Causality • Constraints • Knowledge in the world • Standardization • Designing for error

  11. Conceptual Model

  12. Design Model User Model System Image Designer and user models Goal: user model and design model should be identical Communication from designer to user is via the system image Designer So system image must lead user to acquire a user model equal to the design model User System

  13. Illustrating the design principles • Visibility and affordances • Mappings • Feedback  Causality • Constraints • Knowledge in the world • Standardization • Designing for error

  14. How do I pump the gas?

  15. “Push To Start”

  16. Affordances in GUIs? • Does a button icon afford clicking? • Maybe… but what does the click mean? • Meaning is arbitrary, and is assigned by designers • Norman: “‘I put an affordance there… I wonder if the object affords clicking…’ affordances this, affordances that. And no data, just opinion. Yikes! What had I unleashed upon the world?” • Bottom line – affordances aren’t as useful in GUIs as in physical design

  17. Mappings Examples • Stove: which dial controls which burner? • Light / Ceiling Fan • Cup lids

  18. Why don’t all stoves use this design?

  19. Which lid is the right size?

  20. Which lid is the right size?

  21. Which string turns on the fan, which turns on the light?

  22. Oops, I opened my trunk Controls to open trunk and access gas tank are right next to each other

  23. What’s that thing in the corner?

  24. It’s a mop sink!

  25. Design Principle • Affordances • Conceptual Model • Standardization

  26. Hall of Fame/Shame Examples

  27. Hall of Fame: Office 2007 Ribbon Jesse Hensold Andrew Seelke

  28. MinimizesGulf of Execution Large Icons High visibility Icons utilize knowledge in the world andto minimize memory necessary User can tell the state as the buttons highlight orange when selected. Descriptive Icons Icons provide natural mappings for functions by showing what they do: B for bold, I for Italics, abc for strikeout, etc.

  29. Minimizes Gulf of Execution Tabs By using constraints to show functions relevant to intent, we maximize visibility while minimizing Gulf of Execution. Allowed Microsoft to increase features without overwhelming the user. Tabs are automatically selected based on what you are doing, providing good accessibility of the controls.

  30. Minimizes Gulf of Evaluation Live Preview Provides good feedback: While you hover on a function, it will change the selection on the fly to preview the outcome. Undo Uses the standard Ctrl+Z as well as an undo arrow to help you understand what just happened.

  31. Utilizes Many Good Design Patterns Action Panel/Smart Menu Multi-Level Undo Clear Entry Point Composite Selection Illustrated Choices Global Navigation Extras On Demand Deep Background Center Stage

  32. Hall of Fame • I think these improvements put the Office 2007 Ribbon in the Hall of Fame!

  33. Hall of Shame: Office 2007 Ribbon Jesse Hensold Andrew Seelke

  34. The Ribbon does many things well, BUT… • Visibility: Crucial features hidden under the “Office Orb”, which is unlabeled, and is inconsistent with all other elements • Gulf of Execution: An incredible amount of things to choose from. The ribbon tries to make more visible at once, but that can become overwhelming. • Further, some features are hidden under “Contextual tabs” • Commonly used features (formatting) obscured when other tabs selected. • Result: Hunting for unfamiliar features (and even some familiar ones) produces frustration.

  35. Violation of established Standards! • MS-Windows programs since earliest versions of Windows have had set of menus • Typically some commonality between programs: File menu, edit, help, etc.. • Subsequent versions kept order of menu options largely the same – minimal adjustments.

  36. Violation of Standards • Previously established conventions for Windows programs allowed new users to have a rough idea of where to look for things – not so with the Ribbon • Keeping menus and layout largely the same between versions (1.0 – 2003) allowed users familiar with one version to transition to the next with little difficulty – again, not so with the Ribbon. • No option to revert to previous, familiar UI Bottom Line: Perhaps this UI is an improvement over the previous version, but even if it is, the radical overhaul violates established conventions so severely that it belongs in the Hall of Shame!

  37. Hall of Fame or Hall of Shame? Has a ‘Love it’ or ‘Loathe it’ reaction. One of us loved it, one of us hated it.

  38. Hall of Fame/Shame • Mikhil Masli and Chintan Patel, Fall 2008

  39. Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Conventional Glass Pipettes Way to use them

  40. Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Affordances: Throwing, breaking, pouring? Constraints: Can suck from both sides? Liquid could still enter the mouth. Feedback: No feedback other than sight. Visibility: Mark not clearly visible as you draw the liquid in. Consistency: All pipettes of this kind are quite consistent. Mapping: Which is the end to dip into the liquid and which is the other one? Gulf of execution: BIG At first sight, you don’t know that you have to suck at one end! Gulf of evaluation: BIG Poor visibility causes very little feedback and low accuracy.

  41. Pipette – Not GoodChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Conventional Glass Pipettes Way to use them HALL OF SHAME

  42. Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Modern Mechanical Pipettes Way to use them

  43. Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Affordances: Dipping and clicking. Constraints: Dip at only one end. Click at only certain places. Feedback: A definitive click and sight of liquid in the tube. Visibility: Large push buttons, clear indicators of quantity. Consistency: Use is like a pen; so controls are like those of a pen. All pipettes of this kind are quite consistent. Mapping: Spout: Dip; Larger button: Draw liquid; Smaller button: Quantity. Gulf of execution: SMALL You know you have to dip and click. Gulf of evaluation: SMALL Strong feedback – both visually and by sound.

  44. Pipette – Much BetterChintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏ Modern Mechanical Pipettes HALL OF FAME Way to use them

  45. Pipette – Overboard!Chintan Patel (pate0569@umn.edu) and Mikhil Masli (masli@cs.umn.edu)‏

More Related