NUS-ISS Learning Day 2015 - Digital User Experience: Lessons from Everyday Objects

#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