Designing with Cognitive Science in Mind

What's faster for humans: searching by color or shape? Why do we notice small icons in the corner of screens? Why it is hard to manage interruptions in our daily jobs? We design digital products and we sell pixels. Yet, we should remember they are meant for humans. In this presentation I am gonna address how well known mechanisms of cognition (like pattern recognition, peripheral attention and working memory) impact the way we perceive user interfaces. Getting to know these mechanisms will help you improve the way you design products.

Transcript

1. Designing with Cognitive Science in Mind Cesare Rocchi @_funkyboy
2. Agenda • What is Cognitive Science • Perception • Cognitive load • Tips and Tricks
3. Who am I?
4. Who are you?
5. What is Cognitive Science?
7. perception representation problem solving navigation language processing
8. HCI is applied Cognitive Science
9. Computation • CPU • Brain
10. HCI subsystems • psycomotor • Perceptual • Cognitive • (Social)
11. Visual Retina Mind
12. Speech?
13. Touch
14. Perception does not begin
15. Neissers Perceptual cycle Environment Knowledge Exploration
16. Neissers Perceptual cycle Environment Knowledge Exploration modifies
17. Neissers Perceptual cycle Environment Knowledge Exploration modifies directs
18. Neissers Perceptual cycle Environment Knowledge Exploration modifies directs samples
19. Perception is a loop
21. Environment Knowledge Exploration modifies directs samples
22. Knowledge
23. Schemata
25. Cognitive load
26. Working Memory
27. Working Memory • 4-5 bits
28. Working Memory • 4-5 bits • Lasts 10 seconds
29. Working Memory • 4-5 bits • Lasts 10 seconds • Like SAX parsing
30. Sax Parsing <?xml version="1.0" encoding="UTF-8"?>! <DocumentElement param="value">! <FirstElement>! &#xb6; Some Text! </FirstElement>! <?some_pi some_attr="some_value"?>! <SecondElement param2="something">! Pre-Text <Inline>Inlined text</Inline> Post-text.! </SecondElement>! </DocumentElement>
36. Illusions
40. Grouping
41. Proximity
43. White Space to group
44. required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder) } override func viewDidLoad() { super.viewDidLoad() } ! override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() }
47. Empty space is not useless
48. kenophobia
50. ???
51. “In a survey of more than 100 clothing stores that display merchandise in shop windows, the degree to which the shop windows were filled with mannequins, clothes, price tags, and signage was inversely related to the average price of the clothing and brand prestige of the store.” Universal Principles of Design
54. Biedermann Recognition by components
55. Geons
64. http://realmacsoftware.com/blog/designing-apps-for- the-visually-impaired
65. Syntax of UI
68. Universal Principles of Design by William Lidwell, Kritina Holden, Jill Butler
69. Designed for Use by Lukas Matis
70. Don’t make me think by Steve Krug
71. “Building an app is building a loop”
72. @_funkyboy