Cognitive Elements of an Effective UI/UX Design
Shabnam Shahfar
@ShabnamShahfar
www.protegra.com
Shabnam Shahfar
Topics
• Human Centered Design
• UI/UX Design
• Design Principals
• Vision
• Attention
• Memory
Design
“Few people think about it or are aware of it. But there is nothing made by human beings that does not involve a design decision somewhere.” — Bill Moggridge
4
Design
“The world does not understand design”
-Don Norman
5
Design
• Good design starts with an understanding of psychology and technology.
• Good designers ask why
6
Areas of Design
• Industrial
• Experience
• Interaction
• Artistic
7
Human Centered Design
• HCD is a design philosophy.
• It means starting with a good understanding of people and the needs that the design is intended to meet.
8
YOU ARE NOT
EVERYONE!
What is User Experience (UX) Design?
10
UX vs. UI
Design
Two of the most important characteristics of a good design are:
• Discoverability
• Understanding
11
Discoverability
12
Affordance & Signifier
• Affordance is a relationship between the properties of an object and a person, e.g, a chair affords sitting.
• Signifier is the signal or clues that helps users find possible actions.
13
Signifier
14
Feedback
15
Conceptual Model
16
Human Error?!
17
Human Visual Perception
What you see is not what it is!
19
20
21
22
23
Foveal vs. Peripheral vision
V U Y
Y U V
Eye tracking
Eye movements
How do we know where to look when
presented with an image?
29
Foveal vs. Peripheral vision
30
Foveal vs. Peripheral vision
31
Foveal vs. Peripheral vision
32
Foveal vs. Peripheral vision
Gestalt Psychology
33
The human eye sees objects in their entirety before perceiving their individual parts
34
Gestalt Laws of Grouping
• Law of proximity
• Law of closure
• Law of similarity
35
Law of Proximity
36
Law of Proximity
37
Law of Similarity
38
Law of Similarity
39
Law of Similarity
40
41
Law of Closure
42
Law of Closure
43
44
Color
• Primary color to enhance your branding
• Accent color is to provide contrast for important buttons and UI elements and components
45
Color
• Use color to unite user experience across multiple platforms and multiple devices
46
Protanopia
No red cones
Deuteranopia
No green cones
Tritanopia
No blue cones
Normal vision
Color deficiency
48
49
50
Attention
• “The addictive nature of web browsing can leave you with an attention span of nine seconds – the same as a goldfish” *
* BBC in 2002
51
52
53
54
55
Memory
Working Memory Long Term Memory
59
Cognitive Load
60
Just like computers, human brains have a limited amount of processing power
Cognitive Load
61
Average person is able to hold only 7+/- 2 units of information in short-term memory
- Cognitive psychologist George A. Miller, Princeton University [1956]
Minimizing Cognitive Load
• Avoid visual clutter
• Build on existing mental models
• Offload tasks
62
64
@ShabnamShahfar
www.protegra.com
Shabnam Shahfar
Credits Design of every day things, Don Norman
Don’t make me think, Steve Krug
http://www.webexhibits.org/colorart/ag.html
http://en.wikipedia.org/wiki/Foveal
http://www.smashingmagazine.com/2014/03/28/design-principles-visual-perception-and-the-principles-of-gestalt/
http://ddriscollfnd111.wordpress.com/design-tips/gestalt-theory-for-designers/
https://developers.google.com/events/io/sessions/326460111
http://en.wikipedia.org/wiki/Cognitive_load
http://www.nngroup.com/articles/minimize-cognitive-load/
http://en.wikipedia.org/wiki/Attention
http://news.bbc.co.uk/2/hi/science/nature/1834682.stm
http://www.nngroup.com/articles/definition-user-experience/
http://www.nngroup.com/articles/how-long-do-users-stay-on-web-pages/
65
