Upload
institute-of-systems-science-national-university-of-singapore
View
839
Download
1
Embed Size (px)
Citation preview
#ISSlearn
DIGITAL USER EXPERIENCE: LESSONS FROM EVERYDAY OBJECTSChoo Zhi Min, Instructor, Institute of Systems Science, [email protected]
1(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Coffee Maker or DVD Player?
2(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn 3(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Everything Things
4(Total Slides=8) T:\S-ITSM-F\OM\Module 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
#ISSlearn
How do people cope?
5(Total Slides=8) T:\S-ITSM-F\OM\Module 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.
#ISSlearn
Affordance
6(Total Slides=8) T:\S-ITSM-F\OM\Module 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
#ISSlearn
Four types of Affordance
7(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
1. Physical2. Language3. Pattern4. Symbolic/Iconic
#ISSlearn
Four types of Affordance
8(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
1. Physical2. Language3. Pattern4. Symbolic/Iconic
#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-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
10(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
11(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
12(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
Buttons: Physical Affordance in Digital World
13(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
14(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
15(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
Any button?
#ISSlearn
Four types of Affordance
2. Language Affordance• Straightforward affordance based on words• Inline textbox labels
16(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#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-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
18(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#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-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Four types of Affordance
20(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
A Short Exercise
21(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
A Short Exercise
22(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
A Short Exercise
23(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
Food for Thought
24(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
#ISSlearn
THANK YOU Choo Zhi Min
[email protected] Follow me: @choozmFollow ISS: @ISSNUS
25(Total Slides=8) T:\S-ITSM-F\OM\Module 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved