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