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

1. A little bit of
Cognitive Psychology for
lots of Interaction Design
Webexpo Prague 2012
Jan Šrůtek | @JanSru
@JanSru

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

3. Why talk about Cog Psy?
1. Understand human cognitive
capabilities and limitations
2. To help us evaluate our designs and
design patterns more meaningfully
@JanSru

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

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

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

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

8. Count the circles
[Sorry, this doesn’t work online]
@JanSru

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

10. Short-term memory
Implications 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
Don’t interrupt
people unnecessarily
- they might lose
their train of thought
Image: http://www.flickr.com/photos/arselectronica/6100107956/ @JanSru

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

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

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

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

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

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

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

19. 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

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

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

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

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

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

25. @JanSru

26. @JanSru

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

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

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

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

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. Continuously encouraged exploration
Game: Renegade Ops
@JanSru

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

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

35. Attention
Selectivity of processing
Limited resource
Multi-modal
Top-down and bottom-up activation
@JanSru

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

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

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

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

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

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

42. There’s more!
@JanSru

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

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

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

46. Want to know more?
@JanSru