Website navigation tips with examples

Why is navigational ease important for a website?

Designing a website which is easy to navigate is a very important usability aspect. Web surfers are an impatient tribe and if they stumble on a website which is even a little confusing or hard to navigate, they’ll hesitate to come back. One of the most important thing for website owners is to keep their visitors happy with easy to use interface. Other than making it easy for readers, a website with good navigational design also makes it easy for the bots and search engines to scan your website and index the results.

Website navigational layout and design can make or break the experience of the visitor as it is the major part of the user interaction. I remember the time when one of my favorite tech websites changed their layout to a very confusing one, I have nearly stopped visiting them since then.

We have grouped together designing tips with some good examples that can be helpful for creating websites which are easy to browse and navigate.

1. Horizontal/Vertical Bars

Horizontal Top Bar.

To navigate around categories, use horizontal or vertical bar that have each of your categories displayed in it. Horizontal Top Bars or Vertical Side Bars are mostly used to navigate around in categories or sections in a website. If there are large number of categories, such as for an online shopping website which sell products in broad categories, you can use fly out menus.

2. Breadcrumb Navigation Element

Breadcrumb Navigation Element.

It is a common practice or habit of internet surfers return a step back if they finished reading an article, so use a navigational element that allows visitors to go back one or more stages. BreadCrumb navigation is a secondary navigation element which shows the path through which the reader came to the current page and also where he is right now. BreadCrumb also reduces the number of clicks needed by the user to go back to a higher level page and is very helpful for websites which have deep webpage structure as shown in the snapshot. E-commerce websites are good example of breadcrumb navigation implementation.

Floating Op-Page Jump to navigation element.


3. Floating on-page navigation elements

If the blogs/articles in a website are lengthy, then using a jump to top or jump to bottom navigation elements will be helpful. If they are very lengthy then it is better to break them down into various page. This will keep readers interested and also make them easy by not letting them scroll much.

4. Tags for Navigation

Tags can also be an effective form of navigation for those who want to target some specific categories / words. Suppose the reader visits a technology website and he finds a interesting news on Android, in order to get related news, user can just click on the tag named ‘Android’ as shown in the below example, which will automatically take him to a list of all the articles in the website related to that topic. In this case, user avoids using a search and then finding all the pages related to Android, which would have taken him longer.

Breadcrumb Navigation Element.

5. Search Bar for Navigation

Breadcrumb Navigation Element.

For websites having huge amounts of content on widespread topics (hint: Wikipedia), search bar is the best way for navigation. Search bars are also useful when a user wants to read a particular article or browse a product but unable to find it using regular navigation technique.

6. Sitemaps for navigation

You can use HTML Sitemap for users and XML Sitemaps for bots. It makes easy for them to jump into any section of the website. Have a look at the HTML Sitemap example of BBC UK website below, they have listed categories and sub-categories of news. You can also list the links in the sitemap in A-Z order which some users find useful. XML Sitemaps are meant for search engines, so that they can index your website using the structure of the website as specified in it.

Website navigation design tips Sitemap example from BBC website.

7. Use of Footers in navigation

Website navigation design tips for footer.

Footers if used intelligently can become a very good element for navigation but don’t over stuff footer with links and keywords as it appears to be spammy. Footers are good place where you can link to pages about your brand and work such as ‘About Us’, ‘Contact Us’ and it is also a good place for linking Sitemap. Above is the snapshot of footer in our own website, we have also placed links to subscribe us on Facebook, Twitter, RSS, Google Plus and other options as well.

Other Website Design Tips

  1. Make sure that the homepage link is present in every webpage. This is typically one of the most basic mantra of website design and navigation.
  2. The navigation elements in the website should stand out from other elements of the website, they should be distinct and easily recognizable. You can use a different color scheme for navigational elements.
  3. Use consistent navigational design and scheme throughout the website.
  4. Name your section/categories well so that user can clearly understand where he is heading to before clicking the link.
  5. Don’t over emphasize on the look of the website so much that the ease of use would go for a toss.

Follow these tips for a website design which is easy to navigate and browse, meanwhile you can read SEO Tips for better visibility in search engine results.


free searchenabler trial version

Get SEO Tips and Recommendations
Try SearchEnabler SEO platform.
No credit card required. Quick setup.

Like The Article? Share With Your Friends !

  
 Vote on HN

Get blog posts via Email!

Only blog feed, No spam.

Connect With Us !

Add New Comment

Add Comment:

You must be logged in to post a comment.