ifoh designs: Information Foragers Of Hyperlinks & Designs

Guest Post by: Nathan Beck

In modern web design there’s no excuse for building unusable sites. The understanding and acknowledgment of standards-driven, considerate design is becoming more apparent every day. Navigation is one of the most important features of a website. If your user can’t find what they’re looking for, work out where they are or how to get back to where they were - your website is useless.

This article touches on the essential points to consider when designing website navigation, which in turn can seriously contribute to the entire design process.

Different styles of navigation

Website navigation comes in all shapes and sizes. And there are a plethora of lists on design blogs that highlight some of the most imaginative, artistic, functional or minimalist.

The format of navigation varies massively based on:

• The amount of pages within a site
• Page hierarchy
• The target audience of the site
• Style and theme of the site design
• The initial designers creative flare.

Standard website navigation covers the main pages of a site. In the case of smaller sites, this is normally 5-6 pages. Bigger sites require a different approach to menu design - this may include drop-downs, second and third tiers that appear when you hover or select a different menu item, or sometimes can still be summarized in a full list.

Standard page navigation is best broken down into either vertical or horizontal navigation. Horizontal navigation is becoming more popular, although both have a steady place, and of course many sites feature both.

Although there are no hard and fast rules as to which style of navigation you should opt for; factors like the number of pages, the rest of the design and the frequency and quantity of new pages being added or edited often dictates how you should design your website menus. Therefore when designing a site I personally often tackle the navigation first.

Location

One of the core principles of creating usable navigation is ensuring that your visitors know where it is. It should be immediately obvious when arriving at a website where the menu is.

The most obvious place is at the top of the page. In the instance of horizontal navigation this is usually right at the very top, above all other content, or just below the logo and header banners. Another version of this is when the essential links are placed in a menu below the header, but less important links are featured at the very top in a smaller font or somehow made less apparent. This is also often used in conjunction with vertical menus, where the lesser menu items are displayed in another form.

A note on accessibility - placing your website navigation at the top of your pages is beneficial for people using screen readers or non-visual browsers. This ensures they don’t have to wait through lots of useless content, imagery, tag lines etc to get to the navigation.

In the case of vertical menus, try to ensure they start off as high up the page as possible. It’s important to consider design above the fold. That is, the area of a window users see before scrolling down the page. This is normally no more than 600-700px. If your navigation falls below that, users may feel lost from the start.

Consistency

Consistency is essential. Nothing is more confusing than traveling to another page on a website, only to loose the navigation, or find that it’s changed format or location. Ensure that your navigation, whatever layout and positioning it may take, remains in the same place on every page of your site - even if the color scheme or rest of the page layout changes.

A simple ‘Return to the main site’ style link will not suffice.

Link Titles

It may seem fun to create wacky and cool names for pages. In certain circumstances you may get away with this, but for the majority of the time, as boring as it may seem, you’re best off to stick with typical, expected page names.

If you create a portfolio page, call it just that. ‘Folio’, ‘Stuff’, ‘Workz’ etc may seem obvious to you but may prove useless to some visitors to your site.

Hierarchy

If your site contains lots of pages, don’t make them all top level. Break them down into secondary and if necessary, three or more levels of navigation. This saves hunting down long lists to find a page. This process also lends itself to both vertical and horizontal navigation with the incorporation of drop-down menus. The best examples of deep linking are found on e-commerce and huge corporate websites like Amazon.co.uk and Zend.com.

However, be careful not to overdo it. Creating multiple tiers of navigation can annoy your visitors when they have to trawl through numerous menus to get to the page they want.

Other forms of Navigation

A list menu isn’t the only form of navigation. Other forms include:

Breadcrumbs

These serve as useful tool for anyone but are at home on bigger sites. As the name suggests (taken, I believe, from the Hansel and Gretel tale), breadcrumbs display the route from the home page to the page you’re at. For example:

Home > Services > Marketing > Online PR > Case Studies

Although you may have not taken this path to get to the specific page, it gives you your place within the site, offers routes back up and often saves you clicking the back button several times to get back to a previous page.

More importantly, it’s extremely useful for visitors who arrive through other means such as a referral link or search engine result. It acts as a ‘You are here’ indicator, and should be compulsory on any large website.

Search

Let’s not forget the ever-important search box. Aside from serving it’s place as a mere search tool, a lot of web users will use a search bar or box to get to a page a lot faster than traveling through menu systems. Once again, Search functionality, like Breadcrumbs, should be commonplace among bigger sites.

Pagination

Pagination lends itself more to blogs or news sites. It is normally found at the bottom of the page, under a list or articles or page summaries and is the number of further pages of results.

For example, on a large news site, pagination may be found at the bottom of a page summarizing different articles within a category, ordered by date. If you’re looking for an article from a few months back, pagination offers you the option to skip pages at a time by clicking on a number that represents that page.

Undoubtedly the best example to give would be on the Google search listings page.

Footer Navigation

It may seem pointless to put navigation in the footer. But of course that’s where someone ends up when they reach the bottom of a page. And chances are they’ll be looking to go somewhere else so, where better to feature more navigation?

Footer navigation, like primary navigation, comes in all variations depending on the style of the site. It can be a clone of the primary navigation at the top of the page, or a simplified version, or even a more complicated version with more links that weren’t important enough for the top of the page.

Some sites pack the footer with links to terms and conditions, recruitment, privacy policies, partner sites and affiliates, valid code links and other, often law-related data. It makes sense to leave this to the bottom. The majority of users don’t care about your privacy policy or whether your site’s HTML is valid - so don’t feature it in the main menu.

Another common footer navigation technique is to include a ‘return to top’ style link or button. This is particularly useful on content-heavy websites.

Blog Navigation

Blogs and news sites generally feature a lot more content than standard business sites. Therefore the navigation plays an even more important role. Users like to find information through a variety of methods, whether this may be based on relevance, popularity, time, most recent or theme of post.

So, when building a blog - help your users out. Try and feature a variety of methods to navigate the content in your site. This may include any of the following:

• Latest/Recent posts menu
• Most popular posts menu
• Categories
• Archives
• Tags/Tag clouds
• Most comments menu
• Recent comments menu
• Pagination
• Search bar

For more information on blog navigation check Nathan’s post on the Flame Digital blog at http://blog.flamedigital.com/?p=122.

Accessibility Considerations

Accessibility and Usability often get bundled together. And although are very different, do compliment each other in several ways.

Things to consider:

• Using title attributes to describe your links.
• Incorporating access keys to aid mouse-less users and devices.
• Displaying your navigation in lists, eg ul and ol. This will ensure your navigation appears correctly if there is no style sheet and aids tabbed navigation.
• If using an image-based navigation, don’t forget to apply alt attributes to your image elements.
• Try to avoid JavaScript in the navigation. Or if you wish to use it, at least ensure that it will still render and be navigable if JavaScript is turned off.

Getting it right

A lot of the points raised above may seem obvious. But that’s good, they’re meant to be. The point is that however obvious they may be, it’s amazing how often designers completely ignore them, either accidentally or because they’re too lazy.

Building usable website navigation isn’t a chore; it doesn’t particularly require any special skills or inside knowledge - it’s just common sense. Never assume that your site is usable because you know how to use it, get others to test out the site and provide feedback. You’ll be surprised how different people use the net differently.

If you feel I’ve missed anything or you disagree with my approach – let me know! As I’ve mentioned several times, there are no set rules. This article just provides a guide on what to consider when designing website navigation.

Author
Nathan Beck is a 19 year old designer from Manchester, UK. He works for Flame Digital and runs the Redswish web design blog.
Check out Nathan’s response to this post over on his blog!
Want to write a post for us?

• Posted at 10:27 am in web design
• Leave a comment