Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

1,163 views

Published on

A look on some of the common app interfaces, and how our interaction with everyday objects could inform us of a better design.

Published in: Technology
  • Be the first to comment

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

  1. 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. 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
  3. 3. #ISSlearn 3(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
  4. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  21. 21. #ISSlearn A Short Exercise 21(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
  22. 22. #ISSlearn A Short Exercise 22(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
  23. 23. #ISSlearn A Short Exercise 23(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
  24. 24. #ISSlearn Food for Thought 24(Total Slides=8) T:S-ITSM-FOMModule 1 v3.pptx © 2015 National University of Singapore. All Rights Reserved
  25. 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

×