UNIVERSITY WEBSITE PROJECT

A new approach to navigation (part two)

Posted by Andrew Twist, Digital Content Producer, Corporate Communications


We're testing a form of horizontal navigation to be used on individual sub sections of the new website.

Back in January we wrote about a new approach to navigation as part of the University Website Project, and since then we’ve been doing more development work and user testing to further refine our plans.

Our aim is for the navigation to give users a more holistic view of the information available and journeys they can take on the site, so to avoid the need for them to tunnel deep into the website structure via multiple clicks or taps.

We've recently been focusing on the website's local navigation system. These are the menus that allow users navigate between pages within a specific section or area.

Current local navigation menu

On the current University website we use a left-hand local navigation system that forces users to make decisions and take actions (i.e. clicks) in order to drill down into different subsections.

Current local navigation as left-hand menu

New horizontal navigation menu

Our new approach will move the local navigation system to a horizontal menu bar that sits below the section/department title.

This allows us to use a drop down megamenu - similar to the global navigation - which makes it easier to browse and quickly choose from all the options available without the need to make multiple clicks and commitment to moving between pages.

Horizontal menu open and closed

On smaller screens

Currently on mobile and small tablet screens the global and local navigation menus appear together.

The new local navigation for smaller screens is recreated on its own as a full screen off-canvas megamenu. This is a menu which is positioned off-screen until someone presses the button to show it. The idea is that it provides a better user experience on small screens, with big touch targets that make it simple to understand and use.

On smaller screens, the new global navigation appears as words and stays separate to the local navigation Menu button.

Current local navigation on mobile

Work-in-progress of new off-canvas local navigation on mobile

Testing and feedback

We're currently testing our new navigation system with users and also ensuring that it works well in conjunction with the global menu and doesn't cause confusion. We'll report back on this in the next update.

We feel that cracking the global and local navigation for the new website is crucial to delivering a better experience for users and we are continuing to reflect on and refine the design and functionality of our approach as we add more pages and journeys to the site.

Give us your feedback