The Dos and Don'ts of Website Navigation

By Michael Heraghty
Posted Sunday, September 26, 2004

Don't Use Frames
Frames are bad for all sorts of reasons, which have been highlighted to the death in design books and sites. Yet frames sites continue to emerge (particularly on sites created by those with tech backgrounds).

Don't Use Images To Create Menus
Images make page slower to load. They don't read properly in talking browsers. They are ignored by search engines. Small, anti-aliased text often looks blurred in GIFs and JPEGs. HTML text is crisper - and nice designs/rollovers can be achieved with CSS now.

Don't Use Pulldown Menus
Menu information should be seen at a glance; don't make the user work just to see a menu.

Don't Use Pop-Out Menus
As well as making us do a lot of mouse-work just to see what's on offer, pop-out menu items often overlap, or cover other choices. We've all had annoying experiences where we've tried to click on one item in an expanding menu, but keep getting another. Pop-out menus are not compatible with talking browsers or text-only browsers.

Don't Rely on the Logo as the Homepage Link
Despite now being a convention among designers, users don't necessarily know that the site logo is a link to the homepage- unless you make it explicit (e.g. Use the word "home" within the logo - though this isn't a pretty solution).

It is better to include a separate link to the home page as part of the menu.

Do Maximise the Hit Area for each Menu Item
A larger hit area makes it easier for user to navigate into menus. Using CSS, you can create make an entire box a link, not just the text that is contained within the box. We've all had to use a dodgy mouse at one stage or another and know how frustrating it is to maneuver it into a small area.

More importantly, a large hit area benefits visually impaired users.

Do Use Alt Tags to Describe Images
This benefits users of talking browsers and text-only browsers, and those with slow connections who must wait for images to download.

Do Use Title Tags to Describe Links
Title tags provide additional information to links and can be useful, particularly to visually impaired users with talking browsers.

But you can't RELY on the information in title tags to explain links, as users may not expect or notice the title tag info. Use clear, informative language in the menus (to borrow an example from Steve Krug, don't say "Joborama" or "Employment Opportunities" when "Jobs" will do).

Do Orientate Users on Each Page
Make sure the relevant menu item is highlighted for each page of the site (remember, a user can enter your site at any point).

For large, complex sites, use breadcrumb trails to give users a "You Are Here" message, and a quick means to navigate to parent directories.

For smaller, simpler sites, provide a sitemap and make it accessible from each page.

Do Ensure Navigation is Consistent throughout Site
Don't switch menu options or styles, or other navigation elements (e.g. breadcrumb trail), on various pages or sections of the site.

About the Author
MICHAEL HERAGHTY is an internet consultant and writer. He has worked in Dublin, Edinburgh, Hollywood and New York, delivering ahead-of-the-curve solutions to Vision Consulting clients such as Halifax Bank and Warner Music Group.
Phone: +353 91 704850
Mobile: +353 87 9279444
Weblog: (www.mediajunk.com)