Finalise design, spacing and function (week 1 / 2)

[CharlotteDowns]

What

Interogate the design in detail and make any final adjustments

Why

To refine the design of the components to deliver the best thing we can at this point in time based on what we know.

Done when

• [x] Documented Design suggestions from the working group
• [x] Reviewed the design on desktop
• [x] Reviewed the design on mobile
• [x] Completed design actions discussed in Navigation decision log
• [x] Suggest how to address suggestions from the working group

[CharlotteDowns]

Design suggestions from the working group (still ongoing)

• [x] Trial a 25% or 50% lighter tint of the #f3f2f1 grey for the Service Header Navigation bar
• [x] Remove the link style for tabs of Navigation that are active
• [x] Try making the navigation links bold

[CharlotteDowns]

Design experiments based on working group feedback

Trialling a 20% and 50% tint of the grey to improve readability of the navigation links

A screenshot of a 50% lighter grey bar using #f9f9f8

A screenshot of a 20% lighter grey bar using #f5f5f4

Restyling the active tab to increase differentiation between other nav items

A screenshot of the active nav tab styled as black with a black border bottom

Thoughts: This example could be confusing when it's not the middle navigation item selected. For pages with sub navigation we want the main navigation tabs to be selectable. We've made a development fix to support both options, we now support non-link navigation items to accept aria-current roles (to allow for the 'current' page to not be a link).

Making the navigation links bold

A screenshot of the navigation items styled as bold

Thoughts: We loose the visual hierarchy between the service name and the navigation links that follow them.

[selfthinker]

Regarding restyling the active tab to increase differentiation between other nav items, when the active item as a link and a non-link are both black, there won't be any differentiation anymore between being a link and not being a link.

[CharlotteDowns]

I've started building a table of screenshots of what our current version of the Navigation contribution would look like across services, using the x-gov.uk list of services as a starting point.

Here is the document, Navigation in service examples

[CharlotteDowns]

I have written a proposal for the actions I think we can take in order to build confidence with the working group.