Content structure and presentation

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.

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

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

Hyperlinks guide users to the information they are looking for. Use hyperlinks 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 is very confusing to users if the link text and page name don't match. In situations when you need to modify the link text, try to match the text as closely as possible to the page name.

To meet accessibility requirements,make the target of each link clear, and without any additional context beyond the link text.  Screen reader users can read pages by generating a list of all the links on the page, and tab from link to link without any surrounding context. If the wording of the link does not clearly summarize the content of the target, it can confuse screen reader users. Refer to Optimize headings and menu labels.

If you refer to another web page more than once, add a hyperlink only to the first reference. Avoid putting too many hyperlinks in a single paragraph. It can be confusing if they are too close together. Users are not always able to tell where one hyperlink ends and the next one begins.

Users are attracted to hyperlinks and follow them if they see them. Since you don’t want users to ignore the content of the page they are on, only add a hyperlink to references that can help users complete their task or that provide valuable information about the task. Do not add a hyperlink to unnecessary or unrelated information. Too many hyperlinks are distracting and it becomes difficult for users to distinguish between important and unimportant information. Ensure that the hyperlinks direct users to the right page. Refer to Create clear paths to information for more on hyperlinks.

Make text links long enough to be understood, but short enough to minimize wrapping.

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

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

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.

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.

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.

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