Content structure and presentation

Content structure and presentation is by topic, or task − whichever audience best suits your users. Keep the structure simple, logical, and consistent so users can quickly become familiar with your content. Then users can easily navigate through it to complete their tasks.

Avoid multiple and alternative formats

Key points:

  • Publication of online content in formats other than HTML, such as Word, PDF, PPT, or Excel, goes against most usability principles
  • Alternative and multiple formats are best avoided online unless there is a clear business or user need for them

Information can be published online in many different formats . Each format has a specific purpose:

While different formats can be used online based on a specific need, HTML is the best format for online content.

When documents are published online in formats other than HTML, such as Word, PDF, PPT, or Excel, it creates a number of issues because these formats are not primarily meant for the web:

Structuring content for reuse means we can create, publish and use content more efficiently. We can assemble and reassemble it for different products, audiences, devices or contexts of use. Information embedded in documents makes this process difficult, if not impossible. […] Content volume also affects findability. The “we could put that online” mentality runs unchecked when publishing is as easy as ‘save as PDF’ and upload. Websites can turn into massive filing cabinets —making website visitors wade through more links and search results to find what they’re looking for. Perhaps they never will. The World Bank said recently that over 31% of its reports had never been downloaded.”

“Our usability testing often shows people have more problems with content in PDF documents than web pages. They click a link and start an unexpected or unwanted download. The download fails, or they bail out when they see how big the file is. People sometimes struggle to navigate a large document with print layouts, huge graphics and no internal bookmarks.  Often the information they want is in a single paragraph. PDFs can make hard work of simple information needs.

Nearly one-third of [World Bank] PDF reports had never been downloaded, not even once. Another 40 per cent of their reports had been downloaded fewer than 100 times

Once you define users' tasks, determine the information they need to complete those tasks:

Since you can’t identify all user needs, and because these needs change, content creators should provide users with a feedback mechanism. Content owners should be open to users' suggestions for changes and modifications.

Optimize headings and menu labels

Key points:

  • Give each web page a unique, descriptive title
  • Use clear, concise, descriptive, and familiar terms or phrases
  • Use important keywords in the first two words
  • Provide context for where the user is and why they are there
  • Use sub-headings to break up long web pages

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

Make headings clear and descriptive to help guide users to the information they are looking for. Include keywords in headings, particularly in the first two words to help users scan more easily.

A good title provides context for:

Examples of how and how not to write
Context Write Do not write
Title is  unique and descriptive Managing injury and illness case file notes – Template File notes
Title starts with most important words Information Management Policy Policy on Information Management
Title does not include unnecessary information Recruitment program Recruitment program information – What you need to know
Title is concise Approving travel requests How to approve travel requests

Sub-headings make large blocks of text easier to read and scan. Ensure that sub-headings are clear, concise and in parallel structure.

It is a good writing practice to use sub-headings in longer documents. When information is on the web, sub-headings improve usability and readability.

Good headings and sub-headings are essential to making web content accessible. Screen reader users can use the headings and sub-headings to navigate quickly between sections, and to better understand or summarize content.

(A successful heading 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).

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

On the intranet, headings and menu labels have to be distinct and meaningful to users, focusing on topics and tasks rather than organizational structure.

Many intranets suffer from confusing menu labels. Such labels make it difficult for users to find what they’re looking for.

The most common reasons for confusion are:

  • Terms are too broad and end up acting as catch-all (e.g., For Employees)
  • Sections such as How do I… or Tools grow too big
  • Different section names on the site lack distinction (e.g., Human Resources and Administration & Management may appear in the same menu)
  • Language is polluted with jargon or branded terms

Unclear naming is one of the biggest and most important projects to tackle when it comes to the intranet IA. Each navigation category must be descriptive, specific, and mutually exclusive so that users can pick where to navigate without hesitation.

...intranets are initially structured to mimic the organizational configuration of the company, because this type of IA makes maintenance of the intranet easy: each department or area gets a section of the intranet. However, the down side is that every time there’s a re-org in the institution, the navigation has to change too. We have also found, in our user testing of intranets, that task-based navigation tends to facilitate learning.

A common pitfall with task-based IA's is difficult-to-scan category names. Organizations think that category names need to start with verbs or follow an “I need to...” pattern in order to be task based. This isn’t necessary. Sometimes trying to fit link or menu labels to a specified format makes them long and more difficult to scan, because the most meaningful words don't appear until the end of the label. Task-based IA doesn't require any particular grammatical structure for labels; it just means grouping information according to how employees use it, rather than by who creates and maintains it.

Use formatting and presentation elements effectively

To ensure consistent user experience and meet usability standards, you need to understand when and how to appropriately use various formatting and presentation elements.


Key points:

  • Give the list a descriptive and unique title
  • Avoid sub-lists when possible
  • Arrange the list in a logical order
  • Use numbers to list steps or instructions and bullets for all other lists
  • Avoid alphabetizing items
  • List items in a parallel structure

Lists are easier to scan than paragraphs. They help highlight or emphasize single idea statements or list items. When you have a series of short, simple points, use lists instead of paragraphs. Avoid more than one idea per list item. Sub-lists are sometimes confusing and difficult to scan. Avoid them as much as you can. Try to limit lists to two levels.

Each list requires one of the following: a descriptive and unique heading, a lead-in sentence or an introductory paragraph to provide some context. Avoid overusing lists; using too many lists destroys their effectiveness. Don't make a lead-in sentence like a header - use a proper header.

Arrange list items in:

If you list a series of items where the order is important, use numbers rather than bullets. List items with parallel structure to help users quickly scan lists.

Generally, do not alphabetize lists. The user may not be sure which letter their desired information falls under. Alphabetize lists when the information has a stable naming convention, like the names of people or places.

To make lists consistent, to align with style guide (external link) (the current authoritative source), and to make it easier for readers to scan lists at different screen sizes and resolutions:


Key points:

  • Images must support the information
  • Users regularly ignore images
  • Images can slow the search for information
  • Text must accompany and fully describe the images − for non-visual users

Only add an image if it supports the information that users are looking for. Images need to help users with navigation or comprehension. Otherwise, the image gets in the way when users search for relevant information, or they simply ignore it.

An image should be professional-looking and  modern. Ensure it is clear and non-pixilated. In addition, beware that most images are protected by copyright. Use only images from approved sources, and obtain the necessary permission to use them.

To meet accessibility requirements, always provide text alternatives (alt text) for all non-text content, such as images, so that it can change into other forms people that need. Some examples include large print, braille, speech, symbols or simpler language. When providing alt text, follow these principles:

This ensures that all users have access to a plain description of the image, supports different learning styles and meets accessibility requirements. The content must fully describe the image for the non-visual users that use text-to-speech software. Non-visual users require the same experience as visual users, and need to understand all information without any associated images.

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

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.


Key points:

  • Use tables for financial, statistical, comparative, or numerical information only
  • Ensure that all columns and/or rows have a heading
  • Keep tables short, clear, and concise
  • Ensure that there is enough white space around each data element

Tables are an effective way to present information. Use them only to display financial, statistical, comparative, or numerical information – not to serve stylistic purposes. If it makes sense to present the data using a spreadsheet, then it is appropriate to present the same data in a table. For alternatives to tables, speak to your web team.

Like text, ensure tables are 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. Also, if your table has cells that are more than 50% empty, it is harder to scan between table headers and associated content − 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.


Key points:

  • Less colour is more
  • Colour can group similar content or indicate differences
  • Colour cannot be the only element used to convey information
  • Text and background need to have high contrast

Colour should enhance usability, not compete for attention; less colour is more. Limited colour palette represents a coordinated and connected approach to content across the entire web presence and enhances users' trust in information.

Colour is effective when:

It groups similar content or indicates differences. When using colour, consider how it affects users with visual limitations:

Text and background need to have high contrast – the tool Luminosity Colour Contrast Ratio Analyser can analyze the background and foreground colours to determine if there is sufficient contrast. Users read black text on white background up to 32% faster than light text on a dark background.

Color coding permits users to rapidly scan and quickly perceive patterns and relationships among items. Items that share the same color will be considered as being related to each other, while items with prominent color differences will seem to be different.


Key points:

  • Limit the number of different fonts used across a website
  • Use standard web fonts
  • Limit the use of coloured fonts
  • Do not use all capitals

On the web, 90% of information is in the form of written language, and is presented with fonts. Fonts affect the speed and comfort with which users understand and read content. Refer also to Colour.

When choosing fonts, follow these principles:

Designers should […] strive to eliminate, or at least minimize, extraneous cognitive load: processing that takes up mental resources, but doesn't actually help users understand the content (for example, different font styles that don’t convey any unique meaning).

Date modified: