Answer content and design questions together

Content specialists and designers must work together to answer large questions like these:

And more detailed questions like these:

Design decisions that constrain what writers can do come up at every stage as design progresses. Content specialists must, therefore, be part of all those decisions.

Use real content throughout the process

The tradition in design has been to use dummy text that starts with the words lorem ipsum dolor as content during design. Using this text is called “greeking” even though the words are Latin and not Greek. (Greek would be in a different alphabet.)

The reason I’ve typically heard for using dummy text is that it lets people concentrate on design features without being distracted by the content. But why do that? The design has to support meaningful content, so we should evaluate design and content together.

At a recent talk in a room full of designers, I declared, “No more lorem ipsum!” The designers applauded loudly. Many designers want content early. But they tell me that clients often push them to design without content. They have trouble getting content early enough. So we need to educate clients, too, to understand the importance of content strategy and how critical real content is for successful design.

Make adjusting text size obvious

Make it easy for people to adjust the type size by giving them controls on the web page (Figure 3-1).

Most people do not know that they can change the text size through browser menus. Even for those who do know, controls on each page make the option obvious. They send the message that the site cares about them. They increase trust.

Make all the text adjust

All the text on your web pages should get larger or smaller as people adjust the type size. On some sites, unfortunately, only the main content area adjusts with these changes. The side columns of navigation and other elements don’t change.

All the content is important. Don’t make people squint – or leave your site – because they can’t read your menus or the sides of your pages.

Also, make sure that your pages are still usable at larger type sizes. For example, make sure that people can still get to the control of a dropdown box and that they can still use the fields in your online forms.

Allow other changes – contrast, keyboard, voice, and more

People’s needs vary widely. Some people must use certain colors to see contrast between text and background. Others can only use the keyboard. Some need captioning for videos. Others need to hear everything.

Ford Mobility (Figure 3-2) and Ability.net (Figure 3-3) both provide lots of help to site visitors with special needs. You can, too.

Check the colors for color-blind site visitors

Never let color be the only indicator of a feature, function, or information.

Consider what would happen on your site if someone cannot tell that the items on the page are in red or in green (or in other specific colors). Figure 3-4 shows what a row of hats looks like to different people. If it is important that people see hats with five different colors, these colors won’t work for people with deuteranopia, a form of red/green color-blindness.

Selecting colors that work for people with different variants of color-blindness is not simple. It isn’t as easy as just avoiding all reds or all greens. The shade of red or green matters. And other colors can be problematic in combination with certain reds and greens.

Think about the cultural meaning of colors

Universal usability also means being sensitive to differences in language and culture both within your own country and across borders. 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 aggressive, soothing, cheerful, luxurious – and those connotations differ across cultures. Colors are sometimes associated with political parties, which, of course, are country-specific. 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.

1 Work with your brand colors

If you are working with an established organization, the brand will almost certainly dictate the color palette to work with. Unless you have serious problems, with it, work within that color scheme.

2 Use light on dark sparingly

Light text on a dark background is called “reverse type.” Most people find reverse text difficult to read for sustained periods, so don’t use it for your main content.

If you want to change the contrast from dark on light (the best) to light on dark, use reverse type only for small bits and make the type bold so it stands out. For example, many designers make reverse type work well on tabs, as Staples does in Figure 3-5.

3 Keep the background clear

Patterned backgrounds obscure the text, as in Figure 3-6. Don’t do it. You defeat your goals if you make the page hard to see and the text hard to read.

4 Keep the contrast high

Legibility requires high contrast between text and background. Many color combinations make text difficult to read because they don’t provide enough contrast between text and background (Figure 3-7).

Dark on dark (top row) or light on light (middle row) isn’t as clear as dark on light or light on dark (bottom row). Blue text on red may even seem to vibrate on the screen, making that combination very difficult on the eyes.

1 Create consistent patterns

People love patterns. 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. Consistent patterns also help build site visitors’ trust in the site, as well as confidence they’ll have a successful experience.

We build our mental models of sites – our expectations for where different content elements are and what they look like – both from our experiences with other sites and with what we find on a particular site.

2 Align elements on a grid

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 content elements 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 lined up well.

Figure 3-9 shows how the New York Metropolitan Opera provides an easy-to-use site by setting up clear alignment and grids on each type of page.

3 Keep active space in your content

Too little space on a web page or app screen can make information very difficult to skim, scan, find, and read. Too much space in the wrong places can mislead people about whether the web page is finished and about how headings fit with the text.

Information designers distinguish between passive space and active space (Figure 3-10).

Online, we can usually reduce passive space, but we must keep active space to help people make sense of the information. Create useful active space by:

Compare the active space that you saw in Figure 3-10 with the lack of active space in Figure 3-11.

On mobile screens, you have almost no room for passive space. But you must keep active space. For mobile web and app, let go of words. Keep only the content that you really need. Present that content in short pieces, lists, and visuals with a little space around each piece. Look back at Figure 3-8 and see how small amounts of active space make the NPR mobile screen work so well.

4 Beware of false bottoms

You don’t control how much any particular site visitor sees without scrolling. What they see depends on whether they are looking at your site on a mobile, tablet, laptop, or large monitor. Even on a large monitor, it depends on the resolution they are using and how large a 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 lots more, the message that the horizontal line or a large block of space seems to be sending overwhelms the message of the scroll bar.

Don’t put a horizontal line or a large block of space across your web page. They stop people. Check your site on different devices, different size monitors, at different resolutions, and in different browsers to be sure that your spacing is not likely to mislead people.

5 Don’t let headings float

When headings are the same distance from the text before them as they are from the text after them, our eyes don’t know how to group the information on the web page. Compare Figures 3-12 and 3-13.

When headings come right on top of the text, your site visitors won’t have to think about how the headings and text go together. To make headings work well, put more active space above the heading than between the heading and the text it goes with.

Floating headings come naturally with ordinary HTML. To put the headings directly on top of the text they cover, use a cascading style sheet (CSS). You get much more with a CSS than just solving the problem 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!

By the way: If you want to use rules (lines) with your headlines or headings, consider putting them over, not under. That way, the rule helps your site visitors group the headline with the rest of the page and each heading with the text that follows.

6 Don’t center text

Centered text violates our need for alignment. When the text is centered, our eyes have no “anchor” – no steady place to come back to at the start of each line. Centered text may be lovely on a wedding invitation, but it’s tiring for reading.

Even menu items in a left or right navigation column are easier to skim and scan when they are lined up on the left. Column headings in a table work better when each heading starts at the left column edge rather than being centered over the column.

Unless you are writing poetry, don’t center text anywhere on your web pages.

1 Set a legible sans serif font as the default

Most web sites use sans serif type, such as Arial, Tahoma, or Verdana.

Whether a font has serifs is not the whole story. Within each of those broad categories, fonts 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 font 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.

Based on research in the mid-twentieth century, people often said that serif fonts were better for sustained reading. A common 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 for several reasons:

(An aside: Even on paper, you may want to use an appropriate sans serif. This book is in Trade Gothic, a sans serif font.)

Research on web content has not shown a consistent winner between serif and sans serif for either reading speed or comprehension. But preference almost always favors the familiar sans serif fonts. It may be familiarity; people see most sites in these sans serif fonts. It may be that a site in serif font looks like a paper document; it seems old-fashioned.

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 content in that font because browsers only use what the specific computer has available. Do usability testing to make sure your default results in legible pages.

2 Make the default text size legible for your visitors

Online, you are balancing how much to say and the space for saying it. If you only have 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 words and focus on your key messages. If the type is too small, people won’t read what you wrote. Write less. Use type large enough for your site visitors to read easily.

3 Set a medium line length as the default

The problem with very long lines of type is physical. Long lines are tiring to read. Our eyes have to move more to get to the end of the line. When moving back to the beginning for the next line, people sometimes skip a line or go back up a line.

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, the copy can be hard to understand.

So set the default for classic web and tablet to be a medium line length (50 to 70 characters or about 8 to 10 words). Also, set your text to be fluid (liquid layout) so it adjusts and wraps well as people resize their windows or turn their mobiles from one orientation to another.

4 Don’t write in all capitals

Using capital letters for headlines, headings, and emphasis is a carry-over from typewriter days when writers had very few options for varying the type in a document. We 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.

5 Underline only links

On web pages, people assume that anything that is underlined is a link, no matter what color it is. Underlining for emphasis or to indicate a book title is an old-fashioned technique from typewriter days.

6 Use italics sparingly

Italics have always been the way to show a book title in a printed document. Use that in your web content. Otherwise, use italics sparingly. They work as a light form of emphasis, but an entire paragraph in italics is hard to read.

Don’t use italics for headings. They don’t stand out on the page. And people don’t agree on how to put italics into a hierarchy of headings. When I show people sets of headings all at the same 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 for 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 to show the levels.