Welcome to WebmasterWorld Guest from

Forum Moderators: incrediBILL

Message Too Old, No Replies

Mouseover Menus - or DHTML indigestion



4:24 am on Feb 15, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

When someone invites you to their dinner party, what do you expect? A sit-down dinner, with well chosen courses, individually served? Maybe a family style spread. At the very least a self serve buffet, right?

But what if your host and hostess pointed you to their refrigerator and said, "Help yourself".

That's the way I feel when a website hands me one of those danged mouseover dropdown css dhtml menu system thingies. It's like they don't think enough of me to organize their groceries into a decent meal, they just tell me to hit the kitchen and fend for myself.

I put the mouse over a promising, top level menu choice and -- FLASH! -- no, I can't click there: something else pops up with a bunch of words on it. Then I accidentally move my hand a smidge while I'm trying to read the interloper, and now the thing vanishes.

Not only must I raid the fridge, but now the contraption has a broken hinge and the door slams on my fingers. So I put a low level cramp in my wrist, just to make sure that I don't move my hand whilst my eyes are trying to take in the choices. Happy dinner party.

I don't know the name of the clever geek who created the first one of these, but I'll guarantee you it wasn't a marketer, and it wasn't an Information Architect. The mouseover options do a lousy job in both those departments.

No, the inventor in this case had to be a code-freak, a total techie strutting their stuff, a major show-off of an IT ego.

And I'll tell you something else. Just look at the menu choices the next time you land on a site with one of these little contraptions. Are the categories arranged the way you think, as an outsider? Or are the slices of information more the way the organization thinks about itself, internally.

I'll bet you it's the latter -- but a good IA would be created around the former. If you care about your guests, you don't throw every possible ingredient at them on every page in fear that they might miss something.

Instead, you slice, dice and organize your stuff into bite sized goodies that make sense to a visitor's palate. A menu that allows them to choose a tasty, intuitive path to whatever they need. You create a coordinated meal, a banquet even, with maybe a chance to find an unexpected but tasty side dish along the way.


This rant was stimulated by a recent professional event - my second chance to remove a mouseover menu from an already functioning site, and measure the results. This time, the Home Page with DHTML had a 45% abandonment rate -- 9 out of 20 visitors were one hit wonders. Remove the DHTML menu and guess what? The abandonment rate fell nearly in half.

My earlier experience saw a 32% increase in page-views per unique with a similar change. And then we went to work on the IA and it got even better.

Mouseover menus? Please Say NO!


8:10 am on Feb 15, 2004 (gmt 0)

10+ Year Member

Mostly I agree with you Tedster-

... the ones I really hate are those that disappear as soon as you try to get the mouse near enough to them to click something - probably caused by the text size rendering differently from the original design.

The ones I like are those that pop-up on a complex site to tell you what subjects are covered by the link you are hovering over. This is really helpful if you are tracking down something very specific, because you don't have to wait for the link to resolve to see if what you want is on it.


8:12 am on Feb 15, 2004 (gmt 0)

10+ Year Member

tedster, are you trying to do a promo for Jakob Nilsen?

That's all I have to say. Your analogy make me hungry; I'm going to get a byte to eat (or at least a nibble). I'll just have to make a record of your words when I get back.


8:21 am on Feb 15, 2004 (gmt 0)

10+ Year Member

Heh heh, not to mention the hidden calories - about 30kb worth on the lightest of these menus I've dealt with recently. If they must be used at all, always provide alternative navigation or those with js disabled or a browser that doesn't support it will end up fed from a tube.


8:55 am on Feb 15, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

a promo for Jakob Nielsen?

Well, I would consider Jakob good company -- he can do a promo for me any time he wants to -- but he wasn't on my mind when I wrote this

As I mentioned, I've recently been in the trenches with several clients on this issue. It took a LOT of data to convice them to let me to try something else, because they were in love with their gizmo.

Simple fact is, it just didn't work. So I thought about this some more (I just know I'll see this battle again in my future) and tried to come up with an easy-to-get metaphor for the way I see the situation.

I think one of the biggest problems for many sites is that someone, somewhere, is trying to show off instead of trying to serve their audience. And mouseover menus are a classic example.


11:54 am on Feb 15, 2004 (gmt 0)

10+ Year Member

I would consider Jakob good company
As would I. Many a gem I have found on his site.

because they were in love with their gizmo.
That's because they never need you use them.

Simple fact is, it just didn't work.
Sure it did. The problem wasn't that it didn't due what it was designed to do, the problem was it wasn't designed to do what it needed to do.

easy-to-get metaphor for the way I see the situation.
Unfourtunatly it still requires them to think, but at least not as much.

trying to show off instead of trying to serve their audience
If you know you're good, you'll also know that your work will speak for itself without fanfare, and to the right audience. It's when you lack self-confidence, or think you're better than you are, that you run into trouble.

Then there are those who are only out to make a quick buck. I see myself as a craftman, and I take pride in a job well done.


12:28 pm on Feb 15, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Great info and some useful stats to boot.

You have just given me an idea for one of my 'slippy' sites ;)

thanks Tedster


7:12 am on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I don't want to appear to be a total hard liner on this -- I can see there might be some decent applications for the mouseover menu system. But only after a serious look at the Information Archtecture, and then certainly not for all the principal links in the navigation.

On one site where I saw the approach used well, it was just a small div that popped up on the word "Utilities". The DHTML menu extension provided a choice of about 5 utility functions that regular users of the site would need close at hand -- but that would have cluttered the layout in most situations.


10:30 am on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

SURL (Software Usability Research Laboratory) have an article on this very topic here [psychology.wichita.edu] that is particularly relevant to this discussion. An interesting result of their testing was that vertical cascading menus perform almost identically as an index in tests of perceived disorientation, perceived ease of navigation and perceived frustration.

I think that these dynamic menus should be looked at in the same way as Flash - there is a time and a place for them, but make sure that you've done your research and it is the time and the place for them! Like Flash, DHTML rollover menus were used on almost every site for a time, in most cases there was no need for them, in some cases it was just designer/developer ego: "look at how good I am with my fancy menus".

However, I think that if developed properly this type of menu system can be most effective (remember, the major OSs all use cascading menus - so users know and understand them). One of pet hates of mine with these menus is (1) when the menu hover state is only the link text, so hovering anywhere off this and the menu disappears!


1:40 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member txbakers is a WebmasterWorld Top Contributor of All Time 10+ Year Member

How poetic! We should set that to music.

In my early web design days I thought they were cool. I also thought it cool to do other mouseover tricks.

Today I barely use any mouseover at all. It's a maturation.

One site which I visit frequently though (designed by a guy who THINKS he is a technology expert - still thinks FileMakerPro is the greatest database ever) recently abandoned his DHTML drop menus in favor of..... Java Applet drop menus. What a bloat. I had a good laugh.


5:45 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member

Thanks for sharing that study, BlobFisk. I must admit that I was thinking of the horizontal cascading menu, which performed the poorest. However, I am very surprised that the vertical cascade did so well.

I really think that there are two issues here, and the primary one is a well considered information architecture, not the visual rendering. It's just that so many of the trendy cascade menu sites seem to have given little attention to their IA.


6:01 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member blobfisk is a WebmasterWorld Top Contributor of All Time 10+ Year Member

and the primary one is a well considered information architecture,

I couldn't agree with you more. One of the major failings of many sites is that they stumbled at the first hurdle and never did and Information Architecture study for the site. And you are quite right, these menu systems just get choked up with ineffective lists of links because of this.

There is an interesting update link at the end of the SURL article which makes some interesting follow up points.

... Cascading menus move us into the nasty territory of nesting and hierarchies. Hierarchies are so natural to the mathematically inclined, but they are quite unnatural to the rest of us. The temptation to make menus hierarchical is nearly unavoidable for most programmers ...

I think that this point also shows that without any shadow of a doubt that an IA is invaluable. I firmly believe that you cannot create a usable site without first having established an IA for that site.


6:10 pm on Feb 16, 2004 (gmt 0)

WebmasterWorld Senior Member korkus2000 is a WebmasterWorld Top Contributor of All Time 10+ Year Member

I can agree that fly out menus are very overuse, especially on sites that don't have much content. They do have good homes for sites that do need to categorize content. I also have to echo that horizontal menus just frustrate me to death. They always disappear when I am about to click. Grr...

Verticles on the other hand are much better. They seem to not have that problem. It is a natural appearance for info to pop down under the main button.

I also think linking the main button and not rendering it unusable is a must. Don't have the menu cover the button. Link it to the top directory and have the sub links be just that, secondary.


8:20 pm on Feb 16, 2004 (gmt 0)

10+ Year Member

Today I barely use any mouseover at all.
It all depends if they add to usability or detract from it. There are some CSS mouseovers I happen to like on menus. I usually change the color, maybe reverse the justification (from left to right), possibly change the font weight and/or style, and occasionally change the borders. In all cases it helps by highlighting which link is being pointed to and that there is a link being pointed to. It basicly enhances the behavior of the default style of links. (Discribing it makes it seem like a bigger deal than it is.) There is a CSS trick I saw which I'm thinking of trying if I find the right place. I've seen where some additional informitive text (or image) is displayed under the menu. But I'm not going to add it just to add it, I would only add it if I thought it was benificial.

The bottom line is if it add to usability and/or accessability, then why not? If it detracts, why yes? In neither adds nor detracts, then to each their own.


4:44 am on Feb 17, 2004 (gmt 0)

10+ Year Member

Funny post, Tedster. Made even more poignant by the fact that i just finished going to the fridge to get myself a pathetic dinner, upon hearing that my wife was stuck at work.

I just went to a vertical, mouse over nav bar - primarily because things were getting too cluttered in the header. Feedback has been fairly positive, though there have been some people, like my mom :) , who have been completely bewildered by it.

I'm hoping that more and more folks will switch to this type of navigation, so that the learning curve of what to do when menus disappear or appear unexpectedly gets accelerated.

From the perspective of making efficient use of space, the mouse over nav bar is a godsend, though.


5:32 am on Feb 17, 2004 (gmt 0)

10+ Year Member

Actually this page on WW we are on right now is using the css mouse hover and it works fine. The useability is improved by it's presence. That's a far cry from the DHTML menus that Tedster is referring to however which mostly suck. In the past couple of weeks I seem to running into them more frequently, particlarly the broken ones where you try to chase the link to click it but it disappears a millisecond before the mouse cursor reaches it. I thought it was a Mozilla incompatibility but the same thing happens in IE and Opera so must be just bad implementations.


8:18 am on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Iīm afraid you will eat me for dinner.
I do use an menu, itīno java, itīs css with css behaviours, and I know the problems for somebody with it, but the menu really makes thing easier if the site have many pages. And it donīt close by itself.
Would like to show you the menu to see what you think about it, but though itīs forbidden to put the url.


9:14 am on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Ted (and everyone)

Have you any experience of how Yahoo deals with sites with this kind of menu with regards to their ludite 'submission/acceptance' policies.

I am always wary about using this kind of functionality (even if there is a valid reason - usually the client insisting on it!) if an entry in Yahoo is also required.

I haven't used Business Express for a while - what's the situation now?


9:25 am on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

hi markd,

we have submitted several sites with vertical dhtml menus to various yahoos and have never received any negative feedback.

we do have bog standard text links in a left hand nav bar as well, so the dropdowns are there to help regulars go quickly to the bits of the site they like best.

still a lot of food for thought tedster :-)


10:44 am on Feb 17, 2004 (gmt 0)

10+ Year Member

Here is an interesting take on the matter:

[psychology.wichita.edu ]
(not my site)



11:42 am on Feb 17, 2004 (gmt 0)

10+ Year Member

Indeed these things are usually designed to make the site "look professional" ...


1:11 pm on Feb 17, 2004 (gmt 0)

10+ Year Member

I loathe them and have been looking for the reasearch to prove my point. Thanks for this post and the article a few replies back.

Here's the thing that gets me the most. Usually when you mouse over one of these menus and you click on the "master" section name (like "about us"), it's not even a link. Only the exposed submenus at hot.

Like was said before, hopefully this will go where Flash has gone - find the right context.


1:13 pm on Feb 17, 2004 (gmt 0)

10+ Year Member

Thanks for the post Tedster... People ask me to build these annoying menus and no matter how much I try to talk them out of it they still want them. Think I will send them a copy of your post next time.


1:36 pm on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

Yes, I agree with all,
but as well sites irritates me, when I have to do several clicks to get the information I want........I just hate waiting for pages to load.
There is always good sides and bad sides....of everything.
I do agree that itīs not necesary for a page with 10 links and with no need of description, (no way you can put description on an button,) just to make the site look profesional, diferent if itīs really useful.
As an user, they ever bothered me.. if well done.


1:40 pm on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I was very fortunate when I started out on this web magical mystery tour several years ago, that one of the first things I read hammered home the point that poor navigation is the most common downfall of websites. As soon as the viewer gets lost, they are no longer thinking about your products, they have started wondering how to get out of there.... just like we do when it happens to us.

As soon as I see a site with menus that light-up, scroll, levitate, shimmer, do back-flips or otherwise demonstrate how clever the designer was in spending the clients' money on such useless eye candy, I am reasonably sure that the focus of the site will be on "pretty" and not architecture or substance.

But, I would the first to agree that large sites with a natural heirachical structure are often best served by a logical drop down heirachical menu. A simple menu array in a css file will do the job and serves the viewers needs quite adequately.

The KISS principle is still alive and well. Its a pity more people have never heard of it.


1:51 pm on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

what a pity you can put urls. in here,
but mine can irritate sombedy of course, but itīs an css hover menu, with css behaviours and an .htc file, no javascript, and the text in menus that are no links there is no hand over it........think people understand if hand comes up itīs an link.
And thats permit me to have 30 links in 6 buttons........ sort of quick acces, as well I have an sitemap for those that donīt like or canīt handle the menu.


5:04 pm on Feb 17, 2004 (gmt 0)

10+ Year Member

I'm all on board the usability train.

Let's be clear, the problem isn't with dhtml, it's the decision of when to use it or any other fancy gui when it's not necessary and it interferes with the ability to use the site.

That's what usability is all about, common sense, understanding of your customers needs/wants/hates, and communicating with them to attain it, not just doing a marketing test.

That's a common problem, usability sounds so un-cool, or un-trendish, or un-fadish.

Who cares if it is cool, the important thing is if it is USABLE by the customer.

Like decisions to have a dhtml popup instead of a regular one, based on the stupid idea, of making sure people see the popup.

We must be accurate in our determination of when to use what technologies.


5:05 pm on Feb 17, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

I've never bothered with cascading menus mostly because of a) code bloat and b) page download time.

I do use drop down <form>s though. Using two forms and a "go" button in the top left corner means that by using a very small amount of screen estate (and providing javascript is working) approximately 495 pages are all accessible from each of the other 494 pages.

Additionally, the forms double up as a page marker, allowing readers to see the category and subcategory of the page they are visiting.

For readers with javascript turned off, there is a short text menu below the forms for those pages which are immediately relevant to the page they are visiting.


9:40 pm on Feb 17, 2004 (gmt 0)

I'm not fond of mouseover dropdown menus either, mostly because they can be hard to use with a sensitive mouse on a high-resolution display.

But what I really dislike are mouseover links where the text changes size when touched. I can handle color changes, but having the type jump to a larger size is distracting and annoying.


11:26 pm on Feb 17, 2004 (gmt 0)

10+ Year Member

Gidday all,

Yaaay .... and I thought it was just me!

I groan when ever I land on a site using DHTML mouseovers, and here in Oz, it seems the various .gov.au designers are exceedingly fond of them.

I can only recall one instance where it was in use and it didn't get in my way. What must it be like for people with accessability issues?

That Tedster is able to provide tangible "proof", by way of before and after %s, helps.

Another "oohh aah bells and whistles" feature I hope can only go the way of <blink> and other such geegaws, as soon as possible.


BTW, excuse me for being thick (cold, cough, stuffy nose, no caffeine yet today ... whatever ...), but what does IA mean in this context?

Oh, Information Architecture ... just read the rest of the thread ... : # )

This 67 message thread spans 3 pages: 67

Featured Threads

Hot Threads This Week

Hot Threads This Month