Prototyping the main navigation - version 4
Updates Prototyping Accessibility
Feedback on navigation version 3
In January, we shared the third version of the navigation prototype we have been working on.
The feedback from the W3C team for this version, which we agreed with, was:
- There are too many items in the menu. It would be easier for people to read and find content if we can keep to two levels of navigation rather than three.
- Landing pages are key in directing site visitors towards the information they are interested in, rather than trying to list all the pages in the navigation. So, we need to make the key landing pages more obvious and easier to reach. Especially as people reported confusion on seeing the name of each section repeated in the top-level navigation and on the expanded menu (not realising they were landing pages).
Finalising the site map to inform our next steps
Bearing the feedback in-mind, we paused on iterating the navigation until the W3C team had completed their work on finalising the site map. Our intention was to review all the pages together and then decide which ones would sit in the navigation. We were ready to do this in April and agreed to the following principles when deciding what the list of pages should be:
- Keep to two levels of navigation
- Limit navigation items to aid readability of menu. Include landing pages that help people navigate through the site; only include content pages with very important content. This could mean some level-two pages excluded from the main navigation as they are deemed less important, but will still be findable via landing pages and secondary navigation. In addition, some important third-level pages, such as the business ecosystem pages, will be in the navigation menu.
- Ideally support two-columns so for sections such as ‘Get Involved’, with two main groups of content, there is a visual separation of links.
After the meeting we proposed an iterated layout which included space for a sentence introducing each section. Before we went into build, we asked Coralie to write example copy for each section, to make sure this was feasible. This was a good exercise as it also gave a chance to sense-check we had the right pages for the navigation in each section.
Navigation version 4
The Version 4 (V4) prototype of the main site navigation is now available for review at https://w3c-dev.studio24.dev/navigation-v4/index.html (in fact, it can be seen on any of the static templates on our Prototype Index)
What we changed in version 4
- There are two levels of navigation
- The menu is now the full width of the web page
- Design is adjusted to make it more obvious the section title is a landing page link
- We have added a short description for each section to give people more insight into what each section contains. This will be hidden on mobile screens.
- We have added a text link under the short description paragraph as an alternative way for people to get to the main section landing page. This second copy of the link will be hidden from screen reader and keyboard users to avoid the duplication and will also be hidden on mobile screens.