7 Designing Your Web Pages for Easy Use
When people come to a web page, they form an impression of the page before they read anything. They react first to the appearance (layout, fonts, colors, and so on). We all do this. You do it on other people’s sites. People do it on your site.
Creating that appearance (designing the web page) is about more than aesthetics. It’s also about usability. The design of your web pages can help people find what they need and understand what they find. It can also hinder them.
On successful web sites, the design and the writing style complement and support each other; and designers and writers must work compatibly together to accomplish that.
Designers must understand the needs of the content. If you want a successful web site, you cannot, at the end, pour content into a design that was created without detailed consideration of that content.
Content writers must work together with designers to be certain that decisions on space, font, color, and so on will lead to pages that allow site visitors to easily see and read the content.
If you are a content writer, I hope that you are working with visual designers. If you are a visual designer, I hope that this book makes you appreciate the importance of the content on the web site and that this chapter in particular makes you involve content writers early and continuously in the design process.
This chapter is about how to use layout, space, typography, and color to help people find and understand your web content.
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
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 place on all the pages. If bulleted lists are slightly indented on the first few pages we look at, we expect all bulleted lists to be indented in the same way. We are faster at understanding how the page is designed and at finding the specific part we need if the patterns are obvious and consistent across pages.
One of the most effective ways to create patterns that people quickly see and learn is to have only a few places across the page where boxes or text start. When people complain that a site is “cluttered” or “too busy” or “hard to use,” they are often reacting to pages where elements are not aligned well.
Figures 7-1 through 7-4 show two very different types of sites with obvious patterns and alignment. Figures 7-1 and 7-2 are from the web site of the investment company JPMorgan Chase.
Figures 7-3 and 7-4 are from the web site of the New York Metropolitan Opera. The designs are different, but each is consistent within itself, with clear patterns and alignment.
Figure 7-1 The elements of this web page are immediately obvious. The page has a clean, somewhat formal look, in keeping with the image that an investment company wants to portray.
Figure 7-2 The design is consistent across these pages. The color changes to indicate which of the main areas you are in. The photo changes to match the topic of the page. (I added the light gray overlay and the dotted lines to make the alignment more obvious to you.)
2. Consider the entire site when planning the design
From your site visitors’ point of view, your home page, pathway pages, and information pages are all part of the same site. Your site visitors don’t know – or care – that different people may be responsible for different parts of the site. To them, it’s all part of the same experience – getting the information they need or buying the product they want.
The design challenge is how to maintain patterns and alignment across different types of pages while making each type of page serve its purposes well. To see how this can be done, let’s look at an e-commerce example and an information site example.
Figure 7-4 Again, I added the light gray overlay and the dotted lines to show the text area and the alignment.
An e-commerce example
An e-commerce site has at least these page types in addition to its home page:
Figure 7-5 shows four pages about Godiva chocolates. Notice how well the web site maintains patterns, alignment, and consistency across different types of pages.
Figure 7-5 This site does an excellent job of maintaining consistent patterns and alignment across different types of pages while allowing each page type to serve its purpose.
An information site example
An information site should also maintain consistency in patterns and alignment across different types of pages. Figure 7-6 shows how this is done at www.usability.gov, from the U. S. Department of Health and Human Services – a great resource on usability for everyone on your web team.
Plan a consistent design across the web site
Use the process in Checklist 7-1 to plan for a consistent design across the different types of pages in your web site.
Figure 7-6 Sites that are primarily for information can also develop clean, clear patterns with alignment and consistency.
Checklist 7-1 Process for creating a consistent design
Understand the process that moves from plan to launch
You should be doing iterative usability testing throughout this process, with several versions of your prototypes.
Content writers should be aware of the design process that takes a web site from planning to final pages. Most teams move from sketches showing the elements of each page type (wireframes) through several rounds of ever more finished prototypes. The final version of each page type becomes a template that content writers, designers, and coders use to develop the actual pages in the web site.
Figure 7-7 shows four steps (out of at least 9 or 10) in one team’s process from wireframe to prototype to template to final web page. The site is for people who are new to and contemplating attending The Open University in the U. K. Whitney Quesenbery and Caroline Jarrett, who were part of the project team, shared these with me, with permission from Ian Roddis.
Integrate content and design from the beginning
Every step in this process involves meshing content and design. Even the list of page elements requires decisions about content. What will the content be like on each page type? Will there be in-page links on information pages? If so, where should they come? How much information will there be about each item in the catalogue? How long will typical headings be in the content? What patterns will the content writers use for their information? And so on.
As design progresses, more and more decisions must be made that affect web content. The placement and space allotted for different pieces of content on each page type constrain what writers can do. And so, writers must be involved in decisions about that placement and space. Decisions about font and color usually belong to the visual designer, but designers must work closely with content specialists to be certain that the choices will produce web pages that are both aesthetically pleasing and easy for people to skim, scan, read, and use.
3. Work with templates
At the end of the process, the final prototypes become templates for each page type. If you are a content writer, accept the templates with enthusiasm and use them.
The other great aid for writers besides templates is a style guide. See the interlude later in this book on Creating an Organic Style Guide.
Templates make life much easier for everyone. You can concentrate on the information, knowing how it will fit into and what it will look like on the web page. Writing to fit the constraints of a web template can help you learn to let go of words, break information into small pieces, focus on your key messages, write good headings, and use all the other guidelines in this book.
4. Use space effectively. Keep active space in your content
Space is not just emptiness. 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 have.
Too little space on a web page can make information very difficult to skim, scan, find, and read. Too much space in the wrong places can mislead people about whether the page is finished and about how headings fit with the text.
We’ll look at examples of all of these problems. But, first, I must introduce the concepts of passive space and active space because the problems are primarily related to poor use of active space.
Understand passive space and active space
Information designers distinguish between passive space and active space. Passive space is outside of the main content area, for example, the margins on a piece of paper. Active space is inside the main content area, for example, the space between paragraphs on a piece of paper. You need active space to help readers both separate and group information. Figure 7-8 shows you passive space and active space in a typical paper document, such as a draft page from this book.
Figure 7-8 A book page showing active space and passive space. The space between the bullets and the bulleted text, the space at the end of each bulleted item, and the space between the question mark icon and the text after it are all examples of active space.
For your web content, focus on active space
On the web, we can reduce passive space, but we must keep active space to help people make sense of the information. And we must use active space appropriately for the medium.
You can create useful active space by:
Compare Figure 7-9, advice from Purina, the pet food company, with Figure 7-10, about parking permits at Stanford University. The Purina page needs a little active space after each list item.
Figure 7-9 When each list item is a few lines long, the list needs space between the items. People are much less likely to even try to read a page with too little active space than a well-spaced page.
It would be even better if the list in Figure 7-9 were organized into sections with bold headings and written so that each list item started with a bold statement that summarized the main point.
5. 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 message of the scroll bar. For example, the Franklin Institute page in Figure 7-11 is likely to lead many people to conclude that the site has no search function.
Figure 7-11 Think carefully about how your use of space might create false bottoms and mislead people to think that the page is finished.
sin.fi.edu/
Don’t create false bottoms on web pages. Don’t put a horizontal line or large blocks of space across the page. They stop people. Check out your site on different size monitors, at different resolutions, and in different browsers to be sure that your spacing is not likely to mislead people.
6. Don’t 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 University page in Figure 7-10 and notice how clear the relationship is between headings and text.
The headings on the web page in Figure 7-12 from a New Zealand health site, however, don’t do as well. When I show a page like this one in my workshops, people find lots to like about it. It’s broken into small pieces. The sentences are short. It has bold headings. But they also complain that it’s hard to know what goes with what. They have trouble putting the headings and text together properly.
What’s wrong? The problem is that the headings float in space. To make headings work well, you need to put the active space above the heading and not between the heading and the text it goes with.
For more about headings, see Chapter 10.
Floating headings come naturally with ordinary HTML. To put the headings directly on top of the text they cover, use cascading style sheets (CSS). You get much more with a CSS than just solving the problems of floating headings, but it’s worth learning about and using a CSS even if this is the only problem that you have. Keeping the headings from floating is that important!
The space between the introduction to a list and the first list item is a similar problem. Use CSS to remove that space, too. For more on lists, see Chapter 9.
Figure 7-12 Put headings closer to the text they go with than to the text of the previous section. Don’t let them float in space. Use cascading style sheets to control how you place the headings.
7. Don’t center text
I began this chapter talking about the importance of patterns and alignment. Centered text violates our need for pages with obvious alignment, clear places where different types of text start.
Compare Figures 7-13 and 7-14. Figure 7-13 is the original, a pathway page from a university web site. Figure 7-14 is a revision, where the only difference is moving from centered text to left-aligned text.
Figure 7-13 Centered text is harder on the eyes than text that lines up on the left. Don’t center text.
Figure 7-14 Text should start lined up on the left and end with the right margin ragged – wherever the words end.
I don’t know why I see so much text on the web where each line is centered. We don’t read centered text well. We expect each line of a paragraph or a related set of text to start at the same place on the left.
When the text is centered, our eyes have no “anchor” – no steady place to come back to at the start of each line. So centered text is much more tiring to read than left-aligned text.
Even menu items in a left or right navigation column are easier to skim and scan when they are lined up on the left. Indeed, column headings in a table work better with the items in the column if the heading starts at the left column edge rather than being centered over the column. Use left-aligned, ragged right for all your web content.
8. 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 categories (plus the unusual, artistic fonts that you would consider only for very special situations): serif and sans serif.
To appreciate the difference, look at a capital T in Times New Roman and in Tahoma.
Serifs are the “arms” and “feet” that extend down and out on the letters of serif fonts. “Sans” is the French word for “without.” Sans serif fonts don’t have the arms and feet.
The old research on paper
Research with paper documents in the mid-twentieth century generally found that serif fonts were better for sustained reading. The explanation was that the serifs at the bottom of the letters draw the eye horizontally along the line of type.
However, relying on that research for your web content may not serve your site visitors well. Here are several reasons why that research may not carry over to modern web content:
(An aside: Even on paper, you may want to use sans serif. Brochures, forms, and instructions usually do very well in sans serif. This book is printed in Trade Gothic, a sans serif font.)
Researchers who work with low-vision readers recommend sans serif for both paper and web.
The new research on the web – no winner 3 for reading speed or comprehension, but people prefer sans serif
Research on web content has not shown a consistent result for either reading speed or comprehension. Some studies found that people did better with serif fonts; others found that people did better with sans serif fonts; still others, that it made no difference.
In most of these studies, no matter which font people read fastest or comprehended best, people preferred sans serif. It may be familiarity; people see most sites in sans serif. It may be that a site in serif font looks like a paper document; it seems old-fashioned.
Choose an easy-to-read sans serif
Serif compared with sans serif is not the whole story.
Within each of those broad categories, typefaces differ in other features, such as how wide the rounded parts of letters like “b” and “d” are, how high lowercase letters like “x” are compared to the overall height of letters like “h,” how clearly the typeface distinguishes between the letter “l” and the number “1,” how close together the letters are to each other, and so on.
Even at the same point size, different fonts take up different amounts of space on the screen. Try it for yourself by typing the same sentence several times and then changing the font but not the point size for each rendition of the sentence.
Of course, you do not entirely control what your site visitors see. They may have their browser set to always show a particular font. However, as the default, select a highly legible sans serif font. Select one that most of your site visitors are likely to have available on their computers. If you choose an unusual font, most people won’t see your pages in that font because browsers use only what the specific computer has available. Do usability testing to make sure your default results in legible pages.
9. Think broadly about users and their situations when setting type size
Type size for the web is not as simple an issue as type size for paper. Whatever you specify for type size, it may be rendered differently on a Windows machine and a Macintosh. It may be different on different monitors and through different browsers. Furthermore, your site visitors may need to adjust the size. They may need to enlarge it because they have vision problems or because they want to let someone looking over their shoulder also see what is on the screen. They may want to make the type smaller to fit more on their screen.
Set the default large enough for your site visitors
Very small text is difficult to read, even for small amounts of text.
Very large text is also difficult to read, especially for large blocks of text.
On paper, you are probably using 12-point type as the standard. That’s a good idea for the web, too. It’s still more difficult to read from the screen than from paper, so making the type at least as large as what people see on paper is a good idea. (A book like this one can use smaller type because it is printed at extremely high resolution. Typical output from a desktop printer is 600 dots per inch. Typical screen resolution is on the order of 100 dots per inch.)
If your audience is predominantly teenagers or 20-somethings, you can probably use the equivalent of 10-point type as your default, but be sure it is resizable for other site visitors. If your audience is predominantly older, you might want to set the default at the equivalent of 14-point type, again making it resizable.
Many content writers, visual designers, and developers creating web sites today are young and have great eyesight. If that’s you, think of your parents and grandparents. Look around and notice how many people wear eyeglasses. Vision declines with age. Make the default type size large enough so that people want to stay on your site and read your content.
Adjust your content so that you can use large enough type and get your message into the space you have
On the web, you are balancing how much to say and the type size for saying it. If you have only a certain amount of screen real estate for your content, you either have to write fewer words or make the type smaller. That’s a good reason to let go of the words and focus on your key messages.
Let people choose their own text size
Use relative type size so that people can adjust it for their own needs. For example, you can specify type as percentages. Headings should always be larger than the regular text, so you might set a level-one heading as 150 percent of the regular text and a level-two heading as 125 percent of the regular text. (That would be equivalent to having 18-point level-one headings and 15-point level-two headings with 12-point text. Separating heading levels by about 3 points works well.)
Make it easy for people to adjust the type by giving them buttons on the web page. Many sites now do this, as Wired Magazine has for several years. (See Figure 7-15.) Most people do not know that they can do it with the browser controls, and, even for those who do know, the buttons are a clear indication that a site has this feature, a reminder that they can adjust the size, and an easy way to do it.
Figure 7-15 Many sites, like this one, let people change the type size easily right on the web page.
Make all the text adjust, not just the main content area
All the text on the web page should get larger or smaller as people adjust the type size. On many sites, unfortunately, only the main content area adjusts with these changes, not the side columns of navigation and other information. But navigation is also critical. Don’t make people squint – or leave your site – because they can’t read the sides of your pages. Also make sure that your page is still usable when people enlarge the type. For example, make sure that people can still get to the control of a drop-down box and that they can still use the fields in your online forms.
10. Use a fluid layout with 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 look like if someone just opens it in a full window at whatever screen resolution you are designing for, such as 800 × 600 or 1024 × 768. For that default, use a medium line length (50 to 70 characters or about 8 to 10 words).
The problem with very long lines of type is physical. People’s eyes have to move more to get through the line. They have to move their eyes to get back to the beginning of the next line, and sometimes they miss a line or go back up to a line they have already read. Long lines are tiring to read.
The problem with very short lines is semantic – related to the meaning of the words. If the line is so short that people don’t get a whole phrase or set of words that go together on each line, the material is hard to understand.
This is a paragraph of information written in Verdana with a line length of 100 characters per line. Although university students in one research study read lines that were this long faster than shorter lines, in another study, other students read the medium lines fastest. And students preferred the medium line lengths in both studies. Do you find this comfortable to read?
This is a paragraph of information written in Verdana with a line length of 50 characters per line. This is the length that students preferred even when they read longer lines faster. Research on paper over many years found that people did best with lines that were about this long. Do you find this comfortable to read?
This is a paragraph of information on the web written in Verdana with a line length of 25 characters per line. Whole paragraphs in very short lines are difficult for people because it’s hard to get the meaning with so few words on a line. Do you find this comfortable to read?
11. Don’t write in all capitals
ALL CAPITALS TAKE UP 30 PERCENT MORE SPACE ON THE PAGE. THEY SLOW READING SPEED BY ABOUT 15 PERCENT. THEY ARE ALSO BORING. PEOPLE’S EYES GLAZE OVER, AND THEY TEND TO STOP READING. IN EMAIL AND ON THE WEB, PEOPLE THINK YOU ARE SHOUTING AT THEM WHEN YOU WRITE IN ALL CAPITALS.
All capitals take up 30 percent more space on the page. They slow reading speed by about 15 percent. They are also boring. People’s eyes glaze over, and they tend to stop reading. In email and on the web, people think you are shouting at them when you write in all capitals.
Which paragraph did you read? Do you agree that all capitals are more difficult and less interesting to read?
Using capital letters for headings and emphasis is a carry-over from typewriter days, when writers had very few options for varying the type in a document. You have better options today.
For web sites, follow these guidelines:
The traditional explanation for why all capitals are more difficult to read is that the shape of a word in lowercase give us more information than the shape of the same word in all capitals. The letters that stick up (have “ascenders"; b, d, f, for example) and the letters that go down (have “descenders"; g, p, y, for example) give words different shapes. Those differences in shape are present in lowercase letters but not in capital letters.
For other theories on why all capitals are more difficult to read, see Larson, 2004.
12. Don’t 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 paragraph in italics would be very hard to read.
(There’s also a difference between a font that was designed to be italic and the italic versions of many typefaces, which just slope the letters of the regular font.)
Don’t use italics for headings. First, they do not stand out on the page nearly as well as bold. Second, people do not all agree on how to put italics into a hierarchy in a set of headings. When I show people sets of headings all at the same point size where one is in bold type, one is in italic type, and one is in regular type, people always say the bold one is the highest level – the most important heading. But then I get mixed results as to whether the heading in italic is more important or less important than the heading in regular type. Use bold or color for all your headings. Change the size and possibly the placement to show which is the more important level of heading.
13. Provide good contrast between text and background
In the early days of desktop publishing, we talked about the “ransom note” effect – with so many different fonts and colors on the page that you couldn’t tell what went with what.
In the early days of the web, we saw the same phenomenon – an exuberance of design that made for colorful, but not usable, web pages. And a common problem with those web pages was a colored or patterned background that made the text virtually unreadable.
Design exuberance can still be wonderful – if it matches the personality of your site. But it has to work with and not against the content. If you want people to read what you are putting on the web, you have to make it legible. Legibility requires high contrast between text and background.
Keep the background clear so that the text is readable
Patterned backgrounds obscure the text, as in Figure 7-16. Don’t do it. You defeat your business goals if you make the page hard to see and the text hard to read.
Keep the background light and the text dark
High contrast requires a light background and dark text (or vice versa). Many color combinations are difficult to read because they don’t provide enough contrast between the text color and the background color, as you can see in Figure 7-17.
Figure 7-16 When the foreground (the words) and the background compete for attention, it’s hard to read the words. Plain backgrounds don’t compete. Textured backgrounds or backgrounds with pictures, such as the building here, do compete.
Figure 7-17 You can see for yourself that some combinations of text and background are very difficult to read.
Dark backgrounds and dark type are often very hard to distinguish. Blue text on red may even seem to vibrate on the screen, making that combination very hard on the eyes. Light colors (including light gray) are hard to see on a white background. Figure 7-18, an overview about asthma, shows you how some of these combinations look on an actual web page.
Figure 7-18 High contrast between text color and background color is essential for legibility. If people have to struggle, will they stay on your site?
aafa.org
By far the best combination for contrast and legibility is black type on a white or very light background. That’s what most web teams are using today for parts of the web page that must be easy to read. It’s a smart way to go.
Use light text on a dark background sparingly
Light text on a dark background is often called “reverse text.” Most people find reverse text difficult to read, especially for sustained periods.
Don’t use reverse text for the main content area of your web site. Look again at Figures 7-16 and 7-18. You can see how difficult reverse text is to read. (Also look at the case study at the end of the chapter.)
You can often make reverse text work well for small bits on the page, if you keep the contrast high, the size large enough, and the font bold enough. For example, many designers use reverse text on tabs, as you can see in Figure 7-19, from a Canadian site about diabetes.
14. Think about all your site visitors when you choose colors
As you choose colors, also keep in mind that different cultures attach different meanings to colors and be sensitive to the needs of people who are color blind.
Above all, never let color be the only indicator of a feature, function, or information. Make sure your site works in monochrome, even if you think no one will ever look at it without the color. Print your pages in grayscale so that you can check that all the page elements are obvious and readable.
Think about the cultural meaning of colors
Some graphics and colors are pretty much universal. You can drive almost anywhere and assume that a traffic light has red, amber, and green; that red means stop and green means go.
Colors also evoke connotations, like calm, aggressive, soothing, cheerful, luxurious – and those connotations are different in different cultures. Colors are sometimes associated with political parties – and, again, those associations vary with the culture. Rather than spout a few factoids about specific colors in specific cultures, the best advice I can give you is to test your site with people from the different cultures that you want to reach.
Check your colors to avoid problems for color-blind users
About 5 to 8 percent of males have some form of color deficiency, most often that they cannot distinguish red or that they cannot distinguish green. (Some women are color-blind, too; but the percentage is very small.)
Consider what would happen on your web site if someone cannot tell that items on the page are in red or in green (or in other specific colors). In the example from the Vischeck web site (Figure 7-20), if you only want people to see a row of hats, it may not matter that some people can’t tell that the hats are different colors. If it is important that people see hats with five different colors, however, these colors won’t work for everyone.
Selecting colors that work for the different varieties of color blindness is not simple. It isn’t as easy as just avoiding all reds and all greens. The shade of red or green matters. Other colors can be problematic when used in combination with certain reds and greens.
The best way to know if your web page is going to cause problems is to check your design before you finalize it. Sites like www.vischeck.com and colorfilter.wickline.org let you see how your web pages will look to people with different types of vision problems.
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:
Do you agree that it is not as well designed as it might be’
You can probably identify several ways to make it easier for people to see it, read it, and get the information from it.
First, let’s make it easier just to see by increasing the contrast between the background and the text.
Serif font; white background
And then let’s change from centered text to left-aligned and break it up more.
Serif font; white background; left-aligned; seven paragraphs instead of three
Now let’s change from serif font to sans serif at the same point size.
Sans serif font; white background; left-aligned; seven paragraphs instead of three
And finally, let’s revise it by reorganizing, letting go of words, putting in bold headings, and adding a picture. The page may grow a little longer, but isn’t it more inviting and easier to get the information?
SUMMARIZING CHAPTER 7
Here are key messages from Chapter 7: