hmrc / design-patterns

Documenting HMRC design patterns
http://hmrc.github.io/assets-frontend/
MIT License
32 stars 4 forks source link

HMRC internal header #155

Closed mikeash82 closed 5 years ago

mikeash82 commented 6 years ago

HMRC internal header

For all internal services

Overview

This header helps internal users easily differentiate internal services from public facing external ones. It improves the identity of HMRC internal services and increases the users confidence that they will not be sharing internal information to the public.

image

Is it useful and unique?

It is useful as it will be used by all internal services. It has already been used by 3 internal services. It is unique as it is the only HMRC specific header available. and it will only be used on HMRC internal services.

Other components or patterns you've tried

We initially tried using the GDS black background for the header with the HMRC logo but it did not give enough confidence to internal users that they were not on a public facing service.

image

Research on this pattern

Research on an internal service showed that the new HMRC internal header radically raised awareness that the user wasn't on a public facing GOV.UK service.

daviddotto commented 6 years ago

We've been looking for something exactly like this for our service, we've been testing a modified version of the GOV.UK header (the version you tried initially) so I'm glad to see an evolution of it based on more research, we'll update ours to match. I'll report back if we gain any more insights.

benwakefield commented 6 years ago

Its worth noting that aside from the user needing to differentiate an internal HMRC system from a public facing GOV.UK service, Internal services should not be using the GOV crown logo or Transport font (if not using a GOV.UK domain)

https://www.gov.uk/service-manual/design/services-for-government-users

On SDES we're working on an internal admin area and are testing with this version in our next round... screen shot 2018-10-08 at 10 32 39 (note the updated font stack as per GDS guidance)

mikeash82 commented 6 years ago

Its worth noting that aside from the user needing to differentiate an internal HMRC system from a public facing GOV.UK service, Internal services should not be using the GOV crown logo or Transport font (if not using a GOV.UK domain) https://www.gov.uk/service-manual/design/services-for-government-users On SDES we're working on an internal admin area and are testing with this version in our next round... screen shot 2018-10-08 at 10 32 39 (note the updated font stack as per GDS guidance) Great. please share any finding.

jennifer-hodgson commented 6 years ago

I note that DIT have just raised an issue on the GOV.UK backlog for their equivalent of this.

benwakefield commented 6 years ago

We asked some questions around the design as part of a wider workshop with Security and Information Business Partner (S&IBP aka Data Guardians) 17 out of 20 preferred the new design.

Some feedback we've received for / against:

screen shot 2018-10-22 at 11 18 37
mikeash82 commented 5 years ago

Upstreamed to the GOV.UK issues backlog https://github.com/alphagov/govuk-design-system-backlog/issues/152

Franz1972 commented 3 years ago

We are going to use this component, as is, for our internal service. However, I noticed that the component spans the entire viewport, whereas the gov.uk header spans the govuk-width-container.

After a bit of investigation it seems the rationale behind this choice has been lost. Additionally, I've seen other internal services using this component and hacking it (at least at prototype level) to make it behave like the gov.uk header: span the container, not the viewport.

Perhaps there's scope to revist the choice of how much the header should span to fit needs? Spanning viewport may still be a valid choice, but it would be great to have the UR behind it.

sophiefriell commented 7 months ago

We received some accessibility feedback this week around this component from a low vision analyst. The usability issue was that the service name many not be noticed as a link by users. The suggestion to improve this was to add a hover state over the service name to indicate this is a link. The wider GOV.UK design system actually does something similar (attached).

Screenshot 2024-03-15 at 10 51 45