Summary: 
Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to "jazz up" Web pages.

Our eyetracking studies have documented a dramatic gap in how users approach website images:

  • Some types of pictures are completely ignored. This is typically the case for big feel-good images that are purely decorative.
  • Other types of pictures are treated as important content and scrutinized. Photos of products and real people (as opposed to stock photos of models) often fall into this category.
I've spent countless columns ranting against the first type of images. Sadly, many websites are still more obsessed with showing off than with getting to the point. Visual bloat continues to annoy users: even with high-speed Internet connections and sub-second download times, users still prefer websites that focus on the information they want:
  • In e-commerce, product photos help users understand products and differentiate between similar items.
  • On personal websites, users want to see the person behind the site; author photos, for example, are a key usability guideline for blogs.
To illustrate further, let's look at a few examples from an eyetracking study we ran earlier this year.

People Photos = Good (If They're Real People)

It's long been a guideline for presenting a company's image online to include portraits of the executive team so that users associate real people with an otherwise faceless corporation. FreshBooks.com takes this guideline one step further and presents photos of its entire team:

Gaze plot of user viewing page listing a company's staff (FreshBooks.com)

This is actually one looong page that I cut into 3 segments to fit this space. The original page was 9,335 pixels tall and our test user scrolled almost to the bottom. As this example shows, people sometimes do scroll down long pages, but they typically allocate less and less attention further down the page.

Here, the user spent 10% more time viewing the portrait photos than reading the biographies, even though the bios consumed 316% more space. It's obvious from the gaze plot that the user was in a hurry and just wanted to get a quick overview of the FreshBooks team, and looking at photos is indeed faster than reading full paragraphs.

The key point is that these are real people who actually work at the company.

In contrast, users ignore stock photos of "generic people":

Gaze plot of user viewing Web page about a university's application process

My guess is that this photo from the Yale School of Management actually shows real students; stock photos would rarely be this poorly cropped or show models slouching (as with the guy in the blue shirt).

Still, on this particular page, the photo is pure filler. Users are here to understand the school's application process, not to judge the degree of student slouch.

Most likely, the dean or other manager asked designers to "jazz up" the page so the university would look more exciting and thus attract more applications. But on the Web, jazzed-up = ignored.

As we further discuss in our Brand as Experience seminar, the way to excite customers is to offer an engaging experience, which means focusing on meeting their needs. This lesson holds equally for non-profit organizations and universities, even if they don't refer to their target audience as "customers."

Product Details = Good

Compare these two examples of e-commerce category pages (gallery listings of products by category) from Pottery Barn and Amazon.com:

Gaze plot of users viewing category pages from Pottery Barn and Amazon.com

Thumbnails of bookcases were studied intensely, whereas thumbnails of flat-panel TVs were mainly ignored. In fact, on the full Amazon page (only the top part is shown here), only 18% of the viewing time was spent on the photos, while 82% was spent on the text. On average, for each product, the thumbnail got 0.9 fixations, whereas the description got 4.4 fixations.

The difference between these 2 screenshots is obvious: the TV photos are of no help in deciding between the products. A guy in a canoe vs. a football player? What, because I watch more football than watersports, I'll buy the TV showing a football player?

This is a good example of why it's not always good to copy the biggest sites' designs. Because Amazon hawks a monstrously wide product range, they use a standardized gallery layout that sort of works for many different category pages, without being optimized for any individual category. In contrast, Pottery Barn is optimized for its narrower range of products, so its category pages have more detailed photos.

Big Photos = Good (When Requested)

In our testing of product pages with detailed information about individual products, users paid even more attention to the product photos. People often liked alternate views and clicked the links to download enlarged photos.

Way back in 2005, "Inadequate photo enlargement" was #10 on my list of top-10 Web design mistakes. That is, when users click the link to a bigger photo, they're rewarded with one that's maybe 20% larger. It should be at least twice as big, preferably more. Sadly, this mistake is still rampant 5 years after I featured it on the top-10 list.

Yes, users dislike huge photos that get in the way of their tasks. (The Yale example above shows what not to do.) But when users request an enlargement, it's a different story:

Gaze plot of user viewing an enlarged product photo from an e-commerce site

Note how this close-up photo of a faceplate from ExtremeTech.com attracted 12 fixations. (It's shown here at 50% of its original 714x868 pixels.)

Information-Carrying Images = Good

The commonality across all of these examples (and thousands more in our other studies) is that users pay attention to information-carrying images that show content that's relevant to the task at hand. And users ignore purely decorative images that don't add real content to the page. So much fluff — of which there's too much already on the Web.

Invest in good photo shoots: a great photographer can add a fortune to your website's business value.

Learn More

More on proper use of images in our full-day tutorial on Web Page Design at the annualUsability Week conference.

출처: http://www.useit.com/alertbox/photo-content.html

이 게시물을..