November 24, 2003 | View Comments (15) | Category: Information Architecture
Summary: The importance of navigation on your site.
When I drive there is nothing more aggravating than having someone tell me all of the things they believe I am doing wrong or even worse telling me where to go without me asking them for directions. Websites do this to me a lot when it comes to navigation. Since every website I have come across cannot read my mind as to where I want to go next, navigation becomes a crucial part of your website. However, it should not be so crucial that it gets in the way of everything else.
This occurred to me when I was looking at Adaptive Path. While browsing the website I realized I was doing so effortlessly finding all of the information I wanted without hassle. No doubt this has something to do with me being a web surfing expert, but it also has to do with the navigation scheme. It simply does not get in the way of the content and allows the content to shine on the page. Navigation should only appear when the user wants to use it. The user goes to the website to retrieve information, not to see how long it will take him to find the "services" page.
Smaller sites do not usually have this problem because there really is not that many pages to navigate between. However, the larger the site becomes, the more critical navigation becomes and many large sites fail miserably at providing an effective navigation scheme. The best example (or worst) that I have of this is my school's website. There used to be a lot of information that I wanted to look up on their site, but trying to use their navigation scheme never got me where I wanted to go. If you want to give it a try see how long it takes you to find the hours for the campus recreation center. I know the search is available, but I am not the search kind of guy and the results are usually not what I want. Now it has gotten to the point where the only thing I do on the website is check my schedule, grades, and financial aid. As more and more of our learning occurs online I would think that our schools would put a little more effort into making the educational experience as effective as possible.
As designers you need to take it upon yourself to gain a basic understanding of information architecture. I know there is a field of professionals that handle this, but on small-medium sites there usually is not a budget for such professionals. You do not need to become an expert in the field, but to have some knowledge of the basic rules and guidelines could prove invaluable for your design skills. What you probably do not realize is that no matter what sites you are designing, once you put navigation on them you are involving yourself in the information architecture. I recommend Information Architecture: Blueprints for the Web, by Christina Wodtke. It is an excellent, smooth read for all designers.
You can have a minimal design. You can have an aesthetically pleasing site. However, if your site has a poorly implemented navigation scheme then users will not come back to your site. Even if you have great content on the site, the horrible navigation scheme might be enough to keep users away. So start becoming conscious of how you allow users to move around your site. I like to tell programmers about refactoring their code. This is the process of making it more efficient. Designers should do the same with their navigation. Always go around thinking of how you can help the users get from point A to point K faster and more efficiently. No longer should we be content being designers who only focus on how the site looks. But we must become critical on how well the site works and navigation plays a huge part in that.
Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/61
http://www.boxesandarrows.com/
http://www.eleganthack.com/blog/
http://www.website-analyst.co.il/lucdesk/lucdesk.html
http://www.iaslash.org/
Those are some good IA sites that I frequent. Boxes and arrows being the most enjoyable of the bunch.
Scrivs (http://www.9rules.com/whitespace/)
My Navigation Dos and Don'ts:
Don’t Use Frames
Frames are bad for all sorts of reasons. Seems like common knowledge now, but many frames sites still emerging.
Don’t use images as menus.
Makes page slower to load. Images don’t read properly in a talking browser. Text is crisper – and nice designs/rollovers can be achieved with CSS now anyway.
Don’t Use Pulldown Menus
Information should be seen at a glance.
Don’t Use Pop-Out Menus
Depending on where the user leaves the cursor after clicking, another menu might pop up, possibly covering part of the page the user wanted. Not compatible with talking browsers, text-only browsers.
Don’t Use Logo as Homepage Link
Users won’t know this is a link – unless you make it explicit (e.g. Logo with “home” underneath).
Do ensure menu option hit area is sufficiently large.
Makes it easier for user to navigate into menus. Can be done using CSS. And we’ve all had to use a dodgy mouse at one stage or another … probably a large group of users!
Do Use Alt tags
To describe images
Benefits users of talking browsers and text-only browsers, and those waiting for image to download.
Do Use Title Tags
Provides additional information and can be useful – BUT don’t rely on the information in title tags. Users generally don’t expect title tag information, so inform users at the start of the document/site that title tags are used.
Do Use Breadcrumb Trails
Particularly useful on sites where there is a lot of content.
Do Provide Consistent Navigation
Don’t change menu options or style or other navigation elements (e.g. breadcrumb trail) from one page to the next.
Michael Heraghty (http://www.michaelheraghty.com/web-design.html)
I agree with michael on most points. Two however need qualification.
Don’t Use Logo as Homepage Link
Users won’t know this is a link – unless you make it explicit (e.g. Logo with “home” underneath).
That's simply not the case. Having a logo as the homepage link is so common that users get upset when it *isn't* a homepage link. Of course, it shouldn't be the *only* homepage link, but that goes for any sort of graphical navigation.
As for the frames, I'll agree in *most* circumstances frames are bad. However, there are specific instances where frames are incredibly useful. Mostly in web based applications and things which generate multipage reports. And of course any time you need to display content from a third party provider (say, tcalc calculators) and don't want to pay the extra fee to have them customize a page for you.
Most of the prejudice against frames simply no longer applies and hasn't for years. There aren't any modern browsers that can't handle frames; things like lynx and voice browsers aside (IIRC they handle frames by giving links to the different URLs in the frameset). They can be bookmarked, though it's not easy (right click on the frame you want and bookmark that) and they can be printed either as the whole page or as an individual frame.
JC (http://www.thelionsweb.com/weblog)
Universities often have hundreds (if not over a thousand) pages in their sites. This frequently cannot be managed in a two level navigation structure. It is no surprise to me that your alma mater has a hard-to-navigate site...mine does too and so does almost everyone else's.
Having worked on maintaining a school site with over a thousand pages, about all I can say about the matter is that figuring out a navagation structure for sites that large is really, really difficult.
Nor is it a surprise to me that the examples listed as having good navagation are not very large sites. They are much easier to organize.
(Oh, and by the way, on Opera7/Win the margin on the left hand side of this site is about 2px even though it is much larger on IE and NN7.)
wink (http://site-unseen.net/wink)
Well does anyone have some techniques that they would use to improve the architecture of large sites such as university sites? Some sort of card sorting maybe, or are these sites simply too large to maintain. I think it is possible, the key is to get a better sense of categories and divisions.
Scrivs (http://www.9rules.com/whitespace/)
Hi JC,
I would have agreed with you that "Having a logo as the homepage link is so common that users get upset when it *isn't* a homepage link," -- until I read this article by Carolyn Snyder:
http://www-106.ibm.com/developerworks/library/us-tricks/?dwzone=usability
Her research clearly shows that "ordinary" users *don't* know the homepage is a link.
But your comment has made me realise that I shouldn't have said simply "don't use the logo as a homepage link". Perhaps I should have said, don't *rely* on the logo is the only homepage link (or, if you do, make it clear that it links to homepage, by putting the word "home" there, as Carolyn suggests).
Michael Heraghty (http://www.michaelheraghty.com/usability.html)
Well, I do not know if this will work for huge web sites, but you can try personas (http://www.cooper.com) from Alan Cooper (the guy behind VB).
I also learned to use web design patterns in a Human Computer Interaction course. Design patterns in Software Engineering encompasses concepts and techniques that were proven to work. It tries to pick up on Alexander's patterns in architecture. To read more on web design patterns, you can check http://www.welie.com The author also has written some research papers pertaining to the use of user interface design patterns.
Scrivs mentioned card sorting. MIT Libraries did an experiment http://macfadden.mit.edu:9500/webgroup/cards/instructions.html
A recurring theme is to really understand your target audience. Still, large web sites hold a lot of pages, so navigation alone might not be enough. In my personal experience, I abuse the search feature. If there is no search, I look for a site map or a site index.
Zelnox
I agree that you shouldn't rely on the logo being a link to the homepage, but I myself have gotten so use to it being a quick link back that I myself have to make it so on websites that I create.
I guess the larger the site, the more important a search feature becomes and unfortunately search on most sites reallys suck. Sitemaps are definitely another consideration.
Scrivs (http://www.9rules.com/whitespace/)
michaels nav dos and don'ts...
frames: frames are still very useful for RPCs and a couple of other uses, but for navigation, rarely.
images in menus: there are times when this is the correct option. But should probably be used in conjunction with an image replacement method. But often a mix of image and text is best.
pulldown menus: do you mean like select boxes? Would have to agree there, except possibly where you might be using the select as a sort of sort by menu...
pop-out menus: I HATE these... but they can be made totally compatible with screenreaders and non-js clients... using nested lists and modern dom js
logo link: your later comment cleared this one up, just before I started to rant. But remember you are making a site for experienced users who might expect such a link as well as novice users...
hit areas, alt and title tags, and of course persistant nav: sad that these even need to be mentioned
breadcrumbs: the vote is still out on these, some research says that they just are not used. But I don't see how they could hurt...
scottbp (http://www.positionrelative.com)
"I guess the larger the site, the more important a search feature becomes and unfortunately search on most sites reallys suck. Sitemaps are definitely another consideration."
the larger a site is, the more useless a sitemap is, because it's just too big.
larger sites often allow you to choose a category to search within, that helps a great deal...but it can still be hard.. IBM for example. They're so big it can be hard to find anything beyond the most obvious stuff.
to really be effective on a big site, a sitemap needs to be either on a per-section basis or work like a mindmap. And even then I question their usefulness most of the time.
it's a pity the google search appliance is so expensive, it might help. But on the other hand, since much of google's power comes from knowing what links to what, whihc your intranet or google search appliance wouldn't have access to... it's not so good as one might wish.
One side note, I started using Atomz for a site's search. works out OK. One sticky point is when people search "employment" our actual employment page is like #8 on the list because it only uses that word once while some of our pages outlining direct deposit and financial advice mention it more often. But it still works quite well, and is free for sites under 500 pages (we squeeked in at 400 after I filtered out some of the stuff it didnt need to index IIRC). And it's cool that it shows reports of what people search for. We get a few hundred searches a week now.. I wonder whatall those people did before we put it in?
I mentioned the possibility of redoing the homepage a bit to include some of the stuff people were constantly searching for. You'd think I'd asked them to swallow a damp rotting rat
Anyway, one of the main problems with a sitemap is it has to be maintained. Unless you have some software package that can do it on the fly (best we have is a desktop client that doesnt do a very good job), you'll have to update the sitemap with every change to the website, which can get to be a real pain. Search engines, on the other hand, index nightly or weekly or whatever, without human intervention.
JC (http://www.thelionsweb.com/weblog)
Thanks for the feedback guys. I've posted an updated version of my do's and don'ts, incorporating some of your suggestions, at http://www.mediajunk.com/public/
Michael Heraghty (http://www.michaelheraghty.com/usability.html)
As a new MovableType user, I'm a bit boggled at the way MT's main administration menu is a table of images with the text included in the image. How 1996! The first thing I did was replace that template with one that was smaller, simpler and easily 5 times faster to reload. I can't understand the mental processes of people who would deliberately slow down their software like that... weird.
Eric TF Bat
I never thought about revamping the MT admin interface. Very interesting. I could definitely see how it would be quicker without the images in the navigation.
Scrivs (http://www.9rules.com/whitespace/)
Keep track of comments to all entries with the Comments Feed
©2003-06 9rules, Inc. | Thoughts Feed | Notes Feed
Amazon Stores: Powertools | Jewelry | Books | Health | Landscaping | Kitchen | Movies
#1
Does anyone know of some deeply complicated sites that exhibit a good navigation structure?
Scrivs (http://www.9rules.com/whitespace/)