My list of Dos and Don’ts for Website Navigation over at 9rules.com got some good feedback.
Taking that feedback into account, here’s a slightly modified version of the list (I may turn this into a more explanatory article in the near future):
5 Dos and 5 Don’ts for Website Navigation
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.
Comments
5 comments
I still say you need to qualify the frames issue. Frames are often the very best possible way to handle web based applications and reporting tools. They don't rely on excellent CSS support or javascript being turned on like other ways to keep navigation in place while scrolling through a long page.
Obviously, designing a regular website in them isn't the best way to go... but for reporting tools and web applications they are extremely useful.
Re: hit area... amen. Would someone please ram that down the throats of people who try doing flash websites and don't know to edit the last box in the button object to provide the hit area? Flash is worse than HTML because when you mouse over an HTML link, fine, you can click; but in flash, the tip of your mouse pointer has to be over the actual text.. not the whitespace between parts of the text, but the line itself.
All in all, good suggestions.
JC,
I agree that "Frames are often the very best possible way to handle web based applications" if you're talking about this from an implementation/build point of view.
But from a user perspective, I still think frames are to be avoided. You don't have to resort to javascript or even CSS if you don't want to -- just use tables instead of frames.
Here are some of my own gripes about frames in relation to navigation:
- The back/forward buttons behave differently with framed pages than they do in regular (standalone) web pages (i.e. the user starts to scroll backwards and forwards through individual frames, rather than through entire pages). This can be confusing and/or annoying for users.
- The URL of the overall page becomes meaningless. Users can't bookmark or otherwise rely on the URL.
- Frames break the notion of "place" within a site. One of the main principles (IMO) of navigation is that the user should always know where/he she is in the site, (or be able to find out immediately).
This becomes extremely difficult with frames. Since framed pages consist of separate web pages joined together, a user in a framed page is actually in two or more "places" at once.
I will concede that, if a highly skilled web designer can create a frames site that specifically aims to tackle these navigational problems (I can think of one or two workarounds), then frames may be acceptable.
However, the vast majority of frame-based sites simply employ frames without thought for the user's navigational needs.
Thanks for making me tease out these issues JC!
No... frames are best from a user perspective, too, in any application where frames *should* be used, such as the ones I noted. Not in a normal company or personal webpage, but in a web based application or reporting tool, the sort of thing usually found on a company intranet.
Say I have an application which creates a sizeable number of interrelated reports. A given user may need to access them in any order, and may only need the data from a specific part of a given page. It's impractical to put navigation throughout the page, interrupting the report (which may need to be printed as well), and each report is something like 10-30 printed pages. Having a frameset lets them switch reports easily in the middle of their activities.
Here's an example from a site I host. Funnelweb lets me generate a report that doesn't use frames, and it's an utter PITA to work with. (also can do PDFs and RTFs and I don't recall what else offhand, which are nice if you need printed reports)
http://library.icecastle.org/rpt/
As for web based software, you must remember that in a web application, users have no reason to bookmark subpages, but should only come in through the entrance that contains the login prompt. Back and forward are rarely if ever used (and btw, I think your argument there is a little weak. On most browsers, the back and forward button affects only the most recent frame to change; visually, how is this any different from an identical page done without frames? the content moves one page back or forward, the navigation is identical from page to page. All it means is they don't wait for the nav to load again)
Regarding the notion of place and bookmarking and so on if one happens to be doing this in an application where bookmarking is acceptable (or simply wrapping another site's content in your own) it's possible to do some things with javascript to attach a query string to the URL to be bookmarked. Had to do it once when we were wrapping another company's content with our own because they hadn't developed a templated version yet but instead just gave us their source code on CD. It was a pain, but it worked. But that's not something I'd wish on anyone. Well, maybe a few people. But that's just me being vindictive.
>>As for web based software, you must remember that in a web application,
users have no reason to bookmark subpages, but should only come in
through the entrance that contains the login prompt.
Oh, I think we're in complete agreement, as long as there's a provision in there for web based apps and reporting tools. Normal websites don't usually need frames if they're well thought out. And using frames usually means they're not. There are exceptions, of course.
The only informational website I can think of that uses frames well (I think anyway) is the MSDN. If you go to a page without the frameset, it'll reload the frameset around the page you're wanting; and I think it also updates the URL string as you move around in it so bookmarks work properly. Could be wrong about that though, as I don't use it much.