Collab space: Side navigation (v2)

[andrei.vidaicu]

This is an open space for collaborating a proposed design iteration for the side navigation (v2) component.

This topic continues the discussion on the side navigation component topic -
https://community.digital.nsw.gov.au/t/collab-space-side-navigation/1063

We have made some changes based on the great feedback we have received as well as some recommendations from a recent design review.

To join in the conversation please add a comment below.

Overview

Side navigation supports four levels of nesting, displaying a user’s current position in the content hierarchy - where they can view related content and navigate to different sections.

On mobile and smaller viewports, the side navigation is displayed through the main site navigation, otherwise called the hamburger menu.

UI Design

The main changes in this iteration include:

• increasing the visibility of the current active item
• increasing the visibility of the parent (category)/child (sub-category) item relationship
• increasing the visibility to where nested sections start and end while maintaining consistency between each of the levels

These are shown in greater detail below:

The four levels of hierarchy with the active items selected:

Next steps

To further evaluate that the proposed solution meets the needs of our users, we will be testing the prototype. Watch this space for the recommendations based on the test analysis.

In the meantime, your feedback is greatly appreciated and will help identify any additional areas of improvement. Please let us know what you like about it, what you would change or any other suggestions you may have.

[Cath]

The increased visibility of the hierarchy above looks better than what we currently have.

A suggestion would be to also have the ability to collapse sections in the side nav.

A website with lots of sub level pages really drags the side nav down the page, sometimes making the side nav longer than the amount of content on a page leaving lots of white space underneath before it reaches the footer.

[andrei.vidaicu]

Thank you @Cath. While this iteration solely focuses on improving the usability of the current side navigation, we will be adding the accordion type (expand/collapse) as an additional version in a future release. Watch this space on updates regarding this feature.

[Suzanne]

The ambiguous nesting was coming up for us in usability, so love the improvement @andrei.vidaicu.

Also a friendly reminder to make sure that when these are implemented they will read well from a screen reader. Thank you!

[bradleychosmith]

I really like this idea @Cath . I love this new iteration on the UI design @andrei.vidaicu . The only thing I personally still struggled with was the visual relationship between the 3 main parents. At a glance whilst it is now clear which section the user is in, its not so clear which is its parent section. I contemplated the parent being also bold…but that kinda goes backwards in terms of what you want to achieve. So I think the introduction of another visual mark, such as a chevron, would help user identify at a glance that that its a parent. Lovely work.

[Cath]

perhaps the solid underline could be a bit more prominent?