Simple navigation: making it easy to reach lots of content

Or: How to present 9 links in an easy to follow way.

If you follow me on Twitter or read this blog you’ll know that I’m a big fan of Information Architects Japan. I don’t think there’s any other agency that combines usability, simplicity, brand and aesthetics so well: their blog and Twitter streams are a constant source of creative, original ideas. Unsurprisingly, they get a lot of high profile work and media coverage.

They recently redesigned their website. It’s a brilliant effort, retaining the large, Georgia font face (it was once helvetica, believe it or not), simple typography, black/red and white colour scheme and uncluttered layout that has become their brand. They’ve also simplified the content presentation, making it even easier to read and navigate. They use some interesting copy to market themselves. There are many things to admire.

How to make nine pages easy to find

iA have taken a textual approach to marketing themselves: rather than simply presenting a gallery of their work, they’ve written several mid–length pieces on subjects such as networking, profile and method. It’s an almost unfashionable approach, but one that reflects the fact that they don’t just produce nice–looking, gallery–friendly websites.

Designers would normally present this information in one of the following ways:

  • Display all the pages in horizontal or vertical menu
  • Keep the top level navigation as simple as possible and allow the user to reach the detailed stuff by following a path that leads to more detailed information as s/he clicks through the site. The most obvious way to do this would be through creating a top level About page and linking to the longer texts from this page.
  • Create a simple top level menu that pops out further options when the user hovers over About
  • Place some “teaser” content on the front page (e.g. a customer quote) that links through to some more detailed information

Here’s what iA have done:

All 9 navigation options are available on every page of the iA site

All 9 navigation options are available on every page of the iA site

So instead of minimising the menu options eveything is placed within reach of every page. Normally, this would result in an unwieldy, hard–to–scan list of links. What iA have done is incredibly simple: they’ve categorised the top level menu and presented the links by category. No pop out menus, fancy gradients or text shadows; just plain, well organised text that’s easy to read and a site that’s easy to navigate.

Genius: the interface as brand.