DHTML or not?

Should I use a DHTML drop-down menu?

[NeedScripts]

We are working on setting up a new layout for our site and one of the important thing we are wanting to focus is the Menu Structure. I am more leaning towards a DHTML based menu so most of the important links can be presented to the end users in an easier manner. However doing so, also makes that search engine spiders do not index links within external .js files and not the mention that the .js by itself can be easily around 40 kb - however it will need to be loaded once, as it will be stored in the cache of the end users.

I am having a morel dilemma, on one hand, I can setup a DHTML menu and:
1) Better menu structure and easier nagivation (menu supports IE4+, Opera 5+ Netscape 4.08+, Mozilla 0.6+, Safari 1.0+ and others too )

2) But I am also adding 35kb of js file on the page, so it will take few seconds more to load on the first page visit.

3) Also, it might not be easy to get the menu links indexed by search engines and hence use of <noframe> tag for search engines and browers that does not support and there will be a standard html type menu - not the prettiest, but still hopefully good to please end users.

---------------

Even though we are getting tons of visitors from search engines, we are also getting huge number of visitors from site referrals, word of mouth.. etc and hence the question appears.

Should I or should I not implement DHTML menu on our website? What would you do if you were in my shoe?

Thanks for the help.

[encyclo]

Here's the original and best "DHTML indigestion" thread by Tedster:

[webmasterworld.com...]

That might help!

[txbakers]

Sometimes I like DHTML menus, but most of the time they are just that - liked. They really aren't necessary to ease of navigation, just prettier than having lists or lots of buttons.

Try to be creative and come up with an alternative to DHTML menus. I did it by providing a "home" page with 6 select boxes, each filled with appropriate links. I use the onChange method to read the value of the clicked item, which is a URL, and I can provide hundreds of links without complex DHTML.

[stever]

Sometimes we need to sit back and think what dhtml actually means - dynamic html, which in general means use of css and/or javascript.

Just because a menu uses dhtml doesn't mean it has to have a 40kb external js file.

Just because a menu uses dhtml doesn't mean its links need to be hardcoded in javascript.

Just because a menu uses dhtml doesn't mean that search engines won't like it.

Just because a menu uses dhtml doesn't mean that it doesn't degrade gracefully when javascript and css aren't being used in a browser.

If any of those things happens, it just means that it is a bad example of dhtml implementation. There are simple free and commercial alternatives to the dubious popular but "heavy" scripts out there.

[isitreal]

If any of those things happens, it just means that it is a bad example of dhtml implementation. There are simple free and commercial alternatives to the dubious popular but "heavy" scripts out there.

That's well put, and if you read the dhtml menu thread, you'll find that in fact many of the serious objections were to bad implementations of dhtml menus, not the menus themselves, although there are of course some people who just hate them, which is fine too.

Here's the blobfisk version [webmasterworld.com] on WebmasterWorld.

I've implemented those on a few sites, the js is about 4kB total, the menus are hardcoded onto the page, set with some CSS, and work great, total package is probably around 6-8 kB, much much faster than commercial bloatware too.

[tedster]

I think the consensus on usability is that DHTML menus can be great for regular, repeat users -- those who are already familiar with what the site offers and just need to get there fast. But DHTML menus are often quite the boggle for a brand new visitor and can be an obstacle

In a test I began last March, we removed the DHTML on a 2,000 page client site -- leaving only text links at the page top and bottom, with a conventional (inverted "L") drill-down structure. We made no other changes during the initial test month.

Pages per unique jumped from 2.1 to 6.7 - that's a very serious increase in stickiness. And the percentage of "one page wonders" has dropped by nearly 60%.

However, this particular menu was one of those bloated monsters - just taking that 30kb off the page load had to be a major part of the improved site performace. So if you implement a lean and mean menu system (like the one from BlobFisk) with well thought out labels and alternate navigation - you may do well.

(But can you tell, I'm still a skeptic?)

[edited by: tedster at 1:11 am (utc) on June 18, 2004]

[brizad]

I have seen the same thing as TEDSTER.

Pulldown menus hurt click though rates. People apparently have to actually see the link before they want to click it. They are less likely to search through a menu to find where they can go.

This has been supported by several usability studies that I have read about.

[isitreal]

I was waiting to see those results too by Tedster from the original dhtml menu thread, that's interesting, definitely.. I've held off on that for my commercial type sites to see, that might be the answer though. The studies quoted in the original thread were pretty light on substance, but tedster's results look like they are pretty empirically determined.

[NeedScripts]

I personally prefer Static Menu, however one cannot ignore the requirement of Drop Down Menus, especially when such a menu is required on a very deep or on a website is thousands of pages.

I do agree what there are some very poorly designed DHTML menu's which actually annoys end users and hence can hurt the site on a long run.

However, I believe that if a DHML Menu is properly designed and structured, it can do good to the site it is being used on.

Here are few well-know sites that are using DHTML Menus:

[gateway.com...]
[bestbuy.com...]
[compusa.com...]
[kelloggs.com...]
[subaru.com...]
[polycom.com...]
[act.com...]

I have never used a DHTML Menu on any of my site and hence am wanting some expert opinions from you guys. Below is that I am thinking.

If you visit the site in my bookmark (Need Scripts) then you will see a yellow horizontal menu. Now we are working on adding few important features on our website. So now we are only left with few choices 1) Use static menu structure and take up top-menu spot and/or setup menu on left hand spot, which will also take up ad-spot. But the most horrible thing is having all those links on every page of the site might not look good at all.

I do agree with you guys, when is comes to annoying DHML Menus, especially the type that immediately disappears. Here is something what I have worked on :: [needscripts.com...] , this is a test menu only so none of the link in the menu will work.

What do you guys think of this menu and/or if you were to modify it what changes would you make? Or would you rather stick with a static menu?

Also, not to mention that if user clicks on any of the top-level name/link on the DHTML menu, then it almost work like the current navigation bar, so if someone does not want to wait or see what is in the drop-down, then they won’t have to.

The main negative effect I am seeing in using good and user friendly navigation menu, can actually make the person leave the website quicker – or in other words if they are able to find what they are looking for ASAP, then they will leave the site quickly – however I am hoping that such a thing/feature will prove to be more beneficial on the long run, as hopefully end users will consider this as a good thing and continue visiting (recommending) our website.

I am working on a new layout and hopefully everything will be ready within a month, however the navigation menu is a big issue and don't want to make a decision that will make me redesign the structure and setup a new menu again.

Vishal

[isitreal]

I think that for tech oriented sites drop down menus are generally a plus, the users visiting are going to be by definition more tech savy, and want to get to where they are going with as few clicks as they can, so I suspect that the pluses of using drop menus would kick in. [once the url's get cut out, the site is a web script downloading site]

However, the current implementation you have has no page level navigation, it's all scripted in, which means no navigation for search engines to follow, not even at the top level, main nav item.

It's easier to do full javascripting in many ways than having hard coded menus toggled by visibility switching, but I wouldn't use that method personally, sacrificing your links isn't a way I'd go, but that's just me.

The way you have it now, if the user has javascript disabled, which I think you'll find far more tech type users do than average users, there will be no navigation bar. If google visits, there will also be no navigation bar. That's not going to do your site any favors.

[NeedScripts]

Thanks for the quick reply :)

I also plan to use 2 different <noscript> tag along with the dhtml menu (about 3.5kb of html code). These noscript tags might be distributed on two different parts of the webpage and will include all the links that you one would be able to see in the dhtml menu. In addition, these noscript tags (hopefully) should also take care of the question of getting indexed by search engines spiders.

Also, the another thing I am planning on implementing is a footer menu, at the "bottom" of the page, there could be the entire navigation menu in simple html code.

what do you guys think now?

[isitreal]

Using a noscript tag with footer navigation is a pretty good solution, that would handle it of course. The menus work pretty well, I didn't check them on a slower pc, like 2-300mghz, you want to do that, it's one place the big bloatware menus generally fail. Have you tested them on Mac IE 5x and Safari?

I did get an error console message with Opera 7.5, line 20, something to do with the onload event. Opera in the past has had problems with using the onload outside of the body tag.

Personally I'm not a fan of animated gifs like you used for the up down arrow, but that might just be a matter of taste.

Posting personal urls isn't allowed re the TOS, by the way.

In IE 5.5 the drop menus looked kind of weird, the background colors sort of flowed randomly, it looked wrong.

I'll have to submit some scripts to your site... :)

[NeedScripts]

Hum.. interesting, I am not getting any error on Opera 7, but still I think I am kinda aware of what you are talking about. I guess, it might be best to just remove that arrow thing and have a simple drop down menu.

About submitting some script at Need Scripts, you are more than welcome, and if you ever encounter any type of error/problem, always remember I am just an email away.

Thank you again.