12 Steps to better navigation


Navigation should be thought of as a tool for your users. It’s there to help them find their way around your site. Like a map; only you’re marking the points on it and passing it over to your visitor to use. This means that your navigation is for your visitor, not for you. While there is scope for some design flair and creativity you should be ensuring that it is fit for purpose, that it helps your visitors rather than hindering them. Here are 10 steps that can help you achieve better navigation. Shopify is an online website builder.

1. Plan Your Route

Route planing
Planning is one of the most important steps in any web design process. You should be planning out your content and your navigation before you pick up a pixel. Plan how you want your visitors to get from A to B on your website. Make sure they can get there as quickly as possible. Your most important content should be easy to access and at the top level.

2. Be Consistent

consistent links
Your navigation needs to be consistent throughout your site. This means keeping your main navigation areas in the same place and ensuring that you use the same colors for links across the site. Your main menu should appear in the same place on every page, although you should feel free to have page specific sub-menus for drilling down into different content.

Using a different color(with a lesser saturation) for visited links and adding an icon to external links would make the site more accessible though.

3. Keep Clicks to a Minimum

Minimum Clicks
Your visitor should be able to locate what they want as quickly as possible. This means that you should keep clicks down to a minimum. If a visitor has to spend more than minute searching for content then your navigation isn’t working. You can help to improve this by having a sitemap, pull down menus, anchor text and tables of contents.

4. Make it Easy to Get Home

Link to home page
These days the web design standard is for the logo to be located above “the fold” – i.e. is visible to the landing visitor before they scroll down the screen. This is usually linked to the home page. People browsing the web have come to expect this so you should make your logo clickable. In some cases it may also be appropriate to have a home button on your navigation bar. Should your visitors get lost (which they shouldn’t if you are following these steps) they should always be able to get back to your home page.

5. Be Searchable

Search functionality is such an important aspect of web navigation. A visitor should be able to search your site. This is particularly important if you have a large amount of content and pages. It will help your visitor to pinpoint what they want without having to manually search through your whole site to find it. Google makes it easy to add custom search functionality to your website with Google Custom Search Engine.

Adding the search functionality on 404 pages will be useful for the visitors to browse through other sections of your website.

6. Make the Wording Accurate

It has become trendy, in certain circles, to have navigation buttons that are pretty vague. You may think that this makes you look cool, that you’re breaking the mold, but really it can be annoying and frustrating for your visitors. If you have used wording in your navigation that you think makes you sound cool/clever/cutting-edge, change it. You should not assume that anyone else will have a clue what you are talking about. Not everyone else thinks like you, right? Keep your navigation language specific, direct and to the point.

7. Pagination

paginate the pages
Some websites just have the next/previous button which doesn’t give any clue on the number of pages. Pagination simply means dividing the content into discrete pages. Can you imagine a book without pages?

This is useful especially for blogs, e-commerce websites, where the content blocks/product listings are huge in number.

8. Read More links

more button
Visitors hate to read huge blocks of text content. They always prefer to read the excerpt and choose the one they like to read further. It would be a good idea to show excerpts (wherever applicable) with a “read more” button linking to the in-depth article.

9. Include a Site Map

A site map should be a key part of your navigation toolbox. This isn’t so important for small sites, although it can come in useful and is great for SEO, but if you have a huge site with lots of pages and information it is a necessity. When I visit a big institution’s website the first place I go to find what I need is the sitemap. You should make it easy for your visitor to find the link to your sitemap. This is often at the bottom of the page, but if it’s important to your navigation you could include a link in the main navigation bar. Some sites, like Apple, for example, include the whole of their sitemap in their footer.

10. Breadcrumbs

Breadcrumbs are those little links at the top of a page, usually below the navigation bar, that show where you have been and where you are now. They make it easier for a visitor to figure out where they are at that moment, and how they got there. They take the form of Home > Sub-Page > Sub-Page.

11. Keep to the Essentials

dropdown menu
Too many links on your navigation can end up causing it to be cluttered and confused. You should keep the top level of navigation for your most important content – i.e. the content that you want your visitors to get to first. Anything else can be dropped down a level or two. This helps to keep your navigation clear and focused. Sub-pages can be contained in dropdown menus and flyouts.
In some cases, it would be more meaningful to add icons.

12. Test

testing phase
At the end of any web design process, you get to the next most important stage – testing. You need to test your navigation to make sure that it is actually a useful navigational tool. Don’t just test it yourself. Ask your friends and family, people unfamiliar with the site to test it for you. That pair of fresh eyes will help to pick up on any problems and inconsistencies. You should also test your navigation to make sure that it works cross-browser. You might find that your navigation bar appears differently in Firefox and Chrome, or that IE doesn’t like those rounded corners you’ve so lovingly added.
Follow these steps and you should be on your way to 100% navigation success!

About Siobhan Ambrose

Siobhan is a freelance writer and WordPress expert based in the UK. She specializes in writing creative copy for web, print, film, mobile devices and Wix.com. Wix is a free website builder?that lets users create and customize Flash websites with drag & drop - no coding is required.

19 Responses to 12 Steps to better navigation

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

  1. Great blog here! Nice and easy to follow Thanks

  2. thanks! for this short but useful post.

  3. Well planned information architecture is probably the most important element for ensuring good navigation. Unfortunately, however, it is often overlooked. If the structure of the sites and the sections it has, are not well thought of, it is very difficult to ensure the site is easy to navigate,

  4. farblinsen kaufen August 23, 2012 8:47 pm

    Great blog here! Also your site loads up very fast! What host
    are you using? Can I get your affiliate
    link to your host? I wish my site loaded up as quickly
    as yours lol

  5. Nice and easy to follow. Thanks

  6. Including solid pagination at the bottom of a category page is so important yet it is often either not there or hidden by advertisements.

  7. wow very2 nice!..

  8. Nice site you have and a lot of useful information for novice bloggers. The paper is painted all the steps, super …

  9. Really useful tips. Awesome web designing too. All the best Gopal

  10. Hey,
    The tutorial is great, thank you!

    Gonna implement in my website for sure.
    Just having issues with the breadcrumbs.

    Thank you!!

  11. I was searching for better navigation and i landed on this page. I loved your article but what’s most interesting is your own site’s layout.

    Simply fallen in love with your design. Just curious to know whether you guys do website designing as well? I badly need to redesign few of my sites. Please let me know.

  12. I like all the tips from this site.

  13. Thanks. Your post is more attractive with pics demo

  14. You’ve got to get these basics right, otherwise it becomes very hard for the end user to understand.

    One more I’d add would be “Let People Know Where They Are” at all times.. I know the breadcrumbs kinda covers this, but specifically in the main menu items. whether it’s a single page or whole section, gotta highlight that in some way to say “Hey, your in the Products section right now!”

  15. Very well done my friend! This article was more than helpful, thank you!

  16. Really great suggestions! Keeping navigation simple is a sure way ensure site visitors find what they are looking for.

  17. Thanks for these pointers! I’ll be sure to use them in my future webdesigns.