TECHNIQUES
This section lists specific do's and don'ts, with examples.
Overview
A guide to the techniques listed here.
The full list:
Write links that don't have to be followed
Providing summary information at the link site can convey enough information to save the reader from following links they would otherwise have to follow just to find out a small amount of information.Use heads, subheads, and summaries
Let the reader know the bottom line up front. Offer a brief introduction that lets the reader know what information is being presented.Write newspaper style
Write in an inverted-pyramid style, with the conclusion first, details later.Use lists
Lists are easy to skim, and work well with links.Be concise
Write in a minimalist style, and be to the point.Provide detail
Link to extra information. This works much better with a computer document than a paper one.Use typography and layout for skimming
Bold fonts, short paragraphs, and borders help the reader quickly find needed information.Use screen designs, not paper designs
Take advantage of images, scrolling, non-scrolling, and links.Use maps
Image maps with organizing layouts can help the reader understand and use the document's structure.Distinguish different types of pages
Use different design layouts for different types of pages.Place page elements carefully
The layout of a page can help or hinder reading and navigation. Use of scrolling and non-scrolling areas can keep important information and links in view at all times.Pay attention to what is "above the scroll"
Make sure that the information and links that all readers of a page need are visible without scrolling when a page is first viewed.Provide guidance on where to go
Use "see also" links and tours to help the reader find their way through a document.Know your audience and their needs
Use knowledge of your readers to help design your document and try reading it in that light.Test new designs
Do usability testing on new designs to tune their effectiveness.When (and how) to use frames
Frames, if understood and used correctly, are a valuable feature of HTML.WRITE LINKS THAT DON'T HAVE TO BE FOLLOWED
Providing summary information at the link site can convey enough information to save the reader from following links they would otherwise have to follow just to find out a small amount of information.
Following a link is expensive -- don't waste the reader's time
The act of following a link and looking at a page and returning back to the original page is an expensive mental operation. Documents should be structured to minimize the number of links that must be followed that the reader would not want to see. Conversely, the reader should not miss pages that they would want to read. Often different readers will be interested in different pages.
Not wasting readers' time is very important in business web documents. Also, links that you're not sure whether or not you should follow make the document confusing and seem poorly organized. This can be fatiguing to the reader, and makes the document seem much worse than paper.The link should tell you what you'll find
A way to help the reader is to put information at the link site that helps the reader decide whether or not to follow the link. While this sounds obvious, many documents have "teaser" links ("Surprising conclusion") or vague links ("The Acme Company announced their results" -- is it a link to the company's site or to their announcement?) that don't help the reader. Don't write this way.
Helpful links summarize what the link points to. For example:"Our conclusion is that the stock is up because of an unusually high beta, not because of earnings growth."
[Tells you exactly what the link points to and summarizes it.]or
"The Acme Company (www.acmeco.com) announced its improved results."
[Lets you know which link points to Acme's web site, and which to the announcement of improved results.]Mix titles and summaries
One way of writing the links is to provide a short, descriptive title (which is linked) followed by a sentence or phrase summary. This works great in lists.Many news sites use this style on their summary pages. For example:
Acme/Zenith lawsuit settled: Acme industries dropped it's patent infringement suit against Zenith Associates and the two companies signed a mutual licensing pact.
See the examples of writing titles and summaries.
USE HEADES, SUBHEADS, AND SUMMARIES
Let the reader know the bottom line up front. Offer a brief introduction that lets the reader know what information is being presented.Help the reader skim
Use standard typographic techniques and writing features that help the reader find their way through each page of your document.
Titles, subtitles, bold subheads between paragraphs, and summaries help the reader find out what they would learn if they read a page or section in greater detail.The author knows best how to write them
Who better to write the titles and summaries than the person who knows the document best -- the author? Good titles, summaries, and subheads require a detailed understanding of the content.
Write these parts carefully to aid in skimming
In most business writing, you want to provide information in the most effective way possible. The goal is specifically not to see how much time you can get the reader to spend with your document, rather it is how little time they need to get all the information they need.
Much can be learned from straight news-style writing. Teasing titles like "The answer", as opposed to "The answer: Develop internally", should be avoided. Cleverness can be used to liven up a document some, but not if it gets in the way of understanding and communicating.
Summaries are very important on screen
It is very hard to "flip through" large amounts of material on screen the way you do with paper, so the reader has to rely on summaries and other hints of what exists provided by the author to know when they should scroll and read further or follow a link. Summaries can let the reader know the scope of what is covered and what type of information will be found. In many cases the summary itself can provide enough information for the reader so they do not have to read any more. For example, if the summary at the top of a page says that it covers domestic operations, and the reader is looking for information on international, they can skip the entire page without having to skim for sub-titles, bold words, or just any words about international.
WRITE NEWSPAPER STYLEWrite in an inverted-pyramid style, with the conclusion first, details later.
The inverted pyramid
Newspaper stories are usually written in an inverted pyramid style. This means that the basic facts, the conclusion, the lead, etc., comes first. As you move through the story, more and more detail and background is provided.
This is different than much writing where you build to a conclusion, putting together details and background before explaining what the results are.
This type of writing came about in newspapers for a variety of reasons. First, in the days of the telegraph, the whole story took long to transmit, and starting with the main information ("The battle was lost, 940 killed") was more important for getting on press immediately than the details ("Our soldiers crossed the bridge at dawn with fresh supplies..."). Secondly, it made it easier for the layout people to fit the story in the available space, since they could just cut off the end. Finally, it also made it much better for readers who had differing amounts of time to read and were awating the main information.
A similar style could be used for web pages, mainly for the last reason -- knowing that not all readers will read the entire story.This style may not be natural, since it's not like speaking
Writing with the "punch line" first, starting with the conclusion, rather than building up to it with careful reasoning may be hard for some writers used to presenting detailed arguments orally. If you think like you are writing a newspaper or newscast, instead of telling a joke, you may find it easier.
It helps to write the beginning last
One way to learn to write this way is to write the section first with all the details, and then go back and start it with a lead sentence or two. A lead (a newspaper term) is a type of summary.
USE LISTS
Lists are easy to skim, and work well with links.
Lists are short lines, and easy to skim. Since they break up nicely into chunks (one chunk per list item) they work well for organizing a related group of links. For many situations, they will work better than links scattered in a paragraph that must be read in context.
Keep the items short
To keep the list skimmable, try to keep the length of each item in the list short. One to five words is best, with two to four even better. Use direct words, avoiding fluff.
The title/summary combination makes a good list item
One format that works well on-screen is lists of short, bold headings a few words long followed by a sentence or two of summary in a lighter, perhaps smaller, font. From a skimming viewpoint, the list item is just the bold part, but more information is available when your eye stops on an item. The title part can be link. This is been used very successfully by many news sites.
For example:Acme/Zenith lawsuit settled: Acme industries dropped its patent infringement suit against Zenith Associates and the two companies signed a mutual licensing pact.
Lists work better on screen than spoken
Lists may seem out of place in a written document, since people often write in a manner that feels like it is to be read out loud. Lists, however, are perfectly well suited to computer screens.
BE CONCISE
Write in a minimalist style, and be to the point.
Overviews should be concise
When giving overview information, be concise. Save the details and flowing language for those that want them or have the time, but don't slow down the skimmer. This doesn't mean skip the details, just keep them from people who don't need them.
Be direct
Studies have shown that simple, direct language works better on screen than flowery or "marketing oriented" prose.
Techniques you can use to be concise include:
• Lists • Short phrases instead of full sentences • Direct conclusions Notice how much easier the list above is to read than this paragraph. Make sure that you are not providing less information just because you are being concise. For example, the direct conclusions can link to, or be followed by, a list of reasons for the conclusion, also written as short statements.
This paragraph is even worse. It is one of the worst paragraphs in this entire document, maybe on the whole Internet (how's that for hyperbole?). As anyone with any bit of sense can see as clearly as the clearest clean glass, the impressive use of extra words makes this paragraph unusually hard to read or skim. This should impress you by how incredibly clever this is as an excellent example of what you should never in a million years do when you want a business document that will impress your co-workers and result in that long sought-after, and exceedingly well deserved, raise or promotion.
One point per paragraph
Some people suggest that paragraphs should be limited to one point, and that point should be made clear in the first sentence. Readers are often skimming and will not finish reading the paragraph to the end to find the conclusion.
Use subheads like this to help skipping ahead
If you must provide detail that can be skipped in the flow of text, put in aids, such as headings or un-indenting, to let the reader know what comes next and where it is.
PROVIDE DETAIL
Link to extra information. This works much better with a computer document than a paper one.
Computer documents have lots of room
While parts of a document should be concise, provide detail whenever it may help the reader. Computer documents often have less total space constraints than paper documents, so the cost of providing extra details may be small. In fact, sometimes providing details can cut the cost of writing the document by saving time from writing summaries.
Not for everybody
The details can be kept out of the way of the reader by linking to them. That way only those readers who feel a need for the details will have to read them, and then only when they want to.
Having both short summary and full detail saves writing time
It is often much easier for the writer to write a short summary of the details, and then insert the details as raw data, than to try to make a more comprehensive summary. For example, rather than extensively summarizing an interview and deciding which excerpts to print, the writer can give a general impression, a supporting quote or two, and then link to the entire transcript. The writer would not be forced to guess how much to cover and err on the side of providing too little information (cheating the reader) or too much (wasting the writer and reader's time). This lets the same document serve a wider range of readers.
The combination of concise summaries and great detail is one of the ways that a web document can be much better than a paper document.
USE TYPOGRAPHYA ND LAYOUT FOR SKIMMING
Bold fonts, short paragraphs, and borders help the reader quickly find needed information.
Help the reader find things quickly
People know to look in border areas for navigation. They know that short, bold paragraphs on the side may be of interest, perhaps as summaries. Their eyes stop on bold words intermixed with normal.
Decide which things the reader must find, and use these techniques to help them find those things.Subheads help linear skimming
Using short, bold subheads every few paragraphs helps the reader who is skimming through prose find the sections that are of interest, or to just get the main concepts.
The subheads act as "mileposts" along the way as the reader reads or skims. If you don't put the subheads in when you first write (like an outline), it is worth adding them after you write the text. Sometimes adding them afterwards is actually better, since you can summarize what you actually wrote.
Short paragraphs help skimming
By having only one main thought in each paragraph the reader can use a glance at the first line to skim. For those that want to get more information, you can back up the ideas in the rest of the paragraph, giving more detail.
Use sidebars and call-outs
Sidebars with summaries on the same place on similar pages helps the reader know whether or not they want to read the rest of the page.
Redundancy is OK
Having the same information in multiple places on a page, presented in different ways, is OK. Different readers use different strategies for finding what they want, and the goal is to help them find what they want, not to produce the one "correct" way. Once a reader finds something in one place on a page, they often will continue to look there on other pages.
Don't overdo bold words
Use the bold words sparingly. Otherwise they get distracting and make reading hard. This is similar to many bright blue underlined links in the middle of lots of prose -- it makes reading harder.
See how hard it is to read this paragraph with all the bold words and other emphasis in it. Not only is the bold "crying wolf" (pretending that something is important when it really isn't) but the hard change from bold to normal slows down the eye when reading or speeds it up by attracting it forward to the next bold word skipping the almost as important middle text. Also, the bold detracts from the value of bold on the sub-headings within this page.USE SCREEN DESIGNS, NOT PAPER DESIGNS
Take advantage of images, scrolling, non-scrolling, and links.
Design your page layouts for viewing on a computer screen, not for printout on paper. The screen has special characteristics, weaknesses and abilities, and you should take them into account.
Some examples:
- Textured backgrounds work well on screen, but are only practical with specialized printing on paper.
- Screens are typically landscape in orientation, encouraging the use of sidebars for information that might be more likely in banners on paper.
- Text is not as easy to read on screen, so short, clear headings help
- Window sizes can vary, but text is often not very readable if reduced by more than 50%. Use designs that take into account measures that vary with window size, and that can work on 640x480 pixel windows.
- Following a reference to an arbitrary page that is not the next or previous one is very cumbersome with paper, but very natural with the screen. Links can be an integral part of screen designs.
- Color is often inappropriate for printed documents in the office, due to the slow speed and cost of color printers and scarcity of color copiers and fax machines. On screen, color is the rule rather than the exception, and can be used to help provide emphasis, sense of place, and improve the perceived resolution of images.
USE MAPS
Image maps with organizing layouts can help the reader understand and use the document's structure.
Maps help the reader understand organization
DISTINGUISH DIFFERENT TYPES OF PAGES
Two-dimensional images that represent the organization of the pages in a document can help the reader understand that organization. They can use that understanding when trying to navigate to parts of the document that interest them.
Maps can help navigation
By using clickable image maps, such that when readers click on the representation of a particular page in the document they are immediately taken there, allow them to navigate directly. This gives them a better feeling for the document, more like a physical item like a book with pages than an endless scroll of paper.
Maps need design
It is important that the maps provide design that makes the organization clear. For example, the use of grouping and naming of pages in the map can reinforce the relationship between various pages. Pages grouped together near the text "background" would clearly be different than those near the text "conclusion" or "action items".
Lists are maps
Lists are a simple form of map. They rely on order and the words in the list itself to provide the information. The organization of a list is very simple.
Two-dimensional maps are more powerful
For more complex relationships, such as grouping and hierarchy, two-dimensional maps can be more expressive. These can range from simple trees, to constellations and neighborhoods. In two-dimensional maps, unlike lists, the use of "landmarks" or backgrounds that provide the context can be more important than just the page names themselves.
The maps that are produced as part of the Trellix 1.0 product are a good example of 2-D maps. Even better are the maps like Trellix 2.0 produces, where the page you are currently viewing has a different, "You Are Here" look. (See the Trellix site (www.trellix.com) for information about Trellix 2.0.)
"You are here" map
You'll see how a map can give you a feeling of the entire document and get rid of some of that "lost in cyberspace" feeling.Use different design layouts for different types of pages.
You can use the design of a page to help the reader know what to expect from its contents. For example, overviews, conclusions, background material and opinion can all have different layouts. By consistently using the layouts for the same type of contents the reader is given a better sense of place.
PLACE PAGE ELEMENTS CAREFULLY
The layout of a page can help or hinder reading and navigation. Use of scrolling and non-scrolling areas can keep important information and links in view at all times.
Computer screens need layouts that are different than paper
Pay attention to the fact that the pages will be read on a computer screen. Not all of the page may be visible at once. Take advantage of scrolling and non-scrolling areas.
A computer screen is very limited space compared to what most people are used to on paper. Also, the navigation elements take up space in a mouse/GUI system, while on paper the physical nature of the paper provides some of the navigation (to get to the end, you just flip to the last page on paper, while a computer screen may need a "Last Page" button).
Use a mixture of scrolling and non-scrolling areas
Information that a reader needs no matter where they are in their reading should always be visible. This may include the title and the navigation links to related pages. It is foolish to put "next/previous" buttons at the bottom of a long scrolling page that you know many people will not read in its entirety. The reader would have to search for the buttons, not knowing if they exist, and scroll through the whole thing even after they decided that it wasn't a page they were interested in reading. Conversely, putting it at the top such that it scrolls off when you do read gets in the way, too. More appropriately, the "next/previous" buttons should go in a non-scrolling region.
Information that lends itself to linear reading or skimming, or that not all readers will want to read, could appropriately go in a scrolling region. Often it is better to use a scrolling region with a more readable type size than trying to fit something into a space by reducing the type size.Non-scrolling is an acceptable use of Frames
Mixing scrolling and non-scrolling in HTML is done through use of the Frames feature of browsers.Make sure that the information and links that all readers of a page need are visible without scrolling when a page is first viewed.
PAY ATTENTION TO WHAT IS "ABOVE THE SCROLL"Help the reader process the page quickly
When a reader first encounters a page they should be able to quickly "get" what the page is about. To make this as easy and quick as possible, they should be able to figure out what is covered by the page, and where they can go next if they don't want to read any more, in one glance. That means the information should be visible without having to scroll anything.
The information you see when the page is first called up we call "above the scroll". This is a takeoff on the term "above the fold" in a newspaper, which is what you see when the newspaper sits folded on the news rack.
Design of common information and style is important
There are several techniques you can use to provide the information. One is to use clear titles and summaries that fit, even on lower resolution screens. Another is to put a bold, short list of the topics covered in the page at the beginning, before the main text. Yet another use is to write in an inverted pyramid style. Finally, you could use sidebars.
A common mistake is to have so much boilerplate on every page that there is no room for the main information. For example, some news sites, which use a headline as the link to the story, have a banner ad and very large headline at the top of the story page, a large sidebar with more ads and navigation on the side, perhaps a picture or logo for the section it's in, and no new information until you scroll down. This means it takes two clicks to find out what the article is about (one to get to the page, and another to scroll) instead of one as you would expect.
PROVIDE GUIDANCE ON WHERE TO GO
Use "see also" links and tours to help the reader find their way through a document.
Links are needed to tell the reader where to go next
Help the reader decide where to go next in the document with links. They need links to take them to related pages or to follow a particular train of thought. Until they know the overall structure of a document and some of its content, guidance from the author is helpful. When a reader finishes with a page, what to read next is not as clear in a linked document as it is with a paper document where you just turn the page. In a linear document the author provides guidance by ordering the pages; in a non-linear document, the author provides guidance with links.
There are a variety of types of these links
These links on a page include:
- Next/previous on a sequence
- "Back to..." links to return from a sub-topic
- "Up" links to go from the specific to the more general
- "See also" links for related topics
- "More" links for additional, more detailed information on a topic
- "Tour" links that proceed through a sequence of pages for a particular purpose in reading
Tours
Tours are different than normal sequences. Normal sequences (Next/Previous) are pages that are related structurally, like in an outline. For example, each of the five divisions of a company, or a list of options to pursue. Tours are a sequence of pages that are related when following a linear train of thought. For example: the pages to read in a Human Resource manual to introduce benefits to a new employee, or the pages to read in the event of an accident. Pages can be on any number of tours. Tours can be implemented in HTML with links in sidebars, or with Frames. The Trellix 2.0 product has them as a built-in feature, using a Frame-like interface. This web site uses tours in the Sample section.
KNOW YOUR AUDIENCE AND THEIR NEEDS
Use knowledge of your readers to help design your document and try reading it in that light.
Figure out what your audience will be like
When putting together a web document, understand who your audience will be and what their needs and motivations are. Use this information to decide how to organize and present the information.
You need to answer questions such as:
- How much time will they spend with this document?
- Will they read all of it?
- Do they want to be amused?
- What questions will they be asking of the document?
- Will they read different parts at different times?
- Will they use the document as reference material?
Use the audience information to determine which techniques to employ
The answers to these and other questions will help you determine how much you should break the information down into small chunks, how much you can rely on the reader to read every word and in what order.
The answers will help you know how much you should rely on other techniques listed here.
Check the document in light of the readers
Periodically look through your document, pretending that you are the intended reader. Does it "work"?
EXAMPLES OF KNOWING YOUR AUDIENCE
Different audiences and how that affects the document design
Here are examples of different classes of readers and how their characteristics should affect your document design:
Highly interested, one-time readers
Characteristics
These would be people who need to understand everything you are covering.
Examples would include:
- Someone learning what you are teaching where your document is the only thing covering all of its topics.
- A person responsible for critiquing what you write.
Implications
A flatter, more linear document is acceptable. Detail does not need to be separated from summary. The flow of the prose is important. A readable style of writing to help make the long read pleasant is OK.
People needing an answer right away
Characteristics
These would be people who have a very specific need. They are not interested in everything you say.
Examples would include:
- People answering a "help-line" phone or using a troubleshooting guide
- People doing research on a topic where your document is one of many covering the same general area.
Implications
The structure of the document should be geared to helping the reader find what they need. Easily skimmable summaries, lists, maps, multiple paths to the same information, etc., are helpful. Humor and other writing techniques for easing the reader's time in the document are not needed. Don't hide material, get to the point quickly.
TEST NEW DESIGNS
Do usability testing on new designs to tune their effectiveness.There is little proven material to copy
The practice of writing business documents for reading on-screen is new. Other than E-mail, program documentation, training, and live slide presentations, there isn't much history. When creating a new type of document for which there aren't many proven samples to copy, testing may be called for.
Test documents where saving time saves lots of money
If the material you are writing will be read by many people in an organization, and you want to minimize the amount of time they spend to find the information they are seeking, you should make sure you use a design that works. The only way to know for sure that a design works is to test it.
For example, if you know most people in an organization check a particular set of 10 status reports once a week, and there are 1000 such people, each costing the company (burdened) R40 an hour, saving one minute of reading time on each report can save over $300,000 a year. In another example, saving just 10 seconds on each 5 minute customer service or sales phone call saves 3% of the labor costs. If the material you put on your Intranet helps even 10% more people avoid a call to the Help Desk, that can be a very large savings, too.
Jakob Nielsen claims that simple testing can be done in-house for as little as 39 work-hours of cost. This shows large potential savings.
Tuning a document can save a lot of reading time
Research by Jakob Nielsen and UIE shows that changes in writing style, link design, and other factors, can affect reading time to find information by a factor of 2 or more, so tuning can make a big difference.
Usability testing helps find answers to questions
Usability testing is a method for finding out what works and what doesn't in a document. It helps you answer questions such as:
- "Is the navigation clear?"
- "Can the reader find what they need?"
- "Which of these two techniques lets them find information faster?"
WHEN (AND HOW) TO USE FRAMES
Frames, if understood and used correctly, are a valuable feature of HTML.
This page explains some good uses for frames, with examples. It also describes how not to use them.
Related material
Frames have been controversial since they were introduced. To decide when and how to use frames, you must understand the technical details of how they work, and the arguments that have been made against their use:
- How frames work: Frames in HTML use the <FRAMESET>, <FRAME>, and <NOFRAMES> tags, and the TARGET attribute of the <A> tag.
- How to implement frames: Tools and techniques for creating pages with frames.
- Aren't frames bad?: Many complaints about frames do not apply to INTRAnets today.
Material on this page:
- When to use frames: Page identification, navigation, tours, and more.
- Design ideas on how to use frames: Make them bookmarkable, only one scrollbar, "You are here", how not to use them, exceptions.
Several samples are provided here, including the main example of common uses of frames, the same design using tables, an example of using named anchors, an example of multiple images, and an example of a container page for comments.
When to use frames
From a design viewpoint, there are at least two valid uses of frames:
- Integrated into the page design of a single page, to provide separate areas for material such as navigation
- As the mechanism for associating material from a specific author (such as comments) with other pages that normally stand on their own
When to use frames: Integrated into page design
Frames can be used to produce good page designs when they are an integral part of page layouts. Frames can be used to hold different regions of the page and give them definite areas. This is much like the way HTML tables are used to divide the screen into areas to hold navigation, main text, references, and more. The difference is that frames allow the designer to maintain some material on the screen while other material scrolls. With tables, everything scrolls together and material that should always be visible is frequently off the screen, either above or below or to the left or to the right.What goes in a frame?
Material that might work better in a frame than scrolling with the main text include:
- Page Identification or Context Information
Information that lets readers know their context, including title, summary, or a special image, works well in frames. Otherwise, scrolling the page hides that information. This is similar to a book where the book title, chapter title, and section title are repeated on headers or footers on every page, not just the first page. Book designers have learned that readers need to know where they are.
- Main Site Navigation
Commonly used links, such as links to a home page and major sections, should stay accessible using a frame. We have received many requests to add more of this of navigation to the Good Documents site. Common links can include buttons such as the "mailto" link shown in the example (another frequent request from readers).
