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
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
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
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
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.
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
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.
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
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.
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!