How many times have you been on a website and not been able to find pages that you thought should be obvious? Websites by their very nature are a collection of pages linked together by a navigation system and when that system is poorly designed, it’s much like a road system with poor signs and unexpected turns – the visitor (or driver) ends up in the wrong place, misses their turn and gets frustrated. Web usability author Steve Krug puts it elegantly in his book titled Don’t Make Me Think when he observes that poor navigation makes us stop and think, whereas well designed navigation is almost invisible.
Examples of poor navigation are not hard to find, and while it’s relatively rare to see bad navigation built to a brand new site, it seems to develop and deteriorate as more content and pages are added without any thought to the overall page-to-page linking. Frustration is a major reason why users give up on websites, so it’s essential to maintain obvious navigation even as your site gets larger.
Website owners often imagine that everyone will be coming in through the front door – otherwise known as the home page – but site statistics tend to prove otherwise. While the bulk of your traffic will point to the top-level domain when the site is first launched, as you gather more inbound links and increase your online reputation, a growing percentage of hits will be targeted to individual pages nested in your site.
Keep in mind some of the most popular ways that users find your web pages:
- Search engine results often send traffic to the page in your site that’s most relevant for the user’s search query, rather than the top-level home page. Don’t leave those users stranded with nowhere to go, or your bounce rates will be sky-high.
- PPC landing pages: if you’re using paid ads, every ad should be arriving on its own unique keyword-rich landing page. Each one of those needs to include the site’s ordinary navigation or your conversion rates after you paid for the click will be much lower.
- Bookmarked URLs that visitors email or Tweet to each other. When users click these URLs, they must show exactly the same content that the sender was shown, otherwise there’s no benefit to sending the link in the first place.
Features of Bad Navigation
While it’s hard to define exactly what bad navigation is, you know when you see it. Inspecting a range of bad sites, I believe that these characteristics should be avoided:
- Orphaned pages, where you have to arrive there by some external or illogical link, and cannot get back without searching your browser history.
- Poorly named pages: for example, while it may seem unique or clever to rename the ‘Contact’ page ‘Reach Out’ or ‘Talk to us’, it isn’t intuitive. Visitors are used to seeing ‘Contact’ in the page name so there’s no real benefit in not meeting their expectations.
- Lack of links: pages that discuss a product sold on the site, but don’t show how to order it; or pages that mention a topic of interest previously discussed with no way to get back to the topic.
- Pages with no navigation because the site presumes that everyone reaches a page through their structure (without landing through a search engine result), and the visitor arrives with no way to find the main entry point – or any other major page – on the site.
- Structure designed for a company or industry, not reflecting terminology a customer would use. This is more common in technical businesses but leaves the visitor completely confused.
- Changing layouts with menus jumping around from page to page, so the user can’t predict where items will be on the page.
- Requiring registration before viewing a page. While it’s great to build site membership and encourage visitors to register, requiring this up-front by either denying access or showing an annoying pop-up light box will turn people away. I see this on a growing number of media sites, which is incredibly counter-productive given the competitiveness of their market.
- Opening every link in a new window. While many designers say that you should never direct your users away from your site, I believe that opening windows without the user’s consent can be irritating. Also, depending upon the browser’s security settings, the link may never open, leading the user to believe your site is broken.
All of these problems stem from the same basic mistake: getting in the way of the user and preventing the exploration of your content.
Features of good navigation
It’s important to scour the Internet for both major sites and competitors and see what works (or doesn’t) in their navigation. Best practices are starting to appear:
- Navigation placement should be at the top or left or your page. Placing navigation controls on the right can be problematic given screen-width issues, and may not be visible to users with lower screen resolutions.
- Navigation animation should be minimal. If users must hover over categories to make sub-categories appear (as in a regular desktop application), set the hover delay to zero and think twice before using animation that slows down the visitor.
- Limit the top-level menu to around 5-8 items – cramming a dozen or more top-level links offsets the benefit of structured navigation.
- Show the current page and use ‘bread crumbs’: if a page is nested two or three levels deep, state this clearly at the top using “Home > Category > Sub-category > This Page”, where each level is a hyperlink that can jump back to any previous level.
- Clear page names and obvious links aid navigation – using well-named anchor text (see tip 29) isn’t just a good SEO tactic, it also gives the visitor a clear indication if the link is worth following.
- Add navigation on the page footer including at least the basic links, so that users don’t have to scroll back the top to get around your site. A growing number of sites are using more elaborate footer menus that link to popular content and clearly delineate the end of the page.
- Maintain the same layout through-out your site. It’s surprisingly how many sites hide navigation on some pages or – possibly worse – change the tab order depending on the page.
- Respect the browser controls so that Back, Forward and Refresh buttons work as expected. “Back” is the second most popular navigational feature after hyperlinks. It’s tremendously annoying to visitors when session state is lost or any sort of multi-step form is broken just by using native browser controls.
Author: James Beswick