A little bit ofCognitive Psychology forlots of Interaction DesignWebexpo Prague 2012Jan Šrůtek | @JanSru                  ...
UX Designer at Flow Interactive 	Interaction design studio in London, par t of Foolproof Group	                           ...
Why talk about Cog Psy?1.   Understand human cognitive     capabilities and limitations2.   To help us evaluate our design...
Unfortunately…Cognitive psychologyis not very accessible                                                                  ...
We’ll talk about…   Memory           Persuasive design   Learning         Emotional design   Attention        ¨Neuro desig...
Memory                                                    RetrievalInformation                           Short-term       ...
The truth about short-term mem.People can hold          7 +/- 2                  things in short-term memory              ...
Count the circles     [Sorry, this doesn’t work online]                                         @JanSru
Short-term memory capacity 4 +/- 1 chunks of information at once Phone numbers often remembered as: 0776-136-2093         ...
Short-term memoryImplications design:STM is rather limitedRelevance for design1) When people have to remember stuff2) When...
Short-term memoryImplications for design:STM iseasilydisruptedDon’t interruptpeople unnecessarily- they might losetheir tr...
Website: www.amazon.comSuper-tooltip                 @JanSru
Website: www.amazon.comSuper-tooltip                 @JanSru
Website: www.popscreen.com/joinInline validation                        @JanSru
Website: www.tfl.gov.uk/tickets/default.aspxOn-demand information in context                             @JanSru
Long-term memory     Declarative                 Procedural: How          (explicit)                 (implicit) Episodic  ...
Long-term memory     Declarative                     Procedural: How          (explicit)                         (implicit...
Level-of-processing(also Depth-of-processing)        Information that is analysed deeply        is recalled better than in...
Long-term memoryImplications for design:To engage people, make your content:  Relevant (to one’s circumstances)  Emotional...
Personally relevant copy                           Website: http://www.investec.co.uk                                     ...
Fun for added engagement                           Website: http://convergese.com                                         ...
Fun for added engagement                           Website: http://convergese.com                                         ...
Fun for added engagement                           Website: http://convergese.com                                         ...
Website: http://benthebodyguard.com/Emotions & reflection for memorability                     @JanSru
@JanSru
@JanSru
LearningPeople prefer learning by exploration                                                                      @JanSru...
System Model          Interaction Design Layer           User’s Mental Model            Concept             ConceptConcept...
LearningImplications for design:  Support people in building a good  mental model by:  1) Starting point that orients them...
Initial 1-2-3 orientation                            Website: http://shiply.com                                           ...
Continuously encouraged exploration Follow usability principles to support people in exploration:  Prevent errors & facili...
Continuously encouraged exploration                                 Game: Renegade Ops                                    ...
Memory and learning   Recognition rather than Recall                            Search                                    ...
Website: www.nationalrail.co.uk/Recognition rather than recall                         @JanSru
AttentionSelectivity of processing  Limited resource  Multi-modal  Top-down and bottom-up activation                      ...
AttentionImplications for design:Let people focus on their tasks,not on distraction presentation                          ...
AttentionImplications for design:Use progressive disclosureto reveal functionality andcontent in a planned manner         ...
Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure                               designingwebinterf...
Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure                               designingwebinterf...
Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure                               designingwebinterf...
Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure                               designingwebinterf...
There’s more!                @JanSru
Do old guidelines still work?                     Guys, I wrote                     this stuff for                     you...
Human brain hasn’tchanged much overthe last 10,000 years                                                                @J...
Photo: http://www.flickr.com/photos/lapolab/5140120870/Thank you!                                                         ...
Want to know more?                     @JanSru
Upcoming SlideShare
Loading in...5
×

Small Cognitive Psychology for Big Interaction Design

4,502

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
2 Comments
13 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,502
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
0
Comments
2
Likes
13
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: http://www.flickr.com/photos/ccacnorthlib/4131838228/
  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: http://www.flickr.com/photos/arselectronica/6100107956/ @JanSru
  12. 12. Website: www.amazon.comSuper-tooltip @JanSru
  13. 13. Website: www.amazon.comSuper-tooltip @JanSru
  14. 14. Website: www.popscreen.com/joinInline validation @JanSru
  15. 15. Website: www.tfl.gov.uk/tickets/default.aspxOn-demand 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: http://www.investec.co.uk @JanSru
  21. 21. Fun for added engagement Website: http://convergese.com @JanSru
  22. 22. Fun for added engagement Website: http://convergese.com @JanSru
  23. 23. Fun for added engagement Website: http://convergese.com @JanSru
  24. 24. Website: http://benthebodyguard.com/Emotions & reflection for memorability @JanSru
  25. 25. @JanSru
  26. 26. @JanSru
  27. 27. LearningPeople prefer learning by exploration @JanSru Image: www.flickr.com/photos/dante/165394424
  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: http://shiply.com @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: www.nationalrail.co.uk/Recognition 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: www.flickr.com/photos/frankenstoen/2747513279/
  37. 37. AttentionImplications for design:Use progressive disclosureto reveal functionality andcontent in a planned manner @JanSru
  38. 38. Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure designingwebinterfaces @JanSru
  39. 39. Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure designingwebinterfaces @JanSru
  40. 40. Images by Bill Scott: http://www.flickr.com/photos/Progressive disclosure designingwebinterfaces @JanSru
  41. 41. Images by Bill Scott: http://www.flickr.com/photos/Progressive 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: www.flickr.com/photos/lord-jim/2245362817/
  45. 45. Photo: http://www.flickr.com/photos/lapolab/5140120870/Thank you! @JanSru
  46. 46. Want to know more? @JanSru

×