Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Principles of Experience Design: Blending Art and Science


Published on

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.

Published in: Design, Technology, Education
  • Be the first to comment

Visual Principles of Experience Design: Blending Art and Science

  1. 1. Visual Principles of Experience Design:Blending Art and SciencePrepared by:Dan Berlin – Experience Research DirectorPaul Kahn – Experience Design DirectorMay, 2013
  2. 2. About This PresentationDan Berlin (left), Experience Research DirectorPaul Kahn (right), Experience Design DirectorLeaders in beard production at Mad*Pow(Dan specializes in brown, Paul in grey)AgendaWe are pattern seekersPerceptual variablesColor useMad*Pow design examples throughout2
  4. 4. Why Is This Important?4Our understanding of perceptual tasks drives the design of intuitive interfacesDan: A person does not have to think about seeing a patternPaul: Patterns of information create understandingDan: All design is based on the psychology of perceptionPaul: Good design occurs in the mind of the userDan: We receive information by perceiving differencesPaul: 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. 5. The Goal of Experience DesignBy making interfaces that are “intuitive” we are reserving active thinking tomaking 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 sensesAn interface is “intuitive” and (generally) aesthetically pleasing when it:•  Takes advantage of the mind’s strengths & avoids its weaknesses•  Doesn’t confuse System 15
  6. 6. Ok, that’s interesting, but give me an example6An interaction is intuitivewhen the user makes the least effort to grasp the significant difference.Easy Not as easy FuhgeddabouditTask: Find the red circleChris Healey, Perception in Visualization, 2009
  7. 7. PerceptionThe iris and lens change shape so thatlight can be focused on the retinaObjects are perceived when rods andcones detect changes in light and color3-dimensional space is perceived whenthe brain detects changes in retinaldisparityWe are change detectors(Which is why the red text stands out)8Rene Descartes, 1663
  8. 8. The Steps of Visual Cognition9Perception•  All based on changes in contrast: hue, brightness, and color palette•  We detect differences, physiologically and psychologicallySystem 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 discussionSystem 2: Cognition•  Serial (top-down) processing – one thing at a time•  Active thinkingPerceptionPreattentiveProcessingCognition
  9. 9. Pre-attentive Processing10Second 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 objectPre-attentive variables•  Proximity, similarity, connectedness, continuity, symmetry, closure, relative size, figure andground, 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)
  10. 10. DIKW Hierarchies (Data, Information, Knowledge, Wisdom)11The Functional Art, Alberto Cairo (2013)PerceptionPreattentiveProcessingCognition
  11. 11. Concepts We Learn from ScienceWe are pattern seekersWe order the visual patterns werecognizeWe store visual patterns thatinfluence our expectationsWhat we see is strongly influencedby our expectationsOur Sources:Cognitive Psychology, SocialAnthropology, Neuroscience12
  12. 12. We learn from Art & DesignOver five centuries of typographic practice:•  Legibility is achieved through spacing:character spacing, word spacing, & line spacing•  We see the difference betweennegative and positive space (contrast)•  Color comes from size and weight•  We use white to expose black13William Caslon, 1728
  13. 13. Lessons from Industrial Design:Symmetry, Rhythm and Repetition14Christopher Dresser, Toast Rack, 1879Christopher Dresser, The Art of Decorative Design, 1862
  14. 14. We scan, filter, interpret differences16Jerusalem. Directional signs in the Old City, 2013
  15. 15. We use differences to create understanding17Health Design Challenge, 2012
  16. 16. Intuitive does not mean “Like”Aesthetics is a matter of taste influenced by cultural preferenceIntuitive is a matter of cognitive response influenced by expectation18
  17. 17. Combining Intuition and Aesthetics19HotSeat app, 2013
  19. 19. Seven Visual Variables To Represent Data21Jacques Bertin, 1967 Benoit Martin, 2004•  Jacques Bertin (1918-2010): French cartographer and teacher•  Visual variables for quantitative information use to communicate differences
  20. 20. Carrying Capacity of Visual Variables227 colors: French high-speed train network, 2005 20+ colors: Paris Metro, 2012
  21. 21. Hierarchy of Perceptual Tasks23We are good at some tasks, but notothers•  Good at: position, length, direction•  Bad at: area (of a circle), volume,saturationThis is why you will see line or bargraphs to convey data•  This is why visualizations that rely on colortypically use a limited set of colorsCleveland & McGill, 1984
  22. 22. Conjoined Variables that Help and Hinder24Visual Scan
  23. 23. The Graph – A Basic VisualizationPosition on acommon scale(2 dimensions of theplane)Length (size)Shading (value)Area (size)Slope (orientation)Health Design Challenge, 2012
  24. 24. Dimensional ComparisonProximitySimilarityConnectednessContinuitySymmetryClosureRelative sizeFigure and groundIntensityCurvatureLine lengthColorOrientationBrightnessDirection of movement26Designing Information, Joel Katz (2013)
  25. 25. Displaying Quantity in LocationStatistical Chart showing the extent the population & revenues of thePrincipal Nations of Europe in the order of their MagnitudeThe Statistical Breviary, William Playfair, 1801
  26. 26. Comparing Area and Comparing Length28The Functional Art, Alberto Cairo, 2013
  27. 27. 29Comparing Area and Comparing LengthAesthetically pleasing and “interesting,” butdoes not convey the data as easily (have tocompare polygon areas)Bar graphs = simply judge the line lengths
  28. 28. The Gestalt Laws and Principles30The learnings of the Gestalt psychologists are typically referred to asthe “Gestalt Laws” or “Gestalt Principles”•  These aren’t two different sets of information – just two ways of looking at the same thingGestalt Laws•  Typically broken down into seven categories•  Closure, similarity, proximity, symmetry, figure/ground, common fate, & continuity•  May also hear about others: isomorphism or focal pointGestalt Principles•  Typically broken down into four categories•  Emergence, reification, multistability, & invarianceGood 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
  29. 29. The Gestalt Laws31Closure•  In our mind’s eye, we completeobscured or incomplete itemsSimilarity•  Items with a common attributetend to be visually groupedCurabitur a tellus ut elit sagittis pellentesque idsed sem. Sed porta sapien quis metus dignissimeu condimentum orci tristique. Nam laoreetaugue vel mi commodo at varius risus commodo.Nam rutrum vulputate dolor, sed dapibus enimcursus quis. Morbi suscipit enim ut metustincidunt et varius turpis pretium. Maecenasmolestie ultrices elit semper vulputate. Fuscepellentesque rhoncus fermentum.Proximity•  Items that are close togethertend to be grouped together
  30. 30. The Gestalt Laws32Common Fate•  Items moving together aregrouped togetherContinuity•  An overlapping item isperceived as one continuousitemSymmetry•  We perceive items assymmetrical wholes
  31. 31. The Gestalt Laws33Figure/Ground•  When perceiving, someitems are the focus, whilesome are the backgroundFelice Varini, 2013M.C. Escher, 1946
  32. 32. The Gestalt Principles34Emergence ReificationMultistabilityInvarianceThese take a top-down (System 2)approach to the Gestalt Laws
  33. 33. COLOR USE
  34. 34. Red and Green36Map of the Market, 2013
  35. 35. Color Use Guidelines for Data Representation 37Brewer, 1999
  36. 36. Color and Meaning: the Vignelli NYC Subway Maps38Massimo Vignelli, 1972 Massimo Vignelli, 2013
  37. 37. Color and Meaning: Hospital Quality Performance Report
  38. 38. In SummaryInterfaces that rely on users’ System 1 (pre-attentive processing), will bemore intuitive•  Interaction guidance•  Information visualizationWe do this by using existing design principles and by relying on perceptualvariables that we are good at discerning•  Design patterns = may involve learning•  Perceptual variables = innate skillsTake advantage of the mind’s strengths and avoid its weaknesses!40
  39. 39. ReferencesBertin, 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:, C. A. (1999). Color Use Guidelines for Data Representation, Proceedings of the Section on StatisticalGraphics, American Statistical Association. 55-60. Retrieved from:, Alberto. (2012). The Functional Art: An introduction to information graphics and visualization, NewRiders.Cleveland, William S. & McGill, Robert. (1984) Graphical Perception: Theory, Experimentation, andApplication to the Development of Graphical Models. Journal of the American Statistical Association. 79(387),531-554.41
  40. 40. ReferencesHealey, Chris. (2009). Perception in Visualization. Retrieved from, 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 therationality 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