- 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
Images as Obstacles
People often treat Web pages as obstacle courses and the images they perceive to be unhelpful as obstacles they must go around. This was the case when our users went to the Adelphia cable company’s homepage to learn about digital video recording.
The page offers horizontal navigation and text, buttons, and links in the content area. It includes several images that are not very magnetic. They are low contrast or too small for the space allocated to them, and the people in the images are not looking at the camera (Figure 6.1). Amazingly, almost all our users looked everywhere on the page but at the images (Figure 6.2).
)
Figure 6.1 Adelphia’s homepage tries to entice with images of people happily using the company’s cable products or services.
)
Figure 6.2 Most people went out of their way to avoid the generic-looking images on the page.
On Web pages with multiple superfluous images, people treat the entire page as an obstacle course they must navigate. They look at the text around images, but not at the images.
Why do designers include lackluster images like these? One reason is simply to give people’s eyes a break from the text. But this can also have the opposite effect. When users’ cognitive load is taxed from trying to avoid the images, they’re not getting a break.
It may seem that even generic images on a page provide users with a visual break from heavy text. But since people work to avoid useless images, it actually adds to their cognitive load.
On the Gateway computer company’s homepage, people also avoided the images that they believed were of no help to them: the PC monitors, the cow-skin patterned box, the hill and trees (Figure 6.3). Of course, what constitutes a “pointless” image is subjective. Presumably, Gateway included the image of computer monitors to draw attention to the text about its new 21-inch monitor. But the image is so small that it does not do a good job of showing that the monitor rotates and swivels. And at first glance, it appears that there are two monitors, not one in different modes. Users didn’t even get that far, however, because the image seemed too generic to even merit a look.
)
Figure 6.3 People looked anywhere but at the boring images on the Gateway homepage.
Part of the reason people ignored the smaller images is because the large, irrelevant background farm image at the top of the page hardened them to other images. The small pictures may have a bit more relevance, but by the time users got to them, they were already using an image-skipping strategy to work down the page.
Don’t add images to a page simply to fill white space. Instead, lay out the page differently. Most Web pages are too cluttered anyway, and users appreciate a short page with clear, large text or a single, useful image.
Obstacle-course behavior is not exclusive to homepages, which are known for being “prettied up.” It certainly occurs with interior pages too. For example, we asked people to use New York Magazine’s Web site to find restaurants in New York City where they might like to dine. Many people looked at the Food and Restaurant pages with reviews of big-name restaurants and several images of different sizes.
One image was of celebrity chef Anthony Bourdain, star of the TV show No Reservations and author of the best-seller Kitchen Confidential. Users looked around the photo of Bourdain, not at it. They also avoided the photo of prolific chef and TV personality Mario Batali (Figure 6.4 and Figure 6.5). They ignored pictures of restaurants and other small photos on the page. Why?
)
Figure 6.4 Web page as obstacle course: Users searching for restaurants read the text on New York Magazine’s restaurant page but avoided the small and low-contrast images—even of high-profile chefs.
)
Figure 6.5 A closer look at the images on the page. They were meant to draw people’s attention, not turn them off.
Above all, as a closer look at the images shows, the contrast in almost all of these images is pitiable. Bourdain—a colorful, adventurous guy—is as gray as the backdrop behind him. And a photo of him is not highly related to the page content. It accompanies an article about celebrity chefs’ opinions, not about Bourdain himself. Although this is commonly done for this type of magazine article, it is not necessarily effective on the Web.
People don’t waste time trying to figure out what the subject of a low-contrast image is. They simply ignore it.
The photos of restaurant interiors are also too dark and too detailed to be of much use. The illustrations of the woman’s head and the chef’s hat look like filler images, while the larger-than-life Batali is squeezed into a postage stamp–sized space. Can’t a premier chef get a few more pixels? As a result, users did all they could to avoid these images as they negotiated the page.
While still looking for restaurants on the same site, several users also hit a page with a blurb under the headline Founding Fathers. The text and two photos were about the history of two seminal restaurants in Manhattan (Figure 6.6). Again, people read much of the text related to the photos but avoided the low-contrast images (Figure 6.7). They would have needed to give several fixations and a few seconds to figuring out what the images are of, and people aren’t willing to do that.
){kind=small}
Figure 6.6 The images of two Manhattan restaurants have poor contrast.
)
Figure 6.7 Even images that are highly related to the content on the page will be ignored if they are too dark and have poor contrast like these.
Omit Filler Images
Designers should beware of using images that accompany text but don’t do anything to enhance it. We believe that these images should not be on a page. They are a waste of pixels, of the designer’s work, and of users’ time. We also argue that you should always use great images, although we understand that realistically you may need to run some that are medium quality. If that’s the case, at least avoid big irrelevant ones.
A designer might ask, “Well then, what would we put in that empty space?”
Our recommendation: nothing. Use white space. Alternatively, decrease the page length or increase the default size of the text on the rest of the page.
Most important, economize. Spend resources on one image that is meaningful instead of a few that are not. For example, the Gateway homepage could have had a more dynamic illustration or photo of the new monitor converting from the horizontal to vertical view—or maybe even a small animation. And to really showcase the new product, the site designers should have given it more space on the homepage and an eye-catching headline. Similarly, New York Magazine could have displayed one clear image of a restaurant instead of two small, unclear images. Of course, this would involve prioritizing and discipline because the article was about two restaurants.