Consider making target area taller for service navigation links

[frankieroberto]

Hi team!

At the moment, the target area for the service navigation links is just 17px high:

I think we could improve the usability by making the target area the full height of the bar, including the border - which would make it 60px high:

As well as larger target areas generally being good for usability and accessibility, I suspect that the present of the blue border at the bottom will lead users to expect the target area to be bigger here.

One consequence of this will be the focus style. At the moment, the focused links get a yellow background, black text and a black underline. This leads to a double underline + border when the active link is focused:

If the target area was made taller, then the black underline on focus could replace the blue border (for active links):

Some of the existing services from Department of Education already use a version of this navigation bar (with the taller target areas) in production, like this (showing both an active and focused link):

I don't think we have any specific research on this, but the design has been in production for a while, and I don’t think any issues have been observed in usability research sessions..

[benjamin-mortimer]

Hi Frankie,

Thanks for raising this issue. We'll take a look at this and get back to you after our next planning session (23 May 2023).

All best,

Ben

[benjamin-mortimer]

Hi Frankie, apologies for taking longer to get back to you than I originally promised.

We've added this to our backlog and will start working on it soon. I'll keep you updated here with our progress.

Many thanks for raising this - it's a really valuable improvement.

Ben

[frankieroberto]

@benjamin-mortimer thanks – look forward to seeing this improvement! 😄

[danacotoran]

Closed by https://github.com/alphagov/di-govuk-one-login-service-header/pull/8