Susan M. Weinschenk's Blog, page 10

100 More Things #109: PEOPLE DECIDE ABOUT A DESIGN IN A SPLIT SECOND

It’s ironic. You spend hours, days, weeks, or even months working on the visual design of an infographic or a website. Yet research by Katharina Reinecke, Lane Harrison, and the team at the University of Michigan shows that people make lasting judgments about the design’s appeal in 500 ms (one-half of a second) or less.

According to their research, this first impression sticks and influences later opinions about the usability and trustworthiness of the website or product.

Reinecke (2013) and her team started by collecting web pages in various languages.

They selected 450 websites, with a range of visual complexity and use of color. They analyzed each page on a variety of metrics, such as hue, saturation, color intensity, symmetry, balance, and equilibrium.

Next they validated these metrics by showing the websites to the participants for 500 ms, and had the participants rate them: 184 people rated 30 websites for visual complexity, and 122 rated 30 websites for colorfulness. (They tested all 450 websites, but each person rated only 30.)

Now the team had 450 websites with validated metrics. The last part of the study was to show the websites for 500 ms to a new group of people. Instead of rating for complexity or colorfulness, however, these people rated the websites on visual appeal. The team tested 242 people in this phase of the experiment.

So what were the results for the visual appeal ratings of websites?

Visual complexity was the most important factor in a website being rated as visually appealing. Most appealing were websites of low to medium visual complexity. High visual complexity resulted in the lowest visual appeal scores.Participants older than 45 liked websites with a low visual complexity more than the other age groups.Participants with a PhD didn’t like websites that were highly colorful; the same was true of those with only a high school diploma.There were no significant differences between men and women.

Testing Infographics Instead Of Websites

Harrison, Reinecke, and Remco Chang (2015) used the same methodology to test 330 infographics for visual appeal. They had 1,278 participants rate infographics after viewing them for 500 ms.

The results for the infographics visual appeal ratings were as follows:

There was a lot of variability in the infographic ratings. Only a few of the 330 infographics were universally appealing. Unlike the website research, infographics that some people rated very highly were rated very low by others.As with the websites, colorfulness and visual complexity were the important variables when it came to judging a design as visually appealing. However, with the infographics, colorfulness was more important than visual complexity—the opposite result of the website ratings.Looking at the data overall, infographics that were colorful were rated as more appealing. However, there’s an important effect hidden in the color data: men didn’t like the colorful infographics, and women did.There were also gender effects for complexity. Visual complexity didn’t affect men’s ratings of visual appeal, but women tended to like infographics that were less complex.Most people did not like infographics with a lot of text, but women were more affected by this than men. The amount of text was not a strong influence for men, but the women preferred infographics with more images.Education had a small effect. The more education a person had, the more they preferred less colorful and less complex infographics. But gender was a stronger effect than education.

Designing For An Audience

It’s probably not news to you that not everyone reacts to visual design in the same way. But sometimes designers unconsciously start designing what they think works well, rather than taking the target audience into account.

Depending on what you’re designing, and whom you’re designing for, you may want to consider changing the complexity, the amount of color, or even the amount of text. Be careful of using your aesthetic when making these decisions. You may not be representative of your target audience.

Takeaways

People tend to make quick and lasting decisions about design, so make sure your design has quick and unconscious visual appeal.When designing a website, don’t underestimate the importance of visual complexity. Research shows visual complexity is the most important variable people use in deciding how visually appealing your site is, and gender doesn’t matter when it comes to visual complexity and website design.When designing a website, use low to medium visual complexity for maximum appeal.When your target audience is mainly people over age 45, reduce the visual complexity of the design.When you’re designing an infographic and your target audience is primarily men, use less color.When you’re designing an infographic and your target audience is primarily women, reduce the visual complexity and use less text.

100 More Things #108: DIRECT GAZE CAN BACKFIRE

If you’ve ever worked with a coach to improve your ability to communicate persuasively, you probably learned how important it is to look directly at people when you’re talking to them. The rule of thumb is that looking at someone directly when you’re speaking makes you appear confident. It makes your message more persuasive.

It turns out that, in some situations, direct gaze can backfire and actually be less persuasive.

Frances Chen (2013) and her team put this idea to the test using videos of people speaking. In a series of studies, participants watched videos of people talking about controversial political topics. Here’s what Chen found:

If participants agreed with the speaker’s message, then they spontaneously looked at the speaker’s eyes.If participants disagreed with the speaker’s message, then they tended not to look at the speaker’s eyes.If the speaker was angled slightly away and did not maintain eye contact with the camera, then participants were more likely to be persuaded by the speaker and change their opinion.If participants were told to watch the speaker’s eyes and the participants did not agree with the speaker, then they did not change their opinion on the topic.If participants were told to watch the speaker’s mouth rather than their eyes, then the participants were more likely to be persuaded to change their opinion.

In her discussion of the research, Chen refers to the idea that direct gaze is used in two different ways. One is “affiliative.” People look directly at the speaker when they’re being social, when they want to engage with the speaker, and when they’re open to affiliation or agreement with the speaker.

But another way that people use direct gaze is to intimidate. If people don’t agree with what the speaker is saying and if the speaker is looking right at them, the gaze will seem more confrontational than affiliative. If the gaze is confrontational, then people will be on guard and defensive, and the gaze will not be persuasive.

Designers often have to make decisions about whether to use a photo that involves direct gaze. Video producers have to make decisions about whether to shoot promotional videos with someone speaking directly into the camera or off to the side. The answer based on the research is “it depends.” It depends on whether the message is controversial, and whether the people watching the video are most likely already in agreement with the speaker, or if the speaker is trying to persuade them.

Use the flowchart in Figure 8.1 to help you decide whether or not to use an image or speaker with direct gaze.

FIGURE 8.1 A flowchart for direct gaze decision.

Takeaways

When your target audience might not agree with the message, use an image of an individual who is gazing slightly off to the side.When your target audience agrees with your message, you can use direct gaze.When the purpose of your message is to connect in a social way (and not to persuade) and when the message is not controversial, you can use direct gaze.

100 More Things #107: EMOTION VS. GAZE DIRECTION: EMOTION WINS

Imagine you’re looking at a screen showing a picture of a person looking at a product, like the picture shown in Figure 7.1.

FIGURE 7.1 An image of a person looking at a product.

Will your gaze go to the same place as the gaze of the person in the picture? The answer is yes.

But there’s more to this than there may first appear to be.

The Influence Of Gaze Direction

Anecdotal evidence shows that people will follow the gaze of a person in a photo. Most of this evidence is based on heat map and/or eye tracking data.

There is a peer-reviewed study by Giovanni Galfano (2012) that backs up the gaze direction claims, but the research has an interesting add-on result. Galfano and his team told participants that they would see a shape appear on a screen, on either the left or right. When the shape appeared, the participants were supposed to press the space bar as quickly as possible.

In some of the trials, the participants would simply see the shape and press the space bar. But in others, two things would happen before the target shape appeared. First, the word “left” or “right” (in Italian, as this study was conducted in Italy) would appear in the middle of the screen. The word was always an accurate clue as to where the target shape would appear. But between the display of the word and the display of the target shape, another clue would display. This was a cartoon face in the middle of the screen, looking either left or right. Sometimes the face gave a correct clue; sometimes the face looked to the right, but the target shape appeared on the left, or vice versa. The words were always accurate, but the cartoon’s gaze was not always accurate.

In a second version of the study, an arrow pointed to the left or right instead of a cartoon face gazing to the left or right.

The participants were told to pay attention to the words “left” and “right” and to ignore the faces and arrows. Of course they couldn’t ignore them. When the faces or the arrows appeared and looked in the wrong direction from where the target shape showed up, the participants took more time to press the space bar. The participants were trying to, but couldn’t, ignore the face or the arrows.

So isn’t this evidence that we look in the same direction the face is gazing or the arrow is pointing? Well, yes, but…

Is Looking The Same As Taking Action?

Galfano suggests that if you’re designing an ad, a product page, or a landing page, you could use a picture of person, a cartoon face, or an arrow all gazing or pointing in a certain direction. And now you know that any of those cues will increase the likelihood that visitors will look there too. But will they take action? Will they press a button? Will they fill in a form? Sometimes you want people to do more than look in a particular direction. You want them to take an action, press a button, or click on a link. Is gaze the best way to do that?

Scientific research is slim on this question, but Jon Correll from Conversion Voodoo (www.conversionvoodoo.com) did some A/B testing that lays out a model for testing what gets people to take action.

Correll’s hypothesis was that conveying emotion is more effective in getting people to take action than having the viewer look in a certain direction. Correll did a series of landing page tests. He kept the landing page the same for each test and changed only the picture of the person. He did the test with over 150,000 unique visitors, and tested ten different images. Each image was of the same model, wearing the same color (white), but it varied in the direction she was facing, her use of arms and pointing, and her facial expression. Sometimes she looked at the call to action, but other times she looked directly at the viewer. Sometimes she pointed to the call to action, but sometimes she didn’t. In every picture, the model looks happy, but in some she looks much more animated and excited than others.

Figure 7.2 shows Correll’s baseline image. He measured the percentage of visitors who pressed on the call to action of the landing page with this image—where the model is looking at and gesturing toward the call to action—and then compared that to all the other images.

Figure 7.3 shows the other images that were tested. The percentage on each image displays how much better or worse each image was in getting visitors to click in comparison to the baseline image. Images with red numbers did worse than the baseline. Images with yellow numbers did somewhat better than the baseline. And images with green numbers did much better than the baseline.

Beautiful young mixed asian / caucasian woman presenting your very exciting product. Isolated on white.

FIGURE 7.2 Jon Correll’s baseline image (Research by Jon Corell).

FIGURE 7.3 The gaze images that were tested.

These results are not conclusive, but there’s a trend. Pointing is better than not pointing. Gazing is better than just looking straight ahead. But there’s one critical caveat: high emotion seems to be best of all.

Takeaways

When you want people to look at a particular place on a screen or page, put a picture of someone who looks really excited next to the part of the page where you want people to look.Although it’s true that people will look where a face is looking, when you use a face that’s displaying a lot of emotion, people are more inclined to take action.If you don’t want to use a picture of a person gazing at a certain spot, you can use an arrow pointing to where you want your audience to look. An arrow is just as effective as a gazing face, but neither is as effective as a face displaying positive, excited emotion.

100 More Things #106: PERIPHERAL VISION IS LIKE A LOW RESOLUTION IMAGE

Let’s go back to the scenario where it’s 11:00 a.m. on a Saturday and you’re at home in front of your laptop browsing the Internet. If I ask you what you’re seeing in your central vision at any particular time, you could probably describe it fairly well. You might say, “I’m looking at text on a page. I’m reading the word ‘The’ and I see that the capital T is a vertical line with a shorter horizontal line on top.”

But what if I asked you to describe what you’re seeing in your peripheral vision while you’re reading the word “The” with your central vision? It would be more difficult for you to articulate it. Your peripheral vision is blurry out toward the edges, and you’re less aware of what you’re seeing in peripheral vision, so it’s harder to describe.

The MIT Computer Science and Artificial Intelligence Laboratory has an answer about what your peripheral vision looks like. Ruth Rosenholtz and her team created a computer model to simulate what the brain “sees” in peripheral vision. Rosenholtz calls these simulated images “mongrels.”

Peripheral Vision Is Blurry

One way to think about peripheral vision compared to central vision is that peripheral vision trades detail for an overall impression. In order to process the visual information quickly, and over a larger field than central vision, peripheral vision sends a broader view that ends up looking kind of like a really low-resolution image, and it becomes blurrier at the edges.

How Peripheral Vision Won A Design Competition

In 2013, the city of Boston held a competition to redesign its mass transit map. Rosenholtz (being located at MIT in the Boston area) took the subway map as it existed before the redesign competition, and the new subway map design that won the competition, and ran both maps through her mongrel computer model.

Figure 6.1 shows the subway map before the redesign. The Kendall/MIT stop on the Red Line is circled.

Assume that your central vision is focused on that circle. According to Rosenholtz’s computer model, your combined central and peripheral vision would look like Figure 6.2. The central vision area is crisp and clear, but the peripheral vision area is blurry.

FIGURE 6.2 The “mongrel” computer model that includes peripheral vision of the Boston subway transit map before the redesign.

Michael Kvrivishvili is a designer from Moscow who won the competition for a new map. His map is in Figure 6.3. I’ve placed that same circle at the Kendall stop.

FIGURE 6.3 Michael Kvrivishvili’s winning redesign. (Photo courtesy of Michael Kvrivishvili)

Again, assuming that your central vision is focused on that circle, Figure 6.4 shows what your composite central and peripheral vision looks like with Kvrivishvili’s map. It too is blurry, but there are some differences between Kvrivishvili’s mongrel and the original mongrel.

FIGURE 6.4 The “mongrel” computer model that includes peripheral vision of Kvrivishvili’s winning redesign.

When Less Is More

In Figure 6.1, the previous version of the map, parts of the map are geographically correct, for example, the western part of the Green Line and the southern part of the Red Line. But they are also fairly complex, so in the Figure 6.2 mongrel model, these features of the map lose informational impact.

Compare those areas to Kvrivishvili’s redesigned map in Figure 6.3. His map is less literal, and more representational. In Figure 6.4, peripheral vision is able to keep the gist of those areas truer to the information they are attempting to convey, even if the visual design is less correct geographically. By simplifying the design, Kvrivishvili increases clarity, especially when it comes to peripheral vision.

Designing For Both Vision States

Probably without realizing it, many designers design primarily for central vision. After all, central vision is the vision designers are most familiar with and most conscious of. But you may want to design for peripheral vision as well. Try to simplify the design, especially on the outer edges.

Assuming you don’t have Rosenholtz’s mongrel computer model, you can try a simple peripheral vision test of your own. Pick a part of your design that you expect people to be looking at with central vision, for example, a navigation bar at a website, and then, while keeping your central vision there, see if you can get an impression of the rest of the screen. Does it need to be simplified to convey information through the peripheral vision channel?

A Surprising Guideline For Designing For Screen Size

One of the interesting conclusions from this research on peripheral vision goes against some oft-repeated design wisdom. It’s common to find guidelines that say, for example, that icons and logos on a smartphone should be both smaller and simpler than those on a desktop. On the surface, this makes sense: if the icons or logos are highly detailed, they’ll become muddier and harder to perceive as the screen gets smaller.

However, there’s another way to think about this interplay of size and visual detail. On a large screen, a small percentage of the visual area is within central vision. Most of the screen is in peripheral vision. On a smaller screen, the amount of the screen within central vision increases compared to the amount of the screen within peripheral vision. These days smartphones are getting bigger. With a large smartphone, it’s certainly possible to have both central and peripheral vision active, but even then as much as 75 percent of the visual field will be in central vision. On a relatively small smartphone screen, most or all of the visual field may be within central vision. And with a small device, such as a smartwatch, chances are that the entire display is within central vision.

The more of the visual field that’s in central vision, the more detail you can use, not less. Central vision will pick up the detail. As the screen gets larger, a logo at the top left, or an icon at the top right is likely appearing in peripheral vision, which means that the logo or icon should be simpler, so that peripheral vision will have an easier time picking it up visually and understanding what it is—the opposite of some of some current design guidelines.

Takeaways

Whether you’re designing a standalone image, an infographic, or a web page, design for both peripheral and central vision.Since peripheral vision is blurry, make the design in the outer edges simple.When you’re designing a small display (for example, a smartphone), the design can be more detailed.When you’re designing for a larger display (for example, a laptop), the design should be simpler and less detailed.

100 More Things #105: PERIPHERAL VISION SEES DANGER AND PROCESSES EMOTIONS FASTER

Think about all the things you see during a typical day. Your eyes are constantly taking in visual stimuli. But you don’t react to everything you see. A lot of it goes by without your brain or body reacting.

Yet certain things do produce an immediate and strong reaction. If you see something that’s potentially dangerous—a snake, fire, a dark shadow moving—your brain and body will react quickly.

If peripheral vision covers a bigger area than central vision, and if peripheral vision determines where you look, then it makes sense that peripheral vision is more sensitive to, and reacts faster to, images of danger than central vision. Dimitri Bayle and his team tested this idea.

A Test Of Fearful Faces

Imagine walking with our ancestors, thousands of years ago, in a grassy field. If you noticed out of the corner of your eye (your peripheral vision) that the person to your left suddenly made a fearful face, that information would likely have been useful to you and perhaps would have kept you alive.

People are particularly sensitive to the emotional faces of people around them, especially if the facial expression is one of surprise or fear.

Bayle (2011) and his team researched whether people recognized facial expressions faster and more accurately than other aspects of a face, such as gender, in peripheral vision.

When the brain analyzes and interprets a face, it uses the occipital and temporal lobes, including the special part called the fusiform facial area, which is most stimulated by central vision.

If being able to recognize that someone had a fearful facial expression would keep a person alive, Bayle hypothesized that these images would go through peripheral vision, right to the amygdala via a faster and more automatic sub-cortical route, rather than through the “regular” visual areas of the occipital and temporal lobes and the fusiform facial area through central vision.

The researchers used pictures of people with expressions of fear or disgust and measured how quickly the participants identified each. They also added a gender identification task, where participants had to identify whether a neutral face (showing no emotional expression) was a face of a man or woman. This neutral gender identification task was used as a control, to compare against the fear and disgust expressions. For all of the pictures, sometimes the participants saw the pictures in peripheral vision and sometimes in central vision.

Bayle’s hypotheses proved to be correct. People reacted to images of fearful expressions faster when they were shown in peripheral vision than when they were shown in central vision. They also processed disgust expressions more quickly in peripheral vision compared to central vision, but not as fast as the fear expressions. In the task where participants had to identify the gender of the image, there was no difference in reaction time between central and peripheral vision.

In addition to the faster reaction times for pictures with fear expressions, the participants could identify what they were looking at farther out in their peripheral field than with the pictures of disgust expressions or when identifying gender.

Design With Fear And Danger In Mind

Designers usually don’t intend to scare their target audience with their designs, but often they do want to grab viewers’ attention. As mentioned earlier in this chapter, there’s a tendency among designers to place very little information in viewers’ peripheral vision. If you want to grab attention quickly, and if it’s appropriate to the content and brand of what you’re designing, consider using emotional or dangerous images in peripheral vision.

Takeaways

To grab people’s attention quickly, place images that imply danger in their peripheral vision.To grab people’s attention quickly, show them pictures with strong emotional content in their peripheral vision.

100 More Things #104: PERIPHERAL VISION DETERMINES WHERE CENTRAL VISION SHOULD LOOK

It’s 11:00 a.m. on a Saturday and you’re at home in front of your laptop, browsing the Internet. You open your favorite news site and scan the headlines. You click on a story and read for a bit, then go back to the main page and scan some more. You choose another story, look at the picture, and read some more—just normal scanning and reading online behavior, right?

What you may not realize as you do this is that your two types of vision, central and peripheral, are multitasking.

But Isn’t Multitasking A Myth?

If you’ve read any of my other books or blog posts, you know that I’m fond of saying that multitasking doesn’t exist; most of the time what people think of as multitasking is actually fast “task switching.” People switch really quickly from one thing to another, from one focus to another. This quick task switching takes a toll on attention and mental processing.

But central and peripheral vision multitasking is different. People really are capable of multitasking when it comes to vision.

A Quick Definition Of Central And Peripheral Vision

The fovea is a small depression at the back of the retina that affords very clear, detailed vision. Foveal vision, or central vision, covers only a very small area—about the size of two thumbnails—but it takes up half of the processing in the brain’s visual cortex.

The rest of the visual field is peripheral vision. Peripheral vision takes in a much broader and larger view. The visual cortex can process both central and peripheral vision at the same time.

Eyes Take Lots Of Visual Samples At The Same Time

People take in visual information in little bites. This is called visual sampling. Central and peripheral vision are working at the same time. When you’re scanning that page online and a headline grabs your attention, you move your head and your gaze so that the headline is in view of your fovea—your central vision. But how do your head and eye know to look at that exact spot?

Peripheral Vision Calls The Shots

Casimir Ludwig, J. Rhys Davies, and Miguel Eckstein’s research (2014) showed that it is peripheral vision—what it sees, and how that information is processed in the brain— that tells the central vision where to focus next. This is a largely unconscious process.

People are consciously aware of their central vision and what it’s processing, but they’re likely not consciously aware of what’s in their peripheral vision, or that their peripheral vision is calling the shots for where to look next.

Two Visions Are Better Than One

You would think that all this multitasking would slow down visual processing, but Ludwig’s research shows that central and peripheral vision are processed independently to a large extent, and, therefore, both can be done quickly.

Don’t Base Every Design Decision On Eye-Tracking Studies

Most eye-tracking research measures only central vision; it doesn’t address what’s going on in peripheral vision. Yet there’s a tendency to make design decisions based on eye-tracking results (“No one looked at this picture, therefore it’s not effective and we should remove it.”). Now that you know that peripheral vision is calling the shots, you can avoid making decisions based solely on eye-tracking data.

Pay Attention To Peripheral Vision

Since peripheral vision directs where central vision should go, it’s important to pay attention to what people will see in their peripheral vision when they focus on certain parts of a page with their central vision. Peripheral vision isn’t just dead space to be left blank. As a designer, you need to design flexibly to allow for different monitor sizes and devices (large screen, laptop, tablet, smartphone). There’s a tendency to use only the middle part of the screen and leave the edges blank. This might be easiest for creating one screen that translates to multiple devices, but it means that you’re leaving peripheral vision with nothing to look at. Figure 4.1 shows a website for a restaurant that makes full use of peripheral vision to grab attention and help people know what the site is about.

FIGURE 4.1 A website that makes full use of peripheral vision.

Takeaways

Don’t base design decisions solely on eye-tracking studies.Don’t leave peripheral areas blank. Instead, include information that helps people decide where to look (with central vision) next.

100 More Things #103: SOME PEOPLE HAVE AN EXTRA COLOR CONE

In 1948, H. L. de Vries was studying the eyes of men who were color blind. He made an amazing discovery that he mentioned only in passing, on the last page of the paper he wrote about his research. His discovery went virtually unnoticed for more than three decades.

Before I tell you about the discovery, here’s some background on color vision:

People see color with special cells in their eyes called cones. Most people have three types of cones, each of which is triggered by certain wavelengths of light. The cones send signals to the brain, and the brain interprets those signals as blue, or turquoise, or pink, or any of the other colors.Each cone allows the eye to see approximately 100 shades, so all three cones combined result in 100 to the third power, or about 1 million, different colors that most people can see.For some people, one or more cones don’t activate in the same way—these people have one of several forms of color confusion or color blindness. They may have trouble distinguishing between certain colors, for example, red and green. People who have only two color cones working properly can see approximately 100 to the second power, or 10,000, colors. People who have only one color cone working properly can see approximately 100 colors.Color vision is determined by the X chromosome. Men have only one X chromosome, and women have two X chromosomes. This is why more men than women are color blind.

Back To The Amazing Discovery

To test the men with color blindness, de Vries had them turn dials on an instrument to mix red light and green light until they saw yellow. Because the men were color blind, they added more red or green than someone without color blindness would add.

Out of curiosity, de Vries tested the daughters of one subject and observed that even though they were not color blind—they seemed to distinguish red and green as well as anyone—they still used more red in their test light than normal people to make the match precise. If the women weren’t color blind, why were they adding more red?
De Vries hypothesized that since color blindness runs in families, the mothers and daughters of the color-blind men would have four color cones, not three. They would have the three normal cones, plus the abnormal cone that the men in the family have. De Vries’s idea was that having four cones enabled them to see more colors than most people, and that was why their test results were unusual. He put this idea about four cones at the end of his paper, and didn’t mention it in any of his work after that.

It wasn’t until many years later that de Vries’s ideas were rediscovered by Gabriele Jordan and John Mollon (2019), who were studying color vision in monkeys. Since color blindness is fairly common in men (9 percent of men are color blind), Mollon and Jordan realized that as many as 12 percent of the women in the world may have four cones. The name for someone who has four cones is a “tetrachromat.” These women would be able to see 100 to the fourth power, or 100 million, colors.

Functional Tetrachromats Are Rare

Much to her surprise, Jordan has had a difficult time finding women who are tetrachromats and can correctly do the matching tests for tetrachromacy. Why is this? It turns out that although a woman may be a tetrachromat, she may not be able to distinguish all the colors. She may report colors as though she only had three cones. The theory here is that tetrachromats are living in a world of trichromats. The objects they interact with were created by and for people who see 1 million colors, not 100 million colors, which means that tetrachromats haven’t had much opportunity to learn how to distinguish between the extra colors they see.

There is some evidence to support this theory. Artist Concetta Antico was tested and found to have the DNA of a tetrachromat. She also is a “functional” tetrachromat. Her early training and continued immersion in art may have taught her how to use her fourth cone.

Testing for tetrachromacy

The best way to test for tetrachromacy is with a DNA test. Watch out for fake tests. One bogus test that went viral suggested that any viewer who could see 33 or more colors in the test image was a tetrachromat. In fact, computer displays don’t display enough colors to test for tetrachromacy.

Takeaways

If you’re a woman with color-blind men in your family, you might be a tetrachromat. If you are, you might need special training to see the extra colors.With advances in technology, color displays are likely to show more colors in the near future. As a designer, you might be asked to—or you might want to—create designs that use the extra colors that tetrachromats can see. There might be unique designs using pictures and graphics with extra colors for those who can see them.

100 More Things #102: PEOPLE PREFER SYMMETRY

Whether you’re choosing stock images for a web page or deciding whether to show the subject of a photo straight on or in profile, consider people’s preference for symmetry.

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.

Show Me Your DNA

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.

Figures 2.1 and 2.2 show two people with different amounts of bilateral symmetry. The man in Figure 2.1 has a face that is fairly asymmetrical. The man in Figure 2.2 has a face that is more symmetrical.

FIGURE 2.1 An asymmetrical face.

FIGURE 2.2 A fairly symmetrical face.

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.

If you must use a particular person, then evaluate face and body symmetry. If the person has a symmetrical face and body, then use a photo that is shot straight on. If the person lacks facial or body symmetry, use a profile view.

How Is Symmetry Measured?

You can use a ruler and the technique described below to measure the symmetry of a face.

Note the centerline drawn down the middle of the face in Figure 2.3, and the six horizontal lines (labeled D1, D2, D3, D4, D5, and D6) drawn across it.

FIGURE 2.3 A face marked with symmetry lines.

Measure the distance from the left edge of D1 to the centerline.

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 0.5 inches longer than the other side, write down 0.5.

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.

Add up all the differences.

Now do the same for Figure 2.4

FIGURE 2.4 Another face marked with symmetry lines.

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.

Is Symmetry Only For Mars (For Men)?

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.

Is There Any Advantage To Using Asymmetry for Design Layouts?

As a designer, you have to make decisions about the layout of elements on a screen or page or packaged product. 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.

Takeaways

When you want to use pictures of people that your audience will find attractive, make sure those people have symmetrical faces and bodies.When your target audience is primarily men, use a symmetrical layout.When your target audience is primarily women, consider a more asymmetrical layout.

100 More Things #101: PEOPLE PREFER CURVED SHAPES

Have you ever wondered why clients always prefer logos with curves rather than logos with interesting angles? Have you noticed that your favorite smartphones, tablets, and laptops tend to have rounded corners? What’s the big deal with those curves and rounded corners?

People prefer objects with curves—a preference that’s evident even in brain scans. This field of study is called neuroaesthetics.

Does The Couch Have Curves?

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

FIGURE 1.1 Original images used by Moshe Bar (https://faculty.biu.ac.il/~barlab/).

People gave higher “liking” ratings to the objects with curves. Bar and Neta’s theory was that the sharp and angled images conveyed a sense of threat.

Does The Balance Of The Image Matter?

Paul Silvia and Christopher Barona (2009) wanted to see if it mattered whether the objects in an image were balanced (Figure 1.2) or unbalanced (Figure 1.3). Balanced or not, people still preferred the curved objects.

FIGURE 1.2 A balanced image.

FIGURE 1.3 An unbalanced image.

FIGURE 1.4 A complex, angular shape.

FIGURE 1.5 A complex shape with slightly curved edges.

Again, people preferred the objects with curves.

Helmut Leder, Pablo Tinio, and Bar (2011) asked whether this preference for curves was true for both “positive” objects (birthday cakes and teddy bears) and “negative” objects (razor blades and spiders). The results? People preferred curves in objects that were either positive or neutral, but there was no preference for curves in negative objects.

Note:
Nike, Apple, Pepsi, Coca-Cola, and dozens of other well-known brands use one or more curves in their logos, so they’ve obviously done their design homework.

Curves Stimulate The Brain

Ed Connor and Neeraja Balachander from John Hopkins University (unpublished) took this idea into a neuroimaging lab. They used an abstract shape similar to the shape on the left in Figure 1.6, and then made a series of similar but elongated shapes like those in the rest of Figure 1.6.

FIGURE 1.6 Curved and rounded shapes versus 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 when they viewed shapes that were more curved and more rounded.

Takeaways

People prefer curves.When you’re creating a logo, incorporate some form of curve in the design.When you’re creating areas of color on a screen, consider using a “swoosh” or curved shape.When you’re designing actual products—such as smartphones, remote controls, medical devices, or other hand-held items—use curved surfaces.

2nd Edition of 100 MORE things every designer needs to know about people

Some people are familiar with our book 100 Things Every Designer Needs To Know About People, but many don’t realize that there is a “sequel”: 100 MORE Things Every Designer Needs To Know About People. And even few realize that there is now a 2nd edition to the MORE book.

So if you want to get 100 more nuggets of Design Psychology then check out the 2nd edition of the MORE book:

And if you are interested in the original 100 Things book, here is a link to the 2nd edition of that one: