Brochure: Design Elements of a Technical Document
Markel, M. (2015). Technical communication (11th ed.). Boston, MA: Bedford/St. Martin's
Chapter 11: Designing Print and Online Documents
design refers to the physical appearance of print and online documents. For print documents, design features include binding, page size, typography, and use of color. For online documents, many of the same design elements apply, but there are unique elements, too. on a web page, for instance, there are navigation bars, headers and footers, and (sometimes) tables of contents and site maps.
The effectiveness of a document depends largely on how well it is designed, because readers see the document before they actually read it. in less than a second, the document makes an impression on them, one that might determine how well they read it—or even whether they decide to read it at all.
goals of document design
In designing a document, you have five major goals:
• to make a good impression on readers. Your document should reflect your own professional standards and those of your organization.
• to help readers understand the structure and hierarchy of the information. As they navigate a document, readers should know where they are and how to get where they are headed. They should also be able to see the hierarchical relationship between one piece of information and another.
• to help readers find the information they need. Usually, people don’t read every word in a print document, and they don’t study every screen of an online document. In print documents, design elements (such as tabs, icons, and color), page design, and typography help readers find the information they need quickly and easily. In online documents, design elements are critically important because readers can see only what is displayed on the screen; without design elements to help them navigate, they are stranded.
• to help readers understand the information. Effective design can clarify information. For instance, designing a set of instructions so that the text describing each step is next to the accompanying graphic makes the instructions easier to understand. An online document with a navigation bar displaying the main sections is easier to understand than an online document without one.
• to help readers remember the information. An effective design helps readers create a visual image of the information, making it easier to remember. Text boxes, pull quotes, and similar design elements help readers remember important explanations and passages.
understanding design Principles
Your biggest challenge in thinking about how to design a document is that, more than ever, readers control how the document appears. Although you can still write a memo, print it on a piece of 8.5 × 11-inch paper, and stick it in an interoffice envelope, that model of print-only communication is becoming increasingly rare. Most of the time, readers encounter your document online. Even if you produced it with a word processor, designed it to fit on a piece of 8.5 × 11-inch paper, and saved it as a PDF to preserve the design, your readers can still zoom in or out, altering what appears on their screen.
For documents that are intended to be viewed online, such as websites, apps, and other kinds of programs, readers can control many aspects of the design, including color and the size, shape, and location of objects on the screen. Perhaps the most significant variable that you have to consider is screen size. Some devices on which your readers will use your document will be as large as big-screen TVs, whereas others will be as small as wrist watches.
In this chapter, the term print document will be used to refer to documents that are designed to be printed on paper, such as letters, memos, and reports, regardless of whether readers hold pieces of paper in their hands or view the documents online. The term online document will be used to refer to docu- ments that are designed to be used online, such as websites, apps, and other software programs.
Because there are so many different types of print and online documents used in so many different environments by so many different people for so many different purposes, it is impossible to provide detailed advice about “how to design” a technical document. Still, there are some powerful and durable principles that can help you design any kind of print or online document. The following discussion is based on Robin Williams’s The Non- designer’s Design Book (2008), which describes four principles of design: proximity, alignment, repetition, and contrast.
PrOxiMity
The principle of proximity is simple: if two items appear close to each other, the reader will interpret them as related to each other. If they are far apart, the reader will interpret them as unrelated. Text describing a graphic should be positioned close to the graphic, as shown in Figure 11.1.
AliGNMeNt
The principle of alignment says that you should consciously line up text and graphics along a real or imaginary vertical axis so that the reader can under- stand the relationships among elements. Figure 11.2 on page 253 shows how alignment works to help organize information.
rePetitiON
The principle of repetition says that you should format the same kind of information in the same way so that readers can recognize consistent pat terns. For example, all first-level headings should have the same typeface, type size, spacing above and below, and so forth. This repetition signals a connection between headings, making the content easier to understand. Other elements that are used to create consistent visual patterns are colors, icons, rules, and screens. Figure 11.3 shows an effective use of repetition.
CONtrASt
The principle of contrast says that the human eye is drawn to—and the brain interprets—differences in appearance between two items. For example, the principle of contrast explains why black print is easier to read against a white background than against a dark gray background; why 16-point type stands out more clearly against 8-point type than against 12-point type; and why informa- tion printed in a color, such as red, grabs readers’ attention when the informa- tion around it is printed in black. Figure 11.4 shows effective use of contrast.
Planning the design of Print and online documents
In a typical day at work, you might produce a number of documents without having to worry about design at all. Blog posts, text messages, presentation slides and memos that use standard company templates—these applications and others present no design challenges either because you cannot design them or because you don’t have the authority to design them.
You will, however, have a say in the design of many documents you pro- duce or to which you contribute. In a case like this, the first step in design- ing the document is to plan. Analyze your audience and purpose, and then determine your resources.
ANAlyze yOUr AUDieNCe AND PUrPOSe
Consider factors such as your readers’ knowledge of the subject, their atti- tudes, their reasons for reading, the way they will be using the document, and the kinds of tasks they will perform. For instance, if you are writing a benefits manual for employees, you know that few people will read it from start to finish but that many people will refer to it. Therefore, you should include accessing tools: a table of contents, an index, tabs, and so forth. Think too about your audience’s expectations. Readers expect to see certain kinds of information presented in certain ways. Try to fulfill those expectations. For example, hyperlinks on websites are often underscored and presented in blue type.
If you are writing for multicultural readers, keep in mind that many aspects of design vary from one culture to another. In memos, letters, reports, and manuals, you may see significant differences in design practice. The best advice, therefore, is to study documents from the culture you are addressing. Here are a few design elements to look for:
• Paper size. Paper size will dictate some aspects of your page design. If your document will be printed in another country, find out about standard paper sizes in that country.
• typeface preferences. One survey found that readers in the Pacific Rim prefer sans-serif typefaces in body text, whereas Western readers prefer serif typefaces (Ichimura, 2001).
• Color preferences. In China, for example, red suggests happiness, whereas in Japan it suggests danger.
• text direction. If some members of your audience read from right to left but others read from left to right, you might arrange your graphics vertically, from top to bottom; everybody reads from top to bottom. Or you might use Arabic numerals to indicate the order in which items are to be read (Horton, 1993).
Think, too, about your purpose or purposes. For example, imagine that you are opening a dental office and you want to create a website. The first question is What is the purpose of the site? It’s one thing to provide informa- tion on your hours and directions to the office. But do you also want to direct patients to high-quality dental information? To enable them to set up or change appointments? Ask you a question? Each of these purposes affects the design, whether the document is going to print or online.
DeterMiNe yOUr reSOUrCeS
Think about your resources of time, money, and equipment. Short, informal documents are usually produced in-house; more-ambitious projects are often subcontracted to specialists. If your organization has a technical-publications department, consult the people there about scheduling and budgeting.
• time. What is your schedule? To come up with a sophisticated design you might need professionals at service bureaus or print shops or specialists in online production. These professionals can require weeks or months.
• money. Can you afford professional designers, print shops, and online- content developers? Most managers would budget thousands of dollars to design an annual report but not an in-house newsletter.
• equipment. Complex designs require graphics and web software, as well as layout programs. A basic laser printer can produce attractive documents in black and white, but you need a more expensive printer for high- resolution color.
designing Print documents
Before you design the individual pages of a printed document, design the overall document. Decide whether you are creating a document that looks like a book, with content on both sides of the page, or a document that looks like a report, with content on only one side of the page. Decide whether to use paper of standard size (8.5 × 11 inches) or another size, choose a grade of paper, and decide how you will bind the pages together. Decide about the accessing elements you will include, such as a table of contents, index, and tabs. You want the different elements to work together to accomplish your objectives, and you want to stay within your budget for producing and (perhaps) shipping. That is, in designing the whole document, consider these four elements: size, paper, bindings, and accessing aids.
Size
Size refers to two aspects of print-document design: page size and page count.
• Page size. Think about the best page size for your information and about how the document will be used. For a procedures manual that will sit on a shelf most of the time, three-hole 8.5 × 11-inch paper is a good choice. For a software tutorial that must fit easily on a desk while the reader works at the keyboard, consider a 5.5 × 8.5-inch size. Paper comes
precut in a number of sizes, including 4.5 × 6 inches and 6 × 9 inches. Although paper can be cut to any size, nonstandard sizes are more expensive.
• Page count. Because paper is expensive and heavy, you want as few pages as possible, especially if you are printing and mailing many copies. And there is a psychological factor, too: people don’t want to spend a lot of time reading technical documents. Therefore, if you can design a document so that it is 15 pages long rather than 30—but still attractive and easy to read—your readers will appreciate it.
PAPer
Paper is made not only in different standard sizes but also in different weights and with different coatings. Heavier paper costs more than lighter paper but provides better resolution for text and graphics. Coated paper is stronger and more durable than non-coated paper and provides the best resolution, but some coatings can produce a glare. To deal with this problem, designers often choose paper with a slight tint.
Work closely with printing professionals. They know, for example, about UV-coated paper, which greatly reduces fading, and about recycled paper, which is continually improving in quality and decreasing in price.
BiNDiNGS
Although the pages of a very short document can be attached with a paper clip or a staple, longer documents require more-sophisticated binding tech- niques. Table 11.1 illustrates and describes the four types of bindings com- monly used in technical communication.
ACCeSSiNG AiDS
In a well-designed document, readers can easily find the information they seek. Most accessing aids use the design principles of repetition and contrast to help readers navigate the document. Table 11.2 on page 258 explains six common kinds of accessing aids.
designing Print Pages
In a well-designed printed page of technical communication, the reader can recognize patterns, such as where to look for certain kinds of information.
PAGe lAyOUt
Every page has two kinds of space: white space and space devoted to text and graphics. The best way to design a page is to make a grid: a drawing of what the page will look like. In making a grid, you decide how to use white space and determine how many columns to have on the page.
Page Grids As the phrase suggests, a page grid is like a map on which you plan where the text, the graphics, and the white space will go. Many writers like to begin with a thumbnail sketch, a rough drawing that shows how the text and graphics will look on the page. Figure 11.8 shows thumbnail sketches of several options for a page from the body of a manual.
Experiment by sketching the different kinds of pages of your document: body pages, front matter, and so on. When you are satisfied, make page grids. You can use either a computer or a pencil and paper, or you can combine the two techniques.
Create different grids until the design is attractive, meets the needs of your readers, and seems appropriate for the information you are conveying. Figure 11.10 shows some possibilities.
White Space Sometimes called negative space, white space is the area of the paper with no writing or graphics: the space between two columns of text, the space between text and graphics, and, most obviously, the margins.
Margins, which make up close to half the area on a typical page, serve four main purposes:
• They reduce the amount of information on the page, making the document easier to read and use.
• They provide space for binding and allow readers to hold the page without covering up the text.
• They provide a neat frame around the type.
• They provide space for marginal glosses.
Figure 11.11 shows common margin widths for an 8.5 × 11-inch document. White space can also set off and emphasize an element on the page. For
instance, white space around a graphic separates it from the text and draws readers’ eyes to it. White space between columns helps readers read the text easily. And white space between sections of text helps readers see that one section is ending and another is beginning.
COlUMNS
Many workplace documents have multiple columns. A multicolumn design offers three major advantages:
• Text is easier to read because the lines are shorter.
• Columns allow you to fit more information on the page, because many graphics can fit in one column or extend across two or more columns. In addition, a multicolumn design enables you to put more words on a page than a single-column design.
tyPOGrAPhy
Typography, the study of type and the way people read it, encompasses typefaces, type families, case, and type size, as well as factors that affect the white space of a document: line length, line spacing, and justification.
typefaces A typeface is a set of letters, numbers, punctuation marks, and other symbols, all bearing a characteristic design. There are thousands of typefaces, and more are designed every year. Figure 11.12 on page 266 shows three contrasting typefaces.
Most of the time you will use a handful of standard typefaces such as Times New Roman, Cambria, Calibri, and Arial, which are included in your word-processing software and which your printer can reproduce.
type Families Each typeface belongs to a family of typefaces, which con- sists of variations on the basic style, such as italic and boldface. Figure 11.14, for example, shows the Helvetica family.
Be careful not to overload your document with too many different mem- bers of the same family. Used sparingly and consistently, these variations can help you with filtering: calling attention to various kinds of text, such as warnings and notes. Use italics for book titles and other elements, and use bold type for emphasis and headings. Stay away from outlined and shadowed variations. You can live a full, rewarding life without ever using them.
Case To make your document easy to read, use uppercase and lowercase letters as you would in any other kind of writing (see Figure 11.15). Most people require 10 to 25 percent more time to read text using all uppercase letters than to read text using both uppercase and lowercase. In addition, uppercase letters take up as much as 35 percent more space than lowercase letters (Haley, 1991). If the text includes both cases, readers will find it easier to see where new sentences begin (Poulton, 1968).
ETHICS NOTE
USiNG tyPe SizeS reSPONSiBly
Text set in large type contrasts with text set in small type. it makes sense to use large type to emphasize headings and other important information. But be careful with small type. it is unethical (and, according to some court rulings, illegal) to use excessively small type (such as 6-point or smaller type) to disguise information that you don’t want to stand out. When you read the fine print in an ad for cell-phone service, you get annoyed if you discover that the low rates are guaranteed for only three months or that you are committing to a long-term contract. you should get annoyed. hiding information in tiny type is annoying. don’t do it.
line length The line length most often used on an 8.5 × 11-inch page— about 80 characters—is somewhat difficult to read. A shorter line of 50 to 60 characters is easier, especially in a long document (Biggs, 1980).
line Spacing Sometimes called leading (pronounced “ledding”), line spacing refers to the amount of white space between lines or between a line of text and a graphic. If lines are too far apart, the page looks diffuse, the text loses coherence, and readers tire quickly. If lines are too close together, the page looks crowded and becomes difficult to read. Some research suggests that smaller type, longer lines, and sans-serif typefaces all benefit from extra line spacing. Figure 11.16 shows three variations in line spacing.
Line spacing is usually determined by the kind of document you are writ- ing. Memos and letters are single-spaced; reports, proposals, and similar documents are often double-spaced or one-and-a-half-spaced.
Figure 11.17 on page 270 shows how line spacing can be used to distin- guish one section of text from another and to separate text from graphics.
Justification Justification refers to the alignment of words along the left and right margins. In technical communication, text is often left-justified (also called ragged right). Except for the first line in each paragraph, which is some- times indented, the lines begin along a uniform left margin but end on an irregular right margin. Ragged right is most common in word-processed text (even though word processors can justify the right margin).
In justified text, also called full-justified text, both the left and the right margin are justified. Justified text is seen most often in formal documents, such as books. The following passage (U.S. Department of Agriculture, 2002) is presented first in left-justified form and then in justified form:
Full justification can make the text harder to read in one more way. Some word processors and typesetting systems automatically hyphenate words that do not fit on the line. Hyphenation slows down and distracts the reader. Left-justified text does not require as much hyphenation as full- justified text.
titleS AND heADiNGS
Titles and headings should stand out visually on the page because they intro- duce new ideas.
titles Because the title is the most-important heading in a document, it should be displayed clearly and prominently. On a cover page or a title page, use boldface type in a large size, such as 18 or 24 points. If the title also appears at the top of the first page, make it slightly larger than the rest of the text—perhaps 16 or 18 points for a document printed in 12 point—but smaller than it is on the cover or title page. Many designers center titles on the page between the right and left margins.
headings Readers should be able to tell when you are beginning a new topic. The most effective way to distinguish one level of heading from another is to use size variations (Williams & Spyridakis, 1992). Most readers will notice a 20-percent size difference between an A head (a first-level head- ing) and a B head (a second-level heading). Boldface also sets off headings effectively. The least-effective way to set off headings is underlining, because the underline obscures the descenders, the portions of letters that extend below the body of the letters, such as in p and y.
In general, the more important the heading, the closer it is to the left mar- gin: A heads usually begin at the left margin, B heads are often indented a half inch, and C heads are often indented an inch. Indented C heads can also be run into the text.
In designing headings, use line spacing carefully. A perceivable distance between a heading and the following text increases the impact of the head- ing. Consider these three examples:
Summary
in this example, the writer has skipped a line between the heading and the text that follows it. The heading stands out clearly.
Summary
in this example, the writer has not skipped a line between the heading and the text that follows it. The heading stands out, but not as emphatically.
Summary. in this example, the writer has begun the text on the same line as the heading. This run-in style makes the heading stand out the least.
Other DeSiGN FeAtUreS
Table 11.3 shows five other design features that are used frequently in technical communication: rules, boxes, screens, marginal glosses, and pull quotes.
designing online documents
The previous discussion of designing printed documents focused on four compo- nents: size, paper, bindings, and accessing aids. Of these four components, size and accessing aids or tools are relevant to websites and other online documents.
Size is important in that you can control—to some extent, at least—how much information (text, graphics, animation) you assign to the screen. On all but the smallest screens, you can use multiple columns and vary column width, and you can fill screens with content (and thereby use fewer screens) or leave a lot of white space (and thereby use more screens). As people are increasingly turning to smaller screens for reading online content, you want to pay more attention to designing your information so that it is clear and attractive. You also want to be sure that you design the site so that key information is emphasized and easily accessible to users. In addition, you want to consider audience character- istics such as age (use bigger type for older people) and disabilities (for example, include text versions of images so that people with vision disabilities can use software that “reads” your descriptions of the images).
Accessing tools are vitally important, because if your audience can’t figure out how to find the information they want, they’re out of luck. With a print document, they can at least flip through the pages.
The following discussion focuses on seven principles that can help you make it easy for readers to find and understand the information they seek:
• Use design to emphasize important information. • Create informative headers and footers. • Help readers navigate the document. • Include extra features your readers might need. • Help readers connect with others.
• Design for readers with disabilities.
• Design for multicultural readers.
Although some of these principles do not apply to every type of online docu- ment, they provide a useful starting point as you think about designing your document.
USe DeSiGN tO eMPhASize iMPOrtANt iNFOrMAtiON
The smaller the screen, the more cluttered it can become, making it difficult for readers to see what is truly important. In documents designed to be viewed on different-sized screens, you want readers to be able to find what they want quickly and easily. As you begin planning a site, decide what types of infor- mation are most essential for your audience, and ensure that that content in particular is clearly accessible from the home screen. Give your buttons, tabs, and other navigational features clear, informative headings. For more guidance on emphasizing important information, see Chapter 9.
Once you have determined the information you want to emphasize, adhere to design principles rigorously so that users can easily identify key content. Use logical patterns of organization and the principles of proxim ity, alignment, repetition, and contrast so that readers know where they are and how to carry out the tasks they want to accomplish. Figure 11.22 shows a well-designed screen for a mobile phone.
CreAte iNFOrMAtiVe heADerS AND FOOterS
Headers and footers help readers understand and navigate your document, and they help establish your credibility. You want readers to know that they are reading an official document from your organization and that it was cre- ated by professionals. Figure 11.23 shows a typical website header, and Figure 11.24 shows a typical footer.
helP reADerS NAViGAte the DOCUMeNt
One important way to help readers navigate is to create and sustain a consistent visual design on every page or screen. Make the header, footer, background color or pattern, typography (typeface, type size, and color), and placement of the navigational links the same on every page. That way, read- ers will know where to look for these items.
Making Your Document Easy To Navigate
Follow these five suggestions to make it easy for readers to find what they want in your document.
include a site map or index. a site map, which lists the pages on the site, can be a graphic or a textual list of the pages, classified according to logical categories. an index is an alphabetized list of the pages. Figure 11.25 shows a portion of a site map.
use a table of contents at the top of long pages. if your page extends for more than a couple of screens, include a table of contents—a set of links to the items on that page—so that your readers do not have to scroll down to find the topic they want. Tables of contents can link to information farther down on the same page or to information on separate pages. Figure 11.26 shows an excerpt from the table of contents at the top of a frequently asked questions (FaQ) page.
help readers get back to the top of long pages. if a page is long enough to justify a table of contents, include a “Back to top” link (a textual link or a button or icon) before the start of each new chunk of information.
include a link to the home page on every page. This link can be a simple “Back to home page” textual link, a button, or an icon.
include textual navigational links at the bottom of the page. if you use buttons or icons for links, include textual versions of those links at the bottom of the page. readers with impaired vision might use special software that reads the information on the screen. This software interprets text only, not graphics.
iNClUDe extrA FeAtUreS yOUr reADerS MiGht NeeD
Because readers with a range of interests and needs will visit your site, con- sider adding some or all of the following five features:
• An FAQ page. A list of frequently asked questions helps new readers by providing basic information, explaining how to use the site, and directing them to more-detailed discussions.
• A search page or engine. A search page or search engine enables readers to enter a keyword or phrase and find all the pages in the document that contain it.
• resource links. If one of the purposes of your document is to educate readers, provide links to other sites.
• A printable version of your site. Online documents are designed for a screen, not a page. A printable version of your document, with black text on a white background and all the text and graphics consolidated into one big file, will save readers paper and toner.
• A text-only version of your document. Many readers with impaired vision rely on text because their specialized software cannot interpret graphics. Consider creating a text-only version of your document for these readers, and include a link to it on your home page.
helP reADerS CONNeCt With OtherS
Organizations use their online documents, in particular their websites, to promote interaction with clients, customers, suppliers, journalists, govern- ment agencies, and the general public. For this reason, most organizations use their sites to encourage their various stakeholders to connect with them through social media such as discussion boards and blogs.
Use your online document to direct readers to interactive features of your own website, as well as to your pages on social-media sites such as Facebook or Twitter. Figure 11.27 on page 286 shows a portion of NASA’s community page.
DeSiGN FOr reADerS With DiSABilitieS
The Internet has proved to be a terrific technology for people with disabilities because it brings a world of information to their devices, enabling them to work from home and participate in virtual communities. However, most sites on the Internet are not designed to accommodate people with disabilities.
The following discussion highlights several ways to make your online documents easier for people with disabilities to use. Consider three main types of disabilities as you design your site:
• vision impairment. People who cannot see, or cannot see well, rely on text- to-speech software. Do not rely on color or graphics alone to communicate information—provide either a text-only version of your document or textual equivalents of all your graphics. Use the “alt” (alternate) tag to create a textual label that appears when the reader holds the mouse over the graphic. For example, if you use a red icon to signal a warning, also use the word warning. Use 12-point or larger type throughout your site, and provide audio feedback—for example, having a button beep when the reader presses it.
• hearing impairment. If you use video, provide captions and, if the video includes sound, a volume control. Also use visual feedback techniques; for example, make a button flash when the reader presses it.
• mobility impairment. Some people with mobility impairments find it easier to use the keyboard than a mouse. Therefore, build in keyboard shortcuts wherever possible. If readers have to click on an area of the screen using a pointing device, make the area large so that it is easy to see and click on.
DeSiGN FOr MUltiCUltUrAl AUDieNCeS
About 75 percent of the people using the Internet are nonnative speakers of English, and that percentage continues to grow as more people from develop- ing nations go online (Internet World Stats, 2013). Therefore, it makes sense in planning your online documents to assume that many of your readers will not be proficient in English.
Planning for a multicultural website is similar to planning for a multicul- tural printed document:
• use common words and short sentences and paragraphs.
• Avoid idioms, both verbal and visual, that might be confusing. For instance, don’t use sports metaphors, such as full-court press, or a graphic of an American-style mailbox to suggest an email link.
• if a large percentage of your readers speak a language other than english, consider creating a version of your site in that language. The expense can be considerable, but so can the benefits.
ETHICS NOTE
DeSiGNiNG leGAl AND hONeSt ONliNe DOCUMeNtS
you know that the words and images that you see on the internet are covered by copyright, even if you do not see a copyright symbol. The only exception is information that is in the public domain either because it is not covered by copyright (such as information created by entities of the u.S. federal government), because copyright has expired (the author has been dead over 70 years), or because the creator of the information has explicitly stated that the information is in the public domain and you are free to copy it.
But what about the design of a site? almost all web designers readily admit to spending a lot of time looking at other sites and pages for inspiration. and they admit to looking at the computer code to see how that design was achieved. This is perfectly ethical. So is copying the code for routine elements such as tables. But is it ethical to download the code for a whole page, including the layout and the design, and then plug in your own data? no. your responsi- bility is to create your own information, then display it with your own design.
designing online Pages
Well-designed online pages are simple, with only a few colors and nothing extraneous. The text is easy to read and chunked effectively, and the links are written carefully so readers know where they are being directed.
AiM FOr SiMPliCity
When you create an online document, remember that readers are increas- ingly likely to use it on a device with a small screen. In addition, they will likely read in noisy, distracting environments with too much light or not enough light. For these reasons, keep the design as simple as you can.
Designing a Simple Site
Follow these four suggestions to make your design attractive and easy to use.
use simple backgrounds. a plain background is best. avoid busy patterns that distract the reader from the words and graphics of the text.
use conservative color combinations to increase text legibility. The greater the contrast between the text color and the background color, the more legible the text. The most legible color combination is black text against a white back- ground. Bad idea: black on purple.
Avoid decorative graphics. don’t waste space using graphics that convey no useful information. Think twice before you use clip art.
use thumbnail graphics. instead of a large graphic, which takes up space, requires a long time to download, and uses up your reader’s data-download allotment, use a thumbnail that readers can click on if they wish to open a larger version.
Designing Easy-To-Read Text
Follow these three suggestions to make the text on your sites easy to read.
keep the text short. Poor screen resolution makes reading long stretches of text difficult. in general, pages should contain no more than two or three screens of information.
Chunk information. When you write for the screen, chunk information to make it easier to understand. use frequent headings, brief paragraphs, and lists.
make the text as simple as possible. use common words and short sentences to make the information as simple as the subject allows.
MAke the text eASy tO reAD AND UNDerStAND
Online pages are harder to read than paper documents because screen reso- lution is less sharp.
CreAte CleAr, iNFOrMAtiVe liNkS
Well-phrased links are easy to read and understand. By clearly indicating what kind of information the linked site provides, links can help readers decide whether to follow them. The following guidelines box is based on Web Style Guide Online (Lynch & Horton, 2011).
Writing Clear, Informative Links
links are critically important. Follow these three suggestions to make them easy to use.
structure your sentences as if there were no links in your text. awkward Click here to go to the rehabilitation Center page, which links
to research centers across the nation.
smooth The rehabilitation Center page links to research centers across the nation.
indicate what information the linked page contains. readers get frustrated if they wait for a web file to download and then discover that it doesn’t contain the information they expected.
uninformative See the rehabilitation Center.
informative See the rehabilitation Center’s hours of operation.
use standard colors for text links. readers are used to seeing blue for links that have not yet been clicked and purple for links that have been clicked. if you have no good reason to use other colors, stick with the ones most readers expect.
Analyzing several online-document designs
The best way to learn about designing websites and their pages is to study them. Figures 11.28 to 11.30 offer examples of good web page design.
WrITEr’S CHECKLIST
Did you
analyze your audience: their knowledge of the subject, their attitudes, their reasons for reading, and the kinds of tasks they will be carrying out? (p. 254)
consider the purpose or purposes you are trying to achieve? (p. 255)
determine your resources in time, money, and equipment? (p. 255)
Designing Print Documents and Pages
Did you consider the best size for the document? (p. 256) consider the best paper? (p. 256) consider the best binding? (p. 256)
think about which accessing aids would be most appropriate, such as icons, color, dividers and tabs, and cross-reference tables? (p. 256)
use color, if available, to highlight certain items, such as warnings? (p. 258)
devise a style for headers and footers? (p. 259) devise a style for page numbers? (p. 259)
draw thumbnail sketches and page grids that define columns and white space? (p. 262)
choose typefaces that are appropriate for your subject?
(p. 265) use appropriate styles from the type families? (p. 266)
use type sizes that are appropriate for your subject and audience? (p. 268)
choose a line length that is suitable for your subject and audience? (p. 268)
choose line spacing that is suitable for your line length, subject, and audience? (p. 268)
consider whether to use left-justified text or full-justified text? (p. 269)
design your title for clarity and emphasis? (p. 272) devise a logical, consistent style for each heading level?
(p. 272)
use rules, boxes, screens, marginal glosses, and pull quotes where appropriate? (p. 272)
Designing Online Documents
Did you create informative headers and footers? (p. 282)
help readers navigate the site by including a site map, a table of contents, “Back to top” links, and textual navigation buttons? (p. 283)
include extra features your readers might need, such as an FAQ page, a search page or engine, resource links, a printable version of your site, or a text-only version? (p. 285)
help readers connect with others through links to interactive portions of your site and to social-media sites? (p. 285)
design for readers with vision, hearing, or mobility impairment? (p. 285)
design for multicultural audiences? (p. 286)
aim for simplicity in web page design by using simple backgrounds and conservative color combinations and by avoiding decorative graphics? (p. 287)
make the text easy to read and understand by keeping it short, chunking information, and writing simply? (p. 288)
create clear, informative links? (p. 288)
