Putting it all together A case study

In the following case study, I take a web page through a series of changes so that you can see the effect of each design guideline. Case Study 7-1 Revising a poorly designed web page Consider this page about the White-naped Crane as it originally appeared on a web site about birds White-naped Cranes breed in northeastern Mongolia, northeastern China, and adjacent areas of southeastern Russia. Breeding habitat includes shallow wetlands and wet meadows in broad river valleys, along lake edges,...

Break down walls of words

Even with inverted pyramid style, keep your paragraphs short and use bulleted lists. Break up the text. Walls are barriers. Large blocks of text that look like wall-to-wall words are barriers to web users. Very short paragraphs or bullet points work best. If you are moving from writing for paper to writing on the web, think of the pieces you need as even smaller than what you would plan for a paper document. Each small topic needs its own heading. Each question and answer needs the question as...

Apply all the clear writing techniques to your legal information

You can use personal pronouns in legal information. (Consider the agreements you sign for credit cards, cell phones, cable service, insurance, and so on. Almost all of them use we and you.) ffifi In the process of or following consultation of this web site, data Vfy pertaining to identified or identifiable persons may be processed. When you use this web site, we may collect data about you or people you tell us about - for example, people to whom you are sending a gift. We may use that data to ....

Twelve guidelines for writing useful headings

In this chapter, we'll consider these 12 guidelines to help you help your web users with good headings 1. Start by outlining your content with headings. 2. Ask questions as headings when people come with questions. 3. Give statement headings to convey key messages. 4. Use action phrase headings for instructions. 5. Use noun and noun phrase headings sparingly. 6. Put your site visitors' words in the headings. 7. Exploit the power of parallelism. 8. Don't dive deep keep to no more than two levels...

Setting the tone and personality of the site

Remember that your web site is part of a conversation. You set the tone For an interesting paper on web for your side of the conversation by sharing the web site's personality sites having personalities, see with your site visitors. Indeed, different web sites have different person- Coney and Steehouder, 2000. alities - expressed in the site's visual style, colors, graphics, typography, writing style, and words. A few years ago, the U. S. Internal Revenue Service (IRS, the tax collectors) had a...

Cut unnecessary words

Sometimes, sentences are longer than necessary because the writer uses several words where one (or none) will do. Too many words yv Too many words Due to the fact that business is good at this point in time, Because business is good now, . . . (j j One word for five One word for five The San Francisco Zoo could cut many words from Figure 8-19 without losing any meaning. As you can see in Figure 8-20, the heading and the links are all you need to give the essential messages. Today, colored...

But if you dont want people to wander off in the middle put links at the end below or next to your main text

If you want people to read your entire sentence or paragraph or article, don't invite them to leave by embedding links in the middle of what you are writing. Otherwise you are muddling up two tasks for your site visitors reading and moving on. Embedded definition links that open a small window and don't change the entire screen are okay. They clarify the ongoing conversation they don't change the topic. (Look back at Figure 6-12 in Chapter 6.) The chances of people coming back once they've been...

Essages

In Chapters 3 and 4, we looked at home pages and pathway pages - at getting to the information. In Chapter 5, we started on information pages by considering how to break up documents and large blocks of information into separate web pages. In this chapter, we'll talk about what to put into each of those information pages. First, let's expand our picture of how people get to your information pages. The top line in this new picture is the one we focused on as we discussed home pages and pathway...

Building your site up from the content not only down from the home page

Most web users who come to your site are looking for information that is a few clicks down in the site. If they navigate to the information, they do so by going down a path from the home page. But to make those paths -and your home page - work well, you have to build the site the other way, from the information up through the pathways to the home page. To build up from the content, you have to have some sense of the content you have and the content you will need for the site. Do a content...

Tracking Your Order

Getting email confirmation of your order Getting an email when we ship your order Gift order for someoneon the same email Don't let us spoil the surprise Following your order with its tracking number Checking your order in Order Tracking History Checking all your orders for the past year Getting email confirmation of your order If you gave us your email address when you placed your order, well send you confirmation of the order by email within two hours. This confirmation will give you the...

When the picture is a book or magazine cover or printed brochure think about whether the link between print and web is

For online booksellers, a picture of the book cover next to information about buying the book online makes sense. For journals where the 1. Enter your PIN What if i don i from your renewal form) frays 1. Enter your PIN What if i don i from your renewal form) frays 2. Is your registration privilege now revoked or suspended in any state OYes ONo J poorly designed. Revising it would help people whether they are doing the task online or off-line. Showing a paper document may help people do tasks...

Think about how best to provide all this information to these web users

Thinking about Joe, the injured worker, and about the information that they needed to provide, the web team at the Washington State Department of Labor and Industries created a web site with each phase in the process as a tab in the content area under the page title layering within the page where links open to more information without changing the underlying page The three screens that follow show you how this works. Home Safety Claims Insurance Workplace Rights Find a Law(RCW) or Rute (WAC)...

Dont number list items if they are not steps and people might confuse them with steps

In a procedure, people work through the list of numbered steps in order. In other lists, you may be telling people that they have a choice among different ways of doing something. If you use numbers for both procedures and other lists, you risk confusing your site visitors. They may not realize that the second type of list is showing alternatives they make think they have a procedure and have to do it all. Compare two pages from the Land's End web site. Figure 9-20 is about returning items if...

Give statement headings to convey key messages

When you write questions as headings, you play out both sides of the conversation. You put the site visitor on the page with you - the site visitor asks the question you answer it. When you write statements as headings, you assume the site visitor has asked the question. You keep your site visitors in mind and talk directly to them, without putting them on the page with you. Statement headings work well in the same types of documents as questions. With statement headings, you are making your...

Dont underline anything but links Use italics sparingly

On web pages, most people assume that anything that is underlined is a link, no matter what color it is. So reserve underlining for links. Underlining for emphasis or to indicate a book title is an old-fashioned technique that comes from typewriter days. Italics have always been the way to show a book title in printed documents. Use that on your web pages. Otherwise, use italics sparingly. Italics work as a light form of emphasis, but you don't want to overemphasize too much at once. An entire...

Use your information to create personas

If you've done the first four steps in this chapter, you have a lot of facts about the people who will or should come to your web site. But it may be hard to imagine real people in the facts you've gathered. Do the facts seem dry Do they lack human interest - a real sense of the people your web content is for Alan Cooper popularized personas in design. Cooper's books are listed in the bibliography. A great way to bring your web users alive for yourself and your team is to create personas. A...

Medium line length as default

People not only adjust the text size, they adjust the width of the window they are looking at. This is another huge difference between paper and the web. Monitor sizes vary screen resolutions vary how much screen space people give to each window varies. For your web pages to be readable and useful, the text must adjust and wrap well from line to line as people resize their windows. So set your text to be fluid also called a liquid layout . However, you should consider what your web page will...

Splash pages waste peoples 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...

Wrap lines under each other not under the bullet

To make your lists look and work as lists, the bullets have to stand out. If the text wraps back to the beginning of the line under the bullet, each list item looks like a paragraph with a funny symbol at the beginning. It doesn't look like a list. Where a list item wraps to a second line, start the second line - and all other lines - under the text, not back under the bullet. If you code text as list items, HTML puts in a round circle bullet and wraps the text correctly. However, if you use...

Start by outlining your content with headings

I'm nottalking about formal outlining with roman numerals, letters, and so on. Just put down the headings in order. If you use more than one level, indent a bit for the second level. You can then see the patterns you are creating at a glance. This is the same advice that I gave in Chapter 6, Checklist 6-1, where I suggested starting by putting down the questions that people would ask. Here I'm elaborating a bit to say that sometimes you'll keep those questions as your outline, and, therefore,...

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

Marketing is likely to be ignored on a pathway page

Short descriptions may help people choose well, but pathway pages are not the time for lengthy marketing messages. You market best when you help your site visitors have successful experiences. Most web users don't want to stop to read even your friendly, welcoming messages while they are still hunting for the page they need. Consider the pathway page in Figure 4-4. It tells home buyers and homeowners all about the various types of information and help they can get from FannieMae.com. Why not...

Beware of false bottoms

You don't control how much of your web page any particular site visitor is looking at. What they see depends on their monitor size, their screen resolution, and the size of the window they have open. Over and over in usability testing, I've seen people stopped by a horizontal line or a block of space at the bottom of their screen. Even if the scroll bar shows that there's much more, the message that the horizontal line - and even more a large block of space - seems to be sending overwhelms the...

A pathway page is like a table of contents

You would not expect to see paragraphs of text mixed into a table of contents. You want to scan the table of contents to get a quick overview of what's offered pick the place that you want to go to That's exactly what a pathway page is for - whether it is the path to information in a manual or to a section of an e-commerce site. Figure 4-1, the pathway page for the Kids' section of L.L.Bean.com, shows how you can give site visitors lots of options. On a pathway page such as this, be sure to use...

Who decides on the sites personality

If you own the site it's your blog it's your company , you decide on the tone and personality you want your site to have. However, if you are part of a larger organization, it's not your decision alone. In fact, another division of the organization for example, marketing or corporate communications may dictate aspects of the site's brand - colors, templates, and writing style. Don't arbitrarily reject those decisions there's value to your site visitors in finding a consistency in personality...

When people want to read from the screen

Why make the document look just like paper if it is not meant to be used on paper For example, a two-column layout works very well on paper. It doesn't work well on the web if you can't see the entire page without scrolling. On the screen, people have to scroll down while reading only halfway across the screen and then scroll up again to read the second column. A document like the U. S. Department of Agriculture Issue Brief in Figure 5-14 just begs to be printed and read off-line. fS At 800 X...

Click here is never necessary

Most web users today assume that something that looks like a link is a link. Years ago, Click here may have been a useful instruction it's not needed any more. Don't announce links with Click here just put what people will get by clicking here into your link format. The Click here links give no information to separate one link from another. The first three red headlines are not links the last two are - but nothing on the page helps people know that. Centered text is harder to read. See Chapter...

How do people use press releases on the web

The new life of press releases hit home to me when I was usability testing a web site meant for researchers and research librarians. The first scenario went something like this You have heard that researchers at . . . just released a new report on . . . and you want to see what they have to say on that topic. Link press releases to relevant information on the web site -full reports, pages about people, production information, and so on. We thought that participants would look for the new...

Interlude Creating an Organic Style Guide

As you create your web content, you and your colleagues may have questions about grammar, spelling, punctuation, and writing style. Organic start small and let it grow as issues and questions arise. On our site, how are we writing list items When do we start each list item with a capital letter, and when don't we do that On our site, how are we writing list items When do we start each list item with a capital letter, and when don't we do that

Use space effectively Keep active space in your content

Space is an important design element -both on paper and on web pages. If you are used to writing and designing for paper, however, you may need to think about space somewhat differently for your web content. Most web users are still looking at screens that show much less than a typical sheet of paper. Even people with monitors large enough to show an entire sheet of paper often don't maximize each window. So we want to make good use of the screen real estate that we...

Divide web content by task

When you are putting task-based information on a web site, realize that, in almost all cases, a site visitor is looking for information on only one of what may be many tasks that your product lets users do. Breaking up task-based information into a single web page for each task is the best way to help web users get just the content they need. Of course, you also need a good search engine and a good navigation structure to allow your site visitors to quickly find the right web page. Figures 5-4...

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

Lets people grab and go

On the web, breaking information into pieces for different users, different topics, different questions, and different needs helps web users to grab just what they need and go on to look up their next question, do their next task, make a decision, get back to work, or do whatever comes next for them. In this book, we'll look at several ways to write so that busy web users can grab and go. Figures 1-1 and 1-2 show you just one example of how we can transform traditional writing into good web...

Start with the key point Write in inverted pyramid style

Whatever your essential message is, put it first. Many web users read only a few words of a page - or of a paragraph - before deciding if it is going to be relevant and easy for them to get through. If they think it might not be, they move on. They may jump down the page to a heading or a bulleted list or to very briefly try another paragraph. And that may be all the time and attention that they'll give to a page. Like many other usability specialists, I have seen that behavior with most web...

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. FREE SHIPPING on purchosas of Si00 or mora Plus, enjoy FREE RETURNS to any G p store, cftcfc for code Our Top Picks J in lt Mm Arrivait F M Oirtkl fKea I S m fkiru amp Sk rtf OrtJiai el i ItSMrta Ti S T e ta f-Aittn tT-mekj Outerwear ActJvanear Eh u amp Seeks See Prentpitch pecktf aide , elT pcUu ambroic t OOH C 1Mn. M chl mnah- imp frrtK-...

Web users skim and scan

Last time you were on the web, how much did you want to read How quickly did you want to get past the home page of the site you went to Did you search How much of the search results page did you read Did you navigate How much did you want to read on the pathway menu pages you had to go through to get to the information you were looking for What did you do when you got to the page where you thought the information was Did you start to read right away Or did you first skim and scan Most people...

Put the action in the verbs not the nouns

Much of the web is about action, and verbs are the action words. Even in essays and articles, you are probably talking about people doing things. Doing action verbs. If you bury the action in a noun, the verb often becomes just an uninteresting placeholder. Take the action out of the noun and put it in the verb, where it belongs. i Weak sentence The Commission's recommendations for changes were few in number. Strong sentence The Commission recommended few changes. Retention of these records for...

Use noun and noun phrase headings sparingly

They work sometimes but more often than not, they don't work because site visitors don't know the nouns, don't connect to the nouns, don't give the nouns the same meaning the web writer did. Nouns as headings often don't help either the writer or the site visitor understand the flow of the writing - why one section logically comes before or after another section. Nouns label things they aren't conversational. Unlike questions, statements, and action phrases,...

Use a style guide to keep the site consistent

At any given time, some aspects of every language are in transition. For example, many words come into English with a hyphen, like e-mail, and over time lose the hyphen. But different people and different organizations are at different places in the transition. Some still use the hyphen others don't. To have a consistent web site, you have to decide where your site is in that transition. Remember that we discussed web sites' personalities in Chapter 3. Organizations, like their web sites, have...

Avoid archaic legal language

Many words and phrases that we find in legal information i n English just seem to shout This is legal stuff. You won't understand it. Phrases like mation clearly, see www to wit, the said example, and heretofore were plain language .plainlanguage.gov. hundreds of years ago. People actually talked that way, so reading those words was easy for people - then. But language changes over time. Words come into the language. Words leave the language. Those words - and many other legalisms - have left...

Dont let headings float

Space should help people see what goes with what on web pages, and one important relationship is that between headings and text. One of the most serious problems on many web pages is that the headings are the same distance from the text before them as they are from the text after them. The headings float in space, seemingly unconnected to the text they cover. When headings come right on top of the text, you have no question about what text each heading goes with. Look back at the Stanford...

Use action phrases for action links

Note that not only is the new link on the NCES page in Figure 12-7 more specific, it also starts with a verb. Verbs imply doing and much of the web is about doing. In a study by Ann Chadwick-Dias and her colleagues at Fidelity See Chadwick-Dias, McNulty, and Investments, web users, especially older adults, hesitated to click on Tullis, 2003. links that were single nouns, like Accounts. When the Fidelity team changed the links to action phrases, like Go to accounts, web visitors of all ages were...

Use action phrase headings for instructions

Many of the questions that users bring to web sites are How do I. . . If you have only one such question with many other questions on a web page, it's fine to keep that as a question. However, if you have a series of questions, all of which would start How do I . . . people may have a hard time finding the one they want. Which set of headings is easier to scan and use When you find yourself writing how do I . . . over and over, take away the repeated words and start each heading with the action...