Tips on Designing the Perfect Navigation System for Your Website

Posted in Tips, Usability, Web Design • Posted on 8 Comments

Where is the Home Button? Does this website even care about its navigation system? And, by the way, why are they using breadcrumbs when I don’t see how it could be useful? Well, navigational menus can be a big turn off for your readers if they aren’t planned well. Although webmasters assume that a simple menu is enough, most of the time yet they forget that a navigational menu has its own requirements. Sometimes a simple to use navigation will do just fine for your website design while at times you will have to click a lot of links into your navigational menu so as to compliment the various branches of your website.

This discussion will pick up some of the obvious forms of websites and then shed some light on how the navigational menu changes for each of them. Hold tight and don’t leave!

E-Commerce Websites

The buzz of today for developed nations and the future for upcoming nations, e-commerce has evolved as one of the most current businesses on the Internet and almost all of them have been able to earn their share of fame during their lifetime.

One common point between all e-commerce websites is how complex they are. No matter how simple a e-commerce portal is, at the end of the day lot of navigational links have to be used so that readers can order multiple items or continue shopping from the cart. This is when it becomes important for webmasters to come up with the perfect blend of simplicity and complexity that keeps readers on that e-commerce portal.

What better example then Amazon when it comes to an e-commerce portal. Amazon has been successful in coming up with a very simple to use navigational menu which leads to almost every category under which the company features products. Also, the search system of Amazon is next to perfect which almost always results into satisfactory queries.

One must understand that it is this two type of navigational system (menu+search) which helps Amazon to keep visitors engrossed.

News Websites

Ah, news websites! They are famous for their content heavy presentation. I am not sure if there is even one news website which I have read thoroughly. The amount of content generated by a news website is enough to confuse readers. And this is when a sorted navigational system becomes important.

Imagine a news website like New York Times with just a top navigational menu that links to Home and few other important categories. Nobody would understand the depth of the website if they used such an incomplete navigational system. It is important to understand that the general perspective of a reader for a news based website is a lot of content with a complex navigational system. So, if you are including a very in-depth navigational system for a news based website then you’re doing things right.

Blogs

Well, which discussion on navigational menus would be complete without talking about blogs? In this section we will target blogs that are content rich. One can argue that niche specific blogs can run with a fewer number of categories so the navigational menu can be avoided in these cases. In this case, we must understand that it is advantageous for niche specific blogs to divide their content into various categories. Now, these categories need to be listed in the navigational menu so that visitors can dig into various forms of content on that blog.

This is where it becomes very important for content rich and niche blogs to have all its major categories listed on every page of the blog so that navigation is a cakewalk.

On the whole, a blog can have following navigational styles to check old content which is not available on the home page:

  • Pagination - This is placed at the end of each page and gives direct links to other pages of the blog.
  • Archive Page - Some A-List blogs use archive pages which can be used to display a complete archive of articles easily accessible from that a single page.
  • Categories/Tags In Sidebar - This is a common feature used by most blogs. A list of categories or tags used by the blog can be shown on the sidebar so that they are easily accessible from every page.
  • Header Menu - This happens to be an obvious form of navigation in blogs. It can be used for linking to the most readily used pages like the Contact and About Us pages. Some blogs use the header menu to link to major categories.
  • Footer Navigation - In the last few years blogs have come up with a footer navigation where a huge footer is used to link back to literally everything on the blog. This footer can be used to connect categories, pages and tags together.

Please understand that it is the format of content and the amount of visitors that will decide what sort of navigation a blog should use. Usually it depends on the blog’s webmaster to do some form of A/B testing to understand what suits the blog the most.

Corporate Websites

Corporate websites can show extensive variations in their style. While some of the corporate websites are used as a platform to represent an already famous company. Such websites basically are the face of the company without any other meaning whatsoever. Such corporate websites keep the customers informed and that is it.

On the other hand there are corporate websites that will keep try to entice new customers. They play a different ballgame altogether but still, at the end of the day, they are corporate websites. The professionalism reflected from these websites is almost always similar.

It is this professional factor that forces corporate websites to include the least amount of navigation links. Usually, a header menu with links to basic pages is all that is required to complete the navigational section of a corporate website. To add the Midas touch a webmaster can use footer based menu if the website has lot of content that can be admired by the visitor. The footer menu will never play down the professionalism factor of the corporate website.

Review-based Websites

Review-based websites cover a lot of area and various niches all in one platform. Usually such websites target consumer oriented products and provide a platform where users can leave comments or reviews regarding a respective service.

The problem with such a website is that due to a huge amount of content which is divided into various niches, it becomes almost impossible to cover all of it in one navigational style. This is when the menu style show in the image below can come in handy.

Review based websites will use huge drop down menus which are almost like a new pop up opening on every mouse over.  This style of navigational menus gives the review based websites ample amount of space to showcase almost every category without making it look congested. White space matters!

Conclusion

Not yet done, folks! But I hope that you have an idea of how important navigational menus are and how they change without us noticing them. See, the point is that navigational menus must not be a point of concern for the website visitor. They must blend with the website and its content in a manner that they look perfectly appropriate with that respective website. Get the idea?

51 Written ArticlesWebsite

Salman Siddiqui is an alpha geek, design guru and seasoned WordPress critic. Writing, for him, started out of ego but it has become the most luring and enlightening career option of his life. He is walking that extra mile for his freelancing dream.

8 Comments Best Comments First
  • Hassan Hibbert

    Friday, March 23rd, 2012 16:23

    1

    Great article. As a website designer I realize how important a navigation menu is. It’s always crucial to have a user friendly navigation that is easy to use or else the visitor will just be frustrated and leave the site. This article really open my eyes to the different styles of navigation companies use.

    0
  • Richard

    Friday, March 23rd, 2012 13:39

    3

    For user friendliness and SEO purposes “Breadcrumbs” matters. XSitePro software will activate breadcrumbs when preparing web templates and I believe wordpress has a plugin for breadcrumbs. Version 0.8.5 Yoast breadcrumbs now available on wordpress.org. Lets face it not having a custom link for a home button on a wordpress site can leave a less satisfying impression. Should a visitor wish to return to homepage. At least with breadcrumbs it is only a matter of clicking links to return back to a page without using the back button on the browser. Breadcrumbs is good idea..and search bots will use breadcrumbs to rate significance of how user friendly a website is.

    0
  • Chris Rendell

    Friday, March 23rd, 2012 12:54

    2

    Very interesting post. I’ve often wondered about the “home button”. I sometimes just don’t adding it and link the logo to the hompeage, however come to think of it, im not sure that internet users are acustomed to knowing the logo links to home on most sites. However i believe a breakcrumb is very important and should be added to all sites, so i guess this takes out the importance of having a homepage link in the top nav.

    0
  • Mike Penque

    Friday, March 23rd, 2012 18:46

    4

    Totally agree with you. Your idea for the design of the webpages looks very useful and easy to use. One thing I would make some changes as for the design of the corporate webpages. But it is only my point, all corporations can be different in their needs. Best luck.

    0
  • Shawn Dow

    Friday, March 23rd, 2012 20:17

    5

    It’s very important to have a good navigation as this will increase the amount of time your visitors stay on your site and reduce bounce rates

    0
  • KBharath

    Monday, March 26th, 2012 09:13

    7

    Is the categories in the navigation important ?

    0
    • Salman Siddiqui

      Monday, March 26th, 2012 17:04

      8

      They are if you think they are. Ask yourself the question. Is the content in the categories important? Should your readers see that content? Which categories are important? Is there any other way to reach that part of content. Can the categories be ignored and NOT mentioned in navigation system?

      After all, you are the boss!

      0
  • Design Contest

    Saturday, March 24th, 2012 07:24

    6

    I am sure that we should combine beauty and functionality while creating our navigation.

    0
  • KBharath

    Monday, March 26th, 2012 09:13

    7

    Is the categories in the navigation important ?

    0
    • Salman Siddiqui

      Monday, March 26th, 2012 17:04

      8

      They are if you think they are. Ask yourself the question. Is the content in the categories important? Should your readers see that content? Which categories are important? Is there any other way to reach that part of content. Can the categories be ignored and NOT mentioned in navigation system?

      After all, you are the boss!

      0
  • Design Contest

    Saturday, March 24th, 2012 07:24

    6

    I am sure that we should combine beauty and functionality while creating our navigation.

    0
  • Shawn Dow

    Friday, March 23rd, 2012 20:17

    5

    It’s very important to have a good navigation as this will increase the amount of time your visitors stay on your site and reduce bounce rates

    0
  • Mike Penque

    Friday, March 23rd, 2012 18:46

    4

    Totally agree with you. Your idea for the design of the webpages looks very useful and easy to use. One thing I would make some changes as for the design of the corporate webpages. But it is only my point, all corporations can be different in their needs. Best luck.

    0
  • Richard

    Friday, March 23rd, 2012 13:39

    3

    For user friendliness and SEO purposes “Breadcrumbs” matters. XSitePro software will activate breadcrumbs when preparing web templates and I believe wordpress has a plugin for breadcrumbs. Version 0.8.5 Yoast breadcrumbs now available on wordpress.org. Lets face it not having a custom link for a home button on a wordpress site can leave a less satisfying impression. Should a visitor wish to return to homepage. At least with breadcrumbs it is only a matter of clicking links to return back to a page without using the back button on the browser. Breadcrumbs is good idea..and search bots will use breadcrumbs to rate significance of how user friendly a website is.

    0
  • Chris Rendell

    Friday, March 23rd, 2012 12:54

    2

    Very interesting post. I’ve often wondered about the “home button”. I sometimes just don’t adding it and link the logo to the hompeage, however come to think of it, im not sure that internet users are acustomed to knowing the logo links to home on most sites. However i believe a breakcrumb is very important and should be added to all sites, so i guess this takes out the importance of having a homepage link in the top nav.

    0
  • Hassan Hibbert

    Friday, March 23rd, 2012 16:23

    1

    Great article. As a website designer I realize how important a navigation menu is. It’s always crucial to have a user friendly navigation that is easy to use or else the visitor will just be frustrated and leave the site. This article really open my eyes to the different styles of navigation companies use.

    0

Comments are closed.

54.211.212.174 - unknown - unknown - US