Collab space: Side navigation

This is an open space for collaborating on the side navigation component.

Background

We’ve had some valuable user testing feedback shared with us regarding the side navigation and want to call out to other teams to share their feedback and suggestions for how we can improve the component.

Feedback received included:

  • As subsections grew users found the indent hard to follow
  • As subsections grew the red highlight lost it’s value and no longer aided with hierarchy
  • Users found the UI cluttered and hard to group content

UI Design

We’ve been spinning up some alternative designs to see how we can improve the component and help make the different levels clearer to users.

The main changes we’ve looked at are:

  • Adding the highlight bar only to the active page
  • Increasing indents per level
  • Adding background colour for level 2 down
  • Adding a horizontal line to help group levels 3 and 4

These are shown in greater detail in the below:

We’d love to hear your feedback on the alternative design :slight_smile: Also if you have any other findings from user testing or research that can help us make navigation easier for users we’d love to hear it.

Credits

These awesome collaborators have contributed insights, knowledge, and time to the information above:
@Ashkan.deravi

1 Like

Hi @amy.howard,

This is looking great. I think it definitely makes the different levels clearer. Was there a consideration to make the Level 1 parent have an off-white background colour also if a child level 2 was current and active instead of just ‘Body- strong’? Wondering if this may build a stronger connection between the parent and child but perhaps you have tested this already :slight_smile:

Cheers,
Garry

1 Like

Hi @garryctlau, thanks! That was something we had been looking at. I’ve attached a mock up of what they would look like in comparison (with the added horizontal line that the lower levels follow). The main thinking behind not colouring level 1 was to avoid all items on the same background, to create more visual separation as the levels get deeper. Therefore the background would indicate the items in an opened section, not trying to group them all. The horizontal line then does that for the lower levels going forward.

Keen to hear your thoughts on that though. We’re in the very early stages so these haven’t been tested yet. We’re keen to get feedback from teams to help shape the designs. Also keen to hear from teams that have had user feedback or had to make adaptions based on user needs.

Thanks,
Amy

1 Like

Hi @amy.howard,
They look great; thank you for sharing them with us.

Here are my recommendations based on my observations during the usability test.

2 Likes

Thanks @Ashkan.deravi! Those are great recommendations, thanks for sharing. It looks good in the instance you’ve captured above, just had a few questions to clarify how it would translate to different states. Would be great to see:

  • How the highlight bar would sit alongside a level 1 selected item
  • How can we differentiate between an open parent with children and a selected parent with children

Hi Amy,
Just wondering if there is any progress on this?
We feel the identification of parent item and the child indentation is important — will this be included in the next iteration of the Design System, and if yes, when it is scheduled for release?
Regards,
Carole

Hi @Carole, unfortunately we haven’t been able to progress much further on the side navigation. However we do have some latest designs that we have been working on with @garryctlau from OneCX that we’d love to share and get more feedback on. We’d be keen to hear your thoughts and any if you’ve had any feedback from testing that could help influence the UX/UI direction.