How users navigate projects
In a free school project, users can navigate projects in 2 ways:
- A side navigation menu, which has anchor links to take users down the 'about the project' page. Some of these sections are read-only, whereas others are summary cards that take users to pages where they can edit information.
- A horizonal navigation menu, which sends users to other pages in the project. This includes the task list, where project leads can edit information.
User research
We observed in user research that some regional project leads expected to be able to edit information when they clicked on the read-only anchor links in the side navigation menu.
Some project leads also struggled to navigate to the task list from the 'about the project' page.
These observations prompted us to iterate our project navigation design.
Creating some designs
We looked at other Regional Services Division products that project leads use.
We believed the navigation design in Find information about academies and trusts would suit our needs. Their design was based on the Ministry of Justice side navigation component and it had tested well with users.
Find information about academies and trust's navigation design:
We wanted to test a few versions with project leads to see which one worked best:
- Keep the read-only anchor links in the side navigation menu. Move the summary card sections into the horizonal navigation.
- Remove the side menu. Move the summary card sections into the horizonal navigation.
- Add the horizonal menu items to the 'side nav'. Remove the horizontal menu. Remove read-only anchor links from the side nav.
Navigation version 1:
Navigation version 2:
Navigation version 3:
Testing designs
We did usability testing sessions to see how easily users could access information and complete tasks using the 3 versions.
We also asked users which variation they preferred.
Here's how each version tested:
- Users thought they could edit information using the read-only anchor links in the side navigation.
- After some initial hesitation, users could find their way to the task list and edit information. There was some feedback that the horizontal bar had a lot of links in it.
- After some initial hesitation, users could find their way to the task list to edit information. Users preferred the side menu to the horizontal menu.
User quotes:
I find options at side more useful than at the top
A list in the side looks more like the order I should do them in. That's more logical
[Worked through the sidebar sections] that's very clear, brilliant
We chose to go with version 3 because:
- users seemed to prefer this layout to the horizontal menu
- a side list of links was 'neater' than the overlapping horizontal menu
Continuous improvement
We have updated all live projects with the version 3 design.
Our division's Continuous Improvement Team will get notified about any user feedback, and will consider whether to make any iterations.