Make design suggestions based on working group feedback

[CharlotteDowns]

What

Following the feedback from the working group review we identified some specific design actions.

Why

These actions could improve the Navigation contribution, it's usability, and adoption.

Done when

• [x] Explore how to show a greater visual distinction between a service name with and without a link
• [x] Revisit the impact of reducing space within the header, service name and navigation proposals
• [x] Investigate organisation switchers and location of Phase banner in relation to service name and navigation
• [x] Investigate whether or not the main navigation takes a vertical position instead of horizontal beneath the header
• [ ] Consider One Login Header users that may not operate a service, for example, GOV.UK email notifications
• [ ] Consider colour contrast and font weight of Navigation elements

[onupama1]

Feedback for pt. 1: Explore how to show a greater visual distinction between a service name with and without a link

I tried to look at 2 services to understand the statement above. One with a link and one without

The main observations were:

1. If the ones with link already has an underline without having to hover over the service it is quite intuitive as most users can often understand the point of an underline. As from previous discussion in this discussion group, I believe we discussed our core groups (though a broad term here) are those with some degree of digital literacy. I have also observed in usability studies users mention, 'its obvious you can click on it'.
2. Given the 2 examples I have given above, I think it is important from user perspective to make services aware of the point of having a link to avoid possible user confusion, frustration or churn. For example, in the passport service example, it takes user back to the start page. If user have already progressed with the application and got stuck and clicked on the link assuming to find a solution/information, then it takes user back to the start page (user confusion). Hence what is the link trying to do? In addition, the input information is lost (user frustration).
3. In the Visas and immigration example, it is quite clear what service user is on.

[CharlotteDowns]

Thank you @onupama1 this is really appreciated. The two examples are a really nice case to extend our guidance, the journeys both seem quite linear, I'd love to determine why they both chose a different approach to linking the service name. The points you make about allowing for this in these types of service are interesting too, I wonder if users of either of these services click the GOVUK logo and the expectations around that journey too.

[CharlotteDowns]

Design Exploration

Explore how to show a greater visual distinction between a service name with and without a link

This is in order to help users know that the service name is or is not a link. Here are some suggestions

Idea 1 – Persistent blue underline

Thoughts: How will this look with the rest of page content, could it look busy?

Idea 2 – Persistent underline in the same colour as the text

Thoughts: What would the hover style look like? Does it need to be differentiated now?

Idea 3 – Persistant thick underline with greater offset in the same colour as the text

Thoughts: I like this one but it seems to be the one that messes with convention the most.

[onupama1]

Thank you @onupama1 this is really appreciated. The two examples are a really nice case to extend our guidance, the journeys both seem quite linear, I'd love to determine why they both chose a different approach to linking the service name. The points you make about allowing for this in these types of service are interesting too, I wonder if users of either of these services click the GOVUK logo and the expectations around that journey too.

@CharlotteDowns thank you for the feedback. To answer why they chose different approach, I think one way of figuring that out will be to do a quick audit of all the services with and without links and see where the links take to and why. To understand the 'why' we might be ale to either speak to a service designer or designer if available or there might be some design documents in the services. Gov.uk slack is quite helpful in reaching out to people. I can help with that if you send me a list of all gov.uk services. But will need help re slack. To narrow down the work you might start with services with linear journeys and incrementally look into services with non linear journeys e.g. developmental home loan applications.

Re clicking on GOVUK logo, we have 2 core groups of users (broader term again) - in/experienced with GOVUK. I would assume experienced users aware of where GOVUK logo takes hence not clicking without need. Inexperienced might get confused as usually it takes here. But then again there are 3 search buttons users are faced with: a) already often a search button on the service page they are on. Though this is not consistent through all the pages of all services b) clicking on GOVUK logo take to this search page. c) On the link above on (b), there is another search logo on the right hand top leading to here

Again the question from user perspective, what is the point of these journeys? Are user using them to search for different things (in which case quite pertinent). What I am trying to say is understanding the categories user use the GOVUK logo for.

[Ciandelle]

Design Exploration

Explore how to show a greater visual distinction between a service name with and without a link

This is in order to help users know that the service name is or is not a link. Here are some suggestions

Idea 1 – Persistent blue underline

Thoughts: How will this look with the rest of page content, could it look busy?

Idea 2 – Persistent underline in the same colour as the text

Thoughts: What would the hover style look like? Does it need to be differentiated now?

Idea 3 – Persistant thick underline with greater offset in the same colour as the text

Thoughts: I like this one but it seems to be the one that messes with convention the most.

My personal preference is for idea 3 out of those - it feels the most visually appealing out of all of them.

The space between the text and underlining signposts it's a service name to me and I would expect it to take me to start of the service, however I'd want to get some testing done with users to see if that's the case from our end users.

[selfthinker]

It is currently understood that everything in the header is a link (in both headers). We have this special case that sometimes the service name is not a link. I wonder if instead of adding something to the most common case we should rather remove something from the special case? I suspect the problem in this case is not that users won't know that the service name could be a link (which an underline would signify in addition to being text in the header) but rather that they don't know when it isn't a link. We'd need something to visually convey that.

I'm not sure how that can look like. "Just text" doesn't usually look a specific way. I was automatically thinking of making the text a bit darker if it isn't linked, but it at least needs something more as a change in colour alone.

[CharlotteDowns]

Decisions

• Explore how to show a greater visual distinction between a service name with and without a link

  We have decided to ensure that all services make the service name a link in our guidance and therefore are going to keep the name without an underline unless interacted with. We also have assessed a list of services and mapped the behaviour of the service name.

• Revisit the impact of reducing space within the header, service name and navigation proposals

  We have chosen spacing that is consistent with the existing header component.

• Investigate organisation switchers and location of Phase banner in relation to service name and navigation

  We have built 'slots' into our current design and we may be able to introduce a full width one between the service name and navigation items.

• Investigate whether or not the main navigation takes a vertical position instead of horizontal beneath the header

  This is difficult to make work with some 2/3 layouts and therefore will maintain the horizontal position at the top of the page to allow for greater consistency.