29 October 2004
Users prowl the Internet like lions on the savannah, hunting for information morsels, assessing prey for suitability before casting it aside. That's why we have navigation – it helps those predators navigate their terrain and find what they're looking for.
Of course, a site that has standardised navigation is a good thing. Once users hit a site, they want to be able to quickly learn to get around and only do it once, otherwise they're wasting their time. OK. Standardisation = good. But sometimes change is good too.
In this age of broadband, cached CSS files and lean code, web pages start to flash by as people devour them; their browsing instincts honed to a fine edge to seek out titles, anchors and keywords. Therefore, it's more important than ever that you let them know where they are, and that they're progressing in their journey. Obviously navigation, menu items and breadcrumb trails are all designed to do this logically and methodically, but we are essentially visual creatures, and there's much to be said for the "feel" that a page exudes via its generally perceived layout, imagery and colour.
It's all well and good to differentiate pages by saying that "You are in section 1" and "You are in section 2", but there's no immediate sense of movement between the two pages, no sense of progression. While it is a very minimal, some might say boring web site, Wasserwerke Zwickau does a superb job of presenting many pages of textual information. If it weren't for the range of header images used, you could feel that you were moving without travelling; that you hadn't switched pages at all.
On a smaller scale, Lousco Labradors also beneftis from page differentiation. Try switching from "Our Dogs" to "Puppies". The header does a wonderful job of conveying the change between the two sections (particularly given that they forgot to highlight the navigation choice). By contrast, on the same site the change between "Home", "About Us" and "Contact" makes you feel that something is missing.
Often, the lack of differentiation is caused by budgetary constraints – when you don't have the time to sculpt points of difference, or the money to buy them (e.g. photography) – but CSS is the ideal platform for those small touches that can help create depth and movement within your web site, such as the shifting palette between sections on New Ezra's site. (Although it doesn't have to be that dramatic.)
As with all design, true quality can only be achieved by attention to detail. By taking the time to add those individualistic touches, your sites can end up more browsable and make your users' experiences more enjoyable.
Follow me on Twitter
To hear smaller but more regular stuff from me, follow @themaninblue.
- Resolution dependent layout update
- footerStickAlt: A more robust method of positioning a footer
- widgEditor: A simple, standards-compliant WYSIWYG HTML editor
- Accessible, stylish form layout