The Visual Cortex And Design

Logo for HumanTech podcastDid you know that here is a part of the visual cortex that is sensitive just to a tilted line? Or that some people see millions more colors than the rest of us do? On this episode of Human Tech we talk about the strange and interesting science of vision and how it affects visual design.


HumanTech is a podcast at the intersection of humans, brain science, and technology. Your hosts Guthrie and Dr. Susan Weinschenk explore how behavioral and brain science affects our technologies and how technologies affect our brains.

You can subscribe to the HumanTech podcast through iTunes, Stitcher, or where ever you listen to podcasts.

The Next 100 Things You Need To Know About People: #109 — People Prefer Symmetry

Man with symmetrical face

Take any object—a photo of a face or a drawing of a circle or a seashell—and draw a line down the middle either horizontally or vertically. If the two halves on either side of the line are identical, then the object is symmetrical.

People rate symmetrical faces as more attractive. The theory is that this preference has to do with an evolutionary advantage of picking a mate with the best DNA.

Steven Gangestad (2010) at the University of New Mexico has researched symmetry and shown that both men and women rate people with more symmetrical features as more attractive. But symmetry isn’t only about faces: bodies can be more or less symmetrical, too.

So why do people find symmetry to be more attractive? Gangestad says it may have to do with “oxidative stress.” In utero, babies are exposed to free radicals that can cause DNA damage. This is called oxidative stress. The greater the oxidative stress there is, the greater the asymmetry in the face and/or body. From an evolutionary and unconscious viewpoint, people look for partners who have no DNA damage. Symmetrical features are a clue that someone has less DNA damage. As further proof, research shows that men who are rated more attractive have fewer oxidative stress chemicals in their blood.

So, when deciding what photos to use on your website, for example, choose pictures of people who are more symmetrical than less, since those people will be viewed as more attractive.

Measuring face symmetry — You can use a ruler to measure the symmetry of a face. Using the face at the top of this blog post as an example, you would:

  1. Measure the distance from the left edge of D1 to the centerline.
  2. Measure the distance from the right edge of D1 to the centerline. Write down the difference between the two lines. For example, if one side of D1 is .5 inch longer than the other side, write down .5.
  3. Take the same measurement for D2, D3, D4, D5, and D6. It doesn’t matter which side is longer or shorter. All your difference numbers should be positive—no negative numbers.
  4. Add up all the differences.
  5. The higher the sum of the differences is, the more asymmetrical the face. If the sum of all the differences is 0, then the face is perfectly symmetrical. The further from zero the total is, the more asymmetrical the face.

Gender differences — Men prefer symmetry in bodies, faces, and just about everything else, including everyday items, abstract shapes, art, and nature. But research by Kathrine Shepherd and Moshe Bar (2011) showed that women prefer symmetry in faces and bodies, but not as much as men for everything else.

  • If you’re designing for a primarily male audience, then pay special attention to symmetry, whether it’s in faces, bodies, natural or man-made objects, or product pages with TVs—try to use symmetrical objects and show them in an equal right/left and top/bottom view. Men will find symmetrical images most appealing.
  • If you’re designing for a primarily female audience, then symmetry in faces and bodies of people is the most important. You don’t have to be as concerned with making sure all the products are symmetrically displayed.

Why do people prefer symmetry in objects? — There might be an evolutionary advantage for preferring symmetry in a mate, but why do people prefer symmetry in objects? Some researchers have proposed that the brain is predisposed to look for symmetry, and so people see symmetrical objects faster and make sense of them faster. The theory is that this visual fluency with symmetrical objects makes people feel as though they prefer the objects. They may just find them easier to see and understand. But why this is true for men and not for women remains a mystery.

What about symmetrical web page designs? — Does the research on symmetry mean that your design should always be perfectly symmetrical? If you design a symmetrical layout, then you know that people will perceive it quickly and will more likely prefer it—especially if your target audience is men. On the other hand, if you go with an asymmetrical layout, then people will most likely be surprised by it. That may grab their attention initially, but the advantage of surprise and initial attention getting may be offset by fewer people liking it.

Here’s the research:

Gangestad, Steven W., Leslie A. Merriman, and Melissa Emery Thompson. 2010. “Men’s Oxidative Stress, Fluctuating Asymmetry, and Physical Attractiveness.” Animal Behaviour 80(6), 1005–13. doi: 10.1016/j.anbehav.2010.09.003.

Shepherd, Kathrine, and Moshe Bar. 2011. “Preference for Symmetry: Only on Mars?” Perception 40: 1254–56.

If you liked this article, and want more info like it, check out my newest book: 100 MORE Things Every Designer Needs To Know About People.

 

 

The Neuro-Aesthetics of Hillary’s Campaign Logo

logo for Hillary campaign
hillaryclinton.com

Yesterday Hillary Clinton announced her candidacy for President of the US, and before 24 hours went by I had a media request to talk about why people were reacting so strongly (in a negative way) to her logo.

I’m in the middle of writing my next book (100 MORE Things Every Designer Needs to Know About People) and I’ve just sent in the chapter on Visual Design which contains some new research on neuro-aesthetics — how our brain reacts to certain visual design elements.

Based on the research, here’s the brain science behind the vitriol:

People prefer objects with curves and you can even “see” the preference in brain scans. This field of study is called neuroaesthetics.

Moshe Bar (Director of the Cognitive Neurosciences Laboratory at Massachusetts General Hospital) and his team used images of everyday and abstract objects to see if people have a preference for objects with curves. In one of their early studies Moshe Bar and Maital Neta (2006) showed 140 pairs of objects. Some were concrete objects such as watches or couches (the A objects in the picture below), some were abstract objects (the B objects) and some of the objects had both curves and edges. These last objects acted as baseline controls (the C objects).

pictures of curved and angular objectsPeople gave higher “liking” ratings for the objects that had curves. Bar and Neta’s theory was that the sharp and angled images would convey a sense of threat.

Ed Connor and Neeraja Balachander took this idea into a neuro imaging lab. They took an abstract shape similar to the shape on the left in the picture below and then made a series of similar but elongated shapes as shown in the rest of the picture below.

picture of rounded and elongated shapes

Not only did people prefer the softly rounded shape like the one on the left — there was more brain activity in the visual cortex with shapes that were more curved and more rounded.

We could talk about the problems with red and blue on top of each other, which produces chromostereopsis too. I’ve got another blog post about that.

But from a brain science point of view, the main reason Hillary’s logo is getting a lot of negative comments?: NO CURVES!

If you’re interested in the research I’ve got some references below, and check out 100 MORE Things Every Designer Needs to Know About People  the new book which will be out in October of 2015 and is available for pre-order!

What do you think? No curves? Chromostereopsis? Something else?

References:

Bar, M., & Neta, M. (2006). Humans prefer curved visual objects. Psychological Science, 17(8), 645-648.

H. Leder, P.P.L. Tinio, and M. Bar (2011) Emotional valence modulates the preference for curved objects. Perception, 40, 649-655.

Paul J. Silvia and Christopher M. Barona, “Do People Prefer Curved Objects? Angularity, Expertise, and Aesthetic Preference”, Empirical Studies of the Arts 01/2009; 27(1):25-42.

Red Or Blue?: Research On Screen Color That May Surprise You

a red square and a blue squareHow does color affect our behavior when we are doing things online? Does it make a difference what the color background is? Does it depend on what we are reading or doing? Can you affect people’s decisions and behavior by changing the background color of a particular page or screen?

Research by Ravi Mehta and Rui Juliet Zhu from the Sauder School of Business at the University of British Columbia looks at these questions. In a fairly comprehensive set of different studies Mehta and Zhu found some interesting color effects. I describe the six studies below (but if you can’t wait for the punchline skip down to the “take-aways” section).

STUDY 1

In the first study people were first given anagrams to solve. Some of the anagrams used “avoidance” words, for example ‘prevent’, some of the words were “approach” words, for example ‘adventure’, and some were “neutral”, for example, ‘computer’.  Sometimes the words were on a red background and sometimes on a blue background. People solved the avoidance words faster when they were on a red background (compared to blue or neutral) and they solved the approach words faster when they were on a blue background (compared to red or neutral).

The second task in this study had people read brand descriptions and then rate each brand on a scale from 1 to 7. Some of the brand descriptions had a message of a negative outcome you would want to avoid – for example a toothpaste that would prevent cavities. Others had messages of approach – for example a toothpaste that whitens your teeth. When the brands were on a blue background people preferred brands that were described with the approach or positive description. When the brands were on a red background people preferred the brands that had avoidance messages.

STUDY 2

In the second study people were given a “detailed” task — memorizing words. They were given 36 words to memorize in 2 minutes. Then they were asked to recall the words 20 minutes later. For some people the background screen was red, others blue and others neutral. People who did the task with the red screen remembered more words correctly than people with the blue or neutral background. People with the blue background would remember as many words as red, but several of the remembered words were actually false (i.e., they were not in the set of words originally memorized).

In the second part of study 2 people completed a “creative” task – they were asked to come up with as many creative uses for a brick as they could in 1 minute. A panel of judges rated how creative the list was. Some of the people worked on a red screen, others blue, and others neutral. The color didn’t affect how many ideas people came up with, but people working with a blue screen had more creative solutions than those in the red or neutral.

STUDY 3

In Study 3 people were asked to read sets of names or addresses which were either identical or were slightly different. It was a proofreading task. The participants had to decide whether one name and address matched another. Some people did the task on a blue screen, others on red and others on a neutral color. The participants were also asked afterwards whether they were focusing on avoiding mistakes or going quickly. People working with a red screen were more accurate on the task than people working on a blue or neutral screen. People working on a red screen also were more likely to report that they were trying to avoid mistakes.

STUDY 4

In Study 4 people were given a sheet of paper with drawings of different parts. They were asked to use any five parts and use them to design a toy that someone age 5 to 11 would play with. The parts were printed in either red or blue. Judges (using black and white copies of the design) then rated the designs based on originality and novelty (creativity) vs. practicality and appropriateness (attention to detail). Red toys were judged to be more practical and appropriate than blue. Blue toys were judged to be more original and novel.

STUDY 5

In study 5 people were shown ads for a camera on a computer screen. The ad was presented with a background color of either red or blue. In some versions of the ad there were pictures that showed product details of the camera, for example the lens. Other versions included visuals that were not about the camera, for example, a road sign,  or a map, which would use creative thinking to connect the camera to a road trip. Participants rated the ads for their appeal and effectiveness. When the screen was red people rated the ad more highly when it included the specific product detail visuals. When the screen was blue then people rated the ad more favorably when the visuals were more conceptual.

STUDY 6

In study 6 people were given tasks in black font on a white background screen. They were told that one of the tasks required detailed and careful processing of information and that another would require creative, imaginative and “out of the box” thinking. They were asked to select which color, red or blue, they thought would enhance their performance on each task. People picked blue for BOTH tasks, i.e., they believed that blue would enhance their performance no matter what the task.

Here are my take-aways from this research:

  • If you are using a negative or fear message it will be more impactful if you use the color red. If you are using a positive message then use blue.
  • If you want people to do a detail-oriented task use a red background. If you want them to be creative use a blue background.
  • If you are highlighting detailed features of a product your message will be more persuasive if you use a red background. If you are highlighting concepts of how to use the product then the message will be more persuasive with a blue background.
  • People prefer blue backgrounds over red, even though red might make them get a task done more quickly. They are not aware of the effects that the colors are having.

IMPORTANT NOTE: These studies were all done in North America. There are cultural effects of color, so these results may NOT hold in different parts of the world.

What do you think? Are you willing to use red?

And if you like to read the research:

Ravi Mehta and Rui (Juliet) ZhuBlue or Red? Exploring the Effect of Color on Cognitive Task Performances. Sauder School of Business, University of British Columbia, 2053 Main Mall, Vancouver, BC V6T 1Z2, Canada. www.sciencexpress.org / 5 February 2009 / Page 1 / 10.1126/science.1169144

 

 

Top 10 Things Every Presenter Needs To Know About People: #3 – Multiple Sensory Channels Compete

Slide with too much text on itImagine that you are driving while listening to the radio and talking to a passenger sitting next to you. You are processing multiple sensory channels simultaneously. You are watching (the road), listening (to the radio and your friend), and thinking and talking. This doesn’t sound too difficult. People process multiple sensory channels all the time. But there is a limit. If one of the channels becomes complicated or difficult to process, then processing more than one channel can get very challenging. For example, what if there is a sudden storm while you are driving, and torrential rain makes it hard to see the road? It will start to get hard to pay attention to, or remember, what your friend is saying.

The visual channel trumps all others — Of all of our senses vision takes up the most area of our brains. Humans are very visual animals. So if there is something to listen to, or something to look at, looking will get first priority (an exception would be a large startling noise).

Listening and reading don’t mix well — During a presentation, there are two sensory channels that are most active: visual and auditory. Your audience might be looking at you while also looking at your slides. They are also listening to what you’re saying. If the slides are visuals that are easy to understand—such as photos, or diagrams that add extra context and meaning to the presentation—then the multiple channels are a positive experience for them. But if, instead, the slides are hard to read or complicated, then they will be distracted. In particular, the sensory combination of slides that are filled with text and a speaker who is talking is a bad combination. In order to understand the slides, your audience has to read. As soon as they are reading, they are not listening. Listening and reading are two sensory channels that compete with each other.

What to do instead of using wordy slides — You don’t have to use slides in a presentation:

  • Put your presentation together without slides first, then decide if any of your points would be enhanced by the use of a visual example or illustration.
  • If you use slides, use them for simple photos, diagrams, or illustrations.
  • Don’t put more than a few words of text on a slide. If people are reading, then they aren’t listening to you.
  • Know what to call slides with a lot of text on them? Your notes! If you feel you need slides with text, it’s probably because you need notes. Don’t show the audience your notes.

For more suggestions about how to be a great presenter, go to the rest of the posts in this series, and check out my latest book in the sidebar on the right: 100 Things Every Presenter Needs To Know About People

100 Things You Should Know About People: #51 — You React To Colors Based On Your Culture

US Map with ColorsMany years ago I worked with a client who had created a color map of the different business regions for their business, showing the total revenue for the quarter for each region. Yellow was for the Eastern part of the US, green for the Central, etc. They had used red for the western states. The VP of Sales gets to the podium and starts his slide show to the financial and accounting staff of the company. Up comes the colored map. A gasp can be heard in the auditorium, and then there is the buzz of urgent conversation. The VP tries to continue his talk, but he has lost everyone’s attention. They are all talking amongst themselves. Finally someone blurts out, “What the heck is going on in the West?!” “What do you mean?”, the VP asks, “Nothing is going on. They had a great quarter”.

What does red mean? — To an accountant or financial person red is a bad thing. It means that they are losing money. The presenter had to explain that they had just picked red as a random color.

Colors have associations and meanings — Red means “in the red” or financial trouble, or it could mean danger. Green means money, or “go”. You want to pick colors carefully since they have these meanings.

Color meanings change by culture — Some colors have similar meanings everywhere, for example, gold stands for success and high quality in most cultures, but most colors have different meanings in different cultures. For example, in the US, white stands for purity and is used at weddings, but in other cultures white is the color used for death and funerals. David McCandless of Informationisbeautiful.net has a color chart that  shows how different colors are viewed by different cultures.

McCandless Color Wheel
McCandless Color Wheel

Take-Aways:

  • Choose your colors carefully, taking into account the meaning that that color may invoke.
  • Pick a few major cultures/countries that you will be reaching with your design and check them on the cultural color chart from David McCandless to be sure you do not have some unintended color associations for that culture.

What do you think? What color meanings have you found in your work that surprised you?

100 Things You Should Know About People — #50: 9 Percent Of Men And .5% Of Women Are Colorblind

Lays potato chip bag with blue/yellow color blind filterThe term color blindness is actually misleading. 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.

Different types of color blindness — There are many different kinds of color blindness, but the most common is a difficulty distinguishing between reds, yellows, and greens. This is called “red-green” color blindness. Other forms, such as problems distinguishing blues from yellows, or where everything looks grey, are very rare.

What people see – Let’s compare what people see who have different types of color blindness. I’ve put three different screen captures from a post at this blog. The first picture below is  how it appears to someone who has no color blindness, the second is how it appears to someone with red-green color blindness, and the last one is how it appears o someone with blue-yellow color blindness.

My blog with regular colors


My blog with red green filter

My blog with a blue/yellow filter


When colors become a communication problem — So what’s the big deal you might be saying? What colors you use in your photos, illustrations, maps, etc, can become problematic if you are trying to communicate information via the colors. For example, here is a map of winter driving conditions in Wisconsin that has color coding. And below that is a map that shows what it looks like if you have  red/green color blindness.

Map of winter driving


Map with red/green filter

If you are going to use color as a way to communicate — then you need to have a redundant coding scheme, for example color AND line thickness so that people who are color blind will be able to decipher the coding without needing to see specific colors.

Or pick colors that work or everyone — Another approach is to pick a color scheme that will work for people who have the various types of color blindness. In the example below they have purposely picked colors that look the same for people regardless of the type of color blindness they have, and even if they are not color blind.

Map with colors that work for everyone

You can test your colors — You can use websites to check for color blindness effects.

www.vischeck.com

colorfilter.wickline.org

What do you think? What approach do you use to make sure your images work for people who are color blind?

100 Things You Should Know About People: #49 — The Brain Looks For Simple Patterns

Examples of geons and objects

What do you see when you look at the x’s below?

xx    xx    xx    xx

Chances are you will say you see four sets of 2 x’s each. You won’t see them as 8 separate x’s. You interpret the white space, or lack of it, as a pattern.

People are great at recognizing patterns Recognizing patterns helps you make quick sense of all the sensory input that comes to you every second. Your eyes and your brain will want to create patterns, even if there are no real patterns there. Your brain wants to see patterns.

Individual cells respond to certain shapes In 1959, two researchers, Hubel and Wiesel showed that there are individual cells in the visual cortex of your brain that respond only to horizontal lines, other cells that respond only to vertical lines, other cells that respond to edges, and cells that respond only to certain angles. (In 1981 Hubel and Wiesel won a Nobel price for their work on vision).

The Memory Bank Theory Even with Hubel and Wiesel’s work in 1959, for many years the prevailing theory of pattern recognition was that you have a memory bank that stores millions of objects, and when you see an object you compare it with all the items in your memory bank until you find the one that matches.

You recognize objects by simple shapes – But research now points to the idea that we recognize certain basic shapes in what we are looking at, and we use these basic shapes, called geons, to recognize objects. Irving Biederman came up with the idea of geons in 1985. It’s thought that there are 24 basic shapes that people recognize, and that these shapes are the building blocks of the objects we see and identify.

The picture at the beginning of this article shows examples of Biederman’s geons and how they are incorporated into objects for pattern recognition.

Take-Aways:

  • Use patterns as much as possible, since people will automatically be looking for them. Use grouping and white space to create patterns.
  • If you want people to recognize an object quickly, use a simple geometric drawing of the object. This will make it easier to recognize the underlying geons, and thus make the object easier and faster to recognize.

What do you think? Have you tried using simple shapes to create your drawings and icons for people to recognize?

And for those of you who like to read the research:

Biederman, I., Human Image Understanding: Recent Research and a Theory in Computer Vision, Graphics and Image Processing, 1985, Elsevier.

100 Things You Should Know About People: #48 — What You See Is Not What Your Brain Gets

Can you read this?:

Aoccdrnig to rscheearch at Cmabrigde Uinervtisy, the oredr of lteetrs in a wrod is nto vrey iprmoetnt. Waht mttaers is taht the frist and lsat ltteer be in the rghit pclae. The ohter letetrs can be a ttoal mses and you can sitll raed wthuot mcuh probelm. Tihs is bcauseae yuor brian deos not raed ervey lteter, but raeds wrods and gruops of wrods.

I came across a similar paragraph in a book on Cognitive Psychology (Solso, 2005).

What our eyes see is not what our brain ends up with — We think that we are walking around looking at the world around us with our eyes, and that our eyes are sending information to the brain which processes it and gives us a realistic experience of “what’s out there”. But the truth is that what our brain comes up with is not exactly what our eyes are actually seeing.

The great interpreter — Our brain is constantly interpreting everything it sees. Take, for example, the picture below:

Gestalt illusion

What do you see? Your first reaction is probably that you are looking at a triangle with a black border in the background, and a white triangle upside down on top of it. Of course that’s not really what is there, is it? What’s there are some partial lines and some partial circles. Your brain creates the shape of an upside down triangle out of blank space, because that is what it is expecting to see. This particular illusion is called a Kanizsa triangle, named after an Italian psychologist (G. Kanizsa) that first came up with it in 1955.

Shortcuts to the world — Our brains create these shortcuts in order to try and quickly make sense out of the world around us. There are so many (millions) of sensory inputs coming into our brain every second, that it has to try to make it all make sense. So it uses rules of thumb, and extrapolates what it has experience with, to make guesses about what it is seeing. Most of the time that works, but sometimes it causes errors.

What you design may not be what people see — The take-away is that what we think people are going to see may not be what they do see. It might depend on their background, knowledge, familiarity with what they are looking at, and expectations. Conversely, we might be able to persuade people to see things in a certain way, depending on how they are presented. Here’s another example from the Solso book:

Stop War, Peace Now

By using different colored backgrounds we can draw attention and change the meaning of the sign.

What do you think? Do you think designers use these principles to draw attention on purpose? If you are a designer do you use these ideas? If we can read so well with all these misspellings, are typos even a problem?

Here’s the Solso book reference: Cognitive Psychology, edited by Solso, 7th edition, Allyn and Bacon, 2005.

———————————

Did you find this post interesting? If you did, please consider doing one or more of the following:

add your comment
subscribe to the blog via RSS or email
sign up for the Brain Lady newsletter
share this post

100 Things You Should Know About People: #28 — Things that are close together seem to belong together

Do you want a quick and easy way to make any web page easier to use and more intuitive? If you want people to realize that two things “belong” together, then put them near each other (close proximity), and put other things a little further away. Sounds simple, right?  Many usability and user experience principles are complicated and may take significant time and energy to accomplish. This is one of the easier ones!

Let’s take a look at some web sites for examples:

In the image below of the Crutchfield page, there is a gray arrow that ends up being very close to the text on the left that says, “connect with a true audiovideo specialist”. Because that arrow is so close to the text (and actually appears to “point” to the text), the text and pictures “belong” together and become connected (as they should).

picture of Crutchfield web site

At the Global Giving website, the amount of space between text and pictures that are supposed to “go together” is about the same as the amount of space between items. This makes it less clear what text goes with what picture.

Picture of Global Giving website

In the MSNBC website the spacing between headers and photos are all even. It is not clear at a glance what headline goes with what photo.

Picture of MSNBC website

Continue reading “100 Things You Should Know About People: #28 — Things that are close together seem to belong together”