Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Psychology of Design

Jon Yablonski
March 09, 2018

Psychology of Design

Jon Yablonski

March 09, 2018
Tweet

More Decks by Jon Yablonski

Other Decks in 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