Small Cognitive Psychology for Big Interaction Design


Published on

Talk I gave at Webexpo 2012 in Prague. We discussed the application of cognitive psychology principles to the design of interactive systems.

Published in: Design
No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Small Cognitive Psychology for Big Interaction Design

  1. 1. A little bit ofCognitive Psychology forlots of Interaction DesignWebexpo Prague 2012Jan Šrůtek | @JanSru @JanSru
  2. 2. UX Designer at Flow Interactive Interaction design studio in London, par t of Foolproof Group @JanSru
  3. 3. Why talk about Cog Psy?1. Understand human cognitive capabilities and limitations2. To help us evaluate our designs and design patterns more meaningfully @JanSru
  4. 4. Unfortunately…Cognitive psychologyis not very accessible @JanSru Image:
  5. 5. We’ll talk about… Memory Persuasive design Learning Emotional design Attention ¨Neuro design¨ @JanSru
  6. 6. Memory RetrievalInformation Short-term Long-term Sensory Encoding from the (working) memory memory Storageenvironment memory Encoding Storage Forgetting Forgetting @JanSru
  7. 7. The truth about short-term mem.People can hold 7 +/- 2 things in short-term memory @JanSru
  8. 8. Count the circles [Sorry, this doesn’t work online] @JanSru
  9. 9. Short-term memory capacity 4 +/- 1 chunks of information at once Phone numbers often remembered as: 0776-136-2093 @JanSru
  10. 10. Short-term memoryImplications design:STM is rather limitedRelevance for design1) When people have to remember stuff2) When problem-solving @JanSru
  11. 11. Short-term memoryImplications for design:STM iseasilydisruptedDon’t interruptpeople unnecessarily- they might losetheir train of thought Image: @JanSru
  12. 12. Website: @JanSru
  13. 13. Website: @JanSru
  14. 14. Website: validation @JanSru
  15. 15. Website: information in context @JanSru
  16. 16. Long-term memory Declarative Procedural: How (explicit) (implicit) Episodic Semantic‘experiences’ ‘what/knowledge’ @JanSru
  17. 17. Long-term memory Declarative Procedural: How (explicit) (implicit) Episodic Semantic‘experiences’ ‘what/knowledge’ Storage Retrieval @JanSru
  18. 18. Level-of-processing(also Depth-of-processing) Information that is analysed deeply is recalled better than information that is analysed superficially. @JanSru
  19. 19. Long-term memoryImplications for design:To engage people, make your content: Relevant (to one’s circumstances) Emotional Humorous Surprising or shocking Require elaboration & reflection @JanSru
  20. 20. Personally relevant copy Website: @JanSru
  21. 21. Fun for added engagement Website: @JanSru
  22. 22. Fun for added engagement Website: @JanSru
  23. 23. Fun for added engagement Website: @JanSru
  24. 24. Website: & reflection for memorability @JanSru
  25. 25. @JanSru
  26. 26. @JanSru
  27. 27. LearningPeople prefer learning by exploration @JanSru Image:
  28. 28. System Model Interaction Design Layer User’s Mental Model Concept ConceptConcept Concept Concept @JanSru
  29. 29. LearningImplications for design: Support people in building a good mental model by: 1) Starting point that orients them 2) Continuously encouraged exploration @JanSru
  30. 30. Initial 1-2-3 orientation Website: @JanSru
  31. 31. Continuously encouraged exploration Follow usability principles to support people in exploration: Prevent errors & facilitate recovery Make things consistent & predictable Provide clear feedback for all actions Adapted from Jakob Nielsen’s good old list “Ten Usability Heuristics for User Interface Design“ @JanSru
  32. 32. Continuously encouraged exploration Game: Renegade Ops @JanSru
  33. 33. Memory and learning Recognition rather than Recall Search @JanSru
  34. 34. Website: rather than recall @JanSru
  35. 35. AttentionSelectivity of processing Limited resource Multi-modal Top-down and bottom-up activation @JanSru
  36. 36. AttentionImplications for design:Let people focus on their tasks,not on distraction presentation @JanSru Image:
  37. 37. AttentionImplications for design:Use progressive disclosureto reveal functionality andcontent in a planned manner @JanSru
  38. 38. Images by Bill Scott: disclosure designingwebinterfaces @JanSru
  39. 39. Images by Bill Scott: disclosure designingwebinterfaces @JanSru
  40. 40. Images by Bill Scott: disclosure designingwebinterfaces @JanSru
  41. 41. Images by Bill Scott: disclosure designingwebinterfaces @JanSru
  42. 42. There’s more! @JanSru
  43. 43. Do old guidelines still work? Guys, I wrote this stuff for you in 1990! @JanSru
  44. 44. Human brain hasn’tchanged much overthe last 10,000 years @JanSru Image:
  45. 45. Photo: you! @JanSru
  46. 46. Want to know more? @JanSru