Make the page elements obvious using patterns and alignment

Good design uses creativity to develop usable web pages. On a usable web page, each of the various elements of the page (logo and name, search, global navigation, local navigation, content, ads, and so on) are instantly obvious, allowing people to select what they want effectively and efficiently. Two critical aspects of making page elements obvious are patterns and alignment. People are very pattern-oriented. If the Search box is in the upper right on the home page, we expect to see it in that...

Think conversation Ask the question from the site visitors point of view

As I wrote in Chapter 8, if you use questions as headings, write as if you were recording both sides of the conversation. Use I for the site visitor in the question and you for the site visitor in the answer. Which version of the question about applying for food stamps in Figure 10-5 is more natural (I copied these short pieces from two different U. S. counties' web sites.) How can a person apply for food stamps Doesn't a person make I this feel impersonal How can I apply for food stamps C>...

Write key message titles for charts and graphs

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 You can k f J simple or aspects .< You can keep the map show many aspects, such as rivers and roads. You can keep the map show many aspects, such as rivers and roads. It was raining in Tasmania and very dry in most of Australia when I captured this map. Jro*4i 0riinf li (3 Itfiiitniflg a 6C nutet y mwKxn y.j c,*ii medum v bflhtntrifl detected ever...

Start with the context first things first second things second

Start each paragraph with a topic sentence - a sentence that sets the context, that tells readers what the paragraph is about. Even within a sentence, always set the context first. Research shows that people jump to act as soon as they see something that tells them to act. They don't always read on to see if more information restricts the action. That's the problem with a sentence like the one in Figure 8-22, from eHow's instructions on getting wine stains out of fabric. For a fascinating study...

Dont embed links if you want people to stay with your information

To this point in the chapter, we've focused on links on home pages and pathway pages, where your primary goal is helping people move on. Let's turn to an issue for the information pages at the end of that pathway. As we discussed in the section on layering in Chapter 6, information pages also often include links - to more details or related information. Recently, one of the hottest topics for one of my clients was this question Is it okay to embed links in paragraphs of text or should you...

Set a sans serif font as the default

Most web sites use sans serif type, such as Arial or Verdana or Tahoma. That's a difference between modern web sites and what has traditionally been used for paper documents. A brief primer on fonts and type families If you open the font list in your word processing program, you'll see a long list of available fonts. That list could be even longer your list probably shows only some of the hundreds of fonts that have been developed. All those hundreds of fonts, however, fall into two major...

Keep the sentence structure in lists parallel

It's faster and easier to read a list when all the entries are in the same sentence structure. 3. Six templates to choose from. Did you choose the one on the left That's the one in parallel structure. But did you first assume it would be the one on the right If you did, that's how quickly you had built a pattern from the little tables like this in this chapter. The other two examples you've seen in this table format both had the good choice on the right. I...

Fourteen guidelines for helpful design

Here are 14 guidelines to design pages that will help - and not hinder -your site visitors 1. Make the page elements obvious, using patterns and alignment. 2. Consider the entire site when planning the design. 4. Use space effectively. Keep active space in your content. 8. Set a sans serif font as the default. 9. Use a relative type size with a default large enough to read easily. 10. Use a fluid layout with a medium line length as default. 11. Don't write in all capitals. 12. Don't underline...

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). Figure 11-1 Your purpose in using a picture can range from purely representational to purely...

Divide web content by people

Another useful way to break up your web content is to consider who is going to use the information. Separating information for different site visitors may work well at many levels within a site. The Nokia and Intuit examples earlier in this chapter ask people to self-identify by the product for which they want help. That's typical of support and troubleshooting information on sites that support many products. On some web sites, information for different people is totally separate and the site...

For questions and answers use I and you for the site visitor we for the organization

If you follow the advice in this book, you'll find yourself writing in ques-tion-and-answer style for at least some of your web content. Web writers often ask me how to use pronouns in these questions and answers. When the site visitor is asking the question, I suggest using I and my in the question (the voice of the site visitor) you and your in the answer for that same person we and our for the company or agency that is answering the question When the site is asking the question, I suggest...

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

Instructions With Headings

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