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 full-size slide

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

    View full-size slide

  3. Data Intuition

    View full-size slide

  4. Data Intuition

    View full-size slide

  5. IMAGE FROM AN INTRODUCTION TO HUMAN CENTERED DESIGN

    View full-size slide

  6. Where to start?

    View full-size slide

  7. Jakob’s Law

    View full-size slide

  8. Hick’s Law

    View full-size slide

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

    View full-size slide

  10. William Edmund Hick
    & Ray Hyman
    1952

    View full-size slide

  11. RT = a + b log2 (n)

    View full-size slide

  12. Cognitive Load

    View full-size slide

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

    View full-size slide

  14. Key Takeaways
    Hick’s Law

    View full-size slide

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

    View full-size slide

  16. 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 full-size slide

  17. 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 full-size slide

  18. Miller’s Law

    View full-size slide

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

    View full-size slide

  20. George Miller
    1956

    View full-size slide

  21. Myth
    ITEMS SHOULD BE LIMITED TO SEVEN

    View full-size slide

  22. “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 full-size slide

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

    View full-size slide

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

    View full-size slide

  25. Key Takeaways
    Miller’s Law

    View full-size slide

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

    View full-size slide

  27. 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 full-size slide

  28. 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 full-size slide

  29. Jakob’s Law

    View full-size slide

  30. 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 full-size slide

  31. Jakob Nielsen
    2000

    View full-size slide

  32. Mental Models

    View full-size slide

  33. “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 full-size slide

  34. ELI SCHIFF, THE MENTAL MODEL

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  37. OLD GOOGLE CALENDAR NEW GOOGLE CALENDAR

    View full-size slide

  38. Key Takeaways
    Jakob’s Law

    View full-size slide

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

    View full-size slide

  40. 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 full-size slide

  41. 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 full-size slide

  42. Data Intuition

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. GOOGLE DIGITAL WELLBEING

    View full-size slide

  46. SOURCE: BRINGING PEOPLE CLOSER TOGETHER / FACEBOOK

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. HUMANETECH.COM

    View full-size slide

  50. COGNITIVE UXD NEWSLETTER

    View full-size slide