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 -
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.
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.
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:
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.
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.
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.
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!
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.
perhaps the solid underline could be a bit more prominent?
In response to your feedback and after conducting an additional usability evaluation, we have implemented several minor adjustments to the static version (non-accordion). These changes include:
- Enhancing color accessibility for the active item.
- Enhancing legibility by improving clarity between nested levels.
- Improved alignment of the brand and maintaining consistency with other navigation components.
We are in the process of evaluating this iteration with our users. Meanwhile, as always, we would greatly appreciate your feedback.
Definitely an improvement on what we had! I like the reduction in line height and less use of red.
@andrei.vidaicu has this been released for use yet?
Also, is any work being done on side navigation for mobile?
Hi everyone, we recently conducted usability testing with 5 users which provided some valuable insights.
Link to the prototype that we tested -
The key findings from the usability test were:
- The relationship between categories and sub-categories can be challenging, particularly when sub-categories are positioned below the visible portion of the page (below the fold).
- The items within Level 2 showed inconsistency compared to the items in other levels.
- Upon initial observation, the hierarchy between parent categories is not as straight forward.
Hi everyone! We’re excited to share the final design iteration of the revised side navigation component with you all.
The primary aspects that were tackled -
- Applied the highlight only to the active item, as when subsections grew the highlight lost it’s value and no longer aided with hierarchy.
- Added the vertical lines as a visual cue to help group related items together and show parent-child relationships.
- Fixed the colour accessibility issue for the current active item.
These are shown in greater detail in the below:
Interactive prototype -
It is anticipated that it will be launched alongside the upcoming major version of the Design System.
Looks better @andrei.vidaicu!
When are you anticipating the next major DDS version update?
I apologize for the delayed response, @Cath. Currently, we haven’t scheduled a date for the next major release, but we will make sure to keep you updated.
We also have planned the collapse and expanded functionality - keep an eye out for updates.