Navigation Menu

[abbott567]

Screenshot

What problem does this design solve? Agent facing systems usually require a navigation bar to link to different features.

Which service are you researching this design on?

• Bereavement Support Payment

How have you approached the design? The design was originally a grey bar with a solid teal background for selected items. The teal was found to fail the colour contrast ratio for WCAG-AA. The teal was then switched to govuk-blue. This tested ok, but then we needed a sub-nav (see screenshot).

The grey bar wouldn't work when embedded halfway down a page, so I looked around for existing designs. The style of nav I have chosen already exists on companies house and govuk-pay.

What have you learned from research? The navigation works fine both as the main nav and the sub-nav. Agents have no issues finding it and using it to navigate the site.

Have you tested this for accessibility? This has been tested with the DWP Accessibility Compliance Team and no issues were found. More testing will need to be done with actual users.

Link to code

• link to follow

[gavinelliott]

A slight variation on Craig's navigation.

[htmlandbacon]

Which service are you researching this design on?

Support for Check your State Pension

[abbott567]

Hey @htmlandbacon, that is the original grey bar with the teal background i started with. The text has to be 24px normal weight, or 19px bold to pass WCAG AA contrast ratios, so i changed the background to govuk-blue.

[htmlandbacon]

Which service are you researching this design on?

Jobseekers Benefit Enhancement Service

Notes

This service has difference user roles, so case workers don't get the maintenance link.

[ermlikeyeah]

Which service are you researching this design on?

Support for Mortgage Interest [internal service]

Notes

This service has navigation to help users around the service and then another level of navigation to help users review an individual's case.

[abbott567]

@ermlikeyeah Mixing blue and teal? The second Nav looks incredibly similar to the one we're using if that bar were blue.

[ermlikeyeah]

@abbott567 I wouldn't take them colours from that grab as gospel. More the two lines of nav: the secondary level is something I inherited to navigate around the "case". Which lends itself to the user story approach I was talking about earlier.

For example:

"As a DWP case worker, I need to move around the case I am viewing on screen - as well as go to other parts of the digital service - when I need to look up information/change information/etc."

[srich-DWP]

What problem does this design solve? Agent facing system which requires navigation to different page views and process screens

Which service are you researching this design on? Access to Work - Access to Work Integrated Service (ATWIS)

Notes The colour on the ATWIS navigation tabs has tested well, users can find where they are easily and testing hasn't shown up any issues around navigation. Keeping the active tab hi-lighted seems to be a preferred example of how to confirm where you are.

[srich-DWP]

_What problem does this design solve?- Agent facing system which requires navigation to different page views and process screens, secondary navigation

Which service are you researching this design on? Access to Work - Access to Work Integrated Service (ATWIS)

Notes This secondary navigation style is viewed when an agent is within a customer record. The tabs follow the process flow from left to right

[srich-DWP]

This is a secondary navigation style we will be testing for Access to Work, Payment Officer views next week. It's based on the existing Admin Menu pattern available in the DWP Patterns library https://dwp-patterns.herokuapp.com/adminmenus

This secondary navigation example was tested with users on 05/03/18 at Access to Work office in Harrow. Feedback from the session was positive on the design for this navigation. What we were trying to do was meet a user need whereby Advisers needed multiple pieces of customer case information available for them to check against when processing a payments claim. There were 3 main parts for the navigation;

1. an archive of previous payments which had been processed
2. an overview of the agreed support put in place by Access to Work
3. a list of Payees which have been used for previous transactions

[chrisadesign]

As we've agreed to use the claimant/citizen/identify details header I've been using the grey background top nav option as I believe the white one and it's highlight will be lost.

I'm proposing using the white grey border-bottom blue border-bottom highlight option* as a secondary nav now that we've said not to use tabs in that manner.

Below is an example of all three of those in use, but worth noting this is not in use and has yet to be tested in any way.

*Naming things is hard.

[abbott567]

I'm happy with this. But the more I look at it, won't it look like tabs when the grey bar has an active element on top of the blue mega-header thing?

[chrisadesign]

Like this?

It kind of does.

It doesn't if you change it to teal 😄 (this isn't accessible don't do it)

The solution here might be to re-look at the claimant details header though, as it's the pairing with that which is causing issue with both styles of these navs.

UPDATE: logged the header suggestion in the identity header issues

[abbott567]

I definitely prefer that. Because the links can then still be $link-colour. I have reservations about the blue claimant details header because all of the links are white and all of the text is white etc. It would be worth putting these two examples into the claimant header too and see if we can get some people to put them in for some rounds of research. Great work.

[abbott567]

Moved to experimental now we have examples for both global and secondary nav: https://dwp-design-examples.herokuapp.com/example/navigation-global https://dwp-design-examples.herokuapp.com/example/navigation-secondary

[alexnewmannn]

Just something minor for the navigation-global component. When hovering over a focused/clicked item the text turns black, which is a pretty low contrast. It might be worth changing to white to up the contrast. chromes showing that it isnt hitting AA rating due to the low contrast as well.

[abbott567]

Good spot @alexnewmannn that's clearly a bug. Do you want to PR? If not I can go ahead and update it. Cheers. C

[alexnewmannn]

@abbott567 https://github.com/dwp/design-examples/pull/23 👍

[abbott567]

Awesome. Merged. Cheers dude!

[HelenOsg]

New ticket created