How GOV.UK handles navigation

The first principle in the list published by the Government Digital Service (GDS) is "Start with user needs".

Start with user needs

Saying that users should come first isn't new, but the website of the UK government, GOV.UK, shows that GDS has thought about user needs more than the creators of a similar website,

Here's a screenshot of GOV.UK. Each section has been marked to show what its purpose is:

Content on the GOV.UK homepage

Everything in black is focused on navigation: Getting people where they need to be, no matter what they came to the website to do. On a large screen like a desktop, the only thing you see above the fold is the search bar, a list of popular destinations, and the main navigation. This kind of focus on navigation is rare.

Unlike most websites, the primary navigation isn't a horizontal bar at the top. Instead, it uses as much space as it needs to. As of October 2015, GOV.UK has 180,000 pages. They're working with a lot more content than most websites, and handling a lot more user needs, so they've got a navigation that's clear, explains itself well, and requires less effort from the people visiting the site.

There's always a risk that so much information could be hard to take in, but by using a very practical visual design and layout, GOV.UK presents a lot to the user without making them dizzy.

The suggestions box in the top right is quite good. Instead of letting the search bar fill that space, visitors are being asked a question as soon as they arrive: "Are you here for one of these popular things?". If the government knows that 20% of visitors are looking at one of three pages, for example, they can put direct links in the top right, and save a lot of people even more time.

There's a second list of suggestions further down the page, and five of the ten items are repeated from the first list of suggestions. There might be a reason for repeating these links - maybe some visitors immediately scroll past the suggested content at the top when the page loads?

The design also works well on small screens, like phones. The three column list becomes a one column list, and because there's no other content to get in the way, it still gets your undivided attention:

Navigation on the GOV.UK mobile site

Compare this to the small screen layout of the USA government website,

The mobile site

The primary navigation is forced into a "Menu" button in the top right. You need to tap on "Menu" and then "More Services" before you can see a link to the Education section. On GOV.UK, you can see it on the front page. This helps people feel that they've come to the right website, more quickly.

One of the most obvious differences between the two sites is that the website has many more images. Most of these images don't help people to find the right section, because they're artistic. They don't say much about the sections they're attached to.

One of the reasons that images are useful is that they grab your attention, but you need to be careful not to distract the user from what they need to do.

It not surprising that GOV.UK manages to use attention-grabbing images the right way. This section is further down the page:

There are only three images on the GOV.UK home page

All three of these items are reminders - important things that visitors need to be aware of, even if they didn't come to the site for that reason. These are the only images used on the GOV.UK homepage, and they're specifically used to say, "This thing you might not have come here for is important - we'd like you to know it".

Having these images below the fold means they won't distract users from the main navigation.

Note: Since writing this, the website has changed. It has a large and clear three column navigation, and doesn't use any distracting images on the front page.