Content formatting

Print versus Web

Content may end up online, but often it starts with an author opening up a print-based program, like Word. As a result, the author may unknowingly create a product that is optimized for print, not 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 is now a luminous environment that has no text, instead relying on moving imagery, colour and dialogue. Although the core story may be the same, it's recognized that the mediums are very different and so to transition the content from paper to movie, a screenplay adaptation is done.

Similarly, a product that is created for print must then be adapted to be optimized for the Web. Headings need to be reworked, layout needs to be changed, sentences need to be rewritten, etc. Therefore, 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 often be difficult for authors to get used to but is a necessary skill to develop. Content optimized for the Web ensures the information is easily discoverable by a user.

The article by Smashing Magazine, 10 Principles Of Effective Web Design, sums up user behaviour:

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.

The Nielsen Norman Group wrote the article, Writing Style for Print vs. Web. Their conclusion is:

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.

Content development

Developing content is the process of identifying the information that serves your users' needs and meets your 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 both your goals.

Who are your users?

Many different users come to our websites; they may be individuals, business representatives, intermediaries and other professionals, media or youth, for example. Each type of user is different and needs different content. You must define each type of user so that you can provide the unique content 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 website 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 website, and you will be able to provide the content 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.

What are your goals?

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

Content architecture

Architecture is how the tasks and information about the 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 content

You can organize your content by audience, by topic, or by 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.

Organize page structure

When organizing the content of a Web page, place the most important information at the top of the page where it can be found easily. The rest of the content 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.

Also refer to: Page length and scrolling

Alphabetization

Alphabetization of content is rarely a good idea. It is successful when the information has a stable naming convention, like people's names, places etc. However, all other information is best organized by priority, importance, popularity etc.

If the user is not sure which alphabet letter their desire information would fall under, then their user experience is the same as if the content was in random order.

Usability expert, Jakob Nielsen, has numerous studies about how users behave. The article Alphabetical Sorting Must (Mostly) Die states:

Time lines and geographical location are other groupings that are often useful. Finally, you can let the importance or frequency of use guide how you prioritize long listings rather than default to less-useful alphabetical sorting.

Depending on the nature of your information, usability might be better served by yet other types of structures. And yes, in a few cases, this might even be the alphabet. But typically, when you reach for an A-Z structure, you should give yourself a little extra kick and seek out something better.

Usability expert, Jared Spool, has numerous studies about how users behave. The article Determining Link Order on Intranet Portals states:

Link order is also very important. Well-designed portals put the most important links at the very top and order the remaining links by priority and need. In our studies, poorly-designed portals often resort to alphabetical order, which confuses employees as they expect related links to be group together with the most critical functions near the top.

Further, Jared Spool's article, Alphabetized Links are Random Links, states:

(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 resort to the same behavior they needed when we ordered the links based on the hat. 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.

Write for content re-use

Site visitors do not access the same Web pages during every visit, nor do they access Web pages 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, though, 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 content and link to it from the other pages.

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 content they need.

Plain language

Plain language principles focus on readers’ needs. To write in plain language, use familiar terms and phrases, include only one idea in each sentence, and keep paragraphs short and focused. In addition, use the language of your audience and not the internal language of your work. This means that you should avoid jargon and explain any technical terms. If you must use terms that are not familiar to your user, define them using common terms.

The article, Use Old Words When Writing for Findability by the Nielsen Norman Group, states:

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.

Scannable text

Users are not reading online in the same way that they read a book. Instead they are scanning the Web page. By breaking up the content using lists, sub-headings and shortened paragraphs, it increases their ability to quickly assess the information.

In order adjust for this user behaviour and ensure a maximum uptake of information, an author who writes for online consumption should have half the information presented than an author who writes for print.

The article, How Users Read on the Web by the Nielsen Norman Group, states:

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. (Update: a newer study found that users read email newsletters even more abruptly than they read websites.)

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

The article, How Little Do Users Read? by the Nielsen Norman Group, states:

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.

Searchability

Search tools use the Web page’s title, headings, text, and metadata to generate search results based on users’ search terms.

The key to providing users with the search results they are looking for is to use common 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. However, avoid using expressions, jargon, metaphors, puns, or any terms that cannot be taken literarily.

Many visitors use 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 provide users with 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 page description in the metadata that provides a concise summary of the contents of the page.

The article, Use Old Words When Writing for Findability by the Nielsen Norman Group, states:

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.

"Speak the user's language" has been a primary usability guideline for more than 20 years. The fact that the Web is a linguistic environment further increases the importance of using the right vocabulary.

The article, Guess What?!? Task Design is Critically Important! – A hard-learned lesson by Jared Spool, states:

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.

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 their task.

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

Scent of information

Users are on hunt. They arrive on a Web page, scan the content and then determine if this is their destination page. If they decide that their desired content is not there, they hopefully want to continue the hunt and typically use links to make another page selection. How do they choose the next link? Well, they are virtually sniffing out which link has the strongest scent. This principal is known as scent of information.

With this user behaviour in mind, it becomes obvious why it is crucial to always have descriptive link text. Vague, poorly named, obscure or incomplete links will decrease the scent and therefore increase the user dissatisfacation causing them to abondon their hunt.

In addition to links, the scent of information is achieved with navigation, graphics and layout prioritization. These pulls the user to the content. This is different from a site's architecture, which pushes the user to the content.

Xerox researchers, Peter Pirolli and Wai Tat-Fu, developed the information foraging theory: SNIF-ACT: A Model of Information Foraging on the World Wide Web (239 KB, PDF). This is the precursor to the scent of information. Their report states:

(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

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.

Aesthetics

Content authors must also value the presentation of the information they have created, as the aesthetics affect the usability and credibility of the content. The decoration that supports the content must be visually pleasing and appropriate. If a user deems the presentation to be weak or inappropriate, they lose trust.

Of course the most important part of a Web page. 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. An article on the BBC Web site titled First impressions count for Web (external link), states:

"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."

Aesthetics and the user experience

An article on the popular site A List Apart, titled In defense of eye candy, explores the value of design and how the presentation layer affects the user's experience and the affects the site's credibility. It states:

"According to a 2002 study: How Do People Evaluate a Web Site's Credibility? (PDF, 1.2 MB), 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."

Aesthetics and usability

A article from the University of Washington titled Aesthetic-Usability Effect (PDF, 1.4 MB), discusses how individuals 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. The article states:

"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."

Proper usability testing is still recommended. Aesthetics do not replace or equate to usability. Aesthetics simply enhance and compliment usability.

Content structure

You can organize your content by audience, by topic, or by 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.

Below are some techniques that help with this concept.

Headings

The first thing users see on a Web page is the title, so the title must instantly convey the type of content the page contains. The page title must also be unique so users will not confuse one page with another. Headings must also be clear and descriptive to help guide users to the content they are looking for. Headings are also used to break up large blocks of text.

Some heading basics are:

In the article, 7 Best Practices for Improving Your Website's Usability on mashable.com, proper headings usage is discussed:

...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.

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

The article, World's Best Headlines: BBC News by the Nielsen Norman Group, states that 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).

Furthermore, the article, First 2 Words: A Signal for the Scanning Eye by the Nielsen Norman Group, states:

Users typically see about 2 words for most list items; they'll see a little more if the lead words are short, and only the first word if they're long.

Best...

• Use plain language
• Use specific terminology
• Follow conventions for naming common features
• Front-load user- and action-oriented terms

Worst...

• Bland, generic words
• Made-up words or terms
• Starting with blah-blah and deferring the information-carrying text to the end

With the above information in mind, a real life example is is provided in the article, Writing Style for Print vs. Web by the Nielsen Norman Group. This article highlights the differing approaches to a print heading and a Web heading:

I recently read 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.

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. If you are listing a series of items where the order is important, you should use numbers rather than bullets. Furthermore, list items with a parallel structure helps users scan lists more quickly.

Hyperlinks

Hyperlinks take from the user from one Web page to another. They can be used to avoid repeating information that is already clearly expressed on another Web page. They can also be used 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 they don’t match. However, sometimes there is a need to modify the text, so in those cases attempt to match it as closely as possible. If you refer to another Web page more than once, only add a hyperlink to the first reference. Also, avoid embedding 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 and because 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

Images are great, but only when they add value to the user experience. Images must be professional looking, modern, not blurry or pixelated and also be relevant to the content they support. That said, users will ignore them almost half the time.

Images are not free, as they introduce a cognitive load on the user. This means and for every unnecessary image, the user has had to visually navigate around it or acknowledge it. There is a cost for this, as the user is no longer focused soley on the information. Therefore, choose your images wisely.

The article, Photos as Web Content by the Nielsen Norman Group, states that:

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

In the comprehensive 3 page article, Eyetracking Web Usability: Images, by Jakob Nielsen and Kara Pernice, image use is discussed in detail. The entire article is a recommended read but here are some highlights:

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.

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, the 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 zebra striping to distinguish each row from the next.