Continuing our series on making your site easy to use we’re now going to look at website navigation. This is about showing people where to find pages on your site in the same way that you would use the contents page or index in a book. There are three main ways of doing this: menu bars, search boxes and breadcrumbs. In this post we’ll talk about menu bars and search boxes and in the next post we’ll look at breadcrumbs.
Horizontal menu
You’re all familiar with menu bars – they list the pages or topics on your site with a link to the relevant page and almost every website has a one. The trick is to make them both useful and easy to use. Unless your site has hundreds of pages, make sure that there is a link to every page on your site from your menu bar.
Vertical menu
If all your pages won’t fit on your menu bar, have a list of main topics with drop-down or fly-out lists of sub topics. Show your visitors which of the main topics has a sub-menu by using an arrow next to the topic. Another convention which helps your users is a “rollover” where hovering on the link makes it change colour. If you want some ready-made CSS coding for drop-down and fly-out menu bars complete with arrows and rollovers, Stu Nicholls has a great selection at http://www.cssplay.co.uk/menus/.
Place your menu bar clearly on every page of your site, and place it where your visitors expect to find it. This means either a horizontal bar near the top of the page or a vertical one to the left of the page. A horizontal bar gives you more space on the page but the number of main headings is limited by the width of the page. For a longer list of main headings a vertical bar will work better. The convention with blogs is to have the menu bar to the right rather than the left so stick with this.
Search box top right
Some people prefer to search rather than browse so even if your site is small place a search box on every page. Place the search box at the top right of the page – this has become the convention and it is where users expect to find it. Keep it simple – a text box with button saying “Search” is all you need. It’s easy to add one by inserting some code in the right place and if you don’t mind the ads on the results page Google do a very good one for free: http://www.google.com/cse/.