11 January 2018

A new approach to navigation on our website

We're testing a different type of navigation on our prototype website which we hope will help users find the information they need quickly and easily.

Group of students card sorting a possible navigation structure

A key principle of the University Website Project is to design a website that makes it easy for users to complete key tasks and to efficiently find the information they are looking for.

The foundations for this are based on having a logical navigation system and a well-designed menu structure.

In order to start designing the navigation for our alpha website we wanted to consider feedback on and shortcomings of the menu execution on the existing University website.

Assessing our current navigation system

A website often has two sets of menus: the global navigation and the local navigation.

Global navigation is a consistent set of links or buttons that are applied to every page of a website, usually reflecting the top-level sections of the website. Local navigation is a menu that helps users navigate between pages within a specific section of the website.

The current University of Sheffield website features both global and local navigations systems within the left hand menu on each page. When users visit the homepage of the site they see the global menu in this location, however as they navigate deeper into the site the global menu is hidden behind a Main menu button and the local navigation appears below.

As part of the project we want to create a navigation system that more clearly distinguishes between global and local navigation menus. We also want to avoid hiding the global navigation so that it does a better job of being a clear, consistent point of navigation for users no matter where they are on the site.

This approach led us to moving the global navigation to the header of the site design in such a way that it will be present and obvious on every page - and also one of the first things that users will see when they arrive on the site.

Moving away from tunnels and tracks

The other shortcoming of our existing website menu system is that it requires users to consistently commit to clicking menu items in order to explore the site. The effect of this is that users end up 'tunneling' into the site and potentially end up at dead ends or taking the wrong route through the page structure for whatever task it is they are trying to complete.

We want the new global menu system to provide a better user experience (UX) by giving website visitors the opportunity to see their navigation options in a much more holistic way.

In order to achieve this we're proposing to use a mega menu system for each item in the top-level global navigation. The mega menu approach triggers a dropdown panel when users hover over or tap on a top-level menu label. This dropdown contains lists of links that have been categorised into specific sections, loosely relating to – but not 100% tied to – the website’s page structure.

This gives users a much clearer overarching view of where information lives within the site and gives them all the information they need in order to make an informed and logical next step in terms of what they tap or click on.

From top tasks to menu items

The first development work of our new global mega menu system is based on the top task analysis we carried out in relation to the Study section of the new site.

Our work so far on the project has focused on identifying the top tasks that a prospective student may visit our website in order to complete. After compiling an initial longlist, we ran survey sessions with current undergraduate students and established their priority order for tasks when researching universities.

We used our top tasks as the basis for creating the sections and links in the first iteration of our mega menu. As part of this we ran a number of focus groups with current students and asked them to perform a card sorting exercise on our top tasks.

For the first testing sessions we simply gave them 90 of our top tasks and asked them to categorise them into groups, and to come up for a name for each category. We worked with a number of groups across testing sessions and ended up with a series of different permutations in terms of how the cards could be sorted.

However it was clear from this exercise that a number of trends emerged and we were able to start with these initial mega menu categories within the Study section:

  • Courses
  • Student life
  • Accommodation
  • Fees and funding
  • Apply
  • International students
  • Visit
  • About the University

In order to test the new categories we conducted a further focus group with students and asked them to sort 90 of our top tasks into these heading categories. This allowed us to check the headings made sense and that students didn't have wildly different views about where to locate information in the menu structure.

Testing the mega menu on the alpha website

Demonstration of a website mega menu

This additional testing gave us the confidence to deploy the first version of our mega menu on the alpha website. From here we could move away from top task lists and card sorting exercises and to testing on an actual website with users.

We developed three different user testing scenarios each containing five top tasks. These scenarios were presented to current students as part of user testing sessions, during which we asked them to use the mega menu to navigate to the page that would answer the question posed by each task.

We recorded these testing sessions and asked the students to verbally articulate their decision-making when using the mega menu to give us a clear steer on how people think when faced with our proposed Study menu.

By doing this process we want to create a navigation system that helps users efficiently and easily find whatever it is they are looking for and to be able to rely on the menu system as a fixed centre of orientation for the entire site.

We'll continue to test and refine the menu throughout our project and in time will conduct this same process for the additional top-level menu sections.

Posted by Andrew Twist, Digital Content Producer, Corporate Communications

Get in touch

If you have CMS questions or are stuck then get in touch and we'll do our best to help.