Psychology of Design

Transcript

1. Psychology of Design
   Jon Yablonski
   2018
   

   View Slide

2. Jon Yablonski
   Interactive Design Lead / Vectorform
   JONYABLONSKI.COM
   @JONYABLONSKI
   

   View Slide

3. View Slide

4. View Slide

5. View Slide

6. View Slide

7. Data
   

   View Slide

8. Data Intuition
   

   View Slide

9. Data Intuition
   

   View Slide

10. View Slide

11. View Slide

12. IMAGE FROM AN INTRODUCTION TO HUMAN CENTERED DESIGN
    

    View Slide

13. Where to start?
    

    View Slide

14. View Slide

15. View Slide

16. View Slide

17. LAWS OF UX
    

    View Slide

18. Jakob’s Law
    

    View Slide

19. Hick’s Law
    

    View Slide

20. The time it takes to make a decision
    increases with the number and
    complexity of choices available.
    

    View Slide

21. William Edmund Hick
    & Ray Hyman
    1952
    

    View Slide

22. RT = a + b log2 (n)
    

    View Slide

23. View Slide

24. Cognitive Load
    

    View Slide

25. View Slide

26. HTTPS://WWW.NNGROUP.COM/ARTICLES/WORKING-MEMORY-EXTERNAL-MEMORY/
    

    View Slide

27. View Slide

28. View Slide

29. View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. View Slide

35. View Slide

36. Key Takeaways
    Hick’s Law
    

    View Slide

37. Key Takeaways
    1. Too many choices will increase the cognitive load for users.
    Hick’s Law
    

    View Slide

38. Key Takeaways
    1. Too many choices will increase the cognitive load for users.
    2. Break up long or complex processes into screens with fewer options.
    Hick’s Law
    

    View Slide

39. Key Takeaways
    1. Too many choices will increase the cognitive load for users.
    2. Break up long or complex processes into screens with fewer options.
    3. Use progressive on-boarding to minimize cognitive load for new users.
    Hick’s Law
    

    View Slide

40. Miller’s Law
    

    View Slide

41. The average person can only keep 7 (± 2)
    items in their working memory.
    

    View Slide

42. George Miller
    1956
    

    View Slide

43. Myth
    

    View Slide

44. Myth
    ITEMS SHOULD BE LIMITED TO SEVEN
    

    View Slide

45. “Miller’s magical number seven is often
    misunderstood to mean that humans can
    only process seven chunks at any given
    time. As a consequence, confused designers
    will sometimes misuse this finding to justify
    unnecessary design limitations.”
    — KATE MORAN, HOW CHUNKING HELPS CONTENT PROCESSING
    

    View Slide

46. Chunking
    

    View Slide

47. 4 4 0 8 6 7 5 3 0 9
    

    View Slide

48. ( 4 4 0 ) 8 6 7 - 5 3 0 9
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. Key Takeaways
    Miller’s Law
    

    View Slide

57. Key Takeaways
    1. Break text and content into smaller chunks to help users process,
    understand, and remember it better.
    Miller’s Law
    

    View Slide

58. Key Takeaways
    1. Break text and content into smaller chunks to help users process,
    understand, and remember it better.
    2. Don’t use the ‘magical number 7’ to justify unnecessary design limitations.
    Miller’s Law
    

    View Slide

59. Key Takeaways
    1. Break text and content into smaller chunks to help users process,
    understand, and remember it better.
    2. Don’t use the ‘magical number 7’ to justify unnecessary design limitations.
    3. Remember that the short-term memory capacity will vary per individual.
    Miller’s Law
    

    View Slide

60. Jakob’s Law
    

    View Slide

61. Users spend most of their time on other
    sites, and they prefer your site to work the
    same way as all the other sites they
    already know.
    

    View Slide

62. Jakob Nielsen
    2000
    

    View Slide

63. Mental Models
    

    View Slide

64. “A mental model is based on belief, not
    facts: that is, it’s a model of what users
    know (or think they know) about a system
    such as your website.”
    — JAKOB NIELSEN, MENTAL MODELS
    

    View Slide

65. ELI SCHIFF, THE MENTAL MODEL
    

    View Slide

66. View Slide

67. — A MAGAZINE IS AN IPAD THAT DOES NOT WORK
    

    View Slide

68. APOLLO S-IB ROCKET CONTROL PANEL
    PHOTO BY JONATHAN H. WARD
    GOOGLE MATERIAL UI
    

    View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. OLD GOOGLE CALENDAR NEW GOOGLE CALENDAR
    

    View Slide

74. Key Takeaways
    Jakob’s Law
    

    View Slide

75. Key Takeaways
    1. Users will transfer expectations they have built around one familiar
    product to another that appears similar.
    Jakob’s Law
    

    View Slide

76. Key Takeaways
    1. Users will transfer expectations they have built around one familiar
    product to another that appears similar.
    2. By leveraging existing mental models, we can create superior user-
    experiences in which the user can focus on their task rather than learning
    new models.
    Jakob’s Law
    

    View Slide

77. Key Takeaways
    1. Users will transfer expectations they have built around one familiar
    product to another that appears similar.
    2. By leveraging existing mental models, we can create superior user-
    experiences in which the user can focus on their task rather than learning
    new models.
    3. Minimize discordance by empowering users to continue using a familiar
    version for a limited time.
    Jakob’s Law
    

    View Slide

78. Recap
    

    View Slide

79. Data Intuition
    

    View Slide

80. View Slide

81. View Slide

82. View Slide

83. View Slide

84. Ethics
    

    View Slide

85. View Slide

86. View Slide

87. SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS
    

    View Slide

88. View Slide

89. SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS
    

    View Slide

90. View Slide

91. GOOGLE DIGITAL WELLBEING
    

    View Slide

92. SOURCE: BRINGING PEOPLE CLOSER TOGETHER / FACEBOOK
    

    View Slide

93. SOURCE: ABLE, ALLOWED, SHOULD; NAVIGATING MODERN TECH ETHICS
    

    View Slide

94. As designers, it’s our responsibility to use
    technology for augmenting the human
    experience, not replacing it with virtual
    interaction and rewards.
    

    View Slide

95. Resources
    

    View Slide

96. HUMANETECH.COM
    

    View Slide

97. COGNITIVE UXD NEWSLETTER
    

    View Slide

98. View Slide

99. LAWS OF UX
    

    View Slide

100. Thank You
     

     View Slide