See Also: Book Notes, (me), Notes on Consciousness, Happiness Hypothesis, Consciousness and the Brain, Barrett:HEAM, 7.5 Brain Lessons, Allostasis, Neuroscience of Human Relationships, Thinking, Fast and Slow Conceptual Spaces, Swarm Intelligence, Blank Slate, Long Now

Information Visualization: Perception for Design

Colin Ware

This book is a pragmatic guide to almost every issue relating to designing effective visualizations along with explanations of the whys and wherefores based on human perception. Sprinkled thru-out are concise guidelines - many of which are mentioned below.

While I have worked in computer graphics technology for 25 years (or 30 if you count the TTY plotter I did in high school) and I have designed and implemented a few UIs and debugged a few more, I do not consider myself a pro. So, I will claim that this book would be fascinating to anyone who knows what RGB stands for and is seriously curious about the human perception system.

The book zigs and zags from physics to screen appearance to neurons to colors to the visual cortex to the implications for good design. While I have been working on various aspects of human visual system, Colin Ware's book serves as a wonderful introduction to human visual perception because it is so grounded in its motivation.

What follows is not an attempt to capture or summarize the book, but, my own selfish attempt to make some of this stuff available so I can remember it while I'm at SIGGRAPH.

The section on color is robust - if you want more than this look to Maureen Stone's Field Guide to Digital Color.

Pragmatic guide to color choice (p.140) with these things to consider: color blindness; create ranges using color opponents - black-white, yellow-blue, red-green; for high levels of detail, use luminance; etc, Note: see codes for colors below

Visual Cortex

Viz WomanColin presents a Wonderful and simple description of the various parts of the visual cortex and how they can be exploited.

The diagram of the Macaque (p.13) and the layers of V1 and V2 (p.173) and the following exposition of how things work and how that can be exploited is great. Gabor Model p.176. Just as a teaser... There are specific cells that detect a given line angle, say 45 degrees, and lots more cells tuned to horizontal and vertical lines; cells tuned to detecting motion direction; cells tuned to detecting faces.

Left: Volume Rendered Visible Woman's optic chiasm & LGNs More on Visual System.

I started The Cognitive Neuroscience of Vision by Martha J Farah. That book desperately needs some diagrams. It is written for experts in the field and is extremely dense, but, that just means it is slow going for us lay folk. So slow going that I put it down for a while.

Pre-attentive processing

Pre-attentive processing (p. 163) based on from, color, motion, and spatial position:

You can use pre-attentive processing to cue the visual system to queue up certain graphical elements such that when the conscious attention does move to it, it is already recognized.

p. 203 Gestalt Laws from 1912. Gestalt is German for pattern. School of Psychology produced a set of laws for pattern perception. They describe proximity, similarity, continuity, symmetry, closure, relative size, and figure/ground.

On Page 225 are even more guidelines for diagrams. #1 closed contour for objects... #13 proximity for groups. Perhaps common sense... that comes with lots of experience.

glyph design using spatial, color, shape, orientation, texture, motion & blink. p.195

different depth cues (perspective, depth cue (fog), stereo...) work better and worse depending on the task! p.297 interesting!!!

images vs. words (p. 320) structure better visualized, abstractions better verbalized + many, many more guidelines. In the section on Word & Images - when to use which, there is a bit on brain regions and fMRI and verbal and visual processing.

Displaying Surfaces

p.268...shape from shading needs its own cheat sheet.

Note: definition of contrast p.61: (Lmax - Lmin)/(Lmax+Lmin)


Color codes for the swatches above

6x2 grid - same colors on white & black backgrounds
     0.310, 0.063, 0.294, // 4f104b purple 1,1
     0.325, 0.051, 0.070, // 530d12 dark red 1,2
     0.761, 0.380, 0.149, // c26126 grayish orange 2,1
     0.447, 0.435, 0.376, // 726f60 gray 2,2
     0.255, 0.277, 0.455, // 413a74 mid blue 5,1 
     0.788, 0.698, 0.090, // mustard 5,2 from https://www.jch.com/jch/notes/cwinfviz.htm
     // 47a1ab teal 3,1 - c45489 pink 3,2 - white/black 4/1,2 - 387124 green 6,1
     // 9c141e maroon 6,2


http://www.jch.com/jch/cwinfviz.htm 17-JUL-04 + color codes 2022-09-12 jch