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.
I am trying to understand the side nav experience on mobile. With the caveat that I am new to the design system, my understanding from what is written under Guidance is that it is supposed to be incorporated into the hamburger menu. But what I think I see happening is that it appears at the top of the screen, full-width, beneath the breadcrumbs, creating an experience that feels like interacting with an accordion. Hoping someone can point me in the direction of a resource I can use to improve my understanding. Thanks in advance!
Unfortunately there is currently no support for the side navigation on smaller screens. The accordion like dropdown underneath the breadcrumbs may have been used as a custom implementation of the component used on the nsw.gov.au website.
Navigation to other pages on smaller screens is currently only accessible via the hamburger menu in the top left of the page, for example digital.nsw.gov.au.
Thank you for this response. Just to clarify, what does ‘no support’ for it mean?
I should have provided some examples, just to ensure it is the side navigation component that I am looking at on smaller screens. It is quite widespread:
I should have explained it better. By ‘No support’ as in for the design system side navigation component there is only a large screen version. For smaller screens, we advise users to use the hamburger menu to navigate instead.
The examples you have provided are for a single website instance (the main NSW Government website), which even though it uses the design system component at a base level, it uses its own implementation which features a collapsable menu where you can explore other sections without leaving the page.
We are currently assessing the need to improve the side navigation component so that we can make better informed decisions and determine what to include first. It would be helpful to know what you find confusing.
Any feedback would be much appreciated. Thank you.
Hi @Cath , we are exploring some options around the collapsable side nav. At this stage, we can’t provide an estimated time of when it’s available through NSW DDS. We will keep you updated with any new information as it becomes available.
