Hero banner

[ZMcClatchey]

What

A ‘hero’ is a version of a header. This version has larger spacing for more visual prominence. Examples of use might be a home page, or promotional page. Hero components introduce a site with impact and give the user a clear indication of where to go next.

Why

• There is sufficient evidence that shows the hero banner is being used across the NHS (see below).
  • What evidence do you have that it meets the needs of the users of those services?
  • I have checked and this component does not exist in the NHS digital service manual.

Anything else

Find below various services that use the NHS.uk hero banner component.

https://www.nhs.uk/

https://www.nhsx.nhs.uk/

https://service-manual.nhs.uk/

[ZMcClatchey]

NHS Digital do not nhs.uk hero component but do use their own. Examples:

https://digital.nhs.uk/

https://digital.nhs.uk/services/nhs-apps-library/guidance-for-health-app-developers-commissioners-and-assessors/how-we-assess-health-apps-and-digital-tools

[ZMcClatchey]

GOV.UK use hero banners. Examples:

https://www.payments.service.gov.uk/

https://www.gov.uk/service-toolkit#gov-uk-services

[danjohnstonUX]

Haven't done tons of testing on this beyond our initial 'look & feel' testing of the service. The hero helped separate the header from the rest of the page and sits quite nicely with the blue header. We don't use the hero on any of our pages with a patient banner to avoid confusion (as they're the same colour and (roughly) the same size). So far we've only included a hero on our search pages and have seen enough evidence that it doesn't affect users negatively when finding a patient.

[alexparsons07]

The Design Working Group discussed this issue on 21/10/19. Feedback as follows:

• The hero banner is used commonly, but there has been no research into potential problems with different websites looking similar

• The intent of the hero banner should be for hub pages, not lower level pages.

• Further research of exploring risks need to be outlined before moving to develop guidance.

• Check with NHS Identitiy Guidelines

[chrimesdev]

Technical Review and Governance website (https://architecture.digital.nhs.uk/)

Home page

Hub page

[Johntyb]

Health Education England (HEE) use it. And user feedback is largely positive. http://prntscr.com/vem00p http://prntscr.com/vemcsd

[chrimesdev]

Hero with an image only

https://www.nhs.uk/conditions/nhs-health-check/

[davidhunter08]

Example from Menston & Guiseley Practice:

[StephenHill-NHSBSA]

Example from Healthy Start (uses the NHS Leadership Wordpress Theme - https://github.com/NHSLeadership/nightingale-2-0)

[henocookie]

Nothing that I have worked on, but a couple of extra examples I found:

Every Mind Matters

Better Health

[nancyhalladay24]

The NHS covid-19 website uses the blue box and image to advertise the covid track and trace app.

[nancyhalladay24]

[Dillon-Vix]

We use the hero on our GP practice websites. The design for the image is guided by us but final decision is that of the GP practice. We only uae the hero on home page. This is an example from Clifton Court Medical Practice.

[chrimesdev]

Latest NHS digital service manual Hero with the whats new box

[chrimesdev]

Hero component with a video

https://www.meanwoodgrouppractice.co.uk/

[karypun]

We used the hero on our Standards Directory which worked really well in research, especially as it helped to draw users to the search feature which is a core part of our service.