Top Menu Vs Side Menu

[Steven1976a]

What are peoples views on menu bars. I always believed that products would go down the left menu bar and information, contact, about us etc.... would be in the top and bottom menu bars.

A friend in the UK who runs a silver mail order company have been advised the opposite after running usabiltiy tests.

What are your views?

[davebarnes]

Real data (from the USA) is at http://psychology.wichita.edu/surl/usabilitynews/3W/web_object.htm

Personally, at this point, I think top or left is OK. I tell graphic designers working for my clients that they can chose either.

,dave

[bj]

Why would you want the navigation to be the very first thing the person, the spider, or the screen reader sees? They're there because they're looking for information, so that information should be as close to the top left as you can place it, both in page positioning and in source code.

[bj]

BTW, Dave, that usability information is five years out of date.

[okparrothead]

It's more of a style issue really.

If the navigation needs to be split, I tend to put navigation for all the pages at the top and sub menus on the side.

For a short list I tend to put it on the left. Ad space runs down both sides, so navigation is easy in the left gutter.

I agree with bj though that we tend to read from top left to bottom right so the top left corner is prime real estate. Might not want to waste it on menubars.

As to source code, the navigation can be anywhere in the source and placed at the top with styling so the page content can be at the top for search engines.

Google "holy grail stylesheet" for more on that

Peace

[PARoss]

BJ,

The order of the various columns can come in any order -- http://www.fu2k.org/alex/css/onetruelayout/example/interactive. So it isn't necessary that the spiders see the menu first, even when people do.

Generally speaking, it seems to me that menus ought to be obvious, simple and available -- wherever you put them.

Phil

[DrTandem1]

In the western world, people read from left to right and from top to bottom. Navigation should be easy to find and easy to understand. Generally, the navigational links for the site's interior pages are the headings for the major portions of the site.

If the page is long, not something I recommend, you may also consider a line of navigational links at the bottom of the page.

The reason you do not want to put them on the right side, is there is a greater chance that they won't be seen. People aren't used to looking to the right for an index and they may have more things open that force the browser to crop the right side from view.

Browsers prioritize the top-left of the page. In other words, you will always see the top-left of the page when opened as a whole.

Also, there is no reason you can't have them both along the left and across the top.

[edhan]

A combination of both should be fine. I usually look at the top navigation to see if any topic I am looking for to click or move my eyes on the left side to check for more options. So, if you have lot of links, then having both on top and left side should be okay. The main thing is that the link must tell what I am going to get when it is clicked.

Hope this helps.
Cheers!

[DrTandem1]

Here's an article I wrote about three years ago:

http://www.drtandem.com/links-and-navigation-1.htm

[okparrothead]

Thanks DoctorT!

You're right about the "In the Western World". Other alphabets run right to left and even top to bottom. I'd forgotten to specify.

Peace

[weegillis]

Would I be reaching to suggest that visitors quite often follow their mouse pointer with their eyes? If this were so, could there be any way of knowing for sure where their eyes were when they clicked the link that brought them to your page?

From this we could examine the question from the standpoint of where inbound links usually appear on the referring pages. If they typically appear on the right, then you might wish to have your OBLs on the left and your site links on the right, so the visitors eyes are immediately directed to your sites internal links, or visual hot spots.

It follows that we can take this line of approach to several extremes, but it still suggests that we can have a sort of visual radar on our visitors if we can predict or control (to some small degree) how our links appear on referring sites, or at least where they are positioned.

I agree with bj on the point about parsing order. Wherever you place your navigation, find a way to do it so that the content is delivered before the links. This also helps to position the relevant internal links and OBLs up front, within the context of the presented content, adding weight to their keyword phrase.

Something else I'm going to throw out there,, the weight of the footer. When positioning the footer links, consideration that SEs generally give them a pretty good looking over. Since it foots the page in view, it follows that its html may justifiably appear in the flow of the content, not the html. Key navigation, internal or obl can be placed here, also.

Cheers!

[DrTandem1]

Wherever you place your navigation, find a way to do it so that the content is delivered before the links.



Cheers!

Links can also be content themselves. Consider their anchor text.

[andy_art_trigg]

I moved over to right navigation a while back and believe it works well for me. The content (which is king of course) is clearer and more accessible without left navigation. Another advantage is that printing pages is better as if the whole page doesn't fit, it's the right side that is missing, therefore the content will usually always be printed. Another is that most people are right handed and move their mouse (out of the way) over to the right near the scroll bar so the mouse is closer to the navigation. A counter argument to this though is that the back button is over on the left.

Reading this very balanced page on the topic -
http://jodi.tamu.edu/Articles/v04/i01/Kalbach/

I agree with the overall conclusion that it doesn't make much difference either way.

[DrTandem1]

You bring up a good point. The "Back" button is on the top-left of most browsers. If the "Back" button is easier to find/use than a site's navigation, guess which one a visitor will use?

Since you brought up your own site as an example...I notice the main links across the top-center of the page. They may be more used than the right-side links. I question the reasoning for having links to the Home page on the Home page. It is found both in your right-side navigation as well as the image labeled "Washer Help." As a visitor, I would find clicking on "Washer Help" frustrating from the Home page. May I suggest that would be better served linking to another page? Perhaps your site map? Then remove the links that point to the page they are currently visiting. The rest of the pages could have the link from that graphic back to the Home page.

Have you ever tried moving your washing machine navigation to the left side? How many may see this using a crowded desktop?:

http://www.drtandem.com/images/samples/left-nav-shot.gif

Then I somehow got to this page:

http://www.dryerhelp.co.uk/

Now, I was stuck. It took me a few moments to realize I was now on a different domain. There was no longer a direct path back to the Home page. I clicked on the "Dryer Help" graphic, but it was linked to the page I was already visiting. I even tried clicking on the bold "HOME PAGE" text, alas, it was not a link.

This is a good example of how to frustrate a visitor. I somehow navigated to Dryer Help and could not (easily) get back to washing machines, where I started. Most visitors would leave.

Your site has a lot of great information. It's just difficult to navigate. Sure, there are paths back, but they are not intuitive and the navigation is not consistent.

[andy_art_trigg]

Thanks, I always appreciate such feedback. My understanding of web design was that a site's logo should link to the home page. The fact that it’s not needed on my home page is something I never noticed. Pointing it somewhere else would definitely confuse though IMO as it’s virtualy a web standard to go to home page. Likewise I never noticed the pointlessness of having the home page link on the main navigation either, I just used the same navigation on each page. Although minor points, I'm glad you mentioned them and I’ve now disabled the logo link on the home page and removed the same on the main navigation :)

I always did have the navigation on the left, I decided to try the right side after seeing it recommended by some web guru and because I liked it. Apart from the printing advantage, one of the other ideas behind it was that it stopped the left navigation code being the first (and most “important”) content read by SE’s and it also speeded up loading (marginally) by showing the content first. (Some of this advice was before “float” in CSS)

On your point about a crowded desktop, if windows are sized too small for all content to fit then I‘m happy for the content of each page to be the most prominent. I do believe people will make some effort on a site if it looks like it contains information they want.


Then I somehow got to this page:
http://www.dryerhelp.co.uk/
Now, I was stuck. It took me a few moments to realize I was now on a different domain.

Unfortunately, this is a consequence of expanding my topics. In a nutshell, after building Washerhelp for 5 years, I wanted to reproduce the formula with sites about other whitegoods appliances, but because the site was named WASHERhelp I didn’t want to put stuff about tumble dryers on it etc. I also didn’t want to reproduce all the About me and contact me pages on each site either. So I took advice in a search engine forum and decided to create an umbrella site (Whitegoods.co.uk) where I could host all the common pages like “contact me” etc. and also host Washerhelp, and any other whitegoods site I create. By keeping the same style of navigation and CSS throughout it’s supposed to be like one big site.

The problem you’ve highlighted is that arriving at one site and clicking a common page like “About me”, takes you to the umbrella site, and it’s from there that you’ve got disorientated. However, people shouldn’t get too disorientated because I never break their “back” button.

I still believe I made the right choice doing it this way – but your comments have helped me realise I need to put more work in on this area. I will spend some time focusing on improving this, If anyone else has any feedback I’ll be very grateful,. If not wanting to steer off topic an email would be great.

[andy_art_trigg]

I've already put some emergency amendments in place on the About and contact pages to try and make the situation clearer for users.

[grillsgt]

As I read through this topic, a couple things came to mind. First, everyone keeps mentioning to put content before navigation. I completely agree, but it seems that the discussion is focusing on how the placement of navigation on the page affects the placement of the content. Did we forget about CSS? By using effective CSS you can put the navigation wherever you want and still have the important content above all of the less influential content, such as navigation. Take a look at the source code at BillCanGrill.com (http://www.billcangrill.com) to see what I mean.

Next there's some discussion to the benefit of locating navigation on the right in case the page cuts off the right side during printing. Again, did we forget about CSS? By assigning print as the media in an external stylesheet link, you can control all print aspects, including supressing items, such as navigation, that are not needed in a printout. Print out any recipe at BillCanGrill.com (http://www.billcangrill.com) to see what I mean.

As for navigation placement, I've used top, left and right navigation on several different sites. I haven't noticed any detrimental effects to right side navigation. People seem to find things just fine at my business site, Look Sharp Designs (http://www.looksharpdesigns.com). At one time, I think it was important to make sure that navigation was in a spot people expected, primarily the left side. Now that people are more Internet savvy, I don't think that navigation placement is quite so important. That said, I tend to favor left or top navigation, often using a combination of both. As for bottom navigation, I use it for superfluous links, such as site maps, privacy policies, terms of use policies, acknowledgements, etc.

Just my 2 bucks worth.

[DrTandem1]

Printing out the navigation is irrelevant as you can't navigate a hardcopy. If the visitor is using less screen realty due to other windows being open, right-side navigation may be missed or you force the visitor to use the horizontal scroll bar. By the way, you won't hear from visitors who have trouble navigating your site.

Assuming people are more "internet savvy" to rationalize an odd location for navigation is asking for trouble. Visitors want to find navigation where they expect it to be. A web page, especially an e-commerce web page, is not a puzzle for visitors to figure out how to navigate.

Good navigation has two basic rules:

1) Easy to find
2) Takes the visitor to where they expect

The next rule I would suggest is easy to use. I have experienced some fold-out and drop-down navigation that was extremely difficult to use, even being "internet savvy."

[andy_art_trigg]

If the visitor is using less screen realty due to other windows being open, right-side navigation may be missed or you force the visitor to use the horizontal scroll bar.
Unless your site is fluid of course :)

Good navigation has two basic rules:

1) Easy to find
2) Takes the visitor to where they expect

Agreed, although right side navigation can fulfil those rules just as well as left navigation.

[topboy]

As a quick rule of thumb, visitors to your site should be able to visit all your pages by using, at most, 3 clicks. This is also important when considering search engine optimization (SEO) because search engines will only spider (or index) pages that are 3 clicks deep into your site. Not only does proper navigation allow users to find information they are looking for, but it also allows search engines to spider (or index) the information they are looking for. This is essential if you want high quality search engine traffic directed to your website.

Read more about web navigation http://www.tophatsolutions.ie/web_design/website_design_elements_improve_web_navigation.htm l

[Webnauts]

Read more about web navigation http://www.tophatsolutions.ie/web_design/website_design_elements_improve_web_navigation.htm l
Have you checked the semantical structure of their pages?

Sorry. I cannot take them for serious. ;)