The Top 2 Website Navigation Systems
Making a website easy to navigate is one of the most important things you can do as a web designer – if a website is not easy to navigate, people will quickly leave.
Over the years, every type navigational layout (system) has been attempted, and now we know the 2 best ways to create navigation for websites:
- Left aligned ‘master’ navigation menu using CSS buttons or links. And ‘breadcrumbs’ navigation running across the top of the page.
- A close 2nd would be to have the ‘master’ navigation float on the right. But since book layouts (table of contents) are left aligned, left aligned is best for navigation.
Why CSS based links or buttons?
In a nutshell: CSS buttons are quick to build and update. In the old-days, people used images and image-swapping techniques (using JavaScript,) to create buttons and button roll-over affects. This is something you want to replace with CSS based techniques because:
- JavaScript is not available in about 10% of the browsers
- JavaScript roll-overs can cause problems for people with disabilities – thanks Kyle for that point.
- Menu changes are very time consuming because to make a change, you will have to create new images and update the controlling JavaScript.
What are breadcrumbs?
Example:
home > articles > web design > css
As you can see, breadcrumbs are a list of links that tell the user where they are in the website. In other words, they tell users how ‘deep’ they are within the site – it’s a hierarchical view of the website.
Breadcrumbs make it that much easier for people to navigate a website, and to quickly see what else they can find within the site.
October 17th, 2005 at 6:01 pm
I always (at least since I read about it) thought that breadcrumbs aren’t used that much, but people just hit their browsers back button when needed…Should I alter this thought ?
October 17th, 2005 at 7:23 pm
I’m new to web design and hope to join the deep talk sometime in the future. For now, to answer Ericks question – “Erick Schluter Says:
October 17th, 2005 at 6:01 pm
I always (at least since I read about it) thought that breadcrumbs aren’t used that much, but people just hit their browsers back button when needed…Should I alter this thought ?”
I CONSTANTLY use search engines (30-40 sites per day) and you ALLWAYS land in the middle or deep end of a site. By what you guys call “breadcrums” is the ONLY way I navigate in those sites. For what it’s worth form a browser point of view.
October 17th, 2005 at 8:37 pm
I use the “breadcrumb” trails occasionally if they are available. Sometimes when I search for a site, I get the wrong thing. But if breadcrumbs are visible, that might direct me to something else that I really do want.
In fact, just today, I went to an old microsoft calendar template site, for 2005 calendars. I would have thought my template of choice wasn’t available for 2006, as I had no idea how to find it. I didn’t have time to search, but the breadcrumbs took me right to calendars, which took me to a page where 2006 was readily available.
In this day of overuse of meta tags so search engines take me right to some exact spot (or to a home page with no clue how to find what i need), breadcrumbs are a nice handy shortcut way to get around. Especially for those of us savvy users and developers – our numbers are growing every day.
That reminds me, I suppose I should develop them for my own site!
Susan
October 18th, 2005 at 3:45 am
@ Erick – it is less a question of IF people use breadcrumbs, it is more a question of offering the user a CHOICE.
Even if they choose not to use it, they have that choice to make. It is user friendly to allow the user a choice and breadcrumbs can be a “Hair saver” to those with some forms of disabilities trying to navagate big sites.
@ the rest of you – Stef missed the difficulty in making a JavaScript Rollover work for a keyboard user,so Iwilltack this on here.
Some people do choose to use the keyboard to navagate and others must use it do to disabilities. If the rollover does not work when they tab throught the buttons, you will usually only see a thin dashed line outline it and that can be easily overlooked, especialls by those with poorer vision. then they have no idea where they are in your navigation.
With CSS this can be easily done by copying your :hover styles and renaming them as :focus. However this does not work in IE6 and below so a hack is required (this is covered in the KillerSites forum). So for this reason CSS is prefferable to JavaScript as well.
Good post Sef.
October 18th, 2005 at 4:36 am
Well, I am a graphic/ web designer from India. I have been receiving your letters quiet often, but I did’nt get the oppurtunity to write to you and today I had it and I grabed it.
Well my site site siddharthadesigns is under construction and is being designed and developed by me. Well I don’t use much of css, yes I know because it seems too monotonous, yeah I am cynical as you moght think or a bafoon. But I am looking for some of the intresting techniques, and please do let me know or in what way you can guide me.
Well I will let you know when my site is getting launched and is completly on designs, abstract paintings, banners, presentations and many more are in the pipe line.
Please do give some tips
bye,
siddhartha
October 18th, 2005 at 8:46 am
@Kyle,
Thanks for the point about JavaScript roll-overs and people with disabilities.
I updated the article with that point.
October 18th, 2005 at 11:24 am
Stefan, good topic!
I have been receiving your newsletters for a while now and have been following much of your work. I must say, good job all ’round!
I have been called upon recently to pick up where someone else left off on a website and the person used a javascript rollover navigation. Echoing what you and others mentioned in your posts, this method/choice for navigation is just not practical because I think it takes away the element of flexibilty, which I think is important undertaking any web project.
Whenever one sits down with a client to discuss a new web project, one of the most imporant things I think he/she needs to get a sense of, is how much will the website grow/change in the furture? How will the client’s goals today change down the line and who will be making those changes be reflected on the website then?
Once this question is asked, there is no way (that I can see) a web designer not choosing to make the navigation bar flexible i.e. using css or a simple old fashioned list, just NOT images! Accessibility is also an extremely important point, and others did point this out.
Cheers,
Kerean
October 18th, 2005 at 3:26 pm
I use breadcrumbs on my site and a few customer sites for a few reasons. As mentioned above, users jump in from other sites’ links and giving this indication of the site hierarchy can be very useful. I also use it to show a site hierarchy that has additional, non-hierarchical links. You may be in home > products > widgets one minute but click a link that takes you to home > technical > doodads the next. Why not show off the section you have jumped to?
October 19th, 2005 at 7:18 am
Cheers Stef!
October 21st, 2005 at 2:52 pm
Hi
I dont think that you have explained “breadcrumbs” very well and especially to those that dont have a clue what you are talking about.
Break everything down as the novice probably has never heard of “breadcrumbs”, let alone know what they are!!! Dont assume that you are reaching the knowledgeable!
October 25th, 2005 at 7:22 am
Ok, try this:
Breadcrumbs come from Hansel & Gretel, the fairy tale. Lost in the woods they used breadcrumbs to mark where they had been so they could find their way out of the woods.
For the web, you sometimes have different levels in a site. Say we have a German school web site, we have a main menu, one link is students. Click that and you got years, click a year and you got a class, under class yu had a class photo or a teacher photo.
This can get confusing. So breadcrumbs are used to help you know where you are:
Home > Students > 1982 > 7b > class photo = we are on the class photo of the 7th grade b class of 1982. I am on the 5th level of the site for this subject.
Home > Students > 1982 > 7b > teacher = we see the teacher for the 7b.
Now I do not see the child I want, but I know they were in the 7th grade, so I need simply click on 1982 and from their click 7A. Not there? Maybe it was a year later, click on the Students and have the list of years and click 1983 > 7b > class photo.
The breadcrumb path shows you used tovget to the classphoto of the 7b. All ae links so you know where you are and you can backtrack and chose a new path at any point without having to go back home and start again or trying to back button your way through. It is a navagational aid to the user and very handy for those with disabilities.
March 7th, 2007 at 12:25 pm
[quote]I CONSTANTLY use search engines (30-40 sites per day) and you ALLWAYS land in the middle or deep end of a site. By what you guys call “breadcrums” is the ONLY way I navigate in those sites. For what it’s worth form a browser point of view.[/quote]
But shouldn’t each page of website be considered a ‘entry page’ because of this? So when you need a breadcrumb this isn’t the case and the website just isn’t well done. Personally I always press the logo to go to the startpage or remove everthing behind the ‘naked’ URL so I will go to the index.html page. But that’s me…
The choice to use them should be there, I agree!
So the next big project I’ll be handling I will think of the breadcrumbs again.