13
Using Illustrations Effectively
,The web is a very visual medium, and illustrations are part of your web conversations. So let’s take this chapter to talk about what makes illustrations work well – or not work well.
As with all web content, when planning illustrations, you must think about purposes, personas, and conversations. Ask yourself:
• What do I want to achieve by having an illustration here?
• Why type of illustration is best for my purpose?
• Will this illustration speak well to those people? (For example, if you use a photo of people to represent site visitors, will your site visitors say, “ah, yes, those people are like me”?)
• Does the illustration add value to the conversation? What value? In what way?
What about video?
Video has become extremely popular as a medium for web content. Video is a great way to make stories come alive and to demonstrate how to do a task. But producing great videos is not my expertise, so I can only give you a few general guidelines and refer you to other resources.
• Remember that not everyone has fast download time – keep to 5 MBs or less per minute if you expect the video to stream seamlessly.
• Make it short (3–5 minutes) or break it into short segments.
• Keep it simple. If a picture is worth 1,000 words, you can say a lot with just a bit of video.
• Make it interesting. A “talking head” (someone lecturing) is boring. But don’t go wild. Don’t lose your important message in a distracting whirlwind of colors and motion.
• Give the video an informative headline. (Look back at Chapter 8 about headlines.)
For accessibility, be sure to make a transcript of the video available for site visitors who can’t see. And provide captioning for site visitors who can’t hear.
Remember SEO for video, too. Search engines can’t yet actually search the images, so you need to get keywords into places like the video’s file name and description. Also if you put the video on a video-sharing site like YouTube and then embed it in your site, you’ll get not only wider distribution but also the SEO benefit of the times people view it on the video-sharing site.
For more on creating great videos for your web site: www.utexas.edu/web/video.
I’ve broken this chapter into two main sections:
Five purposes that illustrations can serve
Illustrations serve purposes from exact representation to emotion-evoking mood setting (Figure 13-1).
Figure 13-1 Your purposes in using a picture can range from showing the item someone might buy to setting the mood.
Let’s briefly consider these five and how they fit into content as conversation.
Exact item: What do customers want to see?
In e-commerce, of course, you typically show a picture of the item your site visitor might buy.
Have you thought about how those pictures are part of the conversation with your customers?
Back in Chapter 1 (Case Study 1-2), you saw a page from eBags.com as an example of a conversation with few words. Figure 13-2 shows another example from the same site where you can see how eBags.com chooses pictures to respond to the most common questions site visitors have about their products.
What specifically do people want to know about what they might buy from your site?
If you aren’t sure what people look at or ask about, talk to the people who speak directly with customers. Check what’s being talked about in your company’s – and your competitors’ – social media. See what your competitors offer in pictures and ask yourself if those pictures are adding value to the conversation by answering a question customers probably have.
Self-service: What helps people help themselves?
In travel, theater, sports, and many other situations, pictures or diagrams help people serve themselves – and save you customer service calls. Think of showing, not just telling.
Showing options visually
Pictures can help people select appropriately from different options. For example, a theater’s seating chart allows easy comparison all at once (Figure 13-3).
Figure 13-3 Showing a seating chart – or what a hotel room looks like – answers site visitors’ questions and helps them serve themselves.
Connecting paper documents to online forms
If your company or client is getting calls because people can’t find something on a paper document that they need for an online form, consider an illustration.
• 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 (Figure 13-4).
Figure 13-4 One good use of pictures is to clarify where to find something that people need so they can finish their online task.
Of course, an even better solution would be to revise the paper document to make the PIN more obvious. Consider the conversation going on here.
Always imagine the conversation as you write. Consider how illustrations would fit well into that conversation. But also think about whether you can do something elsewhere to make the process simpler for site visitors. You might be able to help them serve themselves better.
Process: Will pictures make words memorable?
Showing a process with pictures as well as words can be both eye-catching and informative (Figure 13-5).
Figure 13-5 Pictures draw our eyes to the process and can make it more memorable.
As with all web content, keep your process pictures simple. Animate the process only if that adds useful information and won’t annoy people. Instead of animation, consider providing a video as well as the simple pictures.
More about animation later in this chapter, including a lovely example of useful animation – teaching the process of tying knots
Charts, graphs, maps: Do they help site visitors get my message?
Visuals are particularly useful for showing data.
Let people decide how much to see
To keep maps, charts, and graphs simple, consider letting people choose how much data to see. Weatherzone does that (Figure 13-6).
Figure 13-6 When possible, let your site visitors decide how much data to combine in one picture.
Show numbers in charts – with a key message title
Compare Figures 13-7 and 13-8. Which makes the key message stand out better?
Figure 13-8 My suggestion to make the comparison much clearer
Of course, you might want to have some text with the graph to elaborate on what the numbers mean. As the press release says, we may be looking at what’s happening in two different segments of the population. You might also want to have another graph – with trend lines to show that sales of soda are decreasing while sales of bottled water are increasing.
And remember to always explain the chart in ALT-text so people who are listening to the screen can get the information, too.
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.
Mood: Which pictures support the conversation?
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 objects. But their purpose is not to say, “here’s what this jacket that you might buy looks like” or “this is how many people will fit in a compact car.” Their purpose is to engender good feelings about the brand and the site.
Match photos to your messages
Figures 13-9 and 13-10 show how you can express mood and send positive messages with people and with animals (in this case, birds).
Figure 13-9 This landing page for students shows diversity and a love of books. Does it make you feel you would be comfortable going there?
Figure 13-10 The Nature Conservancy, a nonprofit that buys and preserves land throughout the world, uses pictures like this to encourage people to join, renew, and donate.
www.nature.org; Photo © Suranjan Mukherjee, used with permission
Think about what the photo is saying
Even mood pictures are part of the conversation. They send messages. For example, pictures of people send messages about “you’ll fit in here” or (often inadvertently) “you won’t fit in here.”
Mood pictures help set the tone of the conversation. Often, their role is to say “feel good about us” (sort of like asking people to “like this” on Facebook). They can support your brand adjectives and brand messages: “We’re trustworthy; bank with us.” “We’re a cool place; shop here often.”
Always ask yourself what messages different people are likely to take from your mood pictures. For example, compare the banner in Figure 13-11 from a different university with the one in Figure 13-9 that you just saw from City College of New York. Which picture makes you more interested in the university whose site they come from?
Figure 13-11 Is it clear what message this is sending? Does it entice you to that university? Pictures of buildings usually don’t bring out the same warm and fuzzy feelings as pictures of people.
Seven guidelines for using illustrations effectively
For all five types of illustrations, keep these guidelines in mind:
1. Don’t make people wonder what or why.
2. Choose an appropriate size.
4. Don’t make content look like ads.
5. Don’t annoy your site visitors with blinking, rolling, waving, or wandering text or pictures.
In the first edition, I also had the guideline, don’t make people wait through splash or Flash. The guideline is still critical, but I’m happy to say that most people have learned it. The example I used in the first edition, www.freehearingtest.com, hasn’t changed. But with that exception, I see almost no “you must wait through this” Flash introductions anymore.
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. The picture in Figure 13-12 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.
Figure 13-12 An obscure picture may be so distracting that people miss the important content on your web page.
Thanks to Caroline Jarrett who found this picture when we were planning a workshop together.
2 Choose an appropriate size
Like the bears’ beds in the Goldilocks story, illustrations may not work if they are too small or too large.
Don’t let large pictures push content down too far
Photos on many web pages take up so much room that the critical content is pushed below the fold. Yes, people scroll – but not always and only if they see something above the fold that lets them know that what they need is further down on their screen.
Look back at Case Study 5-2 and notice how the site visitor didn’t spend any time on the picture.
If you use large pictures on your pages, be sure that critical content is still near the top. Make sure the navigation and nonpicture content are easy to find and easy to read (legible). Remember that people may be on smaller screens and at lower resolutions than you are. Test! Test! Test! with representative web users for your site, with the size monitor or screens they typically use, and at typical resolutions.
Make sure small pictures are clear
Small pictures (thumbnails) sometimes violate the guideline to not make people wonder what or why. If you are reducing photos to serve as icons or bullets, avoid using ones with lots of detail.
In Figure 13-13 from the Lonely Planet’s online pages for India, which pictures are instantly clear? Which are not?
3 Show diversity
Pictures of people make web sites vivid, attractive, and conversational. They remind visitors that you are talking with them through the web site.
But that works only if your site visitors identify with the people in the pictures. Pictures of people send very strong messages. In many usability tests, I have seen participants choose not to click on a link because the photo with the link made them think the information was for a different group – not for them.
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 and for the specific content. Think globally. Choose photos that are appropriate for different versions of your site in different locations, while thinking about appropriate diversity in each of those locations.
Show your internal diversity, but be truthful
If your organization includes a diverse group of people, show that.
For example, the Boys & Girls Club of America (BGCA) has a mission “to enable all young people, especially those who need us most, to reach their full potential.…” And they show that with real alumni in Figure 13-14.
Figure 13-14 Diversity is obvious from this picture of people who really participated in the Boys & Girls Club of America.
Test! Test! Test!
You may be surprised by the messages people take from your pictures.
Tom Brinck shared a story with me of his experience trying to develop the visual strategy for an organization:
The organization wanted to recruit more minorities and women than it had. So it showed a diverse group as employees. But that was their hope for the future, not their present reality. And potential hires knew that. In usability testing, when the photos had half or more women in the group, women laughed and said 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 the organization was trying to recruit.
Tom’s story shows the value of usability testing. For all mood pictures, especially pictures of people, it’s very difficult to predict site visitors’ reactions.
Another story, this time from my own work:
I was doing a usability test of a site for a group that does medical research. The home page had two pictures of scientists, a young woman concentrating as she looked into a modern microscope and a man with a white coat and a stethoscope. Participants said the people in the photos were serious researchers and made them feel the site would have credible research information. That was just the mood and brand that the agency wanted to project. “Serious” worked here.
But “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 whom you want as site visitors is the only way to know what messages people will take from the pictures. Don’t ask, “Do you like it?” Ask, “What are these pictures saying to you?” “What adjectives come to mind when you look at these pictures?”
And, always show the photos in context. Show the whole web page with the rest of the page’s web content. Context matters.
4 Don’t make content look like ads
What is your reaction to the home page in Figure 13-15 on the next page? It was the home page of a U.S. county’s site in 2011.
Figure 13-15 I doubt if this site conversed well with residents or business owners.
Many people expect colorful small boxes to be ads – especially on the right side of a web page. Ads often appear there, and ads try to attract attention with color and graphics. If your site visitors are looking for information from your site – and aren’t interested in an ad that they think will take them away from your site – they are very likely to ignore those colorful boxes. So don’t put content from your site – or links to that content – into ad-like boxes.
5 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 screen, however, movement is just plain annoying. It takes our eyes from the task we are trying to do.
Figure 13-16 has moving text in three places on the screen.
Figure 13-16 This web site may be much harder for many people to use than the designers realize.
Think of slow readers. Think of your older site visitors. Think of people who must magnify text. Rolling text frustrates people rather than satisfying their need.
6 Use animation only where it helps
The only good reason to animate graphics is if it helps explain the content. For example, animation can be very useful to walk someone through a process.
Today, video is the most common technique for animation. But situations still exist where a nonvideo animation works best. For example, Animated Knots by Grog uses motion and text together very well to show how to tie many different knots (Figure 13-17).
Figure 13-17 The first four of seven steps in tying a square knot. You can watch the animation all at once, or you can move through it step by step. Each step also makes a bit more of the text dark – so you can follow the steps in text as well as pictures.
www.animatedknots.com (animated knots mobile app)
The web site also offers a video. Both mobile app and web site use clear and colorful icons with words for navigation.
7 Make illustrations accessible
For people who use screen-readers, you must annotate illustrations so the assistive software 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 ALT-text meaningful
If the illustration is meant to convey substantive information, be sure to convey that information in the ALT-text, too. If the illustration is a mood picture, your ALT-text should describe what is in the picture – focusing on the elements that create the emotional response you expect.
To write good ALT-text, you must know why you are using the illustration. I hope that working through the different purposes for illustrations in this chapter has helped you think about what you are putting on your site.
To test whether you have a good description for 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 listeners understand it?
Summarizing Chapter 13
Key messages from Chapter 13:
• Illustrations can serve many purposes.
– Exact item: What do customers want to see?
– Self-service: What helps people help themselves?
– Process: Will pictures make words memorable?
– Charts, graphs, maps: Do they help site visitors get my message?
– Mood: Which pictures support the conversation?
• Don’t make people wonder what or why.
– Don’t let large pictures push content down too far.
– Make sure small pictures are clear.
– To represent your site visitors, think broadly.
– Show your internal diversity, but be truthful.
• Don’t make content look like ads.
• Don’t annoy people with blinking, rolling, waving, or wandering text or pictures.