Content style and flow

Content style and flow of web content consists of short, concise, and grammatically correct text. Content focuses on users' tasks to help them quickly scan for, find and apply the information they need.

Keep it short

Key points:

  • Drop words that don’t carry essential meaning
  • Start with a verb when you describe actions

In the web context, you have limited space, especially if you consider mobile devices. To support usability and sustainability of content, avoid the use of the initial articles such as "the" in titles, headers, labels, and at the beginning of list items.

In headings and link labels, do not repeat words which are implied in the context – unless you need to make a  distinction between two or more different contexts.

Examples of how and how not to write
Context Write Do not write
Headings or links on Treasury Board of Canada Secretariat (TBS) external website Policy on Access to Information TBS Policy on Access to Information
Headings or links on Canada Revenue Agency intranet site Privacy Policy CRA Privacy Policy
Links on Canada Revenue Agency intranet site
  • Policy on Access to Information TBS
  • Privacy Policy − CRA
  • Policy on Access to Information
  • Privacy Policy

Depending on the context of your content, you may have to be more critical of what words to keep. For example, in applications which often have very limited space and many actions, do not use the words:

Start with the verb when you describe actions. Eliminate any descriptive information that precedes the verb.

Focus on the most important information. Make it action oriented. Based on a formula developed by Marcia Riefer Johnston, a professional technical writer, tightening your text even by 10% can save tens or hundreds of millions every year. Consider the following example for a quick comparison:

Examples before and after word reduction
Before word reduction After word reduction
The IT Self Service Portal is the one-stop shop for all technological and network help a CRA employee could need.  From requesting software to requesting a physical relocation, the IT Self Service Portal has it all! IT Self Service Portal provides technological services for employees, their access, computer equipment, mobile devices and software. 

If we review the before and after costs to translate 36 words, the difference is not that noticeable:

If we multiply this by 10,000 sentences, which is the size of a small website, the difference is more noticeable:

Extra words carry dollar signs—especially if your company publishes in multiple languages. If you tighten before you translate, you can save staggering amounts of money [at] 25 cents per word per language (a common translation rate).” […] Even if your words never get translated, and even if you don’t care what it costs to produce and maintain unnecessary words, you care about losing readers. Concise means readable. Concise means comprehensible. Concise means efficient.

Fear makes people hide their meaning with extra words. It backfires. We know you’re afraid. Adding words makes people less likely to trust you.”

Use plain language

Key points:

  • Use common and familiar terms and phrases
  • Use the language of your audience
  • Avoid jargon and abbreviations
  • Use active (verbs), not passive voice
  • Avoid chains of nouns
  • Use gerunds with caution

Writing in plain language means using simple, basic language of your audience.

To write in plain language, use familiar terms and phrases, include only one idea in each sentence. Keep paragraphs short and focused.

Do not use the internal language of your organization. Avoid jargon and overly technical terms. If you must use terms that are not familiar to your user, define them using common terms.

If you must use acronyms or abbreviations, spell them out in full the first time you use them on a page. Then place the abbreviation or acronym in brackets next to the full spelling for example, Canada Revenue Agency (CRA).

Use these guidelines to write in plain language: 

Avoid passive voice

Passive voice creates confusion for readers; it is not clear who is responsible for the action. Passive voice results from the use of the verb "to be". To write in an active, positive voice, avoid the following 8 words:

Examples of how and how not to write
Write Do not write
In an active sentence, a person, thing, or an entity does an action In a passive sentence, the action is done to an object by a person, thing or an entity.
Passport Canada creates resources for travelers Resources for travelers were created by Passport Canada.
Awareness team conducts training across the department. Training was conducted across the department.

When "is"  describes a state of being, it is not in a passive voice, and is freely used. For example: "Government is responsible for respecting Official Languages."

Use verbs (action) instead of nouns (person, place or thing)

Many verbs can form nouns (for example, acquire/acquisition, modify/modification). These types of nouns are vague, do not clearly state action, and are often longer than the verb form. Try to only use verbs as shown in the following examples:

Examples of what and what not to use
Use Do not use
apply application
calculate calculation
certify certification
consider consideration
enforce enforcement

Avoid chains of nouns

When you use two or more nouns together, your content is difficult to understand. For example use the following:

Use gerunds (words that end in "ing") with caution

Words that end in "ing" can create confusion in the text, as it is not always clear who is doing what. Avoid using words such as writing, reviewing, and paying, when you provide instructions. Instead, use active voice words, such as write, review, and pay.

Use gerunds in page titles and link names when you need to describe a broader "how to" process versus a specific task. For example:

  • Buying a computer
  • Becoming a team leader
  • Applying for benefits

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

Winston Churchill

Create scannable text

Key points:

  • Users scan text rather than read each word
  • Websites are best when the content is concise
  • Subheadings, short paragraphs, lists, and bolded key words improve scanability

Users do not read online in the same way that they read a printed book. Instead they scan the web page. Break up the content with lists, sub-headings and shorter paragraphs to increase their ability to assess information quickly.

Adjust for this user behaviour and ensure maximum uptake of information: write for online audiences in a more direct manner. Offer the same information in about half the space compared to that geared 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

Focus on the task

Key points:

  • Help users find their task
  • Help users through their task
  • Put choices before actions when an action only applies to some users

Remember that users are there to complete a task. Help users decide which task they are looking for, and help them through it. Limit the number of options a user has.

If a task only applies to a select group of users, save users time and  put choices before actions in a sentence: If "choice" then "action".

Typically, a website might have a lot of content that doesn't help users meet their goals—such as press release archives and lengthy vision statements. A great deal of this content can usually be removed, simplified, or merged in some way.

Use parallel structure

Key points:

  • Use the same verb tense, sentence structure, and voice
  • Use consistent terms

Headings, bulleted lists, hyperlinks, and sentences are read or scanned much easier if you write them in a parallel structure. A parallel structure means you keep the same grammatical pattern for each element. Use the same verb tense, same sentence structure, same voice, and same terms. Parallel structure means there is a logical theme that connects every item in the group. In addition, every item is distinct, does not overlap and is presented in a logical order, if order is important. Refer to Lists for more on list organization.

Examples of parallel and non parallel statements
  Not parallel Parallel
  • Eligibility for the credit (statement)
  • Do you need to apply for the credit? (question)
  • Separation (topic)
  • Qualify for the credit
  • Apply for the credit
  • File for a separation
  • Are you eligible for the credit?
  • Do you need to apply for the credit?
  • Did you file for a separation?
  • Credit
  • Separation
Links with descriptive paragraph
  • All about your tax return (statement)
    Information to get, complete, and send in your personal tax return, including payments, refunds, and more
  • Businesses (audience)
    Information to get, complete, and send in your business tax return, including payments, refunds, and more
  • Direct deposit (topic)
    Set up or change your direct deposit information

Create clear paths to information (a scent of information)

Key points:

  • Users are on a hunt for information
  • Good scent of information helps users find what they need
  • Descriptive links, graphics, and layout improve the scent of information

Users hunt for information. They arrive on a web page and scan the content in search of information. If they cannot find what they are searching for, they continue their hunt by following a link to another page. How do they choose the next link? They virtually sniff out the link that has the strongest scent. This practice is known as following the scent of information.

With this user behaviour in mind, it is crucial to use descriptive links which closely resemble the title or heading of the destination page. Vague, poorly named, obscure, or incomplete links decreases the scent and frustrates users. Sometimes it leads them to abandon their hunt. In addition to descriptive links, users pick up the scent of information from graphics and the layout. Refer to Optimize headings for more on writing descriptive headings. Refer to Images and Ensure consistency and predictability for more on graphics and 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

Ensure consistency and predictability

Key points:

  • Use language, visual elements, user interface elements (their layout and functionality) consistently
  • Present content consistently across interfaces and pages
  • Remember that consistency helps your content appear reliable and professional

Consistency and predictability make sites easy to use, as the user does not have to learn new conventions each time. These reduce user’s cognitive load, frustration, and time spent on trying to determine if or how two similar things are distinct.

To create good user experience, ensure  you present similar content consistently from interface to interface and from page to page. Use repeatable patterns that users can easily recognize.

Consistency applies to the following web elements:

To ensure consistency, be aware of the general web conventions users expect in any online environment. This can include the functionality of the "Back" button or the house icon which represents return to the homepage. Changing widely recognized conventions can confuse and frustrate users.

Also, consider the impact of your visuals on the consistency of the entire website. Use caution with the use of terminology; don’t use different terms for the same thing. For example, if there are two links on a page which say "workforce plan" and "strategy for the workforce" would you know that these two links take you to the same document? What about "staffing glossary", "staffing lexicon", and "staffing terms"? Can you tell if these links will take you to the same or different information?

Do not underestimate the value of consistency for the organization.It helps your content appear more reliable and professional.

Users should feel [at home] when they visit your site. They shouldn’t have to spend a long time finding what they’re looking for. A consistent website is predictable and therefore learnable. After a while, users will find the information that they’re searching for effortlessly. […] Don’t take this as a ban on experimentation. Experimentation is essential to design. Keep in mind, though, that experimentation may introduce unpredictability, which can have a drastic impact on your website’s usability.

Consistency makes business sense. It allows you to develop a small set of templates for pages and other design elements, and apply them throughout the site. It makes writing, publishing and maintenance easier, and supports the implementation of XML, CSS and other technologies that rely on structured content.

Key points:

  • Do not clog up the search engine with unnecessary content
  • Determine users' common search terms and phrases
  • Use discovered terms and phrases in the title, headings, text, and metadata
  • Avoid expressions, jargon, metaphors, and puns
  • Give each web page a unique title
  • Include a clear page description in the metadata

Many users turn to a website's search tool to find information. 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.

You need to understand the following to take advantage of the search capabilities:

The best search optimization method is to reuse, recycle, and reduce content, not create more content.

The key to providing users with the search results they are looking for is to use the search terms and phrases they likely use in the title, heading, text, and metadata:

To ensure there is no confusion when users review their search results, use a unique page title. 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.

Years ago, we were watching people try to find products on 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.

Look good

Key points:

  • Presentation must support the information
  • Presentation must be visually appealing

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

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 website looks good, then this positive quality will spread to other areas, such as the website's content. Since people like to be right, they will continue to use the website that made a good first impression, as this will further confirm that their initial decision was a good one.

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 website'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 website'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

Users think aesthetically pleasing website designs are easier to use than site designs that are less pleasing. This is known as the aesthetic-usability effect.

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.

Date modified: