The Author

Susan Weinschenk has a Ph.D. in Psychology and her work involves applying research in brain science, and psychology to predict, understand and explain what motivates people and how they behave.

She is currently the Chief Behavioral Scientist and CEO at The Team W, Inc, as well as an Adjunct Professor at the University of Wisconsin.

Susan consults on with Fortune 1000 companies, start-ups, governments and non-profits, and is the author of several books, including How To Get People To Do Stuff, 100 Things Every Designer Needs to Know About People, 100 Things Every Presenter Needs to Know About People, and Neuro Web Design: What makes them click?

Susan has a column for Psychology Today online (the Brain Wise) and also a contributor of UX Magazine.

Key Takeaways

There are 100 things from the Susan Winschenk book, organised into 10 sections. But some are based on/ similar to Gestalt Theory, which I’m not going to note down again here.

「 HOW WE SEE 」

Vision trumps all the senses. Half of the brain’s resources are dedicated to seeing and interpreting what we see. What our eyes physically perceive is only one part of the story. The images coming in to our brains are changed and interpreted. It’s really our brains that are “seeing.” (e.g. Kanizsa triangle).

#1. Peripheral Vision

There are two types of vision: Central vision is what we use to look at things directly and to see details. Peripheral vision encompasses the rest of the visual field that we’re not looking directly (e.g. we could notice a bicycle approaching us fast from the side of the street even if we were looking straight forward).

People use peripheral vision when they look at a computer screen, and usually decide what a page is about based on a quick glimpse of what is in their peripheral vision.

#2. Fusiform Face Area

Although the visual cortex is huge and takes up significant brain resources, there is a special part of the brain outside the visual cortex whose sole purpose is to recognise faces: the fusiform face area (FFA). The FFA is also near the amygdala, the brain’s emotional center.

People are born with a preference for faces. Therefore they recognise and react to faces faster than anything else on the web pages (except for people with autism who do not use the FFA to view faces).

People look where the face looks. However, this doesn’t necessarily mean that they paid attention to it, just that they physically looked at it.

Faces looking right at people will have the greatest emotional impact on a Web page, probably because the eyes are the most important part of the face.

#3. Canonical Perspective

Stephen Palmer (1981) traveled around the world and asked people to draw a coffee cup. Only a few of the cups were sketched straight on, but most were drawn from a perspective slightly above the cup looking down.

What most people drew when asked to draw a coffee cup

It’s worth taking into account when we’re creating icons or geometric graphics, as people will tend to recognise the object quicker if it’s drawn this way (e.g. Mac “Trash” icon).

#4. The Invisible Gorilla

The Invisible Gorilla is an example of inattention blindness or change blindness. The idea is that people often miss large changes in their visual fields.

Be cautious about how we interpret eye-tracking data. Don’t ascribe too much importance to it or use it as the main basis for design decisions because eye-tracking data can be misleading for several reasons:

  • Eye tracking tells us what people looked at, but that doesn’t mean that they paid attention to it
  • Eye tracking measures only central vision, but peripheral vision is just as important as central vision.
  • Early eye-tracking research by Alfred Yarbus showed that what people look depends on what questions they are asked while they are looking. It’s therefore easy to accidentally skew the eye-tracking data depending on what instructions we give them before and during the study.

5. Chromostereopsis (Gizmodo)

We’re always using color to make inferences about an objects depth and position. Light and shade subtly change the color of objects, and let us know which parts of them are advancing or retreating.We notice that color can fade when it becomes very distant, and that at some distances different colors seem to blend together. Color is one of the cues that we use to understand the physical world.

Sometimes those cues, and that association of color with depth, can deceive us. Pair one color with another and, to our eyes, it will look like one color is floating in front of, or behind, the other. This is called chromostereopsis, and works with things like Rothko paintings. It does not work with things like graphic design. There is nearly always a 3D component to the colors (do you notice that the 3D glasses encode each eye’s image using filters of different, usually chromatically opposite colors, typically red and cyan?)

The effect is strongest with red and blue.

So it’s important to never pair green, red, and blue together on a page and expect people to read it.

#6. Color-Blindness

The term color blindness is actually a misnomer. Most people who are “color-blind” are not blind to all colors, but really have a color deficiency that makes it hard for them to see differences between some colors. Most of the color genes are on the X chromosome. Since men have only one X chromosome and women have two, men are more likely to have problems with color vision than women. According to colourblindawareness.org, 1 in 12 men and 1 in 200 women are colour blind and it is estimated that there is one colour blind student in every classroom!

There are 3 main types of color blindness: deuteran (green), protan (red) and tritan (blue). The following 15-color palette provides good discrimination for common color blindness types. Individuals with tritanopia cannot distinguish colors marked with ● and ◥

15 color-palette for color-blindness | Image Credit: Biovis

We can check images and web sites with colorfilter.wickline.org to see how they will look to someone who is color-blind.

「 HOW WE READ 」

With adult literacy rates now over 80 percent worldwide, reading is a primary form of communication for most people. But how do we read? And what should designers know about reading?

#1. Readability Score

There are several algorithms available for measuring readability scores, the most popular, used by The US Government Department of Defense as standard test, is Flesch-Kincaid formula (Microsoft Word does provide FK readability statistics under File > Options > Proofing).

Flesch Reading Ease is between 0 and 100 and is a result of a formula that factors in total words, total sentences, total syllables and a few other bits. Generally speaking, the higher the score, the easier the passage is to read.

The Flesch-Kincaid Readability Formula

Flesch-Kincaid Grade Level relates to the U.S. grade level, with the score showing what grade the reader would typically have to be in to understand the text.

In publishing industry, the ‘Gold’ standard for readability is 60+ on reading ease, 8.0 or less on FK score and less than 10% passive sentences (according to Up or Upside Down)

#2. Font Size

When it comes to fonts, size matters a lot. The font size needs to be big enough for users to read the text without strain.

Some fonts can be the same size, but look bigger, due to the x-height. The x-height is literally the height of the small letter x in the font family. Different fonts have different x-heights, and as a result, some fonts look larger than others, even though they are the same point size.

#3. Line Length

Mary Dyson (2004) conducted research on line length, and combined other studies to determine what line length people prefer. Her work showed that 100 characters per line is the optimal length for on-screen reading speed; but we prefer a short or medium line length (45 to 72 characters per line).

It’s important to hit that particular sweet spot in the number of characters per line for your website to look aesthetically pleasing. A study found that the majority of websites today actually average 83.9 characters a line at widescreen resolution (according to Bootstrap Bay’s Mark Schenker).

(to be continued)