Podcast 38: Navigational Approaches
Posted in Podcast on: Monday, June 12, 2006 by Paul Boag
In this 38th episode of boagworld.com Paul and Marcus take a detailed look at the different types of navigation that can be used on a website. From the humble body link to the most complex site map, this episode tackles how to get the most from your sites navigation.
Podcast: Play in new window | Download (25.5MB)
Help us out. Complete our podcast survey
Website navigation is a huge subject and really far too much to fit into a single podcast. However, despite the obviously foolishness of the endeavour we did our best to cover as much ground as possible.
We looked at the following types of navigation:
Main navigation
Because this is by far the most talked about form of navigation we didn’t dwell on this area for too long except to share a few words of advice learnt through bitter experience:
- Allow room for expansion
- Use JavaScript with extreme caution
- Keep it simple
- Avoid using graphics for navigation where possible
- Don’t try and be clever!
- Consider the depth of your information architecture
- Keep titles short, descriptive and intuitive
- Don’t have too many links on any one page
Breadcrumbs
We spent more time on this form of navigation, reflecting on the results of some recent research into how people perceive breadcrumbs. In particular we discussed the position of breadcrumbs and how you explained the concept to end users.
Related Links
We discussed the benefits of adding related links into the interface of your site and how to organise them into useful categories. We also discussed how to link to external websites.
Site maps
We explain why site maps are important before expanding on the points covered in my previous post on creating a good sitemap.
Body links
Finally we discuss the much ignored body link as previously covered in my post “the humble hypertext link“.
Also in this show…
This week Paul and Marcus also cover navigational terminology (siblings, parents, children) and discuss the upcoming @media conference. Finally Paul shares an excellent new Firefox extension he has discovered that allows you to better view the source of HTML pages you are viewing.
12 Comments
Comments are for the discussion of this post. If you have other questions / comments then post them to the forum or send me an email
I really do not understand why so many Web designers remove the link underlines! Why!? Whyyy!?
sweet podCast guys – and number 38! how did I miss all the others!! I had to fight with our CSD department to get us to include link underlines – had to make do with them just on rollover :<
I am off to @media too so hopefully see you there Paul, I think we have met before at the geekDinner you came to and in my opinion gave a cool talk at.
Sound quality was excellent! Big improvement.
With regards to removing underlines, I have to say I have been guilty of this in the past. It sometimes looks so cluttered with all the links being underlined in the body text that is sometimes tempting to remove the underline style. I used to bombard my body text with loads of links as this would help with google rankings and then remove the styles of the links so that they didn’t look like links any more. Now I feel this is being a little dodgy and could be the kind of thing that would get you blocked from Google. I certainly wouldn’t do it these days and do frown upon it, but I am not quite as passionately against it as Paul was in the podcast.
Coldfusion has to be a great thing: there is a Coldfusion Podcast. Anything with a podcast is cool. :)
Good points, quick question would it be possible in your podcast notes to have the time in the podcast where that discussion is? Just a thought.
That “view source chart” is very good, I normally use “fire bug” (another firefox extension) for DOM reference in developing but that one you suggested looks much more friendly to read.
However, the benefit “Fire bug” has over “view source chart” is that you can select the element in “fire bug” and it will highlight the element in the web page for you.
Here’s another reason to use javascript if you want to open new windows for an external link. The link attribute ‘target’ has been depreciated. So ‘target=”_blank”‘ doesn’t validate as XHTML strict.
The time-stamp idea is an excellent one Aussie but I just don’t have time to do it. Boagworld is taking more time than I have as it is! Maybe somebody will volunteer to do that for me :)
Paul,
Time, I know, is our most precious resource and you pod cast is very helpful, so I’m more than happy to help out if you would like. I could probably send an email with the times on it, or if you have another suggestion on how I can supply them please let me know?
First, I like your Microformat.
I make small business sites (usually less than 20 pages in all) for businesses in my very small rural town. Do sites that are only 8-10 pages long with light content require a sitemap or search feature in your opinion? I generally leave them out unless there’s medium to heavy content, or online inventory.
On the subject of changing the styling of the underline, I totally agree with the points about keeping a link looking like a link.
Using a dotted line may also be confused with abreviations/acronyms ( etc) which the standard at the moment seems to be dotted underline and question mark cursor.
Enjoy your holiday Paul!
I also agree–don’t mess with link underlines! On breadcrumbs, I think they’re very useful for larger sites. The “View Source Chart” FF extension is great (although it’s trick copying from it since it opens/closes sections when you click on it).
I wanna download this! Where is it :’(
Thanks btw for a WONDERFULL show.