11 Using Illustrations Effectively
In previous chapters, we’ve talked about making information visual just by arranging the text: short paragraphs, short sentences, lists, tables, headings, and a judicious use of space. Illustrations (photos, drawings, charts, graphs, maps, and so on) are also an important part of your web content.
As with all web content, in planning illustrations, you must think about your purposes, your audiences, and why people come to your site. The first questions to ask as you plan for illustrations are:
Indeed, as you go through your web content, ask yourself:
If so, an illustration may be appropriate to explain or expand or enhance or replace your other web content.
Illustrations serve different purposes
I’ve been thinking about when, how, and why different types of illustrations work and don’t work well on web sites. And I’ve come to realize that there’s a continuum of types of illustrations that serve different purposes – from representational to emotional. Consider Figure 11-1.
Figure 11-1 Your purpose in using a picture can range from purely representational to purely emotional (or mood setting).
Let’s explore each of the four types of illustration in the continuum in more detail.
Picture of exact item
The continuum starts with purely representational pictures of the exact item. Because these pictures are so common in e-commerce sites, I’ll start there and explore exact pictures in other types of web sites a few pages further on in the chapter.
If you work on an e-commerce web site, as you choose what to show in your online catalogue, think of illustrations as part of your conversation with customers. What questions do customers ask about the items? How can you best answer those questions? How can you take advantage of the web to show the answers?
Think about what aspects people want to see
For hiking boots, for example, people want to see the bottoms as well as the tops, so REI uses both static and dynamic pictures to present the parts that people want to see. (See Figures 11-2 and 11-3.)
Not every item needs a 3D video, however. Take advantage of what the web lets you do, but only when doing so adds real value for your site visitors.
In observing web users at e-commerce sites, Jared Spool found that experienced hikers rejected the offerings at a site that did not show the soles of hiking boots. Instead, they chose boots from REI because REI had pictures like the ones I’m showing here. Jared tells me (through email correspondence) that “The REI people knew to tip over the boots when shooting the pictures because the photographer used to work in the footwear department.”
Figure 11-3 The video is like turning the boot around in your hands; but not every item needs such elaborate 3D treatment.
Make sure your words match what happens
If you offer a larger picture, make sure it enlarges. If you promise other views, make sure that there really are other views. Otherwise, you are setting up expectations that you don’t meet, which is likely to annoy your site visitors.
If an extra click sometimes fulfills its promise and sometimes doesn’t, you are teasing your potential customers. They can’t tell when they’ll get what they want. Although I support the use of templates, be careful about situations in which the words in your template set up false expectations.
At GapKids.com, for example, item pages usually (perhaps always – I haven’t checked every page), offer “more views.” I suspect the “more views” link is part of the item page template.
Sometimes, this truly leads to other views, but sometimes it does not. Sometimes, all you get is a slightly larger version of the same view. If you want to see the back of boys’ jeans, for example, you’ll get that picture with some jeans but not with others.
Figure 11-4 is a girl’s denim jacket with a tantalizing peek through the front of a design on the back. But “more views” disappoints; it only leads to a slightly larger view of the front and no option to see the back.
If the web writers could select among options for templates, they could provide more truthful expectations to their web shoppers. For Gapkids.com, the templates might allow writers to choose options for “See larger view,” “View details,” “View back” – whichever were relevant for the specific item.
Make sure the larger pictures are clear
Fuzzy enlargements, such as the one in Figure 11-5 from eBags.com, may make site visitors wonder about other aspects of your site – and your products.
Think about other situations in which pictures or diagrams would help people
Travel, theater, sports events, and many other situations also lend themselves to pictures or diagrams of exact items to help people serve themselves.
Help people make connections between information on paper documents and fields on online forms
You can help people by showing them where on a card or paper document the information you want from them is located. When e-commerce sites started requiring the security code from credit cards as well as the number and expiration date, many sites included a picture of the back of the card to show people where to find the code.
The state of New Jersey sends car owners a paper document to remind them to renew their vehicle registration. The paper document includes a personal identification number (PIN) for renewing online. Many people didn’t notice the PIN and, thus, couldn’t do the task online. New Jersey’s solution: include a picture of the paper document on the web page, indicating where to find the PIN. (See Figure 11-6.) Of course, another (or additional) solution would be to revise the paper document to make the PIN more obvious.
When the picture is a book or magazine cover or printed brochure, think about whether the link between print and web is necessary
For online booksellers, a picture of the book cover next to information about buying the book online makes sense. For journals where the publisher wants to increase subscriptions to the print version, a picture of the cover of each issue makes sense (Figure 11-7).
Figure 11-6 Considering questions and issues people may have in doing tasks might lead you to include pictures of paper documents for online tasks.
But as you move from paper documents to web information, ask yourself: How critical is it to maintain the connection to a print document? As I’ve suggested throughout this book, your web information need not look like the paper report or paper brochure. So, perhaps it is time to ask yourself and your colleagues whether you should continue to have a picture of a paper version with your web information.
Picture to illustrate concept or process
As we move along the continuum from purely representational to emotional (mood-setting), after pictures of the exact item, we come next to illustrations that represent not so much a specific object as a class or group of objects. The illustrations are meant to help people compare or understand quantities, dimensions, or ratios or to understand processes.
Comparing sizes
Illustrations are a great way to help people compare and choose, especially when they need to visualize dimensions or quantities.
Figure 11-7 Showing the cover of a book or magazine makes sense if you want people to buy the print version. Otherwise, consider not including pictures of print documents as you move to web-based information.
Have you ever gone to a web site to rent a car and been unsure of the difference between “economy” and “compact” or between “standard” and “mid-size”? Pictures can clarify distinctions like these. Compare Figures 11-8 and 11-9.
Understanding dimensions and ratios
If you are talking about objects that people recognize, a picture is often worth many words of explanation. Compare two pages from the web site of the U. S. Postal Service. The web page in Figure 11-10 is a list just in words of the types of mail that require extra postage. The web page in Figure 11-11 shows pictures of all types of envelopes. After you select the one that you are sending, the site tells you if your envelope needs extra postage.
Showing a process
Showing a process in pictures can be both eye-catching and informative. Consider the explanation in Figure 11-12, the Netflix page about “how it works.”
Figure 11-12 Pictures can help explain a process. They also enliven the page and attract attention. But make sure the pictures are meaningful to your audiences.
As with all web content, keep your process pictures simple. Animate the process only if that adds useful information and won’t annoy people. (See more about animation, including animating processes, later in this chapter.)
Chart, graph, map
Moving further along the continuum in Figure 11-1, we come to charts, graphs, maps, and other ways of presenting data. These illustrations are not as simple to work with as the pictures in the previous two categories; they require interpretation.
Consider combining maps with lists
Maps are an excellent way to show geography, but they may not work as well as you assume. Your site visitors may
Combining a map with a textual list, allowing people to choose from either, as Lonely Planet does in Figure 11-13, may be a good solution that helps people select accurately and quickly while even learning a bit of geography.
Figure 11-13 Maps by themselves may not meet the needs of all your users. Combining a map and a list may be more helpful.
A story about maps: Remember the case study about getting a copy of your birth certificate (Chapter 4, Case Study 4-1)? Everyone agrees that the paragraph of text is a very poor way of telling people what to do. When I give people the exercise of finding the best way to help people select the state where they were born, I get three solutions: the list of states (as you saw in the case study in Chapter 4), a map of the U. S., and a drop-down list. When the workshop is in Washington State, many people suggest a map. When the workshop is in Washington, D.C., very few people suggest a map. Why? Washington State is large, easy to find in a corner of the country, and very far down if you are scrolling a list of states. Washington, D.C., is a tiny speck on the map, in the middle of many very small states, and near the beginning alphabetically (as District of Columbia). Think about the people who need to choose places like Liechtenstein and Washington, D.C., when you think of asking site visitors to work with maps.
Keep it simple. Let your web users choose how much to see
Don’t overload people with more information than they want or need. Instead of putting many different types of information on the same graphic, offer alternative views. Let people drill down for details. Let people choose how much to combine. Consider the way an Australian weather site gives people several choices of what to look at (Figure 11-14).
Write key message titles for charts and graphs
Figure 11-14 Pictures can send powerful messages. When possible, let your web users decide how much data to combine in one picture.
The rationale behind inverted pyramid writing holds for graphics as well. Busy web users want to grab key messages from the graphics just as they do from the text. But the traditional way of titling charts and graphs just by their subject matter (“gasoline use per month for the last 2 years”) forces the web user to work at analyzing the chart and extracting the key message. Instead, you can help people take away the key message of your chart or graph by putting that message in the title (“gasoline prices have been rising steadily over the last 2 years”). The researchers at the U. S. Economic Research Service do a good job of giving illustrations key message titles, as in Figure 11-15.
Follow principles of good data reporting
Accuracy is as critical in web graphics as in any other medium, and it’s just as easy to mislead with statistics on the web as on paper. Don’t do it. A mistake that many people make, for example, is to show only partial data, starting where the data does instead of at zero. But that magnifies and exaggerates differences in the data.
Fowler and Stanwick’s Web Application Design Handbook, 2004, has an extensive section on designing graphics to present data.
Mood picture
And now we’ve reached the other end of the continuum – illustrations (almost always photos) that are primarily meant to evoke an emotional response. These photos are representational; they show real people or real objects. But their purpose is not to say “here’s what the jacket that you might buy looks like” or “this is what we mean by a package compared to a letter.” Their purpose is to engender good feelings about the site and the brand.
Make sure that the photos evoke the mood you want
For example, Queens University in Canada used to have a home page with a rotating set of pictures. Sometimes, it showed a picture of buildings, as in Figure 11-16. Sometimes, the picture was of students, as in Figure 11-17.
What is your reaction to these two versions of the web page?
I’ve used these two versions in many workshops. When I show the page with the picture of a building, workshop participants tell me the school is “cold” and “staid” and they would not want to go there. When I show the same page with the picture of students, workshop participants tell me the school is “warm” and “welcoming” and they would want to go there. Pictures evoke emotions and moods.
That’s not to say that pictures of buildings are always wrong. It’s a matter of where the picture comes on the web site and who the audience is. For potential students, the building isn’t meaningful. However, if you were creating a page for alumni and you knew that they were likely to have fond memories of a particular part of campus, a picture of the buildings on that part of campus might be very appropriate. It might evoke exactly the positive emotional response that you want.
Think of your global audience
As with many mood-setting photos, the picture in Figure 11-18 can be either a deeply meaningful image or just a pretty postcard – depending on your relationship to what it shows.
Note, too, that humor is extremely difficult to manage well on the web. What is funny to one person may not be to the next. And humor is deeply cultural. What is funny in one culture is not in another. Because the web is so global, it’s really hard to be universally humorous. Think carefully before using humorous graphics.
Here, as always in creating successful web content, you must think beyond yourself. The mood pictures that work for you, with your knowledge of the organization and your feelings about the organization’s buildings and people might not work for people who don’t know those buildings or people.
Figure 11-18 is from the web site of the Olympia, Washington, newspaper. Olympia is the capital of Washington State in the U. S., and the picture is of the state capitol building in its setting of evergreen trees. For local readers and former Olympians who may be reading the online version from far away, this picture probably evokes positive feelings of “home town,” “my town.” The picture may make some other people who come to the site realize that Olympia must be the state capital. But for others, the picture may be pretty but meaningless. Would a tag line, such as “The newsletter of Washington’s capital city” as an addition to the name and picture make a broader audience more comfortable with and more interested in the paper’s web site?
Nine general guidelines for using illustrations effectively
No matter what you are using illustrations for, keep these nine guidelines in mind:
1. Don’t make people wonder what or why
If your site visitors have to stop to figure out what you are showing or why you are showing it, the illustration has lost its value. An illustration must make its function and meaning immediately clear – even if that meaning is just “to set the mood.” The picture in Figure 11-19 is from a museum’s web site. I found it so distracting – and spent so much time and effort trying to figure out what it represents – that I gave up on the museum’s information without delving further into the site.
2. Choose an appropriate size
Illustrations that are too small often violate the previous guideline. It’s too hard to figure out what they are showing. Avoid using photos with a lot of detail if you are going to reduce them to serve as icons.
Make sure small pictures are clear
Look back at the small photos as bullets in the example from the U. S. National Science Foundation in Chapter 9 (Figure 9-11). The two small pictures of people are clear. You can tell what (if not who) is in each picture. But did you instantly realize that the first picture is a hummingbird? that the third is a grain held between a thumb and finger? (The second picture may be visually clear, but its relationship to the topic may be obscure unless you already know a lot about high-temperature superfluids.)
Or consider the icons used as bullets in Figure 11-20, a page from Elvis.com, the web site celebrating the life and continuing cult of Elvis Presley. Which work well? Which cause eyestrain and make you wonder what they are trying to convey?
And remember how many of your site visitors are likely to have vision problems. Elvis Presley was at the height of his fame in the 1950s and 1960s; his fans who were teenagers then are now in their 50s and 60s.
Don’t use so much space for pictures that critical content gets shoved down or aside
On the other hand, don’t make illustrations so large that they prevent users from finding critical content. I know I’ve already said this at least twice (in Chapter 3, Figure 3-12, the FedEx home page, and in Chapter 4, Figure 4-3, a Dell Computers pathway page), but it may be worth harping on because it is such a prevalent problem on the web today.
3. Use illustrations to support, not hide, content
People like pictures, but they also want to find what they need quickly. If all people see on a site is illustrations and they have to wonder where the information is, you may lose them before they get to the information. Don’t play games with people who come to your site for information.
Vincent Flanders calls hiding navigation under pictures “mystery meat navigation.” www.webpagesthatsuck.com.
The pictures on the home page of the University of New Mexico’s Biology Department in Figure 11-21 are very nice, but where are the links to the site’s information? Indeed, what information does the site have? You can’t tell by glancing at the pictures – which is all the content the site gives you in its main content area.
This design just does not work; it makes people work too hard for what they need. In fact, it must not have worked for the Biology Department’s site visitors because the site has changed since I captured the web page in Figure 11-21. The page is now a static set of pictures that don’t change and are not clickable. But the page uses a subset of the pictures from the old page, so I wonder if people who had used the old site are even more confused now because what was clickable no longer is. In this case, a much greater change in design might have been more effective. And a page that brought the main content – the actual navigation – into the center of the home page might work best.
Figure 11-21 Don’t hide navigation under pictures. Don’t tease people by making them think clicking on a picture will replace the picture and then not do it. Don’t expect people to realize you’ve changed the left column when they are focused on the picture.
4. In pictures of people, show diversity
People enjoy seeing people on web sites. Pictures of people help make the web seem like a personal conversation, just like the personal pronouns and questions and answers that I’ve been suggesting throughout the book. Pictures can suggest that your web site speaks for all the different people in your organization and that you want lots of different people to be your web users. Be aware, however, of how strongly pictures of people send messages about who you are including and excluding.
To represent your organization, show diversity, but be truthful
If your organization includes a diversity of people, show that, as Figure 11-22 from the Sacramento, California, Metro Chamber did in 2005. You’ll make connections with a wide range of users and potential users of your site.
Be careful, however. Tom Brinck shared a story with me of his experience and challenge trying to develop the visual strategy for an organization. The organization wanted to reflect diversity and wanted to recruit more minorities and women than it had. However, in usability testing, when the photos had half or more women in the group, women often laughed and said that something was wrong. They knew there weren’t that many women in the organization. In an effort to show equality, the web designers had created a mismatch with current reality that seemed misleading to the very people they were trying to recruit.
To represent your site visitors, think broadly
Think cross-culturally, even within your country. Think of diversity in ethnicity, gender, and age – while, of course, being appropriate for your site. Think globally. Select photos that are appropriate for different versions of your site in different locations, while thinking about diversity for each of those locations.
Test, test, test
For all mood pictures, but especially for pictures of people, it’s very difficult to predict what people’s reactions will be.
Look at the photos in Figure 11-23 from one of the institutes in the U. S. National Institutes of Health. What adjectives would you use for them? Are they appropriate to the site?
In usability testing, the pictures at this site did very well. People saw the people in the two photos as serious researchers – the mood and brand that the agency wanted to project. “Serious” seemed to work here.
However, “serious” doesn’t always work. A colleague told me that his team found it impossible to include a photo with a serious expression on a health care site. With every “serious expression” picture that they tested, some people thought the person looked unhappy or even angry. The team ended up showing only smiles.
Even the grouping that you use may evoke emotions and explanations that surprise you. A site for people concerned with cancer tried a photo of a man with two children. One test participant’s reaction was, “Oh, poor family. Did the Mom die?’
Putting your prototype web pages in front of people and getting their reactions is the only way to know how the pictures you picked will be perceived. You can do that in focus groups or in usability testing. Whichever method you use, don’t just show the photos by themselves. Show them in the context of the web page they’ll be on and the other web content they’ll be with. Context matters, as you’ve seen in the stories I’ve just told.
5. Don’t make content look like ads
Many web users have “ad blindness"; they ignore anything that looks like an ad. Because so many sites have ads in colorful boxes in the right column, people tend to ignore any content on the right in colorful boxes.
Although the bright colors on the right in Figure 11-24 from The Pension Service in the U. K. draw your eye, do you then ignore them and head over to the left instead? The Pension Service, in fact, has replaced this design with one that has only the invitation to enlarge the text and the link to the related but different Directgov site on the right. You saw the new design back in Chapter 5 as Figure 5-6.
6. Don’t annoy people with blinking, rolling, waving, or wandering text or pictures
Movement is eye-catching. Paying attention to movement in our peripheral vision was a key survival skill when we shared space with lions on the savannah. On the web, however, movement is just plain annoying. It takes our eyes from the task we are trying to do. Don’t make page elements blink or wave or roll or jump around gratuitously.
Don’t let text roll
Think of slow readers. Think of the older people in your audience. Think of people who need to magnify text to read it. Rolling text generally achieves the exact opposite of your purpose. It frustrates people rather than satisfying their needs.
Even scrolling ticker tape is an outdated model, not appropriate for the web. Just because people are used to it in the world outside the web, doesn’t make it the best way to present that data on the web. Why not just provide a database where people can get the stock price they want without having to watch for it to come by on the screen?
Don’t change content while people are on the page
The orange box in the right column of The Pension Service site from Figure 11-24 is actually a five-part sequence that keeps changing, as you can see in Figure 11-26. Why just that one? Why do that at all?
Figure 11-26 If people even realize that the box they see is only one-fifth of the message, they may have trouble putting the five parts together. Don’t make your audience play games like this to understand your web content.
The movement in Figure 11-26 may keep people from finding what they need elsewhere on the page. Moreover, the page is specifically directed at older adults – who may need more time to read each part than the cycling of the pictures allows them.
Don’t let animated animals, birds, butterflies, and so on, roam the page
Eye-tracking studies show that people often try desperately to move away from animation. They want to concentrate on finding and understanding the information they came to the site to get. When a roaming animal or bird or butterfly crosses the path of what they are reading, they get distracted – and annoyed.
Weigh the trade-offs for animation carefully
Animation is so distracting that many people cannot concentrate on anything else on a page where something is animated, even if the animation doesn’t intrude into the main content area. So you must ask: Is the blinking ad or other animation so important that it trumps the task the web user came to do? If you don’t let people accomplish the tasks they came to the site to do, you risk losing them as future site visitors. Don’t use animation to be cute. Don’t use animation just to liven up the site. Remember that you market best by satisfying the need your site visitors came for, not by distracting them away from their tasks.
7. Use animation where it helps – not just for show
The only good reason to use animation is when it helps explain the content. For example, if you want to show a process, animation may be just the right tool to use. The animation supports and clarifies the content.
Learning how to tie different types of knots is clearly a candidate for animation, and the site Animated Knots by Grog uses motion and text together very well (Figure 11-27).
8. Don’t make people wait through splash or Flash
Flash, originally from Macromedia, now comes from Adobe Software, Inc.
Splash pages waste people’s time
Wikipedia defines splash pages this way:
A splash page of a web site is a sort of pre-home page front page, usually providing no real information besides perhaps a note about browser requirements and sometimes a web counter. Often this page is graphics-intensive and used only for reasons of branding; sometimes it provides a choice of entry points for the site proper, for instance links to Macromedia Flash and HTML-only versions of the site. The term splash screen is sometimes used interchangeably. (en.wikipedia.org/wiki/Comics_vocabulary)
The Wikipedia definition is in the entry for comic book. Splash pages come from the world of comic books. But the information-rich and e-commerce web sites that we are talking about are not comic books.
Nielsen and Loranger declare: “Splash screens must die!” (2006, p. 111). I agree. If your web users value efficiency, why make them click an extra time just to get into the site?
Truly unnecessary splash pages – meant to evoke a mood or set a tone – have mostly disappeared. They’ve morphed in two directions – the Flash videos that I’m going to denounce on the next few pages and the large pictures (either static or animated) that I’ve already denounced several times for pushing critical content too far down the page.
Only a few situations provide legitimate cases for a page before a site’s home page:
But governments and companies, today, are finding ways to help people avoid even those splash pages. If I use an external search engine to get to a Canadian government site, the search engine returns the correct home page (English or French) depending on the language of my key words. Many global companies let site visitors tell the site to remember their location and not show them the splash page again. Think innovatively of how to help your site visitors get in to your content as quickly and easily as possible – no splash, no Flash, no extra clicks.
You wear out your welcome by welcoming people too much
Making people sit through even a short movie as prepayment for using your site is not a successful marketing strategy. Don’t do it.
People who come to your site want to get in to do whatever they came to do. You may be unaware of how many customers you are losing because they can’t or won’t get past your introductory video.
The site about free hearing testing in Figure 11-28 may be offering a great service, but finding out about it is very difficult. The site opens with an animated sequence that takes several seconds even at very high bandwidth to go from a “welcome to” message to a page of pictures that looks like a home page with options. But it’s not. No matter where you click (“skip this intro,” “click to enter,” or on any of the pictures with captions), the site moves to its real home page. And that page is so busy that it’s impossible to find anything. If you go back, thinking maybe a different click will take you to a content page on the topic of a specific picture, you have to sit through the “welcome to” movie all over again. Time and time again. Utter frustration!
People want to control their online experiences
One of the guiding principles of web design is that the site visitor must be in control of the experience. Even if you give people the option to “skip this introduction,” many people get annoyed trying to find where the option is or even having to click on it.
Videos at the beginning are roadblocks for some people
It’s not just the annoyance factor. If you make having Flash (or any specific technology) a requirement for entrance to your site, you are keeping some people from getting to your content. Not everyone has Flash or wants it or has time to download it at the moment when they are trying to get information from your site.
The site that shows the screen in Figure 11-29 is shutting out many potential users.
If people can get what they need at another site, they’re likely to just jump to your competition. If they need the information from you, they’ll have to call or write – an expensive proposition for your company and possibly an extremely frustrating experience for your customer.
Figure 11-28 Welcome people by giving them what they need, not by making them wait through an animated welcome message. Don’t tease people with promises of links to specific content and then take them all to the same home page.
A story inside a story: I always start my workshops by having people share a recent web experience with the person sitting next to them. It’s an icebreaker; it gets people talking and thinking of web users; it lets us talk after the exercise about how goal- and task-oriented people are when they go to web sites. A few people share their stories with the whole group. In one workshop, a participant told this story: She had a question about her telephone service and went to the company’s web site to get an answer to her question. But she could not get into the site. The first web page insisted she watch a video; her old computer couldn’t show the video; she couldn’t find a way around the video. But she really wanted the information. So she spent an enormous amount of time finding a phone number (with a paper phone book), calling, being passed from person to person, and became so frustrated that she decided to change her service provider. Don’t put roadblocks in your site visitors’ way.
9. Make illustrations accessible
For people who use screen-readers, you must annotate illustrations so that screen-readers can describe them. You do that by writing “alternative” text with the alt attribute to an image <img> tag. I’m going to call that “alt text.”
Make the alt text meaningful
If the illustration is meant to convey substantive information, be sure to convey the information in the alt text, too. To write good alt text, you have to know why you are using the illustration. I hope that working through the continuum in this chapter has helped you think about illustrations, their uses, and their meaning.
To test whether you have a good description of each illustration, the World Wide Web Consortium accessibility guidelines suggest that you imagine reading the web page aloud over the telephone. What would you say about the image to make your listener understand it? (From www.w3.org.)
For purely decorative graphics, use empty alt text
You don’t have to describe every piece of decoration on the page. In fact, hearing “decorative bullet” over and over greatly annoyed the blind web users that Mary Theofanos and I worked with. All they wanted to hear was the words after the bullet.
But if you want your site to do well on an automated test for accessibility, you must put alt text on every graphic. The solution is to use an empty alt attribute when the graphic has no content to describe: alt=“ ”.
SUMMARIZING CHAPTER 11
Here are key messages from Chapter 11: