search

nhsuk / nhsuk-service-manual-community-backlog

This is a place for digital teams in the NHS to work together and develop the NHS digital service manual.
https://service-manual.nhs.uk/community-and-contribution
62 stars 5 forks source link

Icons #4

Open davidhunter08 opened 5 years ago

davidhunter08 commented 5 years ago

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

Also see below proposals for 2 new icons:

bencullimore commented 3 years ago

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.

image Example of chevron right icon circle icon

On our new main topic hub page (https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/260), we've created a new component - the canonical panel link https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/254 a variant of the Card https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/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

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.

image 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 commented 3 years ago

More discussion about icons in https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/264

paulfourniercarey commented 3 years ago

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 commented 3 years ago

@paulfourniercarey In testing (and now live) the only links above the canonical panels/card links with icon have been the top task/shortcut links https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/253 or action link https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/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 https://github.com/nhsuk/nhsuk-service-manual-backlog/issues/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 commented 2 years ago

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

richkelly13 commented 2 years ago
richkelly13 commented 2 years ago

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'.

Screenshot 2021-12-20 at 12 56 38

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:

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 commented 2 years ago

A proposal for a new closed captions (CC) icon

Screenshot 2021-12-20 at 12 56 40

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

richkelly13 commented 2 years ago

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

BSL icon design for video findings_090222.pptx

richkelly13 commented 2 years ago

BSL Icon also being looked at by team at .GOV

https://github.com/alphagov/govuk-design-system-backlog/issues/245

sarawilcox commented 2 years ago

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 commented 1 year ago

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 commented 1 year ago

Icons to test/iterate further:

Screenshot 2022-12-05 at 13 55 53
richkelly13 commented 1 year ago

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 commented 6 months ago

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:

Screenshot example

Screenshot 2024-02-12 at 17 27 02

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.

Screenshot 2023-10-31 at 18 25 46

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.

Screenshot 2024-02-12 at 17 21 09

Related issues

61 #4