When it comes to website navigation, I'm a traditionalist. I don't think it's something that should be messed around with, unless there's a very good reason for doing so.
The fundamentals of web navigation haven't changed at all. Obvious labels, clear scent trails, a lack of clutter, and good usability are all essential. Navigation should be obvious, prominent, persistent, and not obfuscated in any way. And as with most things, fancy design should be stomped on if the user experience is compromised.
However, I love innovation, experimentation and evolution, and it is perhaps an opportune time to rethink our ideas about web navigation, given the rise of smartphones and tablets, as well as better tools, such as HTML5, CSS3 and jQuery.
In the past year or so I've noticed that more and more websites that have unusual forms of navigation, and I thought I'd collect a bunch of examples to show you the art of the possible.
It's worth pointing out that I don't think all of these work brilliantly. I'm including examples that are different and distinct, or that are very much in keeping with the rest of the web experience, whether good or bad. You can decide for yourself.
Some of these might be filed under 'trying too hard'. As with everything, I think it's about finding the right fit for your site, your content, and your audience.
So then, let's prepare to navigate! Click on the screenshots to visit the websites, so you can see how they work.LBVD
I love big fonts and bold typography, so this is a winner. Those little images are reminiscent of children's books from way back when. The feels!
Blink
More large fonts, which reduce down in size once you progress into the site. Colour coding FTW.
Nimbletank
This has been designed for mobile and tablet devices, and takes a colourful card flipping approach to navigation.
Big Apple Hot Dogs
This simple map-based approach makes tons of sense, considering the business model. You can explore more about the company by clicking on the red circle and scrolling left and right.
Toybox
This New Zealand agency knows when your cursor is on the right side of the screen. Try it...
Etch
I've referenced Etch before: it is a pretty site that reorders the content on its page when you press one of the navigation icons. Lovely.
ELI
Pull the navigation bars down the page to reveal portfolio content. Additional fixed navigation lives at the bottom of the page.
Minimal Monkey
Here's another site I've flagged up before, for its use of colour. Click on a headline (or anywhere in one of the coloured bars) to view each page. The 'about' link also expands the page.
Coloured Lines
This one works in a similar way, but condenses the navigation on the right over to the left of the page after you start to explore the site. Pretty.
65 Media
Yet more coloured bars, and a glorious effect when you scroll down the page, which makes me yearn for a game of Super Breakout on the Atari 2600. Unfortunately the back button doesn't work, which is perhaps the worst navigational sin of all. Modern tech can solve this problem.
Silktricky
Less website, and more web page, which repositions and resizes the boxes you explore the content. In cases like this perhaps fixed navigation would be overkill.
FFF
"Spin spin spin the wheel of justice..."
FatFace
Simple, meaningful and good-looking left hand navigation, as well as persistent feature filtering. We are big fans of this approach among retailers. It's not especially out there, but it's very smart.
Yodabaz
If you want to see out of focus text and navigation that shifts about as you move the cursor then look no further...
Sagmeister & Walsh
A bird's eye view of the company office, replete with clickable 'buttons'. As creative as it is straightforward, and perfect for the brand, and for a relatively small website. I love this one.
Grip Limited
Typography-driven. A monochromatic design, give or take. Scrollable columns that can be minimised. A 'GO BIG' button at the top right (top marks for being designing for bigger screens, and not just smaller ones!).
H&M's 'Stories'
The fashion retailer's sub-brand has a fairly straightforward navigation, but dedicates its homepage to discovery. Click on one of the pictures and a cluster of related items will appear as an overlay on the same page.
Where Are You?
Here's one I'm not at all convinced about. You'll need to tilt your head to one side and drag the homepage around to unearth the content you're looking for, which is represented as a series of miniature wireframes of each page. Navigate to the pages and there is a sketchy fade effect on the text.
If you are likely to look at your web navigation design this year then here are a some more pointers:
First off, check out David Moth's post on 11 ways to improve the navigation on your mobile site.
Graham Charlton suggests 10 ways to improve your e-commerce navigation.
There's also a section on navigation in our e-commerce best practice guide.
What do you think? Have you seen any other examples of unusual / innovative / amazing website navigation? Do you think there is scope to push the boundaries of navigation design, or should we stick to tried and tested techniques? Do leave a comment below...