Formatting and punctuation - Using full stops, quotation marks and bold for UI and content

[OliviaThornton]

What

We'd like to see the following information added to the service manual to cover scenarios commonly seen in the NHS App, and to support future UI and content design decisions.
The information provided has been given with support and input from NHS.UK content designers.

Full stops

We would like a section describing when you should not use full stops when creating content for user interfaces.

Quotation marks

We would like a section on how to use quotation marks when creating content for user interfaces.

Bold

We would like a section describing how to use bold appropriately.

Why

Full stops

In UX writing it is not standard convention to have full stops on button text, it can make the copy feel quite terse, and unfriendly.

There is currently no consistency across desktop and app, we see some cards use full stops, where this is acting as a button to another page. https://www.nhs.uk/using-the-nhs/nhs-services/

User testing has shown that the use of full stops in hint text found that users were likely to enter the full stop as well as the necessary text, when it wasn't needed.

GOV.UK service manual states:

Headings and input field labels are sentence case, but not punctuated. Write other copy in full sentences, with a full stop at the end.

Microsoft style guide states:

Don’t use end punctuation in headlines, headings, subheadings, UI titles, UI text, or simple lists (three or fewer words per item).

Example

For the NHS App, we don't use full stops in panel link description text, unless there is more than one sentence:

Quotation marks

Using quotation marks where it isn't appropriate can often distract users from the task they're looking to complete.
If you can take the quotation marks away, without losing any context, then you don't need them in the first place.

They should not be used for directing the user to an element within the user interface, for example:

Select "More", then select "Messages".

It's good to use for them for colloquialisms, or slang names as stated in the current service manual entry for quotation marks:

"for unusual or colloquial terms, for example: Diuretics are sometimes called "water pills" because they make you pee more. "

Bold

It's good to use bold when directing a user to an element within the user interface, this looks a lot cleaner than using quotation marks, and doesn't distract from the task. For example:

Select More, then select Messages.

It is not clear whether it should be used to highlight key words and takeaways in large bodies of text or bulleted lists. Although it's been thought in the past that the use of bold in these circumstances eases user scannability, there's little evidence to support this.

NHS Covid-19 Check if you or your child has covid-19 symptoms page have used bold to highlight certain symptoms:

The main symptoms of coronavirus are:

• a high temperature – this means you feel hot to touch on your chest or back (you do not need to measure your temperature)
• a new, continuous cough – this means coughing a lot for more than an hour, or 3 or more coughing episodes in 24 hours (if you usually have a cough, it may be worse than usual)
• a loss or change to your sense of smell or taste – this means you've noticed you cannot smell or taste anything, or things smell or taste different to normal

GOV.UK states:

Only use bold to refer to text from interfaces in technical documentation or instructions.
You can use bold to explain what field a user needs to fill in on a form, or what button they need to select. For example: “Select Continue. The Verify Certificate window opens.”
Use bold sparingly - using too much will make it difficult for users to know which parts of your content they need to pay the most attention to.
Do not use bold in other situations, for example to emphasise text.
To emphasise words or phrases, you can:

• front-load sentences
• use headings
• use bullets

When using bold, it should be marked up as <strong> instead of **bold** in adherence with WCAG 2.1 guidelines.

[sarawilcox]

Re full stops, we do not use them in cards on Live well on the NHS website

Or in the type 1 diabetes hub page: https://www.nhs.uk/conditions/type-1-diabetes/
Or mental health hub: https://www.nhs.uk/conditions/stress-anxiety-depression/

We do use them in the social care and support guide: https://www.nhs.uk/conditions/social-care-and-support-guide/.

It would be good to have agreed guidance on this so we're consistent. At a recent meeting of content designers, we thought it was cleaner without.

[bencullimore]

Full stops - they are used on descriptions in cards on the coronavirus hub https://www.nhs.uk/conditions/coronavirus-covid-19/

[sarawilcox]

Do you know if there was a reason for that, @bencullimore?

[bencullimore]

Do you know if there was a reason for that, @bencullimore?

Would be good to check with @markasrobinson and Kim

[markasrobinson]

No reason I can think of - just an example of lack of guidance leading to inconsistency I think.

[sarawilcox]

For more examples, see promos: #91 and panel: #159

[sarawilcox]

Full stops

In the run up to the November Style Council meeting, I've had a look at what we might need to change in the service manual if we go along with @OliviaThornton's proposal above. (The proposal was reviewed and agreed by a group of NHS.UK content designers.)

The content style guide does not have any guidance on using full stops.​ I suggest that we add a new section to the guidance on formatting and punctuation (https://service-manual.nhs.uk/content/formatting-and-punctuation) and say:​

• "Do not use full stops in headings, button text or action links."​

We can link to the buttons page in the service manual which contains buttons like these:

The action links page contains examples like this:

See also the typography page for headings.

• "We do not use full stops in cards, where the card contains a brief link to another page, unless the card contains more than 1 sentence."

We currently use full stops inconsistently in cards but the content designers who reviewed this proposal thought that cards were clearer/cleaner without full stops.

We can link to the new cards page. The examples on the new page currently contain full stops so we will need to take these out. If we change it, the cards page would then include examples like these.

• "We do not use full stops in text input labels, error messages or hint text, except where they include more than 1 sentence. GDS user testing showed that users sometimes thought they needed to enter a full stop when they saw one in hint text. (Note: we do use question marks when the text input label is a question.)"

This is an example from our error messages page.

However, there is some inconsistency in the service manual and we will need to check and apply this change where necessary.

[sarawilcox]

Quotation marks

I'm checking what needs changing in the content style guide if we want to make the change @OliviaThornton has proposed re quotation marks.

The quotation marks section currently says: ​

We generally use straight double quotes:​

• when quoting another source​

• for unusual or colloquial terms, for example: Diuretics are sometimes called "water pills" because they make you pee more.​

​

So we could add something like this:​

Do not use quotation marks to tell users which element (for example, a field or button) to select. Unnecessary punctuation can distract users from the task. It's OK to write: Select More, then select Messages. (See the section on bold below.)

[sarawilcox]

Bold

We do not have a section on bold in the style guide. We could add a section based on the one in the GOV.UK style guide (https://www.gov.uk/guidance/style-guide/a-to-z-of-gov-uk-style#bullet-points-steps). Suggested text: for the Formatting and punctuation section:

Use bold in technical instructions to tell users which element (for example, a field or button) to select. For example, Select More, then select Messages.​

Use bold sparingly - too much makes it difficult for users to know which parts of your content they need to pay the most attention to.​

Do not use bold to emphasise text. To emphasise words or phrases, you can:​

• front-load sentences​
• use headings​
• use bullets​

Mark up bold text using with <strong>, not with <b>, for accessibility.

​

[OliviaThornton]

We should also review whether a content card, or panel link description text, containing two sentences should have one or two full stops.

If we are to keep to the pattern of no full stop, it would look like something like this example taken from the NHS App:

Which may look odd as a single example, however when grouped with other panel links or cards, it is a consistent pattern and does not look out of place. If we opt to have a second full stop, it would become inconsistent with the other panel links/cards.

[sarawilcox]

@mcheung-nhs Can I check please? We're right to say: "Mark up bold text using with , not with , for accessibility", aren't we?

[sarawilcox]

@OliviaThornton It might be helpful to see some more examples of technical instructions. Would you be able to upload a screenshot or two please?

[sarawilcox]

Full stops

At the November Style Council meeting, we agreed to add a section on full stops to the style guide:

"Do not use full stops in headings, buttons or actions links. [with links to buttons and actions links guidance]

We do not use full stops in cards, where the card contains a single sentence and acts as a brief link to another page." [with a link to the new card component]"

We agreed that ideally a card should contain 1 sentence only. We weren’t able to agree how to handle full stops in cards that contain more than 1 sentence. We need more evidence and examples before we can make a decision on this.

The NHS BSA team does not include a full stop at the end of a sentence that finishes with an email address or website link in case people copy and paste it. We didn’t make a decision on this but are interested in seeing more evidence.

We also considered adding the following:

"We do not use full stops in text input labels, error messages or hint text. GDS user testing showed that users sometimes think they need to enter a full stop when they see one in the hint text. Note: we do use a question mark when the text input label is a question."

This is in line with most of the examples in the GDS and NHS design systems, though there is some inconsistency of practice, especially where there is more than 1 sentence. Not ready to agree yet.

[sarawilcox]

Quotation marks

We agreed to add the following to the content style guide. It is in line with the GOV.UK A to Z style guide section on bold.

"Do not use quotation marks to tell users which element (for example, a text input or button) to select. Unnecessary punctuation can distract users from the task. It’s OK to write: Select More, then select Messages."

[sarawilcox]

Bold
We agreed to add a section on bold to the style guide, based on the one in the GOV.UK A to Z.

We agreed to add:

"Use bold in technical instructions to tell users which element (for example, a text input or button) to select. For example: Select More, then select Messages.

Use bold sparingly – too much bold makes it difficult for users to know which parts of your content they need to pay most attention to.

Do not use bold to emphasise text. To emphasise words or phrases, you can:

• front-load sentences
• use headings
• use bullets "

We were going to suggest adding: "Mark up bold text using with <strong>, not with <b>, for accessibility." But this needs further work. There is a GitHub ticket for this.

[sarawilcox]

The meeting notes still need to be approved and signed off by our clinicians and the content team.

[sarawilcox]

We need more evidence about:

• using more than 1 sentence in a card
• whether or not to include a full stop at the end of a sentence that finishes with an email address or website link
• whether or not to include full stops in text input labels, error messages or hint text, especially where there is more than 1 sentence

[sarawilcox]

At the November Style Council meeting, there was also an issue raised about the use of bold for the introductory sentence on some NHS website pages. We have an issue for lede text, which would be a better way to deal with this.

[sarawilcox]

We are looking at the use of full stops in hint text and error messages in this hint text issue.

[sarawilcox]

November Style Council meeting notes have been approved by clinicians. So we're going to publish the changes we agreed about:

• use of bold
• full stops
• quotation marks
  They're included in this pull request: Amend style guide after Style Council #838 and will be published shortly.

[sarawilcox]

Changes being published today.

[sarawilcox]

Related formatting and punctuation issues

• <b> or <strong> for bold #276
• Bulleted lists: alternative patterns #61
• Hyphens or spaces
• Straight or curly apostophes #62