Content design style guide

We write content for the user, not for us.

So, we design content to give users what they need:

  • only when they need it
  • as simply and quickly as possible
  • using words they understand
  • in a consistent way

We design in context.

Designing content that puts our users first makes it easier and faster for them to use our services, encourages them to interact with us again and builds trust in what we’re saying.

Asking for names

Only ask for someone's name if it's essential: design with purpose.

If it is, and you can justify the reason you're asking:

  • ask for a ‘Full name’ in one field
  • make no assumptions about how the user wants to be addressed — ask them
  • make it explicit whose name we’re asking for — include who the other person is if you’re capturing multiple names in one form, for example, ‘Your child’s full name’
  • give an accurate instruction if the name needs to be written as it appears on another document, for example, ‘Copy the name from your passport’

Example

If you you have to capture name in separate fields, perhaps because of a legacy system, use:

  • ‘First name or names’, ‘Middle name’ (if necessary) and ‘Last name’
  • a free text box if you have to ask for title

Example

Brackets ('parentheses')

Round brackets

Use round brackets to:

  • clarify an acronym or technical term that you’ll use from that point onwards, for example:
    ‘Customer team member (CTM)’, or
    ‘the people you want to sort out your will (known as 'executors')'
  • include supplementary information that’s not essential to the main point of your sentence – information that, if removed, would not change the meaning of the sentence

Do not use round brackets to indicate that something can be singular or plural, like:

‘Check which document(s) you need to send to HR’

Instead, use the plural, as this will cover each possibility: ‘Check which documents you need to send to HR .’

(A complete sentence that stands alone in parentheses starts with a capital letter and ends with a full stop before the closing bracket.)'

Try not to overuse brackets, they can disrupt the flow of reading.

Square brackets

Only use square brackets to when you need to add clarification to a quote or something you've not written yourself, like:

"It [content] deserves our full time and attention"

Using Co‑op

Refer to Co‑op as a noun in writing as ‘Co‑op’, and not (where possible/practical) as ‘the Co‑op’.

We know that users tend to refer to our food stores as ‘the Co‑op’, so dropping the ‘the’ avoids any confusion.

Make sure you use a non-breaking hyphen using ‑. This will ensure the word ‘Co‑op’ does not break when it appears at the end of a line.

Refer to our business units as Co‑op Funeralcare, Co‑op Digital etc. (Two words, both capitalised.)

When we're talking about our organisation in terms of what we do, it's fine to use Co‑op as an adjective, as in 'Co‑op values'.

No need to capitalise 'Co‑operative' when it appears as an adjective or a noun unless you are referring to the Co‑operative Group.

However, do not talk about 'the Group' to an external audience. It doesn't mean anything to anyone outside Co‑op.

Using 'our' as in 'our Co‑op' can be powerful but use with caution - is it clear who 'our' is? Will 'our' mean the same thing to your reader as it does to you? It’s more suited to an internal audience.

'Co‑operative' and ‘Co‑op’ are always hyphenated.

The only exception to this rule is on social media when using a hashtag such as #TheCoopWay or #BeingCoop.

Dates and times

The following guidance on dates and times is taken from gov.uk:

Dates

As a general rule, dates should be capitalised and written out in full like this:

‘1 January 2018’

But if you’re limited with space, such as creating a table, then ‘Jan’, ‘Feb’ and so on is fine.

Don't use ordinal numbers for dates like 10th, 1st and so on. It's easy to get wrong and uses more characters.

If you’re referring to date ranges, then use ‘to’ rather than hyphens, en rules or em dashes.

It should look like this: January to March

Avoid all references to annual quarters. Instead, write the dates in full:

‘This offer is valid between 1 October 2018 and 31 December 2018.’

Times

Use the 12 hour clock. It’s easier to understand and helps avoids confusion:

‘Monday to Friday, 9am to 5pm.’

If you need to include minutes, write it like this:

‘9.15am’

Use ‘midday’ rather than noon, 12noon, or 12pm.

For example: ‘This store closes 24 December, midday.’

Use ‘midnight’ rather 12am, but be careful that it’s not misleading. For example, if I said:

‘Please complete and send your application form by 6 July 2018, at midnight’

Then you might wonder if I meant ‘ 6 July 2018, 11.59pm’ or ‘5 July 2018, 11.59pm’

To avoid this confusion, consider using ‘11.59pm’ where possible.

It’s not necessary to specify time zones, such as ‘1pm GMT’.

Colons and semicolons

Use a colon at the end of a lead-in line to a bulleted list, for example:

You need to bring:

  • your driving licence or passport
  • a copy of your P60
  • something else

If you use a colon to continue or explain an idea that you mention before the colon, consider whether it would be better to have 2 sentences or an em dash.

Avoid using semicolons — they can make sentences long and hard-to-read. If you think a sentence needs a semicolon, break it into separate sentences.

Ellipsis (…)

Ellipsis are 3 dots that should only be used when:

  • you’re quoting someone and need to show words have been missed out — only do this is the meaning will not be changed, for example:
    “We're building things that are user-centric… doing the hard work centrally to make things clearer, simpler and quicker."
  • to indicate there's more to come, for example, in a header:
    'We asked our users to name a wine…’

If you use ellipsis, use 3 dots only. They should follow straight on after the previous word (with no space), and have one space after.

If the ellipsis ends the sentence, do not add an additional full stop.

If you’re putting an ellipsis in html use ….

Frequently asked questions (FAQs)

Do not use FAQs.

Instead, if you know that you are answering a genuine frequently asked question, restructure your content so that the answers form part of the main user journey. And put the information in a logical place in that journey.

We do not use FAQs because:

  • users do not know if their question has been frequently asked
  • they're often made up by the business rather than genuinely asked by the public
  • users have to navigate through irrelevant content to see if their question is there — it’s frustrating and wastes their time
  • we should be creating services that speak for themselves: we design with purpose

For more information read Content Strategist Sarah Richards' blog on FAQs.

Hyphens and dashes

What you’re writing will determine where and when you should use hyphens and dashes.

Hyphens (the character you get when you type ‘-’ ) should be used to link words or part of words — they show the user that there’s a connection between them, for example, ‘mother-in-law’, ‘fine-tuned’, ‘Co‑op’.

En dashes (–) should be used for connecting things that are related to each other by distance such as June–July.

Em dashes (—) can be used in pairs like parenthesis — that is, to enclose a word, or a phrase — or they can be used alone to detach one end of a sentence from the main body.

Lists

Bullet lists

Bullets must:

  • use a lead-in line
  • make sense running on from the lead-in line
  • use lower case at the start of the bullet
  • have only one sentence per bullet point — use commas, dashes or semicolons to expand on an item

Bullets should not:

  • be paragraphs masquerading as a list for a visual effect
  • use a full stop after the last bullet point
  • include ‘or’ or an ‘and’ after the bullets

Example

The meeting agenda will be:

  • an overview of the last month
  • a presentation
  • a special announcement

Numbered lists

Use a numbered list for a logical sequence of things, like a series of tasks that must be done in a certain order. They do not need a lead-in line and should be complete sentences that start with a capital letter and end with a full stop.

Example

How to put your shoes on:

  1. Put on socks.
  2. Put on shoes.
  3. Tie laces.

Money

Use the £ symbol: £75

Currencies are lower case.

Write out pence in full: calls will cost 4 pence per minute from a landline.

Don’t use decimals unless pence are included: £75.50 but not £75.00

Check the advice about numbers and units for amounts over 1,000.

Numbers and units

Use ‘one’ unless you’re talking about a step, a point in a list or another situation where using the numeral makes more sense.

Write all numbers in numerals (including 2 to 9) except where it’s part of a common expression and it would look strange, like ‘one or two of them’.

If a number starts a sentence, write it out in full (‘Thirty-four hula-hoops found in researcher’s filing cupboard’) except where it starts a title or subheading.

For numerals over 999, insert a comma for clarity. For example, ‘It was over 1,000’.

Spell out common fractions, such as one-half.

Use a % sign for percentages: 50%, not ‘pc’ or ‘percent’.

Use a 0 where there’s no digit before the decimal point.

In tables, use numerals throughout (not written numbers).

For big numbers use ‘million’, ‘billion’ and so on, written without a space after the number — for example, £3.5million.

Ordinal numbers: first, second and so on

Spell out 'first' to 'ninth'. After that use 10th, 11th and so on.

But, write dates as 10 January 2017.

Units

Use MB not KB for anything over 1MB, for example 4.09MB not 4096KB.

For anything under 1MB, use KB, for example, 569KB not 0.55MB.

Keep units as accurate as possible and up to 2 decimal places. For example, 4.03MB.

Dates and times

The following guidance on dates and times is taken from gov.uk:

Dates

As a general rule, dates should be capitalised and written out in full like this:

‘1 January 2018’

But if you’re limited with space, such as creating a table, then ‘Jan’, ‘Feb’ and so on is fine.

Don't use ordinal numbers for dates like 10th, 1st and so on. It's easy to get wrong and uses more characters.

If you’re referring to date ranges, then use ‘to’ rather than hyphens, en rules or em dashes.

It should look like this: January to March

Avoid all references to annual quarters. Instead, write the dates in full:

‘This offer is valid between 1 October 2018 and 31 December 2018.’

Times

Use the 12 hour clock. It’s easier to understand and helps avoids confusion:

‘Monday to Friday, 9am to 5pm.’

If you need to include minutes, write it like this:

‘9.15am’

Use ‘midday’ rather than noon, 12noon, or 12pm.

For example: ‘This store closes 24 December, midday.’

Use ‘midnight’ rather than 12am, but be careful that it’s not misleading. For example, if I said:

‘Please complete and send your application form by 6 July 2018, at midnight’

Then you might wonder if I meant ‘ 6 July 2018, 11.59pm’ or ‘5 July 2018, 11.59pm’

To avoid this confusion, consider using ‘11.59pm’ where possible.

It’s not necessary to specify time zones, such as ‘1pm GMT’.

Phone numbers

Show a mobile phone number like this: 08765 555 333.

Show a UK landline number like this: 0161 000 0000 or 01524 000 000.

Show an overseas number as you'd dial it from the UK, so no + or (0): 00 353 1 222 3333.

Remember:

  • include call charges
  • include opening hours
  • make sure phone numbers are usable from mobiles

Titles

Titles should:

  • be sentence case
  • be less than 65 characters within HTML document <titles> — Google cuts them off after this
  • be unique, clear and descriptive — no puns or single topic words
  • be front-loaded with key words if possible — people tend to scan the first couple of words only
  • use words you know your users actually search for
  • be active where possible, ‘Apply for…’, ‘Report…’, ‘Find…’
  • not use acronyms unless they are well-known, like EU, BBC.

Validation messages

Validation messages must:

  • be flagged at the top of the screen and at each relevant field
  • be a bulleted list if there’s more than one error
  • be a complete sentence if there’s only one error (no bullet)
  • be linked from the top of the page to take users to the relevant field
  • help the user fix the problem, for example, ‘Check you've entered the correct sort code — it’s the 6 digit number usually found on your bank card’

Feedback

Did you find what you were looking for?