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
- 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:
- HTML format is meant for structuring and laying out information on the web
- Word documents are great for templates or other types of information that require easy edits
- PDFs are best used for official or legal publications
- They preserve the integrity of the content and layout of the document
- Generally they are not meant for edit
- PPTs are used for delivering presentations and if published online,
- They are only ideal when you anticipate someone else might want to present the same presentation or use it as a template
- Excel is meant for sharing tabular data
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:
- Inaccessible information because documents are not created with web principles in mind
- Incomplete information because document format and layout (such as a PPT slide or an infographic in a PDF format) may restrict the amount and type of information communicated
- Unresponsive documents which do not adjust to meet users’ needs in different online contexts (such as mobile)
- Duplicated information that takes up more server space, which results when multiple formats are available for the same information
- Conflicting information, which results when multiple formats are available for the same information, but only one format gets updated while the others are forgotten
- Documents that are difficult to update because of format restrictions (for example a PDF of an infographic would take lots of effort, time and money to update if a problem or usability issue is found because the document was designed with specific presentation and visuals in mind in a finite amount of document space, making addition of any extra information impossible)
- Unsustainable practices are reinforced as alternative formats are created for print, and therefore encourage printing of documents
- Inflexible information which cannot be reused as it is locked down in specific document formats and cannot be extracted by a content management system (CMS)
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:
- Keep information specific to the tasks
- Present it logically or sequentially in a location where users expect to find it
- Ensure information is timely and relevant, not redundant or trivial
- Avoid multiple and alternative formats
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
- 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:
- where the user is, and
- why they are there
|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.
- 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:
- logical or sequential order, or by
- priority, importance, or popularity
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 Canada.ca style guide (external link) (the current authoritative source), and to make it easier for readers to scan lists at different screen sizes and resolutions:
- Introduce each list with a statement that ends in a colon (:)
- Capitalize the first word in a list item only when bullets are complete thoughts, or if the first word is a proper noun
- Do not include any punctuation at the end of list item
- Do not use articles “the” or “a” to begin a list
- 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:
- Alt text should describe the image and except for rare occasions, must not exceed 125 characters (including spaces)
- For complex images, or images that require more than 125 characters, do the following:
- Provide a simple text statement as the alt value
- Provide a more detailed text description, coded immediately before or after the image
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.
- 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.
- 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:
- Maximum of 3 main colours and 3 accent colours are used across a single website
- Cultural meaning of colour is considered
It groups similar content or indicates differences. When using colour, consider how it affects users with visual limitations:
- Colour cannot be the only element used to convey information – colour blind people can have trouble understanding it (use in combination with text, texture)
- Certain complementary colour combinations can create visual vibrations which make it really hard to read (for example, red on blue, yellow on blue, white on yellow)
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.
- 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:
- Do not use more than 3 fonts and 3 colours across a single website.
- It makes the website look unstructured and unprofessional
- Most websites have a limited number of pre-determined fonts allowed for web use. Speak to your web team if you need more information
- Use standard web fonts which users can quickly recognize and read
- Use sans serif fonts (like Ariel) for content
- Limit the use of serif fonts which have "arms" and "feet" (like Times New Roman) to headings only
- Do not use Comic Sans or Impact fonts
- Use coloured fonts carefully.
- Do not use blue text for content; users can mistake it for links
- Use black text on white background for best readability
- Do not use italics as they can slow down the reading speed
- Refer to Canada.ca style guide: (external link) Bold, italics and underlining
- Do not use all capitals; this slows down reading and can appear aggressive
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: