https://blog-digitalparliament.scot/site-navigation-on-beta

Site Navigation on Beta

Determining our new navigation structure

At the end of last year, we asked you to help us shape the content structure for the Beta website to ensure information across the site is as easy to find as it can be:

  • staff from across the Parliament came together to create a draft navigation structure
  • we then asked users of our site to carry out an online ‘tree test’ using this draft navigation. Respondents completed a number of tasks to find different pieces of information across the site
  • over a 2-week period, we had over 200 responses from both professional and non-professional users
  • overall, the draft navigation worked well. There were only a handful of tasks where respondents were unclear as to where to find the information on the site. We made note of these and tested further out with this study

After the tree test, we had a better idea of where our users expected to find certain information. So, we moved on to deciding how best to present this visually.

Designing the navigation

The first version of the Beta site used a simple, mobile style navigation called a ‘burger menu’. This is an icon with 3 bars that, when interacted with, displays a pop-up menu with options to explore the site further. At that time, the menu only had to deal with four links, far, far less than what our full site will need! So, we decided to explore different options and came up with 2 approaches:

  1. Using content blocks on the home page to enable users to navigate to sections of information they were looking for.


  2. Option 1 for site navigation design – using on page content blocks to let users navigate to different sections of the site.

  3. A more conventional approach. On larger screens (desktop and iPad), a navigation bar listing each of the main sections of the website. Each of which triggers a further menu (called a mega menu), showing the pages contained within that section.


  4. Option 2 for site navigation design – using a mega menu to allow users to jump between sections of the site of interest.

Getting feedback from our users

We asked our users for feedback on both of these options, with a round of usability testing. This is where we ask participants to complete tasks on a prototype of our design to see if they can find the information they are looking for and if there are any barriers to use. We tested on both desktop and mobile devices, showing all participants the different options in varying order.

When it came to navigating the site, our participants had different opinions on what worked best for them. Some found the mega menu easier to use, utilising the links to ‘quickly jump to’ the section they were looking for. Others preferred to move through the journey step by step using the on page content blocks.

When unsure where to find something, participants found the explanatory text on the content block helpful telling us ‘the descriptions give me a clue’. While others preferred to see each of these laid out in the mega menu to help inform their decision and ‘not to have to scroll the page’.

Coming up with a solution

As a team, we felt that there were advantages to both options. The first, offered users a clear idea of what information was included within each section. The second, allowed users to quickly navigate from the home page several layers down and then use the navigation to jump straight into another section of the site.

With that in mind, we sought to combine the best aspects of both! Adding the useful descriptions of what each section of the site are into the mega menus. After some final validation testing, this is what we decided to go with and it’s now live on Beta! It will slowly expand over time, as we add more content to the site, more links will appear.

We hope it will make it quicker and easier for you to find the pages you’re looking for. If you have any questions about the navigation or want to take part in any of our up and coming research sessions, please get in contact via webproject@parliament.scot.