The rise of various content management systems has allowed almost everyone to publish multi–page websites discussing everything, from the popular to the mundane. These days, you don’t even need your own webhosting account to launch your own site. Popular blog publishing solutions like Blogger, WordPress, and TypePad can be used to house every aspiring publisher’s bright ideas. Just the same, with the abundance of free themes and designs, new sites can look reasonably acceptable visually.
But with a decent design, engaging writing, and valuable content, what would fuse them all into one solid product? Sound site navigation.
Navigation types
The three elements mentioned above can build a good webpage, but only with good site navigation and information organization will it result in a good site. Typically, navigational links can be categorized into three types:
- Global — Used to give access to a site’s main sections or divisions.
- Hierarchical — Denotes hierarchy or layers of sections and pages, allowing readers to go deeper or higher in a site’s information structure.
- Local — Often used to navigate within a page, or towards other similar pages of the same level within the hierarchy of content.
Expectedly, global navigation is present throughout all pages, though hierarchical and local elements are shown as needed. Unfortunately, it is the dynamic nature of the latter two that makes them hard to implement in a straightforward manner, thus resulting in pages with no clear navigational paths.
The past, the present, and the future
Ideally, every webpage serves a purpose; to sell a product, to provide information, or basically to provoke an action. A site visitor may chance upon a page through several means: from search engines, from another site, or from a page within the same site.
If the visitor gets the exact information from your page, then its mission is accomplished. But what’s next? And what if the content isn’t exactly what they’re looking for?
This is where your information structure matters. You want your readers to get exactly the content they’re after, and keep them reading for more, if needed. Because of this, readers must know where they currently are in relation to other pages and sections (present), where they can go next (future), and if applicable, where they were just before they page they’re on (past). The “Where Am I?” question is a good metric for evaluating a site’s navigational soundness.
If a page provides no insight regarding the options a reader may have, they leave and go somewhere else.
Applying what we know
Informing a reader’s present location within a site can be done in many ways. At its simplest form, it can be the title of the page itself, presented in relation to other navigational links. This can be easily implemented using visual cues, through CSS, markup manipulation, or graphical effects, or a combination of all these.
The “Past, Present, Future” way of denoting state and location is usually done with “< Previous Article | Current Article | Next Article >” links. In a hierarchical context, breadcrumb navigation is a common solution, and it works. “Home > Archives > My Article” is effective because even casual web users understand it, as they have seen it from other sites. Of course we know that when it comes to interface behavior, what works is what the users expect. And what users expect is based on what they typically encounter. If it takes them several seconds to figure out your navigation, chances are they will leave and search for something else.
From a local point of view, the “My Article | My Other Article | Another Article” approach is helpful in pushing relevant content to a reader. Like in a weblog, it is of value to your reader that a list of links to related entries are provided right after your post.
A point of contention among some web designers asks if a page should link to itself in navigational elements. It can be confusing for a casual reader since it takes them back to the same page. I personally think it is unnecessary, except for links labeled as “Home” that takes a reader to a site’s index page, or a page’s header which by convention (and users’ expectations) behaves the same way.
But what about Search?
In today’s search–driven web, sound site navigation and structure is even more important since it pushes the rest of your site with just one good position in the SERPs. Assuming a blog talks about oranges and a specific entry ranks well, visitors to that page will be presented a wealth of related information discussing oranges, assuming they can get to other relevant pages on your sites. And then your readers will be very happy reading about oranges.
Site-wide search works the same way. As they find their way to specific pages they’ve searched for using your own search functionality, you get them what they want, and then some.
Good navigation is the glue of all your content, it connects information into one vital structural unit and helps you serve your users and readers better.
Written by Markku Seguerra. He takes photos and blogs design at rebelpixel.com — sometimes.
Originally posted on October 12, 2007 @ 3:08 am