Icons

[davidhunter08]

Use this issue to discuss icons in the NHS digital service manual.

Also see below proposals for 2 new icons:

• CC (closed captions) icon
• BSL (British Sign Language) icon

[bencullimore]

The information architecture team on the NHS website have found the need for a variant of the chevron right icon, proposed name: chevron right icon circle.

Example of chevron right icon circle icon

On our new main topic hub page (#260), we've created a new component - the canonical panel link #254 a variant of the Card #159

To help users visually understand the new architecture we needed to introduce a visual hierarchy to links, trying to give users a flavour of what lies beneath.

Similar to the NHS App's 'Panel link' #249, we too needed links that "are visually prominent and obviously clickable." but we also needed a link to visually set expectations for the page it linked to along with being flexible enough (visually different) to meet needs and number of hub pages across the NHS website.

We started with the white box 'promo link' which can be found on https://www.nhs.uk/ https://service-manual.nhs.uk/ and https://www.nhsx.nhs.uk/ homepages (amongst others) and tests well with users.

The proposed 'canonical link' component shares similar attributes to the promo link in

• being a link
• having underlined, bold text (heading)
• and a summary sentence.

BUT! Due hubs needing other types of links (top tasks/shortcuts, related links, external links) we needed some extra flexibility than the promo link provided, so we added an additional arrow icon. This gives us extra affordance (clickable) and allows us the possibility to have promo links (without the arrow) alongside 'canonical links on future hubs - dependant on users needs.

Having the icon also allows extra flexibility across the site. For example, if a team discovers a need to have two levels of hubs with canonical links, to ensure a visual difference we could employ the chevron right icon circle icon on the first level but not the second.

Icon choice

The chevron right icon alone (without circle) was too similar to being a character and not easily scannable - the purpose of hub pages is to be scalable; scan, select and move on.

The arrow right circle has become synonymous with the action link and we were cognisant not to devalue that, but following the learnings from what makes the arrow right circle /action link component good - we placed chevron right into a circle.

Example of the chevron right circle icon on a canonical link on the coronavirus hub page https://www.nhs.uk/conditions/coronavirus-covid-19/

User research

The chevron right icon circle alone can't be measured to solve the problem of guiding users through big topic areas on the website, but the hub as a whole including; underlying structures, levels, labels, and visual hierarchy has worked well in our labs in helping users navigate through (up and down, side-to-side). The links on the page (including the proposed canonical link with chevron right icon circle icon) appear to meet users expectations of what lies beneath.

Headlines from user testing are as follows:

People were able to scan hub and content pages to see what was available for them to choose from and selecting the right links to help them answer the questions. Some users were able to go back to hub pages and re-scan for things they were looking for, if they became stuck. (Lab 3)

The hub pages were working well to give people an idea of where to go (they work really well to route people, even several hub layers deep). People returned to them to 'reset' themselves. (Lab 4)

We have validated our consistent design approach. People are able to move up, down and sideways around the content. This is validation that the design decisions we have made are effective in helping people move around to different parts of the site. (Lab 5)

The canonical links have since gone live on the Coronavirus hub https://www.nhs.uk/conditions/coronavirus-covid-19/ alongside top task and external links. From looking at analytics - we've found the visual hierarchy of links working well; users are flowing through the structure, from level 1 to the lowest content page. We've also seen an even spread of clicks and visits - especially on the level 1 hub page - suggesting that the canonical links aren't too prominent, not overshadowing top tasks or external links at the bottom of the page.

[davidhunter08]

More discussion about icons in #264

[paulfourniercarey]

Hi,
Wondering if there are scenarios where the users don't scan the links above these new versions, as they shout for your attention more visually, it will draw the users eye away from links higher up in the page...

[bencullimore]

@paulfourniercarey In testing (and now live) the only links above the canonical panels/card links with icon have been the top task/shortcut links #253 or action link #5

We're working to the principle of providing multiple ways to help users get to the thing they need, as every user has different mental models, methods.

The links above the canonical panels (with icon) are shortcuts to pages which users can also navigate to using the canonical panels. So if users miss the links at the top of the page, they have another opportunity to navigate to the thing they need.

I've documented the rationale behind our hub work structure and research findings here #260

We tested a few varients of the top task links to work alongside the canonical links. Some were too distracting, becoming a honeypot for users. The current iteration proved to be balanced enough - not to be lost against the canonical panel link (with icon) but not being too prominent.

In user testing sessions where we get users to speak their thoughts - the majority reference the links above and where we've employed our designs in live https://www.nhs.uk/conditions/coronavirus-covid-19/ the top task links are getting a good amount of usage, we haven't seen the canonical links being too prominent - we're seeing a mixed flow of traffic using various methods to find what they need, no dead ends.

Its also worth noting that the majority of traffic to the NHS website is mobile - at around 80% in some topics, which also means that the icon is less likely to draw your eye away from the top links - because users will see the top links first.

You raise a good point, and probably one I should reiterate on our hub structure guidance - only links to pages that sit within the section should site above canonical panel links (with icon).

[sarawilcox]

Rich Kelly is interested in adding the CC (closed captions) icon and BSL (British Sign Language) icon to our approved list of icons.

[richkelly13]

• Icons are an important brand asset as they help to communicate instructions and information across a range of platforms and media.
• It is best practice to add the text description and alt-text with the icon
• Use an .SVG icon file so the user can zoom in without any loss of quality to the icon
• Adhere to WCAG AA contrast requirements when choosing icon colours and the background where it sits
• Research that the icon you have chosen is universally understood by it’s intended audience

[richkelly13]

A proposal for a new British Sign Language (BSL) icon

User Research

I am a deaf and socialise within D/deaf communities and this is generally recognised as the 'BSL logo'.

I am not sure who the creator of it is or if it is 'official'.
I often see BSL videos thumb-nailed onto the same page as the information and that tends to be much clearer for D/deaf users - instead of having to click on hyperlinks.

Graphical contrast – WCAG guidance:

The intent of this success criterion is to apply the contrast requirements to important graphical elements in a similar way that it is applied to text in 1.4.3 Contrast (Minimum).

If a graphic is needed to understand the content or functionality of the webpage then it should be perceivable for people with low vision or other impairments.

The term "graphical object" is intended to apply to stand-alone icons such as a print icon (with no text), and the important parts of a more complex diagram such as each line in a graph. Not every graphical object needs to have sufficient contrast with its surroundings, only those that are required to understand what the graphic is conveying.

Graphics that are very thin are harder to perceive, therefore have a higher contrast requirement of 4.5:1. Graphics that are thicker or are solid shapes have a lower requirement of 3:1.

The term essential information is used as many graphics do not need to meet the contrast requirements. If a person needs to perceive a graphic, or part of a graphic (a graphical object) in order to understand the content it should have sufficient contrast. That is not a requirement for:

• A graphic with text embedded or overlayed that conveys the same information, such as labels and values on charts.
• The graphic is for aesthetic purposes that does not require the user to see or understand it to understand the content or use the functionality.
• The information is available in another form elsewhere on the page, or linked from the page.
• The graphic is part of a logo or brand name.

For designers developing icons that need to be perceived clearly, the following is an example of several sizes of icon having sufficient contrast at different sizes.

The thicker lines (3px or more) have 3:1 contrast (#949494 on #FFFFFF), the small lines (2px or less) need a darker grey (#777777 on #FFFFFF).

[richkelly13]

A proposal for a new closed captions (CC) icon

CC logo also seen as useful by those who rely on Captions.

[richkelly13]

Here's the NHS website Multimedia teams Discovery research into BSL icons:

BSL icon design for video findings_090222.pptx

[richkelly13]

BSL Icon also being looked at by team at .GOV

alphagov/govuk-design-system-backlog#245

[sarawilcox]

Hi @richkelly13, I think it'll be important to make sure that people understand the 2 icons to mean BSL video, not a live interpreting service.

[richkelly13]

Update 05/12/22

NHS.UK team are working on carrying out more User Research on the recommended icons from the UR Discovery. (see discovery report above dated 10/02/22).

We have 2 designs we wish to further co-design with D/deaf users.
We also look to consult NHS England commissioner's and key accessibility and Inclusion teams to see if any similar work can be aligned. Whilst also consulting with key charities to help co-design and promote the BSL icon.

Problem Statement DRAFT:
There is no recognisable way of seeing if BSL content is available to BSL users on the NHS website. Too often websites are using inconsistent and often incorrect icons to communicate that BSL content is available.

D/deaf people require a consistent and recognisable icon when using digital and offline BSL related touchpoints.

User needs DRAFT:

As a D/deaf person who doesn't speak English
I need to visualise where BSL content exists
So I can access the information I require.

As a D/eaf person with English as second language
I need a consistent BSL icon next to BSL content
So I can more easily find content created for me.

As the NHS website...
We should be clear to BSL users that BSL content exists...
so that D/deaf people know where to get health related content in their language.

Work to begin in December 2022.

[richkelly13]

Icons to test/iterate further:

[richkelly13]

The NHS.UK Multimedia team have just finished some Pre-discovery research with key D/deaf awareness charities (RNID, SignHealth, BDA) and NHS Inform. They all thought Design Option 2 above would be the best option for users (with the word BSL) next to it.

Next steps for us are to make a new BSL video prototype with this icon on the video player. We are then going to test the video and icon with BSL users directly.

[Tosin-Balogun]

What

App icon list is used on a series of better health products which is co-owned by the NHS and Office of health improvement and disparities (OHID).

These products are:

• Better health
• Every mind matters
• Healthier families
• Start for life

Screenshot example

Why

These app icon list are used in multitude of ways to help orient users around dense content. These are content blocks styled to resemble bullet points with an icon replacing the dot.

Additional details

In the usability testing session I observed users gravitated towards these icon list, often slowing down to read the content details within them compared to other content blocks on the page.

My observation is that users are able to more easily digest the content because they are broken down into smaller chunks and are separated into bullet points using the icon as a decoy to create some separation of what would have otherwise been a large content block.

I have added a screenshot of the research summary slide deck.

These have also tested well when used on Every mind matters wellbeing tips section, having similar effects where the user slows down to digest the tips being offered. These are collection from user feedback taken from a series of usability testing sessions conducted with 20 users in March 2021 by @misakihata and Zoonou (agency)

Screen reader behaviour

From what I can gather, the image is entirely ignored and skips to the sub-heading for each content block. This might be because of the presence of a sub-header, it might be repeated content if the icon is described.

Related issues

#61 #4

[sarawilcox]

British Sign Language (BSL) icon - separate GitHub issue