Web best practice

Expect your users to skim and scan.

People scan web pages and only read about 18% of what’s on the page.

Users often scan pages in an F pattern focusing on the top left side of the page, headings, and the first few words of a sentence or list. On average, users only read the first two words on each line.

Read more on the F-shaped pattern of reading

Good web content uses:

• The inverted pyramid style: Begin with the shortest and clearest statement you can make about your topic. Put the most important information at the top and the background at the bottom
• Chunked content: Don’t try to pack everything into long paragraphs. Rule of thumb – only one topic per paragraph. Split topics up into logical sections separated by informative headings
• Use lists: choose lists over long paragraphs. This ensures content is easier to scan
  • Numbered lists: Only use when the sequence or counts of items are important
• Only necessary information: Use only the information your users need to achieve their top tasks. Omit unnecessary information

Remember – your content is not clear unless your users can:

• Find what they need
• Understand what they find
• Use what they find to meet their needs

"Not more content, smarter Content” (Winters 2017, p. 15)

Read more about following web standards on plainlanguage.gov

Reference

Winters, S. 2017, Content Design, Content Design London, London.

Write using language that makes information easy for users to find and understand.

The more familiar your words are to a reader, the faster the reader can understand what they mean.

Keep your sentences short. The Oxford Guide to Plain English recommends 15-20 words per sentence. Long sentences are not as easy to understand (Winters, 2017).

Use the active voice where possible. It is simpler and more direct.

Examples

Omit unnecessary words and use lean phrases for example:

• Use "to" instead of "in order to…"

Use strong verbs instead of noun forms that "hide' the verb for example:

• Use "examine" instead of "carry out an examination of…"
• Use "ask" instead of "make an enquiry"

Readability

Readability is about how easy it is for someone to understand a piece of text.

Find out more about readability on digital.govt.nz

Plain language

The Plain Language Act 2022 requires all public service agencies and crown agents to use plain language. For everyone else, plain language is not required but is highly recommended for readability.

Plain language is important given only 16% of adult New Zealanders are considered to have high literacy levels*

Find out more about plain language on digital.govt.nz

Tone and voice

How to write in an appropriate tone and voice for Government. (Digital.Govt.NZ)

Find out more about tone and voice on digital.govt.nz

Readability tools

Tools that can help you improve the readability of your content.

• Readability Calculator at Online-Utility.org
• Readability Test Tool
• Hemingway

Respecting your audience

Writing clearly, with good structure, short sentences and plain language is helping people read.

It is helping people:

• With a learning disability
• Who have dyslexia
• Using a poor internet connection
• Who want to read something once and understand it

"It is not dumbing down, it is opening up!” (Winters 2017, p. 37)

Reference

*OECD Report Skills Matter

Any formatting tool you use in the editor (bold, italics, headings etc.) makes changes to the HTML – it therefore has a function for things that rely on or use HTML, such as screen readers.

Don’t choose to use a formatting tool purely because it makes content look good. For example headings are there to head a new section of content. They have a hierarchy (H1, H2, H3 etc.). They aren’t to be used to make the text look bigger or better. Also, screen readers use the heading structure to navigate content.

Quote boxes or notice boxes are for quotes and notices, not to provide a cool coloured background to text. This will mislead/confuse those who rely on HTML to understand what a page is doing.

Making stuff “look cool” is what web designers do, web editors simply add content with the correct function.

More resources on best practice and more effective web pages

Here are some other useful resources from international universities that relate to web best practice and creating accessible content.

• Creating accessible content – Princeton University
• 9 simple best practices for more effective web pages – The University of Maine
• Content principles – University of Dundee

To decide what to do with a particular jargon word, you’ll need to answer two important questions:

1. Do my readers know this term and concept?
2. How important is it that I use this particular term?

We use the answers to these 2 questions to help us decide how to handle the term.

For more information on dealing with technical or profession jargon visit NN/g Nielsen Norman Group

Acronyms and abbreviations are like jargon, not everyone knows what they mean.

If you use an acronym, make sure it is clear to the reader or try to replace it with a common term or phrase. (e.g. use "right away" instead of ASAP).

Using abbreviation tags

Abbreviation tags are very important for screen readers – if you hover over the abbreviation the full name will appear. You will need to use the title attribute for the hover to work.

Always put the acronym in brackets after the first use of the term.

It is acceptable to use an tag without title information, so long as it is explained in full in the first instance on any page, see BMS example below:

Use capital letters for acronyms and abbreviations.

Some examples

Guidelines for headings and titles

Following these guidelines helps people with:

• Time pressures: scannable content is easier absorb instantly
• Stress: noticeable, useful headings help you find things
• Multi-tasking: if attention's divided you need clear language
• Cognitive impairments: clear headings take less cognitive load
• Motor impairments: clear, specific headings mean less scrolling
• Visual impairments: labelled headings enable screen readers to navigate

Use clear, concise, frontloaded headings

Using clear, concise, front-loaded headings will make your web content easier for all users to navigate.

• Use specific, meaningful headings
• Front-load headings with a verb
• Structure your page with headings
• Use sentence case for headings and subheadings
• Use statements not questions
• Do not link headings – it can cause confusion for screen readers
• Label your headings in the CMS
  • Title = Heading 1
  • Subheading = Heading 2
  • Subsections = Heading 3

Examples

For more detail go to Content Design London – Readability Guidelines

Web best practice for links

Avoid link-spatter, this is placing links in the middle of sentences and paragraphs. Link spatter will distract your reader and it looks like a chaotic jumble. Link-spatter is an old-fashioned way to position link-text.

• Wherever possible, place links below the sentence or list they refer to. Separating links from text means they are easier to select on mobile devices
• Do not link headings – it can cause confusion for screen readers
• Ensure your link labels are descriptive. They should be able to stand alone so that it is clear what people can expect to find if they follow the link
• Do not put a full stop after your link text

Examples

To have continued use of a user account on our departmental machines, you must abide by our departmental rules and regulations, as well as the official Otago University computer usage policies. (Use of the account you have been given implies an acceptance of / agreement with these regulations/policies - even if you have not read them!)

Some recommendations re password creation can be found here.

To have continued use of a user account on our departmental machines, you must abide by our departmental rules and regulations, as well as the official University of Otago computer usage policies. (Use of the account you have been given implies an acceptance of/agreement with these regulations/policies – even if you have not read them!)

We have provided some recommendations for password creation below.

The webpage we have provided to allow you to change your password will screen your choice of password.

• View the departmental rules and regulations
• View the University of Otago computer usage policy
• Recommendations for password creation

Guidelines for links

The Readability Guidelines for links include detailed guidelines on the following topics:

• Make link text meaningful
• Avoid mid-sentence links
• Front-load your link text
• Make call to action (CTA) links and button text specific
• Start CTA links and button text with the a verb
• Make CTA links and button text 2 to 4 words
• Match the destination content
• Use sentence case

Read more about links in the Design London Readability Guidelines

Web best practice for grammar and punctuation

www.digital.govt.nz provide a useful alphabetised list of best practice and rules for punctuation and grammar on public sector websites.

Familiarise yourself with this comprehensive list

It is important to have consistency across the University of Otago website – consistency builds trust with our users. Content quality matters as people don’t trust sites with poor formatting and spelling mistakes.

And if your audience don’t trust you, they won’t interact with you (Winters, 2017).

Some formatting tips you may find helpful

Capital letters

Capitalise the first word in a sentence and use lower case for all other words, except for proper nouns. This is called sentence case and is easier to read.

Use sentence case for:

• Headings
• Titles
• Subheadings
• Labels

Do not capitalise whole words or phrases, as they are hard to read.

“Text presented in sentence case is the most familiar style for most people and, therefore, usually the fastest to read.” (Winters 2017, p. 39).

Exclamation marks

Do not use exclamation marks.

Full stops

Do not put full stops in:

• Page names
• Photo captions
• Headings
• Subheadings
• Initials
• Link text

Bold

Avoid using bold. If you use too much bold user’s struggle knowing where they need to pay the most attention.

Italics

Italics create visual noise and confusion and you are disadvantaging users with dyslexia. Only names of boats, ships, books, movies, newspapers, plays, films, journals or other publications should be italicised.

Underline

Never use underline to emphasise your text because underline is used to indicate hyperlinks.

Examples

The best college for you at the University of Otago is the one that suits your individual needs and preferences. Otago has 14 residential colleges on and around the Dunedin campus, each with their own community feeling and unique features.

All colleges are within a 15-20 minute walk of the University campus, well-heated, secure and fully catered.

If you're an international student under the age of 18, you can only apply for Aquinas, Salmond, or Toroa residential colleges. If you are a domestic student or an international student over the age of 18, you can apply to live in any residential college.

The colleges are diverse and have different flavours and styles: traditional, modern, tranquil and academic, busy and social.

The best college for you at the University of Otago is the one that suits your individual needs and preferences. Otago has 14 residential colleges on and around the Dunedin campus, each with their own community feeling and unique features. All colleges are:

• Within a 15–20 minute walk of the University campus
• Well-heated
• Secure
• Fully catered

If you're an international student under the age of 18, you can only apply for Aquinas, Salmond, or Toroa residential colleges. If you are a domestic student or an international student over the age of 18, you can apply to live in any residential college.
The colleges are diverse and have different flavours and styles: traditional, modern, tranquil and academic, busy and social.

Reference

Formatting – digital.govt.nz

Ensure you are using the official name for the University of Otago, Otago campuses and other significant locations. Also, make sure you are using the correct abbreviations for the three campuses

Examples

Do not abbreviate academic titles, use full titles.

Example

Refer to the University of Otago Style Guide for university-specific and academic terms

Accessible language is inclusive language

Accessible language is language that includes everyone. Ensure the language you use does not exclude anyone based on gender, disability, cultural background, age.

Web Content Accessibility Guidelines (WCAG) 2.1

Why accessible language is important

People can feel excluded when:

• They don’t understand words or phrases
• Language is used in ways that pose challenges to users of other technologies, such as text-to-speech software.
• The language used is not inclusive (e.g. gendered assumptions/terms, stereotypes/culturally appropriate phrases, etc)

Do not use informal words or phrases as not all users will understand this colloquial language.

Examples

Using informative images

Web best practice for the University of Otago website is to use informative images. Informative images convey a simple concept or information that can be expressed easily in a few words. The text alternative (alt-text) should express the meaning or content that is visually displayed.

Avoid using decorative images as they do not add any information to the content of a page and can compete with the information the user is trying to locate.

Accessibility requirements

Images should:

• Be strong in contrast ratio
• Not blurry or pixelated
• Be appropriately sized to convey information
• Not be images of text or tables, graphs e.g. flowcharts
• Use alt text

Alt text is a short description of the image that is read by screen readers or displayed when the image is not available. Alt text helps users who cannot see or access the image to understand its content and function.

For more information on various types of images visit W3C Web Accessibility Initiative WAI