Content formatting - Design guide

Print versus Web

Content may end up online, but it often starts with an author opening up a print-based program, like MS Word. As a result, the author may unknowingly create a product that is best suited for print, not the Web. This causes a fundamental problem as the two environments are extremely different from each other.

If you think of a book, there is an obvious start and stop point, and the information is presented as text on paper, with the possibility of supporting images. If you think of a movie based on that same book, the paper becomes a luminous environment that has no text, relying instead on moving imagery, colour, and dialogue. Although the core story may be the same, the mediums are very different, and a screenplay adapts the content from paper to a film.

Similarly, a product that is created for print must be adapted to work well on the Web. Headings should be reworked, the layout needs to be changed, and the text rewritten. If the goal is to have the primary version of the content exist as a Web page, then the content should be written for the Web, not for print. This can be difficult for print authors to get used to, but it is a necessary skill to develop. Content created for the Web ensures the information is easy for the user to discover.

Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has become a standard.

Basically, users’ habits on the Web aren’t that different from customers’ habits in a store. Visitors glance at each new page, scan some of the text, and click on the first link that catches their interest or vaguely resembles the thing they’re looking for. In fact, there are large parts of the page they don’t even look at.

-Smashing Magazine
10 Principles Of Effective Web Design

In linear media — such as print and TV — people expect you to construct their experience for them. Readers are willing to follow the author's lead.

In non-linear hypertext, the rules reverse. Users want to construct their own experience by piecing together content from multiple sources, emphasizing their desires in the current moment. People arrive at a website with a goal in mind, and they are ruthless in pursuing their own interest and in rejecting whatever the site is trying to push.

-Nielsen Norman Group
Writing Style for Print vs. Web

Content development

Developing content is the process of identifying the information that serves your users' needs and meets your organizational goals. The process involves defining your users, identifying their tasks, and identifying the information they require to complete their tasks, while ensuring that the content also meets your organizational goals.

Who are your users?

Many different users may come to your Web site; they may be individuals, business representatives, intermediaries and other professionals, media or youth. Each type of user is different and needs different content. You must define each type of user so that you can provide the unique information that each needs.

You may, however, need to develop content to serve many different users. If that is the case, focus on your primary users or break your users into smaller groups with similar requirements.

What are their tasks?

Users visit a Web site to complete their tasks. Define your users’ tasks and either prioritize them based on how frequently users perform them or sequence them if they involve a series of smaller tasks. Your users may also want to complete many tasks in one visit, so you will need to consider how you can make it easy for them to do so. By defining your users’ tasks you will be able to understand their reasons for coming to your Web site, and you will be able to provide the information they need.

What information do they need?

Once you have defined your users’ tasks, determine the information they will need to complete those tasks. The information must be specific to the tasks, and it must be presented logically or sequentially. The information must also be timely and relevant and not redundant or trivial.

I try to leave out the parts that people skip.

-Elmore Leonard, author

What are your goals?

As well as benefiting users, the Web site needs to serve your organization’s goals. To ensure that the content balances your business needs and your users’ needs, define your goals for the site and decide how the content will meet those goals.

Content architecture

Content architecture is how the tasks and information about those tasks are organized, whether on one Web page or spread over dozens of pages. Organizing your content involves categorizing and arranging the tasks and information to suit your users’ needs and expectations. A good content architecture will help users quickly find what they are looking for.

Organize your content

You can organize your content by audience, topic, or task, whichever best suits your users. But remember that each user is there to complete a task, so your categories should always lead to a task. Some tasks may be more popular than others, so be sure to organize your content so that the most popular tasks are the easiest to find. However you organize your content, you need to keep the structure simple, logical, and consistent so users can quickly become familiar with it and able to navigate easily through it.

Organize your page structure

When organizing the information on a Web page, place the most important information at the top of the page where it can be found easily. The rest of the information should then follow in order of importance to your users. Start with the conclusion, summary, or task, followed by supporting information and, finally, background and details. It is also important to keep your page structure simple and consistent with your overall content structure. See, also, Page length and scrolling

Alphabetization

Alphabetizing content is rarely a good idea. It is successful when the information has stable naming conventions, like people's names, or geographical locations. However, all other information is best organized by priority, importance, or popularity.

If the user is unsure which letter their desired information would fall under, then his or her experience of your content is the same as it were in random order.

...you can let the importance or frequency of use guide how you prioritize long listings rather than default to less-useful alphabetical sorting...But typically, when you reach for an A-Z structure, you should give yourself a little extra kick and seek out something better.

-Jakob Nielsen
Alphabetical Sorting Must (Mostly) Die

(Alphabetical order is good) only if the users knew the wording of the links. The exact wording. This works well for people's names, states, cities, car models, and sports teams.

Where it falls apart is for things where users may not know the exact wording. In that instance...they must scan every link to make sure they can see what is relevant and what isn't. The moral of the story: Unless you can be absolutely sure that users will know the exact terms in your list, alphabetical order is just random order.

-Jared Spool
Alphabetized Links are Random Links

Write in complete blocks

Site visitors do not access the same Web pages during every visit, nor do they access them in the same order during every visit. For this reason, you should write each Web page without any assumptions as to what users have previously read or will subsequently read. Writing in this way means that each Web page is able to stand on its own.

In some instances, you will need to repeat phrases or sentences across many Web pages so that the information on each page is complete. However, if you find that you are repeating a lot of supporting content, you may want to create a new page for that information and link to it from the other pages.

When we look at a webpage, we tend to see it not as a whole, but rather as compartmentalized chunks of information. We tend to read in blocks, going directly to items that seem to match what we're actively looking for.

An eye-tracking study conducted by Nielsen revealed an eye-movement pattern that could further support this idea that web users do indeed read in chunks: We swipe our eyes from left to right, then continue on down the page in an F-shaped pattern, skipping a lot of text in between.

We can do several things to accommodate these reading patterns. One strategy is to break up long articles into sections so that users can easily skim down the page. This applies to block reading (because blocks of text are denoted by headings) as well as the F-shaped pattern, because we're attracted to the headings as we move down the page.

-Mashable
7 Best Practices for Improving Your Website's Usability

Content style and flow

Users tend to scan Web pages when looking for information and typically read only 20% of the text. By using short, concise text that is easy to read and is focused on your users’ tasks you will help them quickly find and use the information they need.

Use plain language

Writing in plain language means you are using the language of your audience. To write in plain language, use familiar terms and phrases, include only one idea in each sentence, and keep paragraphs short and focused. Do not use the internal language of your organization and avoid jargon and overly technical terms. If you must use terms that are not familiar to your user, define them using common terms.

Broadly speaking, short words are best and the old words when short are best of all.

-Winston Churchill

Create scannable text

Users are not reading online in the same way that they read a book. Instead they are scanning the Web page. Breaking up the content with lists, subheadings and shorter paragraphs increases their ability to assess information quickly.

To adjust for this user behaviour and ensure maximum uptake of information, an author who writes for online audiences should offer the same information in about half the space compared to one who writes for print.

People rarely read Web pages word by word; instead, they scan the page , picking out individual words and sentences. In research on how people read websites we found that 79 percent of our test users always scanned any new page they came across; only 16 percent read word-by-word.

On the average Web page, users have time to read at most 28% of the words during an average visit; 20% is more likely.

We've known since our first studies of how users read on the Web that they typically don't read very much. Scanning text is an extremely common behavior for higher-literacy users; our recent eyetracking studies further validate this finding.

As a result, Web pages have to employ scannable text , using

• highlighted keywords (hypertext links serve as one form of highlighting; typeface variations and color are others)
• meaningful sub-headings (not "clever" ones)
• bulleted lists
• one idea per paragraph (users will skip over any additional ideas if they are not caught by the first few words in the paragraph)
• the inverted pyramid style, starting with the conclusion
• half the word count (or less) than conventional writing

-Nielsen Norman Group
How Users Read on the Web

Focus on the task

Remember that users are there to complete a task. Help users decide which task they are looking for and help them through it.

Use parallel structure

Headings, bulleted lists, hyperlinks, and even sentences can be read or scanned far more easily if they are written using parallel structure. Using parallel structure means keeping the same grammatical pattern for each element, such as using the same verb tense, same sentence structure, same voice, and same terms.

	Not parallel	Parallel
Headings	Eligibility for the credit (statement) Do you need to apply for the credit? (question) Separation (topic)	Are you eligible for the credit? (question) Do you need to apply for the credit? (question) Have you filed for a separation? (question)
Links with descriptive paragraph	All about your tax return (statement) Information to get, complete, and send in your tax return, including payments, refunds, and more Direct deposit (topic) Set up or change your direct deposit information Homeowners (audience) Buying, building, substantially renovating, renting, selling your home, and more	Tax returns (topic) Completing your tax return Direct deposit (topic) Setting up or changing your direct deposit information Homes (topic) Buying, building, substantially renovating, renting, or selling your home

Create a scent of information

Users are hunting for information. They arrive on a Web page and scan the content looking for information. If they can’t see what they are looking for, they continue their hunt by following a link to another page. How do they choose the next link? They are virtually sniffing out which link has the strongest scent. This practice is known as following the scent of information.

With this user behaviour in mind, it becomes obvious why it is crucial to always use descriptive links. Vague, poorly named, obscure, or incomplete links will decrease the scent and frustrate users, perhaps causing them to abandon their hunt. In addition to descriptive links, users pick up the scent of information from graphics and the layout.

Xerox researchers, Peter Pirolli and Wai Tat-Fu, developed the information foraging theory, which is the precursor to the scent of information theory.

...(1) users working on unfamiliar tasks are expected to choose links that have high information scent, (2) users will leave a site when the information scent of the site diminishes below a certain threshold

-Peter Pirolli and Wai Tat-Fu
SNIF-ACT: A Model of Information Foraging on the World Wide Web (239 KB, PDF)

Be professional

Professionally written material pays close attention to the details. Ensure that your content is focused on your audience and is clear, concise, consistent, and grammatically correct. There are many style guides available, both online and in hard copy, to help you write solid, grammatically correct text. The credibility of a Web site depends on the quality of the text.

Write to be found

Many users turn to a Web site’s search tool to find the information they are looking for. Search tools try to match the users’ search terms to a Web page by comparing the search terms to page titles, headings, text, and metadata. The search tool then displays the Web pages that most closely match the search terms.

The key to providing users with the search results they are looking for is to use the terms and phrases in the title, headings, text, and metadata that users are likely to use when they are searching for your content. It is good practice to identify those common search terms and phrases as you are developing the content and to use them often and consistently in the titles, headings, and text of your content, as well as in the page’s metadata. Avoid using expressions, jargon, metaphors, or puns—in short, any terms that cannot be taken literally.

Many of your users rely on external search engines, such as Google. External search engines try to match users’ search terms with a Web page’s title, headings, and text. By including those search terms in your title, headings, and text, the search engine will be able to take users to the content they are looking for.

To ensure there is no confusion when users are reviewing their search results, use a unique page title and include a concise summary of the content of the page in the page description section of the metadata.

Many forces pressure Web writers to diminish a website's value by filling it with words that are unlikely to appear in search queries. Here are some guidelines for writing to ensure that users will find your site:

• Supplement made-up words with known words.
• Play down marketese and internal vocabulary.
• Supplement brand names with generic terms.
• Avoid "politically correct" terminology.

Familiar words spring to mind when users create their search queries. If your writing favors made-up terms over legacy words, users won't find your site.

-Nielsen Norman Group
Use Old Words When Writing for Findability

Years ago, we were watching people try to find products on IKEA.com...Our initial stab had simple tasks. One of them was “Find a bookcase for your living room that can hold 200 books.”...every participant did exactly the same thing. They clicked in the search box on the IKEA home page and typed Bookcases. From here, it was pretty easy to get to the right product.

In a second round of studies, we changed the task description to something more context-rich, avoiding any clues as to what to type in to the search engine. We ended up with:

“You’ve just moved into a new place with a living room that you love because of its expansive walls. Now, you just need someplace to put those 200 prized books that you’ve had in boxes forever. How would you do that?”

As we suspected, our participants’ behaviors changed. A couple folks typed bookcase into the search box. Others typed shelves, book shelves, book shelf, and one shelves for books. And others didn’t type anything into the search box, but clicked on the navigation links on the page, including storage systems. Most (but not all) found success using their own strategies.

-Jared Spool
Guess What?!? Task Design is Critically Important! – A hard-learned lesson

Look good

Content authors must also value the presentation of the information they have created. Appearance affects the usability and credibility of the content. The decoration that supports the content must be visually pleasing and appropriate. If users deem the presentation to be weak or inappropriate, they lose trust.

Of course, the most important part of a Web page is its content. A visually attractive site is of no value to users if they cannot locate the information they need.

The 1/20th of a second opinion

Research shows that users form an opinion of a site within 1/20th of a second.

The researchers also believe that these quickly formed first impressions last because of what is known to psychologists as the "halo effect". If people believe a Web site looks good, then this positive quality will spread to other areas, such as the Web site's content. Since people like to be right, they will continue to use the Web site that made a good first impression, as this will further confirm that their initial decision was a good one.

-BBC
First impressions count for Web

Aesthetics and the user experience

Research shows that the presentation and design of a site can positively or negatively affect the users’ experience and even affect the site's credibility

According to a 2002 study: How Do People Evaluate a Web Site's Credibility?, the “appeal of the overall visual design of a site, including layout, typography, font size, and colour schemes,” is the number one factor we use to evaluate a Web site's credibility.

The more we learn about people, and how our brains process information, the more we learn the truth of that phrase: form and function aren't separate items. If we believe that style somehow exists independent of functionality, that we can treat aesthetics and function as two separate pieces, then we ignore the evidence that beauty is much more than decoration. Our brains can't help but agree.

-A List Apart
In defense of eye candy

Aesthetics and usability

Users think aesthetically pleasing Web site designs are easier to use than site designs that are less pleasing. This is known as the aesthetic-usability effect. However, proper usability testing is still recommended. Aesthetics do not replace or equate to usability. Aesthetics simply enhance and complement usability.

That said, proper usability testing is still recommended. Aesthetics do not replace or equate to usability. Aesthetics simply enhance and compliment usability.

Aesthetic designs are more effective at fostering positive design attitude than unaesthetic design, and make people more tolerant of design problems … Such personal and positive relationships with a design evoke feelings of affection, loyalty, and patience — all significant factors in the long-term usability and overall success of a design.

-University of Washington
Aesthetic-Usability Effect (PDF, 1.4 MB)

Content structure

You can organize your content by audience, topic, or task, whichever best suits your users. But remember that each user is there to complete a task, so your categories should always lead to a task. However you organize your content, you need to keep the structure simple, logical, and consistent so users can quickly become familiar with it and be able to easily navigate through it.

Headings

The first thing users see on a Web page is the title, so the title must instantly convey the type of information the page contains. The page title must also be unique so users will not confuse one page with another.

Headings should be clear and descriptive to help guide users to the information they are looking for. Including keywords in headings, particularly in the first two words, helps users scan more easily. Subheadings make large blocks of text easier to read and scan. Be sure that subheadings are also clear and concise, and it helps if they are written using parallel structure.

Not only is it a good writing practice to use sub-headings in longer documents, but when information is on the Web, sub-headings improve usability and readability as well.

(A successful headings must be)

• short (because people don't read much online);
• rich in information scent , clearly summarizing the target article;
• front-loaded with the most important keywords (because users often scan only the beginning of list items);
• understandable out of context (because headlines often appear without articles, as in search engine results); and
• predictable , so users know whether they'll like the full article before they click (because people don't return to sites that promise more than they deliver).

-Nielsen Norman Group
World's Best Headlines: BBC News

As discussed above, there are different approaches to writing for print and writing for Web. This applies to headings as well.

(In) an article in The New York Times about tall people's travails on the road: "Coping With the Tall Traveler's Curse.",...(the) headline itself is actually an example of the differences between print and online content style:

• In print, a phrase like "tall traveler's curse" is a bit enticing and might draw readers in. Because the article featured a photo of a tall guy crunched in the back of a taxi, the article's content was clear to anybody glancing at that page in the newspaper.
• In contrast, putting the same headline online would fail several guidelines for writing for the Web :
  • The first 3 words have no information-carrying content . On the Web, you must start with words like "tall traveler" because users often scan down the left part of a list of items. They never see the last words in a link unless the first few words attract their attention.
  • The headline lacks keywords — such as "airline seat" and "hotel bed" — that are important for search engine optimization (SEO). No one will search "curse" when trying to find out which hotel chains offer extra-long beds or which airline seats are the least unpleasant for long-legged travelers.
  • The words "tall traveler's curse" are insufficiently specific to tell users what the story is about. Because headlines are often presented as plain links removed from the article itself, the photo of the poor guy in the cab won't be there to explain the story's content. Online, the headline alone must provide enough information scent to let users predict what they'll get if they follow the link.

-Nielsen Norman Group
Writing Style for Print vs. Web

Lists

Lists are easier to scan than paragraphs, so, where appropriate, use lists instead of paragraphs. However, sub-lists can be confusing and sometimes difficult to scan, so avoid them as much as you can. Each list should have a descriptive and unique heading or an introductory sentence or paragraph to provide some context.

Arrange the items of a list in a logical or sequential order, or by priority, importance, or popularity. If you are listing a series of items where the order is important, you should use numbers rather than bullets. Furthermore, list items with parallel structure to help users scan lists more quickly.

You should generally not alphabetize lists because the user may not be sure which letter their desired information would fall under. Alphabetize lists when the information has a stable naming convention, like people's names or place names.

Hyperlinks

Hyperlinks are used to guide users to the information they are looking for. They can also be used to avoid repeating information that is already clearly expressed on another Web page or to reference related information, such as definitions, supporting information, and background information.

Use the title of the target page as the text in the hyperlink; it’s very confusing to users if the link text and page name don’t match. However, sometimes you will need to modify the text; in those cases, attempt to match the text as closely as possible. If you refer to another Web page more than once, only add a hyperlink to the first reference. Also, avoid putting too many hyperlinks in any one paragraph because they can be confusing if they are too close together; users may not be able to tell where one hyperlink ends and the next one begins.

You may be tempted to add a hyperlink to any reference, but you should only add a hyperlink to references that will help users complete their task or that provide valuable information about the task. You should not add a hyperlink to unnecessary or unrelated information because too much blue, underlined text is distracting. It becomes difficult for users to distinguish between important and unimportant hyperlinks. Finally, ensure that the hyperlinks direct users to the right page. Refer to the Scent of information for more on hyperlinks.

Images

You should only add an image if it supports the information users looking for by aiding navigation or comprehension. Otherwise, the image is just in the way as users search for relevant information, or it is something they will ignore entirely. If you use an image, make sure it is professional-looking and modern and not blurry or pixelated—choose your images wisely.

Users pay close attention to photos and other images that contain relevant information but ignore fluffy pictures used to "jazz up" Web pages.

-Nielsen Norman Group
Photos as Web Content

Good images explain a concept, conjure a feeling, convey information, and enhance people's overall experience on a site. Bad images waste space, are ignored by users, and, even worse, are confusing.

Depending on the context and types of images, people look at less than half of the images presented to them on average—only 42 percent. And in general, they look at those images for less than two-tenths of a second. People ignore more images than they look at on the Web, and they look at images for just a fraction of a second.

Designers should beware of using images that accompany text but don't do anything to enhance it. We believe that these images should not be on a page. They are a waste of pixels, of the designer's work, and of users' time.

Users look at images that are related to content about twice as often—29 percent of the time.

-Jakob Nielsen and Kara Pernice
Eyetracking Web Usability: Images

Tables

Tables can be an effective way of presenting information; however, they should only be used to display financial, statistical, comparative, or numerical information—not to serve stylistic purposes.

Like text, tables should be clear and concise, with as few data elements as possible in each cell. If you need to include more than a few words in any cell, consider using another format.

If there is not enough white space in each cell, data becomes difficult to read. Ensure that each row and column has a clear and concise heading; this allows screen readers to unambiguously convey the content of the tables. Consider using a visual cue such as an alternating colour scheme to distinguish each row from the next.