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 foley@cc.gatech.edu are encouraged. Permission is granted to use with acknowledgement for non-profit purposes. Last revision: Feb. 2014.

UI Design - Georgia Tech 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 UI Design - Georgia Tech

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

UI Design - Georgia Tech 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 UI Design - Georgia Tech

UI Design - Georgia Tech 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 UI Design - Georgia Tech

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

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

UI Design - Georgia Tech 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... UI Design - Georgia Tech

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

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

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 Tech

What’s The Problem Here?

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

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 Tech

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? UI Design - Georgia Tech

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

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

Door Opening Signifiers 1 2 3 4 5 Which doors are easy to know how to open? Which doors are hard to now how to open? Why? 6 7 UI Design - Georgia Tech

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

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

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

UI Design - Georgia Tech 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 UI Design - Georgia Tech

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

UI Design - Georgia Tech 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? UI Design - Georgia Tech

UI Design - Georgia Tech 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? UI Design - Georgia Tech

UI Design - Georgia Tech 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? UI Design - Georgia Tech

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

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

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

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 UI Design - Georgia Tech

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

How Make Action Alternatives Visible? ????? UI Design - Georgia Tech

How Make Action Alternatives Visible? UI Design - Georgia Tech

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

UI Design - Georgia Tech 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 UI Design - Georgia Tech

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

UI Design - Georgia Tech 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 Tech

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

Multiple Mappings Two Conflicting Mappings Two Reinforcing Mappings UI Design - Georgia Tech

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

UI Design - Georgia Tech 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? UI Design - Georgia Tech

UI Design - Georgia Tech 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 Tech