Page Design Question

Why do many sites have nav bar links duplicated?

[Liane]

I have noticed recently that many sites have a traditional nav bar and then have the exact same links across the bottom or top of the page. What purpose/advantage does this serve and why do they do it?

[backus]

I think it's a case of lack of vision...

[DaveN]

Hi liane,
We tend to design e-commerce sites which have the navbar (usually graphical) along the top of the page we always put small text link at the end of each page (usually just a footer.inc) for two reasons

Firstly search engines keyword product text to link product page

Secondly we found that we had much more stickiness in the site, if we had a long page people tended to leave the site but by putting departments and search feature they had a second bite of the cherry so to speak.

DaveN

[eeblet]

> I think it's a case of lack of vision..

on the part of the user or designer? ;)

(edited by: tedster at 4:01 pm (utc) on Mar. 13, 2002)

[Xoc]

Actually, there is one good reason for doing it: people with disabilities. If you have graphic links on the page, having text links at the bottom helps people with disabilities use a screen reader. Also remember that a web spider is blind.

[eeblet]

Can screen readers read alt tags? I know that text-based browsers can, in which case graphic nav is no problem.

[backus]

>>>>spiders are blind...

as I said, lack of vision ;)

[tedster]

Given how some optimizer's stuff their alt attributes, this can still be a problem.

As I understand it, the best place to put precise link info for a graphic link is the title attribute of the anchor tag. The img tag's alt attribute "should" describe the image itself, and the anchor tag's title attribute should describe the link's destination.

[john316]

One of the worst things that a visitor can experience on a site is a sense of being "lost". Common navigation elements throughout the site prevents this. Presenting the navigation in a few different ways (top and bottom, graphics and text links, etc.) can give a sense of comfort to a wider audience. Some folks look at buttons, some look at text...I give em both.

[gcross]

This technique is not limited to screen readers. I've learned for numerous tutorials and award evaluation sites that those using graphical links MUST also offer textual links. This is because there are many visitors still using older browsers and visitors who surf with their images off or javascript off, in order to speed up loading or to evaluate layout and content. Also, it just makes good sense, especially on a long page, to have navigation at both the top and the bottom of the page, especially if you don't use DHTML to keep the navigation floating on the visible screen space. Then, too, DHTML may be disabled by those same visitors and textual links become equally important. Always a good idea to err on the side of caution. After all, we are trying to make our websites accessible to ALL visitors, not just those with disabilities. Otherwise it could be viewed as discrimination of a different kind. Just MHO:)

[papabaer]

We come once again to the topic of "wasted bandwidth," on one hand the designer feels the need for graphical links and then, so that spiders and accessibility issues are addressed, adds text links as well. Guess which type really matters...

Earlier today I assessed a site that employed extensive graphical links and then offered a huge DHTML menu as an alternative. All of the javascript was embedded - the view source scrolled four complete screens on my 21" 1600x1200 res monitor before I actually got to any body content. All this and still not a single link that considered accessibility or spidering.

The page weighed in at over 128 kb with a content to code ratio that reveals 16% text and 84% code.

Extreme lack of vision...

and a great example of how NOT to build a menu - twice!

[martinibuster]

I agree with the keyword reason. It's a great opportunity to use a keyword to link into one of the inner pages. You know, a link that says "Blue Widgets" that goes to your blue widgets page.

I just did a search for the word "welcome" in FAST, to see how they would filter out the millions of sites that put that word in their title tag ("Welcome to PossumRecipes.com").

The number one result had the word in the title tag, a million times in the body text, and as the name of the directory where he stored a dozen gifs that linked INTO his site.

The number two result was number two because he had a bucketload of dmoz based directories linking TO his site, with the words, "Welcome to Spindys." (You can verify this by searching like this: link:yoursite.com)

I've done other searches on Google where the sole reason some sites are at the top is because the keyword exists on the inbound links (from other sites) pointing TO that site (You can verify this by checking Google's cache).

To reiterate, apart accesibility reasons and for helping spiders crawl your site, the footer links present a marvelous opportunity to boost your search engine relevancy. I'll be happy if someone would correct me if I'm wrong.

And also to help those spiders crawl your site.

[rewboss]

Redundancy is not a bad thing. Think of all the various different ways you have available to you to, say, select bold text in a word processor -- you can access the option through the menus or the toolbar, using either the mouse or the keyboard, or you can use a keyboard shortcut. Different people have different preferences.

You might not want to put that amount of redundancy into a web page (although it is theoretically possible), but anything that helps your visitors (as long as it doesn't add too much to bandwidth) is good.

Graphical buttons for primary navigation are eye-candy, but for many sites appropriate, even desireable. Text links at the bottom of the page have the following advantages:

* Guaranteed to work as expected in text-only browsers.
* Guaranteed to be visible in browsers with images turned off (visual browsers often cut off part of the alt texts if they don't fit).
* No scrolling back to top of page to find navigation (making link to "top of page" largely unnecessary).

[Thors Hammer]

"One of the worst things that a visitor can experience on a site is a sense of being "lost". Common navigation elements throughout the site prevents this. Presenting the navigation in a few different ways (top and bottom, graphics and text links, etc.) can give a sense of comfort to a wider audience. Some folks look at buttons, some look at text...I give em both."

I think you hit one of the nails square on the head... The 'audiance' we present to, isnt as 'internet' savy as we would like them to be, but this too is getting better with time.....

"Redundancy is not a bad thing."

I agree.... :) and I dont think that the text links add that much to the overall size of the site, that it sucks up so much more bandwidth that it would be a concern......

Thor

[deejay]

I do it for two reasons:

1 another place to drop some keywords

2 if a user has to move their mouse up to scroll back up the page to navigate, it puts their mouse closer to all those dirty little menu options.. 'back' 'favorites' etc. :)

People really are incredibly lazy.. if you give them something to click an inch away from their mouse, a good number of them will do that rather than move their mouse 6 inches.

[rjohara]

Just to play devil's advocate for a moment...

While I agree with many of the things people have just said in this thread, there's another way to look at the redundancy issue also: do the users see the two sets of links as two copies of the same thing, or as two different things (that they have to learn)? I spend a lot of time on university websites, and many of them are among the most poorly designed sites you can find. A common task: looking up someone's email address. I go to the university page, and what do I see? A column of graphic links along the left, another row of graphic links across the top, and a row of text links at the bottom. Hmm, what do I pick? The "search" link at the top? The "contact" link at the left? The "index" link at the bottom? Maybe the one named "sitemap"? Or maybe the one named "directory"? (Is that the same as sitemap, or is it a phone directory, or a list of offices?)

Clearly what I'm describing is just bad design overall, but (speaking as one user), when I see a row of graphic links at the top and a row of text links at the botttom, and half the time *they don't match*, it makes me want to scream. Whenever I need to find info from a university site, I very often don't bother try from the site itself but just go straight to Google and search for "person site:bigstate.edu". If someone has to leave your site to find something on your site, that is a bad sign.

I know it seems like I ranted off topic, but those semi-duplicate, partially-matching text links on the same screen and in a different arrangement from the graphics links are one of the most egregious design flaws on hundreds of .edu's. </rant>) Bottom line: if you create duplicate sets of links, make them *identical* in wording, sequence, positioning, etc., for the well-being of your users.

[tbear]

I get really impatient when I get to the bottom of a page 'and I'm interested' but I have to scroll to the top of the page for the links, so in my pages I try to give a selection of links there where the page ends. Makes a lot of sense to me.
I can carry on to the next page without messing around scrolling. :)
Basics is basics. Too many ups and downs makes me dizzy LOL

[Purple Martin]

Slightly OT.

WW has a great feature you might not have spotted yet: if a link you want to use regularly isn't at either the top or the bottom of the WW page, you can put it there yourself. Go to "Control Panel" (the link is at the top of the page), go to Edit System Prefs, and you can add your own HTML to the top and/or bottom of the page. For example, I've added a "Jump to last post" link to the top.

[SmallTime]

rjohara, you make an important point; keep it simple if at all possible, and consistent. In a "too much information" age, too many choices can be a problem also. A top nav may need a bottom nav, but some sites seem to have top, side, bottom, a few drop down boxes, and text links - I get stuck in indecision, one wonders how an inexperienced user would react.

[keyplyr]

I designed my website with the "book" model. An overall theme, chapters and pages. At the bottom of each page are three links:

< last page
^ to the top
> next page

people already know this type of navigation and I doubt anyone gets "lost"

[rewboss]

I can see confusion arising with your labelling of "last page" -- that has two entirely different meanings. A better label would be "previous page".

That kind of navigation is only sometimes appropriate. It might be easier for you, as a programmer, to have links labelled "next" and "previous", but those are extremely vague. Think about people who have been dumped in the middle of your site from a SE enquiry: how do they know what's "next" and what's "previous"? What's worse is when people use the history.back() method for the "previous" button -- that takes you to the last page you viewed, which might not be the previous page on the site: it might be the search engine.

Also, in forcing users to go one step back or one step forwards, you are forcing them into a behaviour that is untypical even for most printed media. When you read a newspaper or a mail-order catalogue, you don't start at page 1 and work your way systematically through. You look to see what interests you and read that. Linear navigation is appropriate for tutorials, for example. You'd also use it for works of fiction -- but the WWW is not the ideal place for publishing novels, as good old-fashioned books are still much easier to read.

[keyplyr]

rewboss

> A better label would be "previous page".

Actually, they are image icons with alts named back, top and next.

> ...forcing users to go one step back or one step forwards...

Users are not "forced" to use these for navigation since there are numerous text links and drop-downs systematically positioned throughout the website, as well as a site map and site search on each of 120 pages.

> When you read a newspaper or a mail-order catalogue...

I said "book" model

> You look to see what interests you and read that

the site is divided in three main sections (chapters) which are extremely well organized and easily navigated.

[rewboss]

Well, I can't tell how well organized your site is. :) As I implied, this kind of navigational structure may be appropriate in some cases -- I don't know if yours is such a site. I'm working on one myself, but I'm making sure you can jump to whichever page you like fairly easily. Even so, at 40 pages and counting, it's possibly stretching this technique beyond the limit.

However... "back" is another bad label for a link. "Back" and "previous" do not mean the same thing in web navigation: "back" means "to the page you were viewing before this", and that might not be the same as "to the previous page in this particular sequence".

This may sound picky, but think what you are doing: there is already a "Back" button on everyone's toolbar, and now you're giving them a "Back" link that actually performs a different function.