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
We’d love to hear your feedback on the alternative design 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
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
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 @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.
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.
