- What Does and Doesnt Draw Attention to an Image
- Images as Obstacles
- Attributes That Draw Attention
From the book
From the book
From the book
Attributes That Draw Attention
There are images that you can’t help but look at and images you can’t stop looking at. A crisp silhouette draws attention on the Web. A strong relationship to content, interesting subjects, and base appeal keep attention on an image.
Contrast, Quality, and Detail
High contrast between the subject and background of an image may be the main factor that determines whether people look at the image. Users are more likely to grant a fixation to an image if they can tell from a peripheral look that they will be able to decipher it.
For example, one of our users was seeking information about the feeding habits of mallard ducks on the Ducks Unlimited Canada Web site. She looked at quite a lot of the text and text links on the page but not at the image on the right (Figure 6.8). It did not have peripherally attractive properties: It is a landscape in a small space without a main element as the subject—the pond, grass, trees, and sky all compete.
)
Figure 6.8 A user looking for information about mallard ducks avoided the rather useless image of a pond in the upper-right corner of this site. Peripherally, the image is just a lot of blue and green spots with no real clear subject.
In another task, a user looking to invest $10,000 in retirement did the same thing. On the CityFeet Web site, he looked at a few of the links and headings but gave no fixations to the low-contrast, unrelated images of the map and woman (Figure 6.9). He also ignored the rest of the images on the page, which are far too difficult to make out quickly (even if he had looked at them) and too detailed for the small space allocated to them.
)
Figure 6.9 A user’s few fixations on this page were reserved for headings, links, and text—not for the low-contrast and small images.
Motivation and Expectations Can Help Even Bad Images Get Looks
Sometimes people look at an image despite its flaws if they specifically selected a link to images and are interested in the topic to which they relate. For example, on the Travelocity site, the participants in our study who were interested in bike tours looked at a very scenic, though small, image of a mountain biking trip (Figure 6.10 and Figure 6.11). Why? They had expressly chosen the Photos tab to view photos of the trip. So, a combination of interest, expectations, and photo quality drew their attention to the image despite its size.
)
Figure 6.10 This image of a mountain biking trip is small, but people who had selected a link to see photos still looked at it.
)
Figure 6.11 The large amount of red in this heat map indicates that there were still usability problems with the biking trip photo.
Still, a larger image would have been better for users. The cyclists are scaled down so small that people need to stare at the photo for a long time to understand what it is. If the image absolutely needs to be this small, it should have been cropped in on the cyclists. But since the landscape is part of the story, why not allocate more space for the photo? Why is it getting less than 4 percent of the available pixels?
Similarly, users on the 1900 Storm Web site chose to look at a slide show of photos from the aftermath of a devastating storm that hit Galveston, Texas, in 1900. The old black-and-white photos are not high quality, but people stuck with them because they had selected the slide show option and wanted to see the wreckage of the storm (Figure 6.12). The photo subjects are also captivating, and the quality of the photos adds a historical feel.
)
Figure 6.12 Even though the slide show images of a storm in 1900 had poor contrast, people were so interested in the subject that they continued to look at them.
When users select a link to a photo section, they usually expect some value-add in that area, such as larger photos or ways to zoom in. Our users who were researching informa- tion about vacationing in Shanghai on the Lonely Planet travel site did not look at the small accent images in the upper-left corner of pages about the city (Figure 6.13). When they selected the Image Gallery page, the same images in the same size appeared, but here they looked at them because they had specifically selected to do that (Figure 6.14).
)
Figure 6.13 People looked at the text and menus on this travel page about Shanghai but did not look at the small image with poor contrast in an upper corner, even though it was related to the content.
)
Figure 6.14 When people chose to view images on this site, they looked at images they had ignored on other pages.
Icons
Iconic images are ones that instantly convey what they are: a printer, a trash can, a bolded letter. They have clear lines, high contrast, and messages that are easily understood. If users wonder even for a moment what an image is, it is not iconic. Contrary to their name, iconic images do not necessarily have an icon in them, nor do they need to be buttons of any sort.
Iconic images do not get looked at if they are difficult to make sense of quickly. The Colorado Fishing Network homepage is full of icons. One of our users who was planning a fly-fishing trip in Colorado gave a fixation to the homepage photo of a man fishing but ignored the icons on the page (Figure 6.15). Why? Although the image of the fisherman is small, it is also decipherable and related to the content of the page. But most of the icons are far too small to make out and not even remotely helpful. Does the binoculars icon add anything to the text Search CFN? How does the image that appears to be a pond represent Shopping? These images clutter the page without providing something of value for users. If this were our Web site, we’d drop the icons, get a better fly-fishing photo, and allot it the space it deserves.
)
Figure 6.15 A user looked all around this homepage except at the tiny, useless icons.
In contrast, the graphics on File Forum, a site with software downloads and reviews, are simple, clear, and useful. One graphic employs blocks of color to depict consumer ratings on a scale of one to five. A single teal block indicates a score of one, two fuchsia blocks indicate a score of two, and so on. A user who was researching the product Skype went to the site in search of less than favorable reviews of the product. Once he understood the graphic’s simple color scheme, it made it easy for him to quickly scan for them (Figure 6.16).
Consider whether it’s beneficial to use small graphics as signposts or bullets. Most tiny images are too difficult to decipher even if users spend time trying to figure out what they are. And most users don’t bother.
)
Figure 6.16 The rating icons helped one user quickly scan to one of the worst reviews of Skype on this site.
The Impact of Background
We’ve found that people are more likely to look at images of an object set against a very simple background than against a crowded one. People look at 28 percent of objects in a vacant setting and at only 14 percent of images in a busier setting. For Web users, a picture of a tree on a plain white background is more iconic and easier to decipher than a picture of a tree in front of other trees or bushes.
However, people spend slightly more time and fixations on images with more complicated settings—an average of 2.5 seconds and 8.19 fixations on these, and 2.05 seconds and 7.6 fixations on those with plainer settings. This seems logical because busier backgrounds have more detail to decipher. But we can’t say that this is necessarily good. We can say that people sometimes seem to look longer at an image out of interest and sometimes because they are using exhaustive review to try to decipher the image.
People also look slightly more at images of a single object—26 percent—than at images with multiple objects—20 percent. This difference is not particularly great, but it does reinforce the idea that people are more attracted, at least peripherally, to simpler images. People also look slightly more and longer—for 2.13 seconds and 7.74 fixations—at images of one object than at images of multiple objects—1.61 seconds and 6.33 fixations. The lesson? Less is more with images.
Simplicity Wins
|
Image Attributes |
Amount Viewed (Avg.) |
Seconds Viewed (Avg.) |
Number of Fixations(Avg.) |
|
Single object |
26% |
2.13 |
7.74 |
|
Multiple objects |
20% |
1.61 |
6.33 |
|
Simple background |
28% |
2.05 |
7.60 |
|
Crowded background |
14% |
2.50 |
8.19 |
Originality
With so many creative Web designers, one must wonder why basic stock-art images keep finding their way onto sites. Although some designers must make the dubious decision to use boring images that have appeared on countless other sites, we believe that many designers don’t. They snub generic “computer on desk” and “calm forest scene” images that could be on any site and that convey nothing unique or specific about an organization or its products, services, or values.
Take the ubiquitous “smiling woman wearing headset” image. Really, just about any company could boast customer support people who are happy to serve you. Does the woman wearing a headset (who obviously doesn’t work for your company because she is too polished and made up to be answering support calls in a big Skinner Box of a room with 50 other people for 8 hours a day) really convey to your users that you are there for them?
The Adelphia Web site is one of many that has succumbed to the “smiling woman wearing headset” syndrome. And sure enough, no fixations (Figure 6.17).
People ignore stock images 85 percent of the time.
We asked Web designers why these images keep popping up. Many of them say that a manager or other person with branding responsibilities often tells designers that they need to “punch up” a page because it is “too boring.”
What’s a designer to do? They can refuse to use a useless image and then risk being reprimanded or earning a reputation as “difficult.” They can do the easy thing and use stock art—a choice that’s often hastened by schedule and resource constraints. And maybe stock art will appease the people who wanted the page to be more exciting. But in 85 percent of cases, users do not give these images the time of day. Not even one fixation. So, why not punch things up with something more original?
)
Figure 6.17 Users avoided looking at the ubiquitous “woman wearing headset” image on this site.
The site for Hansen’s Natural beverages offers a humorous send-up of the “smiling woman wearing a headset”: a deranged-looking man in a suit holding a tin can to his ear. This has visual interest, and our users looked at it (Figure 6.18).
)
Figure 6.18 A user looked at the image of the atypical customer support representative at the Hansen’s Natural Web site.
FreshDirect’s twist is to have a small image of a person who looks like one of the grocery service’s knowledgeable and friendly employees plugging featured food and drink items in the upper-right edge of pages. The idea of having a little chef (or a little deli bar man, little fishmonger, little produce worker, and so on) giving an OK sign to a featured item may seem as if it would add credibility, interest, and fun. But it loses its charm rather quickly (Figure 6.19).
)
Figure 6.19 People usually ignored the little man in the upper right of pages on this site after seeing him once, but they looked at images of food such as tuna burgers, pastas, and ice cream.
In fact, users rarely looked at these images. So, does this mean they should not be there? It’s unlikely that the images increase users’ page load time, and because the images have similar shapes and appear on the edges of the page, people may even learn to tune them out peripherally at the right times, selective disregard. And a few users might like them—at least the first one they see. So, they are pretty harmless. But knowing that people look at them very rarely, the site designers might want to come up with a better image or more effective use of the space instead.
Relationship to Content
Many images that appear on pages are simply not related to the main ideas the page is trying to convey, and users ignore or barely look at them. People look at unrelated or somewhat related images just 14 percent of the time. Sadly, all those images of blue skies and oceans, sunny flower meadows, and smiling customer support people are probably not getting the time of day.
People look far more at images that are highly related to the written content on a page than they do at unrelated images.
Images that are only marginally related and not very helpful don’t get much response from users either. On the Gerd Institute Web site, for example, people barely looked at the image of pills spilling out of a bottle on a page about drug therapy (Figure 6.20).
)
Figure 6.20 Users looked minimally at the somewhat related image of pills in a bottle on this page about drug therapy.
People already know what pills look like, so there is not much added value from this photo. If this were a site that educates patients about how to tell real Viagra pills from the fakes sold by spammers, many people would have looked closely at the pills. Users also didn’t look much at the generic image of a woman carrying groceries on the site’s page about diet (Figure 6.21). It is too obviously stock art.
)
Figure 6.21 Most people didn’t bother looking at a generic image of the woman holding groceries on the site’s diet page.
Exciting Images Related to Content
Users look at images that are related to content about twice as often—29 percent of the time. Even peripherally, people seem to sense when images surrounded by written text are stock art or relate to content. It may be that certain characteristics signal this. For example, people may be more likely to interpret an image as relevant if it has high contrast or seems related from a peripheral view.
For example, users looking for the fastest swimming speed of a mako shark looked at the simple, but gripping, photo of the shark (Figure 6.22).
)
Figure 6.22 A user scanning a Wikipedia page for information about mako sharks was drawn to the photo of one.
Users researching the 1900 storm in Texas were very interested in the text, but they were also drawn to the accompanying images (Figure 6.23 and Figure 6.24). Everyone looked at the photo of a house turned on its side.
){kind=small}
Figure 6.23 The 1900 Storm site runs relevant—and compelling—photos of a storm in Texas at the turn of the century.
){kind=small}
Figure 6.24 All of our users who read about the storm looked at the related image of the house on its side. People commonly look in the windows of buildings in photos.
When reading a CNN article about smugglers who forced Somali refugees from their boats into shark-infested waters, people looked at the image of the boats that accompanied the article (Figure 6.25). Some looked at the boats a few times.
)
Figure 6.25 A user read the beginning of an article about smugglers mistreating refugees and looked at the related image on the CNN site.
Unexciting Images Related to Content
Smugglers, sharks, and storms are pretty thrilling topics, so it’s not surprising that people look at related images. But they look at images related to less-exciting topics as well.
When researching whether mallard ducks dive for food, users looked at several good images of ducks on a page of NYSite. Although most of the photos did not relate directly to their task, people looked at them because they related to the subject of the text, mallard ducks, and some of the images did show the ducks feeding. One person looked at all seven duck photos on the page (Figure 6.26).
)
Figure 6.26 A user looking for information about the feeding habits of mallard ducks was drawn to all the photos of the ducks on this page.
Similarly, users reading about the Bedford-Stuyvesant neighborhood in New York looked at images of the neighborhood on a page of the Living Cities site (Figure 6.27).
)
Figure 6.27 A user reading about Bedford-Stuyvesant looked at photos of buildings in the neighborhood. He looked in the window of the top image.
When learning about the John F. Kennedy Presidential Library and Museum, people looked at a relevant photo of the past president, even though they hardly needed to be reminded of what JFK looked like. One user also looked at the photo of Kennedy’s mother, Rose, who was the subject of an exhibit (Figure 6.28).
)
Figure 6.28 A user read the text and was attracted to the clear, relevant images of John F. Kennedy and Rose Kennedy on the JFK Library Web site.
Even a washed-out grayscale photo that is visually interesting and highly related to content can get looks. Users researching onetime New York mayor Fiorello La Guardia looked at the image of him on Answers.com (Figure 6.29). The grimace on La Guardia’s face was probably part of the draw.
)
Figure 6.29 La Guardia’s grimace helped attract users to an otherwise washed-out photo on this site.