Council Toolkit and non-universal navigation

, . Filed under Web.

Stumbled on Aberdeenshire Libraries website earlier this week. It’s built on Council Toolkit, an HTML, CSS and javascript framework that’ll help you build a council (or similar) website quickly.

It’s not a million miles from gov uk. You get a free set of solidly designed templates (home page, guide, article, signpost etc.) which you can slot pretty easily into your CMS of choice.

One of the things I like about Council Toolkit is the way it handles navigation. On council (and library) websites we often publish lots of sections. Instead of implementing an unwieldy universal navigation, the home page and category templates put navigation in the main content area, while leaving a few universal actions in the header area – a good idea:

Screenshot of the Aberdeenshire Libraries home page navigation area

The Aberdeenshire Libraries home page simply links to its website sections.

There’s something old fashioned about this approach – the home page is essentially an index, but I think it has 4 advantages over a traditional navbar:

  • It lightens the user’s cognitive load. As there’s only one area to navigate there’s no need to choose between a list of links at the top of the page and links to deeper content in the main page area. You’re also saving your users working out what happens when they hover over a link, especially if you’ve added dropdown menus (and they won’t accidentally open pop open when the user moves the cursor across the page).
  • Similarly, it’s easy to learn. You click on a link which leads to a page with links styled in exactly the same way. UI wise, there’s nothing to work out, and more space means more text to get labels right. A navbar with dropdown menus could result in less clicks, but the number of clicks don’t matter when the route to the goal is clearer.
A screenshot of a sub page

A deeper page within the website. It uses the category template, which uses the same styles as the home page.

  • It allows space for links to lots of subsections and supplementary text. The Aberdeenshire Council home page links to 19 sections. While this could be implemented with a vertical navigation menu, you have a lot more space in the main content area.
  • It’s more responsive. It’s easy to stack the Aberdeenshire website panels when you shrink the screen. But more importantly, the navigation area is always visible; you won’t be hiding it behind a hamburger icon. And visible navigation is always better than hidden navigation.

We’re currently reviewing the Suffolk Libraries website as it’s a grown a lot since I rebuilt it in 2013. I’ll definitely be taking the Council Toolkit approach to navigation, although I won’t be using the toolkit itself – as for why, that’s for a different post.