Imagine sailing the world a few hundred years ago with a faulty compass? Or trying to follow in Captain Cook’s footsteps with a bent sextant? (Don’t know what a “bent sextant” is? Look it up!)
Translate that to modern day (first world) problems such as finding your way through an unfamiliar city with an outdated Navman roadmap. Or using a website with a poorly designed navigation menu.
One of the worst mistakes you can make in website design is to confuse your visitors with inconsistent navigation. If menu items aren’t clear enough, pages aren’t linked in the navigation, or worst of all, menus look different on each page, your website isn’t going to be a success.
It’s enough to cause a mutiny! Visitors (read: potential customers) will abandon your website like rats from a sinking ship.
Website navigation and menus are the cornerstone of your website. ⇐ Tweet this line.
Who is this post for? Small businesses (ie. microbiz, solopreneur, 1-2 people max) who have, or are planning, a DIY website. Also useful for those who are going to engage the services of a Web Designer, so you’ll know what to consider as part of the brief.
Navigation, in website terms, refers primarily to the main menu. But it can also include sub-menus, header and footer links, and linked items within a page’s content. Everything classed as ‘navigation’ uses a link of some sort.
It’s critical that this element of your website functions in a simple and predictable way. In fact, your site’s navigation structure is one of the first things you should work out, well before your content hits the page.
Dos and Don’ts of website navigation
DO Use basic terms for your main menu items. Short is sweet. HOME. ABOUT. SHOP. CONTACT. People immediately understand these as they are so commonly used.
DO Keep things in order. Home is on the left. Contact is on the far right. These are standard locations and people look for them there. In between these two, you can order things however you like, but do maintain the same order on every page.
DO Think from your visitor’s perspective. What are they looking for? Your menu might use nouns (Gallery, Services, Products) or it might benefit from verbs (Shop, Learn, Join). Will new shoppers know and understand your product lines by name (not likely), or should you group things by category or function?
DO Alter the appearance of menu items to indicate the current page, and optionally change the ones that have already been visited.
DO use Horizontal navigation. It seems to be more common than vertical these days, which is a good thing. Horizontal navigation uses less screen space, and can remain ‘sticky’ more easily. (Sticky menus are those that still appear at the top of the screen as you scroll down. If using, don’t make them too large.)
DO Provide navigation options on long pages. To avoid scrolling back to the top of a long page, you can add navigation to the footer, include “Return to Top” links at convenient break points throughout the page, or use a sticky header menu, as discussed above.
DO Make links obvious. For links within text, the standard is to underline them, and show them in blue. You can change the colour, but make sure they are still obviously different from the surrounding text. If you blend the linked text in to look just like everything else, no one will know there’s something to click unless they get lucky and see their cursor change as they hover over it.
DO Use breadcrumbs when your navigation drills down more than two levels. Breadcrumbs are the additional navigation steps that show the trail you followed to get there.
For example: Shop -> Categories -> Menswear -> Shirts
This allows visitors to easily return to whichever level they wish, be it Menswear or the main Shop level. (Note that I haven’t underlined the current page Shirts – it shouldn’t be a link because it won’t take you anywhere other than the current page.)
DO Add a Site Search bar if your site has a lot of information or products.
DO Consider a megamenu if you have a large site structure. It not only allows you to list out a lot of items, it can incorporate icons, images and additional features to help visitors quickly find exactly what they’re looking for.
DON’T leave off the Home menu item. Yes, the logo usually acts (read: should always act) as a link to the home page. But not everyone knows this (or don’t trust it to, as so many sites don’t conform to this basic rule of web standards).
DON’T make non-links look like links. If something is underlined, it looks like a link. If you have a bunch of buttons and only some of them are links, who wants to spend time hunting for the ones that go somewhere?
DON’T offer too many options. Especially if they all sound vaguely similar. Your visitor wants to know where to go first, second and third, but not all at once. Too many choices can lead to them feeling overloaded or confused and they’ll give up trying.
Try to limit your main menu to 6-7 items max. If you have a lot of pages to link to, use a drop-down list under a main menu item, or a mega-menu if needed.
Which Website Navigation techniques to Avoid
I have my own pet peeves about navigation issues on websites that I visit (many of which are covered in the above list). But I wanted to find out what annoys normal, non-web-designing people (coz everyone knows that web designers aren’t normal…)
I reached out to my fave Google+ communities to survey them on their pet peeves about website menus and navigation. Here’s what they said:
“Make the menu consistent on every page, it annoys me when they change. Please use a logical sequence (for example alphabetical) or at least something simple that makes sense to the user rather than just the business owners who know the products inside out.”
“I like a breadcrumb trail (is that the word) when I am drilling down into a site. It makes it easier to jump back a few steps if I want to.”
“My pet peeve is when there’s a drop-down and the Parent item is clickable but doesn’t go anywhere, or goes to the first item in the dropdown. Annoying!
Also, please repeat navigation in the footer.
And don’t make fonts too tiny.”
“Please, please, please make links obvious. I really hate the ‘in-line’ design feature where the link is a slightly darker shade of the surrounding text or even worse has no distinguishing features – you have to somehow magically know it is a link.”
And Bek ranted:
“I’m so over flourished, grey, small cursive I honestly don’t even bother reading such sites any more. What about we stop to think about the people who are:
* legally blind and visually impaired
* colour blind
* have reading difficulties
* have dyslexia
and get back to making readability a priority?
Only 3% of online marketing materials in this country are compliant with visual impairment codes for disability. That’s a whole lot of people that can’t see your website because you’ve chosen cutesy over practical.
I’m colourblind (red/green) and have less than 3% vision in my left eye. My dad and my uncle are both legally blind and colour blind. It’s a lot more common than web designers think. Colour blindness alone is a problem for 27% of the male population in some form.”
Side Note: Bek’s points above about visual impairment are worthy of a whole other post about usability, but the basic issues she highlights are very relevant to menu items and other navigation elements. Clear colour contrast on these items is just one factor that can make life easier for those with less-than-perfect vision.
Mobile site navigation
Dropdowns and hover menus don’t work so well without a mouse, so the desktop menu won’t necessarily translate easily to small-screen mobile devices. A mobile-optimised site is more likely to use menus that look like a mobile app, with large clear buttons that the fattest fingers can access with ease.
If your site uses a responsive design, consider what happens to the standard navigation menu when your screen gets too small to display it at full width? One option is to hide it in a bar at the top of the screen when it’s not in use but provide an easy way to make it appear when needed.
Do you recognise this mobile icon? It’s called a “hamburger” menu and its use is much debated in web design circles. The stacked hamburger represents an expandable menu list, but some people think it’s not obvious enough and may get overlooked, especially by less web-savvy users.
My preference is a tabbed navigation bar with only the most important menu items, and then a hamburger with the label “More” to access the rest of the menu.
What say you? Add your comments with your pet peeves about broken website navigation (mobile and desktop)…