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
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

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

4. 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

5. 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

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

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

8. 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

9. 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

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

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 Tech

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

17. 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

18. Door Opening Signifiers1 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

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

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

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

22. 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

23. 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

24. 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

25. 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

26. 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

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

28. State Visibility – Where am I, How did I Get Here?
Bread crumbs on web site
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
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
UI Design - Georgia Tech

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

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

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

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

35. 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

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

37. 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

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

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

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

41. 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

42. 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