docColor design - Maureen Stone
download 
Report Transcription
Color design - Maureen Stone
AIM Institute & Gallup Organization Omaha NB 9/14/2007 Color design From seeing red to feeling blue Maureen Stone StoneSoup Consulting Woodinville, WA www.stonesc.com Published by AK Peters, 2003 Color in Information Display Graphical presentation of information • Charts, graphs, diagrams, maps, illustrations • Originally hand-crafted, static • Now computer-generated, dynamic Color is a key component www.nps.gov Emotional Design Emotion, not just function Victoria Interrante and Chester Grosch, U. Minnesota Image courtesy of Siemens Image courtesy of the American Museum of Natural History and the San Diego Supercomputing Center • Attractive things work better • Compensates for lack of function • People choose with their emotions Don Norman, Emotional Design Image courtesy of Los Alamos National Lab Maureen Stone, StoneSoup Consulting 1 AIM Institute & Gallup Organization Omaha NB Emotional Color? Color & Language Can we predict behavior from color preferences? Colorgenics Profile, Lüscher Colour Test Do colored environments affect behavior? • Calm or stimulate behavior? • Make the room feel warmer or cooler? • Affect what and how much people buy? Are there inherent color “messages?” • At a psychological level? • At a cultural level? • At a marketing level? 9/14/2007 Language for color Black, white, gray • Color names (simple & complex) Red, green, blue, yellow • Basic names (Berlin & Kay) Orange, purple, brown, pink Color in language • • • • • • Seeing red, red-letter day Feeling blue, true blue Green-eyed monster Purple prose, purple heart Yellow streak, white feather Black-hearted, in the black FactMonster.com Colorful language Color and Moods ColorVoodoo, Colorcom How important is color? Does color add any information? Which would you rather look at? People LIKE color Visualization of isoelectron density surfaces around molecules Marc Levoy (1988) Maps courtesy of the National Park Service (www.nps.gov) Maureen Stone, StoneSoup Consulting 2 AIM Institute & Gallup Organization Omaha NB 9/14/2007 Norman’s Design Levels Visceral • “I want it…what does it do?” • Immediate emotional response Behavioral People Like Color • User, task, solution • Functional design • Feels good to use Reflective • Message, culture, meaning • Reflects self-image • Thought & emotion “Made in the Shade” Color Marketing Group “Good ideas executed with superb craft” —E.R. Tufte, Envisioning Information What creates good color design? Aesthetics Perception Materials Materials: Pigments & Paints Materials: Dyes Organic molecules Scattered light • Biological origin (snails, bugs, plants, etc.) • Synthetic (William Perkin) • Dyed pigments are “lakes” The Bright Earth, Philip Ball Maureen Stone, StoneSoup Consulting Mauve, Simon Garfield 3 AIM Institute & Gallup Organization Omaha NB 9/14/2007 Print & Film Light Summed spectra Layered color • • • • CMY primaries Film: dye layers Print: Halftone patterns Black for contrast • RGB primaries • Displays, projectors • Basis for digital color LCD Display Materials Perception CRT Display Aesthetics Physical World Visual System Mental Models Lights, surfaces, objects Eye, optic nerve, visual cortex Red, green, brown Apple, leaf, bark Stop, go, state park Warm, cool, neutral Attractive, ugly, blah Color design Powerful, nurturing, … “Perceptual” Color Spaces Physical World Visual System Mental Models Light Energy Cone Response Opponent Encoding Perceptual Models Appearance Models Spectral distribution functions Encode as three values (L,M,S) Separate lightness, chroma Color “Space” Color in Context F(λ) CIE (X,Y,Z) (A,R-G,Y-B) Hue, lightness saturation Adaptation, Background, Size, … CIELAB Munsell (HVC) CIECAM02 Hue • Color’s “name” • Angular scale Lightness (brightness) • Linear scale • Black to white Chroma (saturation) • Intensity or purity • Radial scale Lightness Chroma Hue Maureen Stone, StoneSoup Consulting 4 AIM Institute & Gallup Organization Omaha NB 9/14/2007 Art & Design Munsell Atlas Hue (color wheel) • Opposites complement (contrast) • Adjacent are analogous • Many different color wheels* *See www.handprint.com for examples Chroma (saturation) • Intensity or purity • Distance from gray Value (lightness) • Dark to light • Applies to all colors, not just gray Wucius Wong, Principles of Color Design Courtesy Gretag-Macbeth RGB: Pseudo-Perceptual Models HLS, HSV (HSB) NOT perceptually accurate Do NOT predict perceived lightness (Value or Luminance) “Color is the most relative medium in art.” —Josef Albers, Interaction of Color Hue: 110 Sat: 255 Lum:128 yellow Hue: 160 Sat: 100 Lum:128 Effective Color Design “Good painting, good coloring, is comparable to good cooking. Even a good cooking recipe demands tasting and repeated tasting while it is being followed. And the best tasting still depends on a cook with taste.” —Josef Albers Use color for a purpose • • • • Identify your information & messages Identify its function Assign relative importance Map colors accordingly Design using contrast & analogy • Contrast emphasizes • Analogy groups • Legibility, attention & layering Design, test, evaluate Practice, practice, practice Maureen Stone, StoneSoup Consulting 5 AIM Institute & Gallup Organization Omaha NB Envisioning Information 9/14/2007 Fundamental Uses “… avoiding catastrophe becomes the first principle in bringing color to information: Above all, do no harm.” —E. R. Tufte To To To To label measure represent or to imitate reality enliven or decorate www.edwardtufte.com Color and Function Color and Function To label To evoke nature • Primarily hue variation • Associated with color names • Metaphor, symbolic • Illustration: distilled experience To measure • Vary lightness & chroma • Map to data distribution ColorBrewer Cynthia Brewer, Pennsylvania State University Color and Function To decorate, beautify • Emotional design • Visceral & reflective Contrast and Analogy Contrast & Analogy • Contrast (difference) separates • Analogy (similarity) groups Hue, chroma, value Maureen Stone, StoneSoup Consulting Value only 6 AIM Institute & Gallup Organization Omaha NB Get it right in black & white 9/14/2007 Controls Legibility Value defines shape • No edge without lightness difference • No shading without lightness variation Value difference (contrast) • Defines legibility • Controls attention • Creates layering Creates robustness colorusage.arc.nasa.gov • Across viewers • Across media Can you read this? Can you read this? Can you read this? Must have value contrast, NOT just hue contrast Can you read this? Creates Layers In brief “Get it right in black & white” Use neutral backgrounds Urgent Context Normal Normal Context Urgent Context Normal Urgent Context Normal Normal Context Normal Context colorusage.arc.nasa.gov • Grays or near gray • RGB all nearly equal • Prefer light backgrounds Avoid overly saturated colors • RGB: No values are zero • Exception: yellow Use hue contrast sparingly • Small differences are fine • If many hues, then use similar value, saturation Tableau Case Study Design color for Tableau Software “Visual Analysis for Everyday Data” Task • Design color palettes • Collaborate on color selection UI Goals • Aesthetic “business graphics” • Robust across displays and users • UI encourages good practice, but allows choice Maureen Stone, StoneSoup Consulting 7 AIM Institute & Gallup Organization Omaha NB Color design tasks Categorical color palettes + UI • Color as label • Distinctly different, similar visual weight • Scatter plots, line graphs, bar charts, text Quantitative color palettes + UI • Color as quantity • Sequential and diverging scales • Heat maps, scatter plots (but could be any above) Formatting colors + UI 9/14/2007 Global Issues Subtlety vs. robustness What can we assume about the display? Not calibrated (except mine) Clarity vs. expressiveness How many colors? What about the “color blind?” Simplicity vs. power in the UI Optimized for good practice Data-to-color control, not color control • Color to decorate (also group and label) • Row, column and header shading • Annotations (lines and text) Categorical Colors Issues Sample pages Color palettes • How many? Algorithmic? • Extensible? Customizable? Color appearance • As a function of size • As a function of background Robust and reliable color names UI to encourage good practice ― But, must allow for personal expression Sample pages Categorical Colors 10 basic colors • Simple names • Increase number with lightness variation Designed to balance • Legibly colored dots, lines and text • But not too gaudy for bars • Tasteful, yet colorful Questions • What are parameters for legibility? • Can we adapt color to size? • Richness vs. clarity Maureen Stone, StoneSoup Consulting 8 AIM Institute & Gallup Organization Omaha NB Tableau names Basic names (11) • Black, white, gray • Red, green, blue, yellow • Orange, purple, brown, pink 9/14/2007 Palette-based UI 1. Select whole palettes 2. Individual colors from different palettes 3. Standard color picker Tableau names (10) • Minus black & white • Plus teal • Yellow => gold Formatting Colors …Fix this Formatting Color Issues Taste and style • Aesthetic, professional • Lots of choices Shading colors • How light can we go? • Visibility in the UI Annotation colors • Text legibility • Different from data colors • Harmonious with formatting, data colors Limited space and time for UI implementation Maureen Stone, StoneSoup Consulting 9 AIM Institute & Gallup Organization Omaha NB UI Evolution Maureen Stone, StoneSoup Consulting 9/14/2007 Expanded Palette 10 AIM Institute & Gallup Organization Omaha NB 9/14/2007 Quantitative Color Issues Color sequences • What colors, what sequences? • Continuous or quantized? (and how?) • Work at all sizes, and in isolation Real numeric data • All distributions, including outliers • Can’t visualize the histogram UI to encourage good practice • UI must be simple, not intimidating • Users not expert in color or statistics Ramp Design Color Brewer Start with Brewer ramps • Available as RGB • Not calibrated Modify • For sRGB • Eliminate darkest colors • Reduce hue shift Interpolate • Custom Python code • CIELAB, RGB • Piecewise linear From ColorBrewer www.colorbrewer.org Sequential Ramps Maureen Stone, StoneSoup Consulting Diverging Ramps 11 AIM Institute & Gallup Organization Omaha NB Data Distribution 9/14/2007 Proportional Distribution Skewed Data Slightly negative www.tableausoftware.com Mapping Census 2000: The Geography of U.S. Diversity Full Range Stepped Skewed Data Skewed Data Threshold Skewed Data StoneSoup Consulting, 2005 Maureen Stone, StoneSoup Consulting 12 AIM Institute & Gallup Organization Omaha NB Quantitative UI 9/14/2007 Color Vision Deficiencies (CVD) Non-standard cone (SML) response • Genetic • Medical • Mild to missing Three modes • L-weak (protanope) • M-weak (deuteranope) • S-weak (tritanope) Modeled in opponent space • Achromatic axis • R-G and Y-B axis Incidence of CVD Monochromacy - 0.003% Dichromacy • Protanopia 1% • Deuteranopia 1.1% • Tritanopia 0.002% Vischeck Simulates dichromatic color vision deficiencies • Web service or Photoshop plug-in • Robert Dougherty and Alex Wade vischeck.com Anomalous trichromacy • Protanomaly 1% • Deuteranomaly 4.9% • Tritanomaly - Total - 8.005% R. W. G. Hunt. Measuring Colour. Fountain Press,1998. Maureen Stone, StoneSoup Consulting Deuteranope Protanope Tritanope 13 AIM Institute & Gallup Organization Omaha NB Smart Money 9/14/2007 Tableau Palette protanope deuteranope luminance Additive Color Accommodation Combine red, green, blue lights No color set that works for all viewers Even accommodating most common is limiting Options: Primaries • red • green • blue • Minimize dependency on color • Double encode • Provide choices/customization Image STOP White light White light White light Subtractive Color Filter white light to modulate R, G, B Primaries • cyan • magenta • yellow Image Color Filters white light Maureen Stone, StoneSoup Consulting 14
