Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

From the book Attributes That Draw Attention

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.


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




Multiple objects




Simple background




Crowded background





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.

Figure 6.23 The 1900 Storm site runs relevant—and compelling—photos of a storm in Texas at the turn of the century.

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 (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.

Peachpit Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from Peachpit and its family of brands. I can unsubscribe at any time.


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about Peachpit products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information

To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.


Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites; develop new products and services; conduct educational research; and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.


If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information

Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.


This site is not directed to children under the age of 13.


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information

If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at and we will process the deletion of a user's account.


Users can always make an informed choice as to whether they should proceed with certain services offered by Adobe Press. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive:

Sale of Personal Information

Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to

Supplemental Privacy Statement for California Residents

California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure

Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact

Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice

We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020