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
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.
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.
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.
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.
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.
