/Culture/ Master site navigation
24/11/2008 | Filed under Discover > Culture
From humble hypertext links to site-wide search boxes to visually stunning, interactive animated systems, online navigation has never been more varied. Craig Grannell investigates the best and worst out there and quizzes industry voices about best practice
For all its ability to combine and cross-pollinate different kinds of media, it’s the humble hypertext link that’s been the true revolution of the internet. Instead of thumbing through indexes and flipping pages, the web enables people to enjoy non-linear navigation, exploring information in context, rather than in the manner defined by an editor.
Over the years, conventions have taken hold. We talk of ‘navigation bars’ and ‘search boxes’, designed to access content, with the former often representing a site’s basic structure. We consider ‘inline links’: linked body copy or imagery that enables relevant content to be accessed in context. And then there’s ‘interactive navigation’, which generally refers to animated or reactive content, despite all navigation technically being interactive.
Although some forms of navigation have become ubiquitous and much-loved – not least site-wide searches that potentially enable you to access what you want with an immediacy only dreamed of two decades ago – some forms of navigation remain divisive and controversial, as we shall see.
You are here
In his book Designing Web Usability, Jakob Nielsen argues that – regardless of methodology, technology and design – online navigation must answer three basic questions: ‘Where am I?’, ‘Where have I been?’ and ‘Where can I go?’. Although some of his ideas appear outdated (such as retaining default link colours, something few contemporary designers concur with), his basic points are fundamental to good navigation design.
Users need to know where they currently are, especially if they’ve used a search engine and happened upon a page deep inside a site. A company’s logo will only get them so far, and Nielsen’s suggestion of showing “parts of the site structure and highlighting where the current page is located” is eminently sensible. With designers increasingly making use of CSS for styling list-based navigation, it’s child’s play to use contextual selectors to flag the current section, and yet many sites today only offer totally static and unchanging navigation. (Note that we’re not advocating inconsistency; instead, we’re suggesting augmenting consistent navigation by using a device to aid the user in pinpointing their current location.)
The other questions are also easily answered – at least, in theory. Assuming the history path hasn’t been broken by forcing links to open in new windows, users can access their browser’s back button to find where they’ve been in a site; for large sites, breadcrumb navigation (showing a hierarchical path) can help, particularly if a linear journey has been taken to the current location. As for where to go next, that’s down to available navigation devices, be they search boxes, navigation bars or inline links. Generally, this is the question that causes the most headaches when it comes to online navigation design.
As with any designed component, the foundation is key. Poor planning leads to poor design and yet many designers leap straight to Photoshop or Fireworks before thinking through how a site’s navigation will work and about who will use the site and how they’re likely to behave. “Before even thinking about navigation, you need to define the site’s structure – the groups you use to categorise the content,” recommends Frances Forman of usability and accessibility specialists Nomensa. She says navigation ends up representing this structure, often as the main navigation, but adds that the final structure may not necessarily end up as you first imagined: “We always try to create a structure based on how end-users think about the content, using card sorting or other user research. This helps prevent the classic mistake of creating a site based on organisational structure.” (Nomensa’s methods often involve presenting a mock-up of the site, placing items on cards, and asking participants to say where they’d look for each item.)
Along with the desires of users, Lateral’s Simon Crab reminds us that it’s also important to understand the needs of clients. “What’s the site itself aiming to do?” he asks. “Is it an experiential brand marketing site or a content-based information site? How is the content to be segmented to achieve a logical and clear structure? All of these issues influence how a site is ordered and consequently how the navigation is planned.”
When a plan comes together
Once you’re confident you understand the thoughts of users and your client regarding content and functionality, it’s time to start deciding how to support site users accessing content, whether via a hierarchy, guided search, chronology or another method. On paper, wireframes can help nail down basic structure and enable you to start the process of carefully naming and positioning items (see ‘The golden rules’, above). The aim should be to enable users to get to content swiftly, in a logical manner, and with as few clicks as possible.
The first element defined should be one dominant navigation device (most commonly a navigation bar). This should visually stand out as being primary and remain constant and consistent site-wide. “Other types of navigation – tag clouds and so on – are useful for following semantic concepts, but they soon degrade in a pre-structured site, for which set navigation bars work far better,” explains Crab.
Best orientation and positioning for navigation is a subject for debate, but recently we’ve seen horizontal primary navigation, as per Apple’s chunky navigation bar on Apple.com, come back in vogue. Designer Chris Garrett takes this line, arguing, “Vertical navigation doesn’t command the same amount of visual attention, and I want primary navigation to be one of the most instantly recognisable elements of any site I build.”
For some designers – especially those trying to make their mark – the thought of constantly returning to the obvious may seem dull. However, traditional navigation doesn’t present a learning curve for visitors and, while it may not be particularly stimulating or engaging, it does enable content to be easily found. That said, there are things you can do to attract a user’s attention, such as augmenting a navigation item with a flag of some sort, in order to highlight a promotion, or using calls to action elsewhere within the layout to remind a user of specific content as they scroll down the page.
Oddly, many sites leave navigation at that, perhaps merely adding a second layer (a ‘sub- navigation’ bar), but other devices can assist users in finding content. The most neglected of these is perhaps the internal link, despite it somewhat returning to the public consciousness upon the proliferation of the wiki. “I always check to see if body copy refers to information that other pages cover in more depth, and if it does I wrap relevant keywords and phrases in links to those pages,” says Garrett. “This is beneficial for search engine optimisation, but also makes text ‘skimmable’, enabling users to click through to relevant content quickly rather than having to read a body of text that’s largely irrelevant to them before finding links they’re interested in.”
Search party
For larger sites, straight navigation bars and internal links may not be enough, but whereas opinions were once divided about the best additional devices to use, that no longer appears to be the case. Drop-down menus are advocated by few, due to technological drawbacks (mostly relating to JavaScript, despite CSS-only menus now being possible) and accessibility concerns – the most obvious being that drop-down menu links are only visible upon a mouse-over, which can prove awkward to use.
These days, the search field is king, and due to Google’s staggering popularity, most web users are untroubled using searches, hence them no longer being a barrier to content. There are, however, rules that should be followed when integrating a search field. First and foremost, it must be instantly identifiable. “Separate a search field from the main navigation and provide white space around it, so it’s recognisable as a different element, rather than as a continuation of the navigation,” recommends Ralph designer James Hicks. He adds that positioning is important – anyone not placing a search field near the top of the page (and a long way above the fold) is asking for trouble. It’s also important to ensure that different kinds of input fields don’t become confused. Sandi Wassmer, CEO of Copious, elaborates: “If a website has a log-in or registration field, that must be kept separate from navigation features.” Visual distinction of fields with different functions can also help ensure users aren’t perplexed.
Clearly, design-oriented concerns aren’t restricted to search fields and strong graphic design is instrumental when creating successful navigation. Again, advice tends towards the obvious – several designers told us that you must make your navigation actually look like navigation and that users shouldn’t have to think about form and function. For fairly typical navigation, images are desperately unfashionable because of indexing problems and inflexibility when it comes to rapid updates, as are JavaScript rollovers, which simply don’t work when a user disables JavaScript.
Unsurprisingly, CSS-styled lists are popular, due to being easy to update, restyle and spider. However, even with this simple technology, it’s easy to get things wrong. Too many designers craft illegible text that can’t be enlarged and use colours that lack contrast, and yet a key component of navigation is in making it readable. “You also need to keep visual noise to a minimum,” argues Hicks. “Graphical buttons and navigation links can be helpful to users, but when they’re too shiny and noisy, they interfere with the type. Always remember, people need to use the interface – they’re not visiting a site to admire the amount of gloss crammed onto a button.”
Use it or lose it
Although visual design concerns are important for designers, most are now perhaps more engaged in ensuring content is generally usable. It would be naïve to suggest we’ll ever see the back of sites with obscure, unruly or downright frustrating interfaces and navigation, but it’s clear the usability lobby is winning its battle to be heard. The thing is, even if your capabilities for those things so far discussed – planning, structure, graphic design – are first-rate, it’s all for nothing if the end result isn’t easy to use. “Creating navigation is a combination of common sense, intuition and testing; getting real people to try and break it is the ultimate usability test,” says Crab.
For the lone designer or small agency who might suddenly be panicking about the thought of focus groups, user-testing doesn’t need to be so grand. First, there’s the ‘layman’ or ‘dad’ test. Check your site with someone who’s never seen it and who’s not particularly technically minded: if the navigation isn’t obvious, self-evident and self-explanatory – if the person using it doesn’t ‘get it’ without expending effort thinking about it – it’s time for a rethink. Marc Peter, on-IDLE’s creative director, also recommends “giving yourself a task from the point of view of your target audience, to check whether you arrive at the correct destination quickly and without needing to use search”. He offers examples: “How would the media contact the company? How would someone after a quote find out more about offered services and products? How would a potential customer find out what clients the company already has?”
When considering multiple levels of navigation or routes to content, ensure the current level remains ‘open’, so users don’t have to use a rollover button to check the current level’s links, and don’t be complacent structurally just because you have a search function. “You must also guide users strategically when using multiple menus,” advises Forman. “Catalogues commonly offer different ways of finding information, such as by category, size and type. This can lead to overcomplicating the user interface by presenting too many attributes simultaneously. Therefore, make sure you design labelling and order of menu presentation carefully so that the interface supports typical user decision making.”
Attention to detail is also crucial. It’s amazing to think that countless sites still link directly to files (such as PDFs), even from primary navigation, without offering any warning whatsoever. Various solutions exist – placing icons alongside links to such files; containing information within the text or title attribute of a link – but whatever route you choose, always ensure the user knows what’s going to happen before they click.
There’s also no excuse for ignoring users with visual impairments. If you have access to screenreaders, use them. If not, explore your site devoid of styling and see how its navigation works. Ensure you include ‘skip to content’ links, so screen-reader users don’t have to plough through navigation upon each page visit, and ensure all links on the page have appropriate textual content, otherwise screen-reader users may end up with a list of identical out-of-context ‘click here’ links. However, Garrett warns of the danger of “over-accessifying”, so don’t get carried away: “I’ve previously fallen into this trap, using ‘accesskey’ and ‘tabindex’ attributes,” he says. “But neither currently has sufficiently adopted standards and they can therefore be detrimental to the users they’re supposed to aid.” He recommends avoiding them entirely and just making sure that your markup is well-ordered, and that the other advice we’ve already mentioned – skip links, relevant textual content being used – is fully implemented.
Flash in the pan
Although consensus largely exists among designers regarding usability issues and simple CSS-based navigation bars, Flash still drives a schism like no other technology. “Don’t use Flash for navigation!” warned more than one designer, a sentiment tempered somewhat by the composure of Hicks: “The freedom Flash provides can have a negative effect on navigation, stopping it from being simple, obvious and fast. Trying to make navigation into an experience itself isn’t always advisable – you may well enjoy it and so may fellow web designers, but the general public will most likely find it tedious and confusing.”
Others argue that misuse of Flash and animation is simply down to poor design. With Lateral’s website recently overhauled from a highly animated, left-field, Java-based effort to a stripped-down, image-heavy site, you might expect the company’s creative director, Simon Crab, to consider animation and technologies like Flash passé or problematic, but that’s not the case: “The problem with Flash is that it’s often used in a gimmicky way that sacrifices usability for bling. This is a shame because when properly applied, Flash has a lot to offer in terms of user interaction, feedback and physicality that equates to real situations more than a simple text link does.” He argues it’s all about context. Lateral’s shift away from animation was down to the company itself changing, repositioning itself from a creative agency to a ‘creative strategic agency’, and thereby needing to highlight client work and ‘downgrade’ the importance of the company itself.
This idea that it’s about the target audience and appropriate application is shared by others; some claim animation almost always enhances the user experience, adding dynamism to a site, and that if you’re aiming to create an exciting showcase for a media-heavy client (such as a band), that’s perhaps not the place for archetypal restrained navigation. And – again hammering home the point about application – even highly animated and utterly non-standard Flash-based navigation can be usable if designed with users in mind, as Digital Outlook’s work on The Mr Men Show website proved. “Flash enabled us to animate our navigation, adding to the experience and helping young users know where they are and what they were about to click on,” explains Digital Outlook’s senior art director Eugene Reisch. As kids love noisy, shiny things, Flash was perfect, but it’s because of how Flash was applied that the site became easy to use: elements don’t compete for attention and, although each character has its own page, options always appear in the same place and style. “This means users always know what will happen when they click on something. As always, the navigation has to work for the site’s audience,” concludes Reisch.
Bookmark with:
