New Webmasters > Basic Layout and Navigation Principles

Basic Layout and Navigation Principles

By corbyboy ⋅ July 22, 2008 ⋅ Post a comment

Good navigation is essential. Simple as that.

No matter how good a website looks, if your users cannot navigate the site they will leave. It’s as simple as that.

The basic principle is that users must be able to get to where they want to go in as few clicks as possible. In the modern Internet splash screens are out, “click here to enter” is out, “this site is best viewed in Internet Explorer” is out and Flash introduction movies are out (“Skip Intro” is possibly the most clicked on phrase on the whole Internet). User want content. This cannot be emphasised enough, so it will be repeated many times. Users want content. Investing time and money building a wonderful and useful page is no use if visitors cannot navigate to it quickly. Navigation shouldn’t be simple or straightfoward. It must be more than that, it should be obvious.

Give Users What They Want, Not What You Want

An example of bad navigation

The screenshot on the left shows a classic example of how to turn your visitors away. It is from the Chippenham Town Council website. Visitors aren’t here to see flashy text welcoming you to the website. They are here for the content of the website. There are very few websites where a Flash intro works so make sure that using one adds something very significant to your website.

Reinventing the wheel is not necessary when designing your navigation. Creating a new, flashy, original navigation bar that nobody knows how to use is a sure fire way to have your visitors scrambling for the back button. Users know what to expect from navigation so don’t dissappoint them. They are familiar with terms such as “homepage”, “about us”, “view cart” and “contact us” so don’t be afraid to use them.

Use Consistent Navigation

Each page on your website should have a consistent navigation area. Once your users have become accustomed to how to navigate your website, changing this is suicide. Additionally, your logo should be a part of your navigation section. It should be in the same position on every page and it should always link back to your home page.

Remember that not all users enter your website from your home page. These days, search engines bring the majority of traffic for a lot of websites. People often link to specific pages via social bookmarking sites such as del.icio.us and Digg. If your website receives a surge of traffic to an “orphaned” page (i.e. a page with no navigation or links to any other pages) you are losing a lot of potential new visitors to your webisite who may have explored more of your site if only you had given them the chance.

Make Links Obvious and Descriptive

Website visitors have become accustomed to knowing what a link looks like. They expect link text to be underlined and a different colour to the rest of the text. You must be very careful if you deviate from this principle as you may confuse people. Users become very frustrated when underlined text appears to be a link, when in fact it isn’t.

“Click here” is, in my opinion, the most abused phrase on the whole Internet. A search on Google for “click here” yields 1.3 billion results. Unscientific I admit, but it certainly illustrates the point. Link text should be short and meaningful. This means it can be understood out of context and, perhaps more importantly, users will understand what is going to happen when they click the link.

Let Users Search For What They Need

For large sites where linking to every page is not possible, a search box is a must. Like your navigation area, the search box should be easy to locate, intuitive to use and present on the same place on every page of the website. A link to a search page is not good enough either. A small text box with a submit button labelled “search” is what you need. For accessibility, pressing return should take you to the results page.

Other Features To Consider

Breadcrumbs

Breadcrumbs are links that show where the user is on your website. It allows them to navigate up to different levels of your website and they know the context of the page they are on. Simply put, your visitors know where they are on your website. You can see a breacrumb trail at the top of each page on this website. Ideally a breadcrumb trail should be a the top of each page, but at the bottom may be useful too.

Sitemaps

There are two main forms of sitemaps, those designed for search engines and those designed for human visitors. Sitemaps for search engines list every page on your website that you want crawled by search engine spiders. They are just a guide and do not guarantee inclusion in the search engines. You can find more details on the sitemaps website.

Sitemaps for human visitors are an index of the main sections of your website so people can easily find what they want to on your site. If you have a large website listing every page is not necessary, but on a smaller website you should list all your pages.

Share this page with others