Webinar description: What makes a user interface engaging and intuitive? Conversely, what makes some programs so difficult to use? The practice of experience design is a blending of art and science, informed by principles drawn from graphic arts, information theory and cognitive psychology. We are pattern seekers, and the more we understand how our visual system builds the patterns we see (or don't see), the more effectively we can control the user's experience. We invite you to join Mad*Pow's Experience Design Director, Paul Kahn, and Experience Research Director, Dan Berlin, as they review visual cognition theories and show how the resulting principles are applied in experience design. Whether you are new to the field or an experienced practitioner, this presentation will introduce new topics and serve as a review of subjects that you may not have thought about in quite the same way. By raising awareness of how we think and how we see, we will show how theory informs our real-world visual design projects.

1. Visual Principles of Experience Design:
Blending Art and Science
Prepared by:
Dan Berlin – Experience Research Director
Paul Kahn – Experience Design Director
May, 2013

2. About This Presentation
Dan Berlin (left), Experience Research Director
Paul Kahn (right), Experience Design Director
Leaders in beard production at Mad*Pow
(Dan specializes in brown, Paul in grey)
Agenda
We are pattern seekers
Perceptual variables
Color use
Mad*Pow design examples throughout
2

3. WE ARE PATTERN SEEKERS

4. Why Is This Important?
4
Our understanding of perceptual tasks drives the design of intuitive interfaces
Dan: A person does not have to think about seeing a pattern
Paul: Patterns of information create understanding
Dan: All design is based on the psychology of perception
Paul: Good design occurs in the mind of the user
Dan: We receive information by perceiving differences
Paul: The patterns that connect are the pathways for accessing differences
“The perception of a pattern can often be the basis of a new insight.”
- Colin Ware, Information Visualization

5. The Goal of Experience Design
By making interfaces that are “intuitive” we are reserving active thinking to
making inferences and gaining insights
• Dual-process theory
• System 1: Pre-Cognition (instantaneous)
• System 2: Cognition (active thinking) (Stanovich & West, 2000)
The goal of Experience Design is to create interfaces that are
• Intuitive = easy to grasp
• Attractive = in harmony with the user’s senses
An interface is “intuitive” and (generally) aesthetically pleasing when it:
• Takes advantage of the mind’s strengths & avoids its weaknesses
• Doesn’t confuse System 1
5

6. Ok, that’s interesting, but give me an example
6
An interaction is intuitive
when the user makes the least effort to grasp the significant difference.
Easy Not as easy Fuhgeddaboudit
Task: Find the red circle
Chris Healey, Perception in Visualization, 2009

8. Perception
The iris and lens change shape so that
light can be focused on the retina
Objects are perceived when rods and
cones detect changes in light and color
3-dimensional space is perceived when
the brain detects changes in retinal
disparity
We are change detectors
(Which is why the red text stands out)
8
Rene Descartes, 1663

9. The Steps of Visual Cognition
9
Perception
• All based on changes in contrast: hue, brightness, and color palette
• We detect differences, physiologically and psychologically
System 1: Pre-attentive Processing (Treisman & Gelade, 1980)
• Processed in under 250 milliseconds
• Parallel (bottom-up) processing – multiple things at once
• The focus of today’s discussion
System 2: Cognition
• Serial (top-down) processing – one thing at a time
• Active thinking
Perception
Preattentive
Processing
Cognition

10. Pre-attentive Processing
10
Second step of visual perception
• Sits between perception and cognition
• Processed in under 250 milliseconds
• Understanding without training or cognition
• Serial vs. parallel processing
• Starts to perceive objects in the mind’s eye
• And to ready our reaction to the object
Pre-attentive variables
• Proximity, similarity, connectedness, continuity, symmetry, closure, relative size, figure and
ground, intensity, curvature, line length, color, orientation, brightness, and direction of movement
• Overlapping variables (everything we see)
• Many theories as to how we deal with these – Feature Integration Theory, for one
(Treisman & Gelade, 1980)

11. DIKW Hierarchies (Data, Information, Knowledge, Wisdom)
11
The Functional Art, Alberto Cairo (2013)
Perception
Preattentive
Processing
Cognition

12. Concepts We Learn from Science
We are pattern seekers
We order the visual patterns we
recognize
We store visual patterns that
influence our expectations
What we see is strongly influenced
by our expectations
Our Sources:
Cognitive Psychology, Social
Anthropology, Neuroscience
12

13. We learn from Art & Design
Over five centuries of typographic practice:
• Legibility is achieved through spacing:
character spacing, word spacing, & line spacing
• We see the difference between
negative and positive space (contrast)
• Color comes from size and weight
• We use white to expose black
13
William Caslon, 1728

14. Lessons from Industrial Design:
Symmetry, Rhythm and Repetition
14
Christopher Dresser, Toast Rack, 1879Christopher Dresser, The Art of Decorative Design, 1862

16. We scan, filter, interpret differences
16
Jerusalem. Directional signs in the Old City, 2013

17. We use differences to create understanding
17
Health Design Challenge, 2012

18. Intuitive does not mean “Like”
Aesthetics is a matter of taste influenced by cultural preference
Intuitive is a matter of cognitive response influenced by expectation
18

19. Combining Intuition and Aesthetics
19
HotSeat app, 2013

20. PERCEPTUAL VARIABLES

21. Seven Visual Variables To Represent Data
21
Jacques Bertin, 1967 Benoit Martin, 2004
• Jacques Bertin (1918-2010): French cartographer and teacher
• Visual variables for quantitative information use to communicate differences

22. Carrying Capacity of Visual Variables
22
7 colors: French high-speed train network, 2005 20+ colors: Paris Metro, 2012

23. Hierarchy of Perceptual Tasks
23
We are good at some tasks, but not
others
• Good at: position, length, direction
• Bad at: area (of a circle), volume,
saturation
This is why you will see line or bar
graphs to convey data
• This is why visualizations that rely on color
typically use a limited set of colors
Cleveland & McGill, 1984

24. Conjoined Variables that Help and Hinder
24
Visual Scan

25. The Graph – A Basic Visualization
Position on a
common scale
(2 dimensions of the
plane)
Length (size)
Shading (value)
Area (size)
Slope (orientation)
Health Design Challenge, 2012

26. Dimensional Comparison
Proximity
Similarity
Connectedness
Continuity
Symmetry
Closure
Relative size
Figure and ground
Intensity
Curvature
Line length
Color
Orientation
Brightness
Direction of movement
26
Designing Information, Joel Katz (2013)

27. Displaying Quantity in Location
Statistical Chart showing the extent the population & revenues of the
Principal Nations of Europe in the order of their Magnitude
The Statistical Breviary, William Playfair, 1801

28. Comparing Area and Comparing Length
28
The Functional Art, Alberto Cairo, 2013

29. 29
Comparing Area and Comparing Length
Aesthetically pleasing and “interesting,” but
does not convey the data as easily (have to
compare polygon areas)
Bar graphs = simply judge the line lengths

30. The Gestalt Laws and Principles
30
The learnings of the Gestalt psychologists are typically referred to as
the “Gestalt Laws” or “Gestalt Principles”
• These aren’t two different sets of information – just two ways of looking at the same thing
Gestalt Laws
• Typically broken down into seven categories
• Closure, similarity, proximity, symmetry, figure/ground, common fate, & continuity
• May also hear about others: isomorphism or focal point
Gestalt Principles
• Typically broken down into four categories
• Emergence, reification, multistability, & invariance
Good way to look at it: the “Laws” are the elements of the “Principles”
• The Gestalt Laws take a bottom-up approach, the Gestalt Principles, top-down

31. The Gestalt Laws
31
Closure
• In our mind’s eye, we complete
obscured or incomplete items
Similarity
• Items with a common attribute
tend to be visually grouped
Curabitur a tellus ut elit sagittis pellentesque id
sed sem. Sed porta sapien quis metus dignissim
eu condimentum orci tristique. Nam laoreet
augue vel mi commodo at varius risus commodo.
Nam rutrum vulputate dolor, sed dapibus enim
cursus quis. Morbi suscipit enim ut metus
tincidunt et varius turpis pretium. Maecenas
molestie ultrices elit semper vulputate. Fusce
pellentesque rhoncus fermentum.
Proximity
• Items that are close together
tend to be grouped together

32. The Gestalt Laws
32
Common Fate
• Items moving together are
grouped together
Continuity
• An overlapping item is
perceived as one continuous
item
Symmetry
• We perceive items as
symmetrical wholes
http://bit.ly/YOsxZz

33. The Gestalt Laws
33
Figure/Ground
• When perceiving, some
items are the focus, while
some are the background
Felice Varini, 2013
M.C. Escher, 1946

34. The Gestalt Principles
34
Emergence Reification
Multistability
Invariance
These take a top-down (System 2)
approach to the Gestalt Laws

35. COLOR USE

36. Red and Green
36
Map of the Market, 2013

37. Color Use Guidelines for Data Representation
37
Brewer, 1999

38. Color and Meaning: the Vignelli NYC Subway Maps
38
Massimo Vignelli, 1972 Massimo Vignelli, 2013

39. Color and Meaning: Hospital Quality Performance Report

40. In Summary
Interfaces that rely on users’ System 1 (pre-attentive processing), will be
more intuitive
• Interaction guidance
• Information visualization
We do this by using existing design principles and by relying on perceptual
variables that we are good at discerning
• Design patterns = may involve learning
• Perceptual variables = innate skills
Take advantage of the mind’s strengths and avoid its weaknesses!
40

41. References
Bertin, Jacques. (1983). Semiology of graphics: Diagrams, Networks, Maps. University of Wisconsin Press.
[new edition ESRI, 2010]
Bertin, Jacques. (2001). Matrix theory of graphics. Information Design Journal. 10(1).
Bertini, E. (2009). No more excuses: a list of references to learn how to use color. Retrieved from:
http://diuf.unifr.ch/people/bertinie/visuale/2009/05/infovis_color_theory_in_few_li.html
Brewer, C. A. (1999). Color Use Guidelines for Data Representation, Proceedings of the Section on Statistical
Graphics, American Statistical Association. 55-60. Retrieved from:
http://www.personal.psu.edu/cab38/ColorSch/ASApaper.html
Cairo, Alberto. (2012). The Functional Art: An introduction to information graphics and visualization, New
Riders.
Cleveland, William S. & McGill, Robert. (1984) Graphical Perception: Theory, Experimentation, and
Application to the Development of Graphical Models. Journal of the American Statistical Association. 79(387),
531-554.
41

42. References
Healey, Chris. (2009). Perception in Visualization. Retrieved from http://www.csc.ncsu.edu/faculty/healey/PP/
Hunt, Amelia R. & Halper, Fred. (2008). Disorganizing biological motion. Journal of Vision. 8(9).
Kahneman, Daniel. (2011). Thinking Fast and Slow. Farrar, Straus, & Giroux.
Katz, Joel. (2012). Designing Information: Human Factors and Common Sense in Information Design. Wiley.
Stanovich, Keith E. & West, Richard F. (2000). Individual differences in reasoning: Implications for the
rationality debate? Behavioral and Brain Sciences, 23, 645-726.
Treisman, A. and Gelade, G. (1980). A feature-integration theory of attention. Cognitive Psychology, 12,
97-136.
Ware, Colin. (2004). Information Visualization. Morgan Kaufmann.
42