Introduce "The Design of Everyday Things" to team

1. Design of Everyday Things
Fundamental Principles of Interaction
Isaac

2. Learn how to code

3. The book and author

4. Chapters
● There are many other content
● Only one paragraph taught me A LOT!

5. Agenda
- Warm up
- Norman Doors
- Discoverability and Understanding
- Fundamental Principles of Interaction
- Affordances
- Signifier
- Mapping
- Feedback
- Conceptual Models
- What I learned as a developer

6. Warm up
● Norman Doors
● Discoverability and Understanding
How to drink a cup
of coffee….??

7. Norman Doors
● Doors should be simple
● Norman Doors confuse people
● It seems you can pull
● But it want you push
● Sometimes is designed for
beautiful, but become invisible
and unusable

8. Norman Doors
● Sometimes is designed for beautiful, but become
invisible and unusable

9. Discoverability and Understanding
● It’s the most important characteristics of good design
● Discover-ability
○ Figure out what actions are possible
○ Where and how to perform them
● Understanding
○ What does it all mean?
○ How is the product supposed to be used?
○ What do all the different controllers and settings mean?

10. Discoverability and Understanding
Discoverability: can push only
Understanding: just push to open the door
Discoverability: Won’t notice there is a door
Understanding: Can’t understand how to
open, need try-and-error

11. Discoverability and Understanding
Buttons are visible, but unable to know the meaning

12. Fundamental Principle of Interactions
In order to come out good design, need take care of following principles:
● Affordances
● Signifier
● Feedback
● Mapping
● Conceptual Models

13. Affordances
An affordance is a relationship between the properties of an object and the
capabilities of the agent that determine just how the object could possibly be used.
A chair affords support and sitting

14. Signifier
● Affordance: it is a relationship
● Affordance determine what actions are possible.
● Signifiers communicate where the action should take place.

15. Signifier
Some doors unable to know how to open without a signifier

16. Signifier
Signifier is an important device for communication, whether or not communication
is intended

17. Signifier
The sink that would not drain
A door unable to push/pull
Signifier confuses people

18. Mapping
● Mapping is the relationship between the elements of two sets of things
● Ex. Switch mapping Lights in office
● Mapping the layout of controls and displays

19. Mapping
Steeling a car, rotate the steering wheel clockwise to cause the car to turn right.

20. Mapping
Tank is different,its designed to control wheel speed because it uses track

21. Feedback
User can’t control things without feedback

22. Feedback
● Feedback must be immediate: even a delay of a tenth of a second can be
disconcerting. If the delay is too long, people often give up, going off to do
other activities.

23. Feedback
● Too much feedback become annoying.

24. Feedback
● Use one simple signal producer to reduce cost, let people not easy to
remember (Beep code)
● Beep code definition may be different in different machines. We'll be confused
when those machines beep together.
● Feedback has to be planned and prioritized.
● Feedback is essential, but it has to be done correctly. Appropriately.

25. Conceptual Models
● A conceptual model is an explanation, usually highly simplified, of how something
works.
● Ex. There are folders in screen, but it doesn't means there is really a folder in disk
● Ex. User browse data in PC and think it's a data in PC, but data is in cloud actually.

26. Conceptual Models
● Conceptual models are often inferred from the device itself. Some models are
passed on from person to person. Some come from manuals.
● Some conceptual models come from experience, so wrong conceptual
models let devices hard to use
● How things work come from user perceived structure
○ Signifier
○ Affordance
○ Mappings

27. What I learned as a developer
● Affordance / Signifier / Feedback in code

28. What I learned as a developer
● Affordance
○ Mobile
○ PC Browser
○ SMS
● Signifier

29. What I learned as a developer
● Feedback

30. What I learned as a developer
● Mapping => OOAD/Design Pattern

31. Conceptual Models
● Many abstraction layers, from documentation to code level.
● Need easy to read, discover and easy to understand

32. What I learned as a developer
● Developer design API to interact with Users/Developers
● Every RestAPI/Framework/library/method/lineOfCode are API
● When designing APIs, we need make sure design is good
● Good design is discoverable and easy to understand
● Good document is a must have for complex conceptual models
● How to come out a good design?
○ Affordance
○ Signifier
○ Mapping
○ Feedback
○ Conceptual Models
● Whenever you read Code Complete/Clean Code/Design Pattern/Effective
Java, masters want to share how to come out good design