Presentation is loading. Please wait.

Presentation is loading. Please wait.

Design of Everyday Things Chapter One Don Norman on Design & HCI This material has been developed by Georgia Tech HCI faculty, and continues to evolve.

Similar presentations


Presentation on theme: "Design of Everyday Things Chapter One Don Norman on Design & HCI This material has been developed by Georgia Tech HCI faculty, and continues to evolve."— Presentation transcript:

1 Design of Everyday Things Chapter One Don Norman on Design & HCI This material has been developed by Georgia Tech HCI faculty, and continues to evolve. Contributors include Gregory Abowd, Jim Foley, Diane Gromala, Elizabeth Mynatt, Jeff Pierce, Colin Potts, Chris Shaw, John Stasko, and Bruce Walker. Comments directed to are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb

2 UI Design - Georgia Tech 2 Don Norman Professor at Northwestern and Principal of Nielsen Norman group Previously Professor at UCSD, senior positions at Apple & HP ACM/CHI Lifetime Achievement Award Prolific author

3 UI Design - Georgia Tech 3 Discussion What did you take away from DOET book? Write down three key take-away messages

4 UI Design - Georgia Tech 4 Here are some Affordances are important Minimize the gulf of interpretation and gulf of execution Use natural mappings Make state visible Use a conceptual model that makes sense Provide feedback

5 UI Design - Georgia Tech 5 Mantra Complex things may need explanation, but simple things should not  If a simple thing requires instructions, it is likely a failed design. Theme of Norman’s book Living with Complexity

6 UI Design - Georgia Tech 6 Chapter 1 Conceptual model Affordances & Signifiers Make things visible Mapping Feedback

7 UI Design - Georgia Tech 7 Conceptual Model What does Norman mean by that?

8 UI Design - Georgia Tech 8 Conceptual Models People build their own models of how things work  Thermostat at home –Turn up real high to get warmer faster?  What is conceptual difference between an iPhone or Android Phone and Mac OS or Windows? Designer can help user foster an appropriate conceptual model  Appearance, instructions, behavior...

9 User’s Conceptual Model UI Design - Georgia Tech9 Basis for user to understand what presentations mean and how to interact with system to achieve desired results

10 UI Design - Georgia Tech 10 Which Has a Clearer Conceptual Model? Which Faster to Set Time?

11 User’s Conceptual Model Basis for user to understand what presentations mean and how to interact with system to achieve desired results Consider Norman’s refrigerator example  Refrigerator temperature dial  Freezer temperature dial  Model 1: dials operate independently  Model 2: one dial controls temp, the other distribution of coolant between freezer & fridge  Which one more logical??? UI Design - Georgia Tech11

12 What’s The Problem Here?

13 What’s Wrong with this Scenario? Microsoft buys Nokia Windows will not (yet) run on Nokia phones Nokia (now Microsoft) introduces low-cost Android phone to capture market share Hope buyers will later move up to Nokia phones running Windows instead of Android

14 Metaphor as Basis for Conceptual Model Desk-top, with file folders, trash can Do Mac OS X and iOS have different conceptual models?  Yes/no?  If yes, how differ? UI Design - Georgia Tech14

15 UI Design - Georgia Tech 15 Affordances and Signifiers Affordances are actions that can be performed with something  A door can be opened  A touch screen can be swiped Signifiers “signify that an action can be performed / how to perform  A “crash bar” on a door signifies that pushing on it will open the door  What signifies that a touch screen can be swiped?

16 UI Design - Georgia Tech 16 Signifiers are often the means to carry out Affordances Button is for pushing Door handle is for …. Scroll arrow is for … Icon is for …

17 But not Always Arrow is signifier; door knob affords turning  We know only by convention that knobs can be turned UI Design - Georgia Tech17

18 UI Design - Georgia Tech 18 Door Opening Signifiers Which doors are easy to know how to open? Which doors are hard to now how to open? Why?

19 UI Design - Georgia Tech 19 Lack of Signifiers - Example What in the world is this glass for?

20 UI Design - Georgia Tech 20 Now with a Signifier!! This signifier sure makes it obvious! Older version of DOET calls this an affordance 

21 Signifiers and Affordances Mac OS Desktop iPhone / iPad UI Design - Georgia Tech21

22 UI Design - Georgia Tech 22 Make Things Visible State of system Action alternatives When functionality is hidden, problems in use occur  Occurs when number of functions is greater than number of controls When capabilities are visible, it does not require memory of how to use  Visibility reminds person how to use something

23 UI Design - Georgia Tech 23 Simple Example Bathroom faucets  Two functions –Hot/cold –Flow  Think about these both for action visibility (signifiers) and state visibility

24 UI Design - Georgia Tech 24 Bathroom Faucets 1 Is it clear how to perform each of the two functions (hot/cold, volume)? Are they independent? Do the two knobs indicate state of each function?

25 UI Design - Georgia Tech 25 Bathroom Faucets 2 Is it clear how to perform each of the two functions (hot/cold, volume)? Are they independent? Does the lever indicate state of each function?

26 UI Design - Georgia Tech 26 Bathroom Faucets 3 Is it clear how to perform each of the two functions (hot/cold, volume)? Are they independent? Does the lever indicate state of each function?

27 UI Design - Georgia Tech 27 How Make UI State Visible? ???

28 UI Design - Georgia Tech 28 State Visibility – Where am I, How did I Get Here? Bread crumbs on web site

29 UI Design - Georgia Tech 29 State Visibility – Acrobat Reader Acrobat Reader with ToC to give context Forest is the bookmarks, tree is the single page

30 UI Design - Georgia Tech 30 State Visibility - Scroll Bar Scroll bar size indicates % in view - but does not indicate absolute sizes. Can add other info, such as  Page 5 of 12

31 UI Design - Georgia Tech 31 State Visibility - Forest + Trees Work Area List 2 Item 1 Item 2 Item 3

32 How Make Action Alternatives Visible? ????? UI Design - Georgia Tech32

33 How Make Action Alternatives Visible? UI Design - Georgia Tech33

34 UI Design - Georgia Tech 34 Mapping What does this mean?

35 UI Design - Georgia Tech 35 Mapping – Meaning 1 Relationship between placement of controls and the things they control  Good: –Car, various driving controls –Mercedes Benz seat adjustment example  Bad –Car stereo - Knob for front/back speakers

36 UI Design - Georgia Tech 36 Mapping Example: Stove Which controls which? What does this have to to with UI design??

37 Mapping – Meaning 2 Relationship between action and result  Move mouse to right – which way should cursor move?  Twist knob clockwise – increase or decrease whatever is being controlled? UI Design - Georgia Tech37

38 UI Design - Georgia Tech 38 Mapping – Meaning 3 Relationship between meaning and appearance For Euro, size=>value

39 Multiple Mappings UI Design - Georgia Tech39 Two Conflicting MappingsTwo Reinforcing Mappings

40 Natural Mappings? Visibility? BUT: channel up/down vs. program guide up/down  40 UI Design - Georgia Tech

41 41 Feedback Let someone know what just occurred  Sound that’s made  Visible change on screen EVERY user action should create some feedback  Mouse moves -> cursor moves  Mouse over object -> object changes  Button down over object -> object changes in different way  Etc Etc Etc Your favorite examples of good and bad feedback?

42 Some Forms of Feedback Progress bar Steps in making airline reservation Cursor shape Requested action complete  Amazon order complete  Trash can empty ??? UI Design - Georgia Tech42


Download ppt "Design of Everyday Things Chapter One Don Norman on Design & HCI This material has been developed by Georgia Tech HCI faculty, and continues to evolve."

Similar presentations


Ads by Google