Talk I gave at UX Cambridge 2012. We discussed the application of cognitive psychology principles to the design of interactive systems.

1. Small Cognitive Psychology
for Big Interaction Design
UX Cambridge 2012
Jan Srutek | @JanSru
@JanSru

2. Jan = UX Designer at Flow Interactive
Interaction design studio in London, par t of Foolproof Group
@JanSru

3. Why talk about Cog Psy?
Understand human cognitive
1/! capabilities and limitations
@JanSru
Image: www.flickr.com/photos/hugo90/7019825859/

4. Why talk about Cog Psy?
Evaluate new designs & patterns
2/! more meaningfully
Website: quince.infragistics.com/
@JanSru

5. Cognitive psychology
is not very accessible
@JanSru
Image: http://www.flickr.com/photos/ccacnorthlib/4131838228/

6. We’ll talk about…
Memory Persuasive design
Learning Emotional design
Attention ‘Neuro design‘
@JanSru

7. Memory
Retrieval
Information Short-term Long-term
Sensory Encoding
from the (working) memory
memory Storage
environment memory Encoding
Storage
Forgetting Forgetting
@JanSru

8. The truth about short-term memory
People can hold
7 +/- 2
things in short-term memory
@JanSru

9. Short-term memory capacity
4 +/- 1
chunks of information at once
Phone numbers remembered as:
0776-136-2093
@JanSru

10. Short-term memory
Implications for design:
STM is rather limited
Relevance for design
1) When people have to remember stuff
2) When problem-solving
@JanSru

11. Short-term memory
Implications for design:
STM is
easily
disrupted
Image: www.flickr.com/photos/arselectronica/6100107956/
@JanSru

12. Short-term memory
Implications for design:
STM is
easily
disrupted
Image: www.mobiledesignpatterngallery.com/
@JanSru

13. Website: www.popscreen.com/join
Inline validation @JanSru

14. Website: www.amazon.com
Super-tooltip @JanSru

15. Website: www.amazon.com
Super-tooltip @JanSru

16. Website: www.tfl.gov.uk/tickets/default.aspx
On-demand information in context @JanSru

17. Long-term memory
Declarative Procedural: How
(explicit) (implicit)
Episodic Semantic
‘experiences’ ‘what/knowledge’
@JanSru

18. Long-term memory
Declarative Procedural: How
(explicit) (implicit)
Episodic Semantic
‘experiences’ ‘what/knowledge’
Storage Retrieval
@JanSru

19. Level-of-processing
(also Depth-of-processing)
Information that is analysed deeply
is recalled better than information
that is analysed superficially.
@JanSru

20. Long-term memory
Implications for design:
To engage people, make your content:
Relevant (to one’s circumstances)
Emotional
Humorous
Surprising or shocking
Require elaboration & reflection
@JanSru

21. Personally relevant copy
Website: http://www.investec.co.uk
@JanSru

22. Fun for added engagement
Website: http://convergese.com
@JanSru

23. Fun for added engagement
Website: http://convergese.com
@JanSru

24. Fun for added engagement
Website: http://convergese.com
@JanSru

25. Website: http://benthebodyguard.com/
Emotions & reflection for memorability @JanSru

26. @JanSru

27. @JanSru

28. Learning
People prefer learning by exploration
@JanSru
Image: www.flickr.com/photos/dante/165394424

29. System Model
Interaction Design Layer
User’s Mental Model
Concept Concept
Concept
Concept Concept
@JanSru

30. Learning
Implications for design:
Support building a good mental model:
1) Starting point that orients people
2) Continuously encouraged exploration
@JanSru

31. Learning research from 1984, with 2 groups:
• First group learnt procedures by rote,
• Second group was shown a model of the system before learning procedures
Ref: Kieras & Bovair, (1984) The role of a mental model in learning to operate a device @JanSru

32. Results:
Group that saw the concept model performed much better
Ref: Kieras & Bovair, (1984) The role of a mental model in learning to operate a device @JanSru

33. Initial 1-2-3 orientation
Website: http://shiply.com
@JanSru

34. Continuously encouraged 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

35. Continuously encouraged exploration
Game: Renegade Ops
@JanSru

36. Memory and learning
Recognition rather than Recall
@JanSru

37. Memory and learning
Recognition rather than Recall
Search
@JanSru

38. Website: www.nationalrail.co.uk/
Recognition rather than recall @JanSru

39. Attention
Selectivity of processing
@JanSru
Image: www.flickr.com/photos/dante/165394424

40. Attention
Limited resource
Multi-modal
Top-down and bottom-up activation
@JanSru

41. Attention
Implications for design:
Let people focus on their tasks,
not on distraction presentation
@JanSru
Image: www.flickr.com/photos/frankenstoen/2747513279/

42. Attention
Implications for design:
Use progressive disclosure
to reveal functionality and
content in a planned manner.
@JanSru

43. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

44. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

45. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

46. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

47. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

48. Images by Bill Scott: http://www.flickr.com/photos/
Progressive disclosure designingwebinterfaces
@JanSru

49. There’s more!
@JanSru

50. Do old guidelines still work?
Guys, I wrote
this stuff for
you in 1990!
@JanSru

51. Human mind hasn’t
changed much over
the last 10,000 years
@JanSru
Image: www.flickr.com/photos/lord-jim/2245362817/

52. Photo: http://www.flickr.com/photos/lapolab/5140120870/
Thank you!
@JanSru

53. Want to know more?
@JanSru

54. What Cognitive Psychology
principles do you find most
useful in your jobs?
Thanks
@JanSru
@JanSru