Weitere ähnliche Inhalte
Ähnlich wie NUS-ISS Learning Day 2015 - Digital User Experience: Lessons from Everyday Objects (20)
Kürzlich hochgeladen (20)
NUS-ISS Learning Day 2015 - Digital User Experience: Lessons from Everyday Objects
- 1. #ISSlearn
DIGITAL USER EXPERIENCE:
LESSONS FROM EVERYDAY
OBJECTS
Choo Zhi Min, Instructor, Institute of Systems Science, NUS
zhimin@nus.edu.sg
1(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 2. #ISSlearn
Coffee Maker or DVD Player?
2(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 4. #ISSlearn
Everything Things
4(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
• 23,000 objects catalogued in "What's What: A
Visual Glossary of the Physical World"
• Let's say it takes one minute to learn each
object.
• It will take 23,000 minutes = 383 hours = 8.7
work weeks
- 5. #ISSlearn
How do people cope?
5(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
• Human mind is wired to make sense of the
world.
• Information from the appearance of the
objects.
• The ability of designer to make the operation
and the object appearance clear, and to take
advantage of the knowledge of how human
mind works.
- 6. #ISSlearn
Affordance
6(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
• The visual appearance of an object that gives
clues about how the object could be possibly
used.
• Plate is for pushing
• Slot is for inserting things into
• Knob is for turning
• Ball is for throwing or bouncing
• Button is for pressing
• Switch is for flipping
- 7. #ISSlearn
Four types of Affordance
7(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
1. Physical
2. Language
3. Pattern
4. Symbolic/Iconic
- 8. #ISSlearn
Four types of Affordance
8(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
1. Physical
2. Language
3. Pattern
4. Symbolic/Iconic
- 9. #ISSlearn
Four types of Affordance
1. Physical Affordance
• Affordance based on the object’s physical
appearance
• Shape, size, structure
9(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 10. #ISSlearn
Four types of Affordance
10(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 11. #ISSlearn
Four types of Affordance
11(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 12. #ISSlearn
Four types of Affordance
12(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 13. #ISSlearn
Four types of Affordance
Buttons: Physical Affordance in Digital World
13(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 14. #ISSlearn
Four types of Affordance
14(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 15. #ISSlearn
Four types of Affordance
15(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
Any button?
- 16. #ISSlearn
Four types of Affordance
2. Language Affordance
• Straightforward affordance based on words
• Inline textbox labels
16(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 17. #ISSlearn
Four types of Affordance
3. Pattern Affordance
• Common web/mobile conventions that most users
are able to recognize and understand.
• Navigation menu and breadcrumbs
• Links
• Downward or Right arrow next to word
17(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 18. #ISSlearn
Four types of Affordance
18(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 19. #ISSlearn
Four types of Affordance
4. Symbolic Affordance
• Use symbols or icons to communicate affordance.
• Usually icons of real-life, physical objects or
commonly known symbols to quickly tell users
what they can do.
19(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 20. #ISSlearn
Four types of Affordance
20(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved
- 25. #ISSlearn
THANK YOU
Choo Zhi Min
zhimin@nus.edu.sg
Follow me: @choozm
Follow ISS: @ISSNUS
25(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx
© 2015 National University of
Singapore. All Rights Reserved