diff --git a/CHANGELOG.md b/CHANGELOG.md index c41623ef8..6fdfd5318 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,19 +1,32 @@ # NHS digital service manual Changelog -## 5.9.2 - TBC 22 May 2023 +## 5.10.0 - 30 August 2023 + +:new: **New features** + +- Add new card components variants, replacing older cards +- Add updated design principles PDF +- Add and amend entries in content style guide after June Style Council meeting - see What's new for detail + +:wrench: **Maintenance** + +- Fix typos in previous release +- Add "Next" to bottom of first page in How to write good questions for froms +- Update spacing around design principle 10 +- Update site map with Character count and Tabs + +## 5.9.2 - 22 May 2023 :wrench: **Fixes** - Import and initialise the Error Summary JavaScript, and set focusOnPageLoad to false, so the component example works as expected [NHS.UK frontend issue #766](https://github.com/nhsuk/nhsuk-frontend/issues/766) - ## 5.9.1 - 3 May 2023 :wrench: **Maintenance** - Fix design principle 10 in mobile view - ## 5.9.0 - 27 April 2023 :new: **New features** @@ -34,7 +47,6 @@ - Duplicate accessibility guidance for testers on giving users time to act on devs and designers pages - Change "NHS Digital" to "NHS England" - ## 5.8.0 - 17 January 2023 :new: **New features** diff --git a/app/assets/nhs-design-principles.pdf b/app/assets/nhs-design-principles.pdf index ac132ae2f..3b4e2b346 100644 Binary files a/app/assets/nhs-design-principles.pdf and b/app/assets/nhs-design-principles.pdf differ diff --git a/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk b/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk index d263facc3..06a9d9226 100644 --- a/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk +++ b/app/views/accessibility/partials/avoid-accessibility-overlays-or-widgets.njk @@ -24,7 +24,7 @@

Widgets typically sit in the banner or a corner of the page, sometimes obscuring key functionality. They often use icons that can be difficult for users to understand.

-

When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users can't get past. People find them confusing and unhelpful.

+

When a user clicks on the widget, by accident or on purpose, an overlay may pop up and cover up information or create a barrier that users cannot get past. People find them confusing and unhelpful.

People with access needs often use their preferred assistive technologies across all websites. Widgets only meet some access needs and only deal with one part of a user journey. They cannot hand over from one system or site to another. Widgets can also cause problems for people who use assistive technologies.

diff --git a/app/views/content/a-to-z-of-nhs-health-writing.njk b/app/views/content/a-to-z-of-nhs-health-writing.njk index 232d750e2..670b3a716 100644 --- a/app/views/content/a-to-z-of-nhs-health-writing.njk +++ b/app/views/content/a-to-z-of-nhs-health-writing.njk @@ -1,7 +1,7 @@ {% set pageTitle = "A to Z of NHS health writing" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Words and phrases we use to make our content about health and the NHS easy to understand." %} -{% set dateUpdated = "January 2023" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "318" %} {% block extraMeta %} @@ -279,13 +279,18 @@

We explain NHS continuing healthcare on the NHS website.

contractions

To find out how we use contractions, like "we're" and "don't", see the guidance on contractions on the Formatting and punctuation page.

-

coronavirus (COVID-19)

-

Follow the entry on coronavirus (COVID-19) in the A to Z of GOV.UK style.

+

COVID-19

+

Upper case.

+

Do not use:

+

See also on this page:

COVID-19 vaccination status

@@ -677,15 +682,6 @@

When advising users about the browser version of the NHS App, we say: "You can also access NHS App services from the browser on your desktop or laptop computer".

Find out more about the NHS App on NHS Digital's website.

-

NHS COVID-19 app

-

Use "NHS COVID-19 app". Read about the NHS COVID-19 app on GOV.UK.

-

Note that "app" is lowercase unlike the NHS App.

-

Do not use:

-

NHS COVID Pass

NHS COVID Pass is a service that shows someone's vaccination details or a positive NHS PCR test result if they need to travel abroad. Read about the NHS COVID Pass on the NHS website.

Use "NHS COVID Pass" each time you mention it.

@@ -697,8 +693,8 @@
  • "vaccination pass" or "passport"
  • See also "COVID-19 vaccination status" on this page.

    -

    NHS England and NHS Improvement (NHSEI)

    -

    The full name of the organisation is NHS England and NHS Improvement. The abbreviation is NHSEI.

    +

    NHS England (NHSE)

    +

    The full name of the organisation is NHS England. The abbreviation is NHSE.

    NHS login

    We write "login" in lower case and as one word. The NHS login lets people see their personal health information online.

    NHS number

    @@ -714,8 +710,6 @@

    This number format makes it easier for people and assistive technologies to read. It also makes it less likely that people will make mistakes.

    Ask your frontend or coding colleagues how to stop the NHS number breaking over 2 lines.

    See our design pattern for asking users for their NHS number.

    -

    NHS Test and Trace

    -

    NHS Test and Trace is the NHS service that tests people for coronavirus, traces contacts and manages local outbreaks.

    NHS website

    Lower case "website". The NHS website is the website at nhs.uk.

    nhs.uk and NHS.UK

    @@ -742,6 +736,16 @@

    OK

    It's OK to use OK.

    We've tested it on screen readers and it reads out OK.

    +

    online consultation

    +

    Do not use the term "online consultation" or any variation of it, like "eConsultation".

    +

    If you're writing about using an online form to contact a GP surgery, be clear about the task and the outcome. The best way to describe this may depend on the context and the service that's available.

    +

    For example, you could use phrases like:

    + +

    Our research showed people are not familiar with "online consultation". When the term is used for an online form it's misleading. Many people think it means they'll have a consultation with a doctor online, rather than complete a form to request an appointment.

    +

    If you are talking about a phone, video or face to face consultation with a doctor or other health professional, be clear about the format.

    online services

    See GP system supplier names and patient-facing services.

    opticians, optometrists, ophthalmologists and orthoptists

    @@ -825,7 +829,6 @@
  • 020 7450 4000
  • 0800 890 567
  • 07700 900 866
  • -
  • 077718 300 300
  • +44 (0)20 7450 4000
  • +39 1 33 45 70 90
  • @@ -937,8 +940,8 @@

    safety precaution

    We say "for safety".

    secure message

    -

    We've found that people do not understand "secure message".

    -

    Use the words "text" or "email" instead.

    +

    We've found that people do not understand "secure message". Also, the word "secure" makes some users question security.

    +

    Instead, make it clear how people will get a message. Use the words "text" or "email" or, for example, "messages through the NHS App".

    sedating

    See "drowsy".

    seek

    diff --git a/app/views/content/formatting-and-punctuation.njk b/app/views/content/formatting-and-punctuation.njk index b706f7013..ca2310c28 100644 --- a/app/views/content/formatting-and-punctuation.njk +++ b/app/views/content/formatting-and-punctuation.njk @@ -1,7 +1,7 @@ {% set pageTitle = "Formatting and punctuation" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Abbreviations, acronyms, capitalisation and other content styles." %} -{% set dateUpdated = "February 2022" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "322" %} {% extends "includes/app-layout.njk" %} @@ -34,7 +34,7 @@
  • Abbreviations and acronyms
  • Aligning text
  • Apostrophes
  • -
  • Bold
  • +
  • Bold, italics and underlining
  • Capitalisation
  • Contractions
  • Full stops
  • @@ -93,15 +93,34 @@

    Read more about contractions like "you'll" and "can't" in the contractions section.

    -

    Bold

    +

    Bold, italics and underlining

    +

    Use bold sparingly. Do not use italics or underlining (except for links, which are underlined by default).

    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:

    +
    + + + Why we say this + + +
    +

    Large areas of bold, italics or underlining can be difficult for some people to read. Too much bold makes it difficult for them to know which parts of your content to pay most attention to.

    +

    People may mistake stand-alone bold text for a heading and underlined text for a link.

    +

    By default, screen readers do not announce text in these HTML tags differently:

    + +

    Users may miss anything you wanted to express by using them.

    +
    +

    Capitalisation

    We do not use block capitals as they're difficult for people to read.

    @@ -171,7 +190,41 @@

    Use "long term" in phrases like "in the long term". But use a hyphen for "long-term" as an adjective, for example in "long-term care". Do the same with "short term" and "short-term".

    Use "follow up" as a verb, but "follow-up" with a hyphen in "follow-up appointment".

    Dashes

    -

    Avoid using dashes to indicate a pause. Instead use a comma, or write shorter sentences.

    +

    Dashes can make content hard to read so we do not often use them.

    +

    You can use a dash, or a comma, in a bulleted list if you need to expand on an item. But follow our guidance on lists and keep bullet points as short as possible.

    +
    + Example +
    +

    Do

    + +
    +
    +

    Consider other ways of formatting your content without dashes, for example:

    +

    We use "to" instead of a dash for ranges of numbers, dates or time.

    diff --git a/app/views/content/how-to-write-good-questions-for-forms/index.njk b/app/views/content/how-to-write-good-questions-for-forms/index.njk index 79f506f8d..160d4b7fd 100644 --- a/app/views/content/how-to-write-good-questions-for-forms/index.njk +++ b/app/views/content/how-to-write-good-questions-for-forms/index.njk @@ -49,3 +49,12 @@ {% endblock %} + +{% block afterContact %} + +{{ pagination({ + "nextUrl": "/content/how-to-write-good-questions-for-forms/understand-the-problem-before-you-write-your-questions", + "nextPage": "Understand the problem before you write your questions" + }) }} + +{% endblock %} diff --git a/app/views/content/numbers-measurements-dates-time.njk b/app/views/content/numbers-measurements-dates-time.njk index f59aa0eda..51e51339a 100644 --- a/app/views/content/numbers-measurements-dates-time.njk +++ b/app/views/content/numbers-measurements-dates-time.njk @@ -1,7 +1,7 @@ {% set pageTitle = "Numbers, measurements, dates and time" %} {% set pageSection = "Content style guide" %} {% set pageDescription = "Content styles, including numerals, ordinals, dosage, temperature, fractions and percentages" %} -{% set dateUpdated = "January 2021" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "321" %} {% extends "includes/app-layout.njk" %} @@ -29,6 +29,7 @@
  • Numbers, measurements, dates and time diff --git a/app/views/design-system/components/card/index.njk b/app/views/design-system/components/card/index.njk index 7573fe273..e7504965a 100644 --- a/app/views/design-system/components/card/index.njk +++ b/app/views/design-system/components/card/index.njk @@ -3,7 +3,7 @@ {% set subSection = "Components" %} {% set pageDescription = "Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks." %} {% set theme = "Navigation" %} -{% set dateUpdated = "November 2021" %} +{% set dateUpdated = "August 2023" %} {% set backlog_issue_id = "159" %} {% set hideDescription = "true" %} @@ -17,30 +17,68 @@

    When to use a card

    Use a card to give users a brief summary of content or a task, often with a link to more detail. You can display a card alongside other cards to group related content or tasks.

    +

    Use clickable cards on hub pages to signpost groupings of related content and help users navigate to the content they need.

    +

    You can use a basic, non-clickable card on content pages.

    +

    These cards are different from the pattern to help users decide when and where to get care (care cards).

    + +

    How to use cards

    +

    Make cards easy to scan for relevant and actionable information.

    +

    You can include multiple elements, such as a title, text, an image and links. If you include a link, the link should mirror the heading of the page it links to.

    + +

    Clickable cards

    -

    How it works

    -

    Cards should be easy to scan for relevant and actionable information. They can contain multiple elements, such as an image, title, text and links.

    -

    Cards are different from the pattern to help users decide when and where to get care (care cards).

    +

    If the card contains a single link, you can make the hit area for the link wrap the entire card. We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

    -

    Basic card

    +

    Top task card

    {{ designExample({ group: "components", item: "card", - type: "default" + type: "top-task" }) }} - -

    Clickable card

    -

    If the card contains a single link, you can make the hit area for the link wrap the entire card.

    -

    We avoid wrapping an entire card in an anchor tag as this can be a difficult experience for screen reader users.

    - + +

    Top task cards are small clickable cards.

    +

    Use them at the top of hub pages above other cards (such as primary cards) to help users quickly access specific information or tasks buried deeper in the navigation. Use them as shortcuts to content or services that are popular with users or meet an important business need.

    +

    If you want to link to a page just below the hub page, use a primary card instead.

    +

    Do not use more than 3 top tasks on a hub page.

    +
    + Example +

    The NHS services hub page on the NHS website uses 3 top task cards to help people get help quickly.

    +
    + +

    Primary card (with chevron)

    + + {{ designExample({ + group: "components", + item: "card", + type: "primary-card" + }) }} + +

    Use primary cards on hub pages to signpost groups of information that are important to users.

    +

    You can include a primary card that links to a single page at a lower level if other primary cards on the same hub page link to groups of content.

    +

    The chevron icon (from our icon set) helps users know the card will take them to more content. The size of the card helps them understand that the topics these cards link to are more frequently visited or more important than topics signposted by secondary cards.

    +
    + Example +

    The Social care and support guide hub page on the NHS website routes users to different social care topics using primary cards.

    +
    +

    Primary cards with chevrons replace a similar clickable card without a chevron which is being phased out.

    + +

    Secondary card

    + {{ designExample({ group: "components", item: "card", - type: "clickable" + type: "secondary-card" }) }} -

    Card with an image

    +

    Use secondary cards on hub pages to signpost groups of information on less important topics. Use them below primary cards which signpost important information.

    +

    Secondary cards have less visual impact than top tasks or primary cards.

    +
    + Example +

    The NHS services hub page on the NHS website has secondary cards at the bottom of the page for topics that are less searched for.

    +
    + +

    Card with an image

    {{ designExample({ group: "components", @@ -48,10 +86,39 @@ type: "with-image" }) }} +

    Only use cards with images if you have evidence that they help your users, for example, where you can show that they motivate users.

    The card image is set as a decorative image by default, with the alternative text being null.

    -

    Card group

    +

    Non-clickable basic card

    + + {{ designExample({ + group: "components", + item: "card", + type: "default" + }) }} + +

    Use basic cards on content pages, not hub pages.

    +

    Consider using these components instead:

    + + +

    Grouping cards

    You can group multiple cards to show a collection of related topics. Prioritise the cards so the content users need most comes first.

    +

    Use different card styles to help users understand the importance of different groups of cards.

    +
    + Example +

    The Live Well hub page on the NHS website helps users see the breadth of information available. It groups, ranks and links to content on different topics using:

    +
      +
    • top task cards
    • +
    • primary cards
    • +
    • secondary cards
    • +
    +
    + +

    Card width

    We define the width of the cards using the grid system. For example, nhsuk-grid-column-one-half is used to make the cards half width:

    {{ designExample({ @@ -61,7 +128,6 @@ }) }}

    For thirds, use nhsuk-grid-column-one-third:

    - {{ designExample({ group: "components", item: "card", @@ -102,4 +168,13 @@
  • decide where to go next
  • +

    We tested 3 card variations as part of an iterative process to improve the NHS website's information architecture and navigation patterns:

    + + +

    We tested the cards in usability sessions and monitored analytics to understand how successful they were.

    + {% endblock %} diff --git a/app/views/design-system/components/card/primary-card/index.njk b/app/views/design-system/components/card/primary-card/index.njk new file mode 100644 index 000000000..9cedeebad --- /dev/null +++ b/app/views/design-system/components/card/primary-card/index.njk @@ -0,0 +1,14 @@ +{% from 'card/macro.njk' import card %} + + diff --git a/app/views/design-system/components/card/secondary-card/index.njk b/app/views/design-system/components/card/secondary-card/index.njk new file mode 100644 index 000000000..f628be24a --- /dev/null +++ b/app/views/design-system/components/card/secondary-card/index.njk @@ -0,0 +1,14 @@ +{% from 'card/macro.njk' import card %} + + diff --git a/app/views/design-system/components/card/top-task/index.njk b/app/views/design-system/components/card/top-task/index.njk new file mode 100644 index 000000000..f65d47cf2 --- /dev/null +++ b/app/views/design-system/components/card/top-task/index.njk @@ -0,0 +1,13 @@ +{% from 'card/macro.njk' import card %} + + \ No newline at end of file diff --git a/app/views/design-system/components/tabs/index.njk b/app/views/design-system/components/tabs/index.njk index 374d9d034..73185acac 100644 --- a/app/views/design-system/components/tabs/index.njk +++ b/app/views/design-system/components/tabs/index.njk @@ -53,7 +53,7 @@ @@ -68,7 +68,7 @@

    If you struggle to come up with clear labels, it might be because the way you've separated the content is not clear.

    Order the tabs according to user needs

    -

    The 1st tab should be the most commonly-needed section. Arrange the other tabs in the order that makes most sense for your users.

    +

    The 1st tab should be the most commonly needed section. Arrange the other tabs in the order that makes most sense for your users.

    Do not disable tabs

    Disabling elements is normally confusing for users. If there is no content for a tab, either remove the tab or, if that would be confusing for your users, explain why there is no content when the tab is selected.

    diff --git a/app/views/design-system/design-principles.njk b/app/views/design-system/design-principles.njk index 5e9939520..0b628b634 100644 --- a/app/views/design-system/design-principles.njk +++ b/app/views/design-system/design-principles.njk @@ -16,15 +16,15 @@

    They're inspired by the NHS Constitution.

    -

    Download design principles poster (PDF, 177KB)

    +

    Download design principles poster (PDF, 126KB)