Forum Moderators: open

Message Too Old, No Replies

Mouseover Menus - or DHTML indigestion

         

tedster

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

WebmasterWorld Senior Member 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!

helenp

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

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Jpalmer: What must it be like for people with accessability issues? .....

But the menu is just the same as windows menu.........
how do they manage? Supose, doing things other way as people withoug these issues,,,,, using directories of window, and using sitemaps of webpages.

tedster

2:40 am on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Re: accessibility -- people with screen readers "may" have an advantage. I'm not sure, but I think they have access to all the choices without worrying about "visibility" rules.

Jon_King

4:06 am on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



On topic,

Tedster, I fight this practically every day.

Many initially think these menus are cool and make themselves appear like the 'big guys' but really the 'browser' person wants ease of use; you have proved that with your science. The drop downs have a place but only when necessary --- when there are too many visually scanable links.

The operative word here is visual. Why hide links in a drop-down (or groups of links) when you can visually put them in front of the target audience without an extra click?

thaedge

6:46 pm on Feb 18, 2004 (gmt 0)

10+ Year Member



"But what I really dislike are mouse over 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."

That is the most annoying thing in the world.

As far as DHTML/Drop down type of menus I think there is a time and place for them. Most of the sites that have them, shouldn’t be using them and just have them like many have said for the ego/cool factor.

I however am working on a site where they actually make sense. Opens up more space for content and helps categorize the site better. With a large site that goes as many as 6 links deep, some type of top-level organization is soo needed.

jayjay

7:47 pm on Feb 18, 2004 (gmt 0)

10+ Year Member



Good issue to rant about--moueover menu popups can be horrible. I think, as a general case, they should probably never be used for primary / secondary navigation (i.e., secondary navigation should be visible on the page, and not visible only when rolling over a primary nav).

A possibly valid use for these, however, is on large sites in the corporate intranet / portal genre.

Sites that might be thought of as a number of separate subsites connected by a common top-level navigation system often have the interesting-to-the-user navigation one layer down, and so mouseover menus can be helpful in exposing information that users need on a top level (but can't see due to layout constraints).

The justification for shared navigation hierarchices like this (across subsites) tends to be along the lines of a more centrally controlled subsite model, which IMO is becoming less and less popular. (A current portal project I am working on treats subsites as separate / independent sites, and their common navigation is secondary--so no mouseover menus are used!)

tedster

9:06 pm on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Good point, jayjay.

In fact, on intranet sites the "rules" for a good interface change significantly -- because there is a captive audience of regular users, and no search engine traffic. A flow of new public will not, in general, spend extra time to learn a new set of interface conventions.

But people working with, say, a company's knowledge base will be happy to use it for the ease of access to deep information. It's more like learning a software app for a specific job.

DrDoc

9:23 pm on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



what a pity you can put urls

You can post some code, helenp :)

crosenblum

11:05 pm on Feb 18, 2004 (gmt 0)

10+ Year Member



The key is we don't care what is cool or not, the key is whether it makes sense both in the short term and long term.

And that comes down to communicating with the current/potential customers to learn where you can improve.

Because no matter how big you are, there are still things you can improve upon.

It's funny when i first started, i usually ended up spending most of my time cleaning up after other people's ugly code.

Now I am struggling to get past that, to do more customer experience, usability in ecomemrce development.

What a pain!

helenp

11:20 pm on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



You can post some code, helenp :) .....

You really want that?
will be long, all the list in html document, all the css code and all the .htc code?

Discussion is about mouseover menus, not dropdown menus that I think is completely diferent.
I see the most in webmasterword are profesionals but supose many of you ever seen an mouseovermenu with an .htc code before, at least I ever heard about it until 3 weeks ago, knew about it by an programer that told me, (before menu was .js based) maybe I am wrong about that.

when people rent our houses and when they are here we ask them to fill in an guestbook, one of the question is their thought of the website, and 99% says very easy to use and functional......... that means something,
I do know I canīt know the opinion about them that ever booked, but we had complaints on other things on website as maps needed etc, but ever on menu, btw. nobody said website is cool, fancy or well designed, supposed itīs not, but itīs functional

DrDoc

11:34 pm on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Don't post ALL the code... Just put together an example that is as short as possible, one or two example elements, stripping out everything that isn't necessary.

If we want that? Well, if it really is good -- then yes we do.
You might want to post that as a separate thread though.

I assume it works in all major browsers too...

helenp

11:56 pm on Feb 18, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I checked it with mozilla, firebird, opera, netscape, Ie, 6. 5.0 and 5.5 I do think so yes, but the css code is very long, it took me several days to configure it, though there was a lot of bugs in it. Had to put in hacks for IE 5.0 and 5.5

helenp

12:33 am on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Tedster: 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".

I am very sorry, reading those words and thinking, no you arenīt correct.

If menus are dificult to use or not, thats another story.

But an webpage is not an family or friends dinner,
I canīt serve my guest, they need to choose,
imagine you go in to an restaurant and ask for the menu instead of showing menus like this:

meets:
roastbeef with potatoes,
steak with vegetables,

they just say:
meets.
fish.
soaps.
entries.
and you have to ask for menu 2, then menu 3.
That would irritate me.

In my family supose, one eat what you get.

ī.......... give it a thought.

isitreal

1:27 am on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Tedster: your post is responding to bad work, not the product itself. Nobody like bad work, that's for sure. But good work is another matter. When I go to a tech site with a 5 or 6 item horizontal menu, say one item is 'support', and on mouseover I get a nice, stable, timer driven drop down menu, I select 'downloads', 'drivers', whatever, I can choose the option I need, I just saved myself some looking, some time, some clicks. What's wrong with that?

Anyway, I guess rants are fun sometimes, all I know is if I offer a client a chance at having stable drop menus that basically just mirror the options available on the subpages indexes, they would jump at it, and so would I. Now badly designed and coded menus, that's another story, same for bad info design. Personally, most drop menus I see are pretty much basically well done, ok anyway, I guess we must be going to different websites?

Most of the code out there for drop menus was so bloated and unwieldy, plus the necessity to support ns4, but now that simple DOM/CSS menus like blobfisks are available I plan on starting to implement them much more, as an aid to the visitor, not as anything that isn't already there in hardcoded version, just to let them skip a step if they so choose, seems user friendly to me.

I see a lot of bad HTML out there, a lot of bad web design too, but that doesn't mean I don't like HTML or web design.

tedster

3:00 am on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Good points, all. Yes, I am responding to bad work -- and explicitly to lazy work or even total ignorance that Information Architecture is a vital discipline.

I would guess that only 1 in 20 sites that I visit today makes good use of this kind of navigation. And even among those with decent IA, maybe 50% don't really need the mouseover sub-menus.

As a general rule, these menus confound the average user. If you can, please test what I;m saying -- and report back results showing that removing these menus actually HURT the stats on a site.

Yes, helenp, I agree -- that the metaphor of a meal has limitations, as does any metaphor. What I hear you pointing to is the CHALLENGE of Information Architecture on the web. There can be situations where a good faith attempt at an information architecture does not do the job well enough and a mouseover menu can fill the gap.

However, what I see is a flood of websites that start with the idea that they will use this menu system and that absolves them of any concern for creating truly descriptive labels and categories that make real sense to their visitor.

photon

1:42 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



tedster--

Would you be willing to start a new thread on the basics of information architecture? What it is, is it just for huge corporate sites, can it be used by the one man shop, etc. Or point us to threads/sites that discuss it further.

Thanks.

tedster

5:58 pm on Feb 19, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It's a good idea -- I'll do some writing after PubCon. IA is definitely not just for the big guys, although it certainly becomes more and more important the larger the site is. But if you're aware of the issues, you can make even a 20 page site more effective.

One of my favorite IA approaches for small sites involves choice of menu labels. IA involves two big areas -- how you divide up your information, and the labels you choose for each of those sections. On smaller sites, I'm having good results by writing 2-3 word labels that create a menu that actually works as copy - it tells, or at least outlines, "the story" of the organization:

What are widgets?
Why use widgets?
Making your own
Outsourcing
Certified widget makers
Our widget services

techrealm

8:09 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



All I know is when we added the dhtml sales went through the floor. Removing them 3 months later... Sales are at record levels for the year even with almost none for three months.

jayjay

8:59 pm on Feb 19, 2004 (gmt 0)

10+ Year Member



People design and build things a certain way both because they think they work in a self-consistent manner and also in mirroring the way other people do similar things.

So, some people use mouseover menus because they think these menus work in their context, others use them because they see other sites doing it, and some do it under both influences.

Enough of web UI is influenced by operating systems' and desktop applications' UI that it is not surprising that people will assume, for example, that mouseover menus are good on websites. Some of the people who assume that--for that same reason, will be your site users too!

I think mouseover menus don't work, on one hand, because they do not correctly implement the same menu functionality as desktop UIs. Some DHTML menus are better than others, but, in general, the DHTML menus seem kind-of "broken" compared to desktop UI menus.

But, on the other hand, I think websites change the way people interact with information, compared with desktop UIs. And, I think a lot of points people have raised here suggest how the web user looks for information "menus" to be fully visible--really, as part of the site content / information itself.

In this sense, I think the mouseover menu's usability is harder to pin to what your users are "used to"--each website potentially offers a combination of significantly different navigation paradigms (desktop UI, hypertext, document, directory, search, etc.), and how those are combined is definitely a place where the devil is in the details.

tedster

9:11 pm on Feb 20, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



One of the principles I've learned in marketing is that when people are given too many choices, they tend to make NO choice at all. This is what I what I think happens with these DHTML menus, at least from from an IA and navigation standpoint. Unless someone is highly motivated, they get overwhelmed and jump ship.

And from an technical standpoint, I think jayjay nailed it by saying "in general, the DHTML menus seem kind-of "broken" compared to desktop UI menus."

It's either all that flickering, or too long a time delay for my individual taste -- and I think everyone would have a different opinion on how to best set the timer.

[edited by: tedster at 3:06 am (utc) on Feb. 21, 2004]

helenp

12:48 am on Feb 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Tedster: One of the principles I've learned in marketing is that when people are given too many choices, they tend to make NO choice at all.

Thats the reason I chosed an menu, that way at first look the site is very clear, just hate these portal with 100 links, 50 at left, 25 at right and other 25 in content.........

I only have 6 vertical buttons, all with 1 level menu except one that as well have an third level (this level name of properties, stars, and max ocupation, there is about an total of 30 links, of course these are the main ones.
After reading all this maybe think I should do an page for the buttons, just if somebody wants to click them? (they arenīt clickable, and no hand is showing up, and as well pages for the level 2?

My site is growing and canīt have to much in menu, so supose in future must change.

what do you think about these databased searchings?
In my case would be search for properties.
I do not like them, but I am not an property searcher.
How would you do it?

tedster

5:04 am on Feb 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



In cases like you describe, helenp, I find that more people are comfortable with "clicking to drill down" than with any other approach. The most technically comfortable visitors might find it just a little frustrating, but only a little. They won't leave unless you require their drilling to go through too many levels before they get a result.

I think it's excellent that you've limited the menu to only 6 choices for the top navigation (or nav 1 as I call it). Five or six choices is what I aim for on nav 1. Seven is my limit, and more than 7 is just too many -- site stickiness goes down measurably.

The issue is not just how many choices there are on nav 1, but how many APPARENTLY EQUAL choices. With dhtml mouseover menus, you can make it feel like there are 20 or 30 equally weighted choices.

You can always build a utility section somewhere else on the page and group a few like choices together there, using a different font, a different color, or some cue that "these choices are not like the others". This will leave the main menu much cleaner and clearer.

When there are a large number of choices at the nav 2 level -- say for example your main menu is labeled "Locations by State" -- you can create a landing page where the links for every state are grouped in a table in alphabetical order, and every choice is always visible. Plus, you've got one more page of content for the search engine.

So, I feel you do have a bit more freedom with the nav 2 level than you do on nav 1. Still, I've found that the traditional "inverted L" -- with nav 1 across the top and nav 2 on the side -- performs the best for larger sites in most situations. If you go above a couple thousand pages, and a nav1+ nav2 scheme won't handle it, then it's time to consult a professional Information Architect, I'd say.

About links that are really database queries -- take great care that a result will always be returned, or that the "error message" sounds like a human being talking, not a machine.

The website user does not know that their click just queried a database, they think they clicked on a link for a new document! If you tell them "There is no data to match your query" you've just boggled a good percent. I've recently seen some bad PHP navigation that was doing exactly that.

It's better that the user is clearly knows when they are "looking something up in your database" because the language on your page makes that clear.

On final comment, it also helps to realize that on many sites perhaps as few as 5% of visits will begin on the Home Page. That is, from their search engine query these visitors have already zeroed in on the section of your site that interests them.

Throwing the whole refrigerator at these folks is counter productive. Helping them zero in on their precise needs is more important. If they like the looks of your nav 1 labels, they will explore your site further.

amznVibe

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

WebmasterWorld Senior Member 10+ Year Member



Just to play devils advocate, I use <one particular site> every day and their mouseover menus are space saving and helpful to me.

But very few mouseover menus are as good (and as organized) as that one.

[edited by: tedster at 9:56 pm (utc) on Feb. 21, 2004]

helenp

1:39 pm on Feb 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Yes, because they donīt have any third levels.......

thinking and supose must when growing take away the third level, and have pages with some properties, though the menu that popup from button are perfect and very stable, you just go near and opens up.
Thought was forbidden put links in........

tedster

10:18 pm on Feb 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



There's no doubt that a DHTML menu can be helpful for regular users of an online resource. IF you know your audience and if that interface works for the browsers coming in and the audience's level of technical savvy.

But if the audience is the general public, I still say no - not even when it's very well done.

This discussion feels to me the same way the frames issue does. Yes, they both can come in handy in exactly the right situation and if handled very conciously. However, if you want a wide audience (how about the growing PDA crowd?) both frames and mouseover menus are sheer poison.

COMMENT: Not all links are forbidden here - for example, links to important resources, acknowledged authority sites, news stories, etc are definitely OK. But links that could be used in a promotional way for a lesser known site are not allowed -- even if the intention is not promotional but only helpful, or given as an example. We can't allow the pattern to get started because, as we've learned, it quickly does get used for guerrilla marketing -- and we just can't be mind readers about promotional intent. By the way, that example site's menu was broken on Opera 7.23.

loobot

10:18 am on Feb 22, 2004 (gmt 0)

10+ Year Member



Strongly disagree with this statement, Tedster.

Menus are something the users have to manage as it became present everywhere in any OS, any SW. They can like or not, it is like breathing for living.

Furthermore, when your site is built on a tree structure, it is a fast way to access a nth-level rather than clicking n times on parent links.

That's my view.

isitreal

6:42 pm on Feb 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Furthermore, when your site is built on a tree structure, it is a fast way to access a nth-level rather than clicking n times on parent links.

Exactly. If your site is already built with a tree structure, and is large enough, with enough sublevel navigation to warrant this, then all a drop menu does is give you fast access to that tree. Tree based navigation is completely familiar to any user of any computer, since it's how the file systems work, even if they don't know that.

As a general rule, these menus confound the average user. If you can, please test what I;m saying -- and report back results showing that removing these menus actually HURT the stats on a site.

Tedster: that's the real question, how page visits would be affected, I'll have to implement drop menus on some sites with fairly stable visitor numbers and see what the results are, for better or worse, I haven't used them because I couldn't find code stable enough and easy enough to maintain, until the blobfisk one I found recently, I don't have time to do it now though. My main clients would love them though, I guarantee you that, they are average users, and they think that they are very cool.

tolachi

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

10+ Year Member



In the past few days since I read this awesome thread I came accross a few very interesting usability studies by Jared Spool's company about links and the 3 click rule. A lot of people seem to like the DHTML dropdowns because of how accesable it makes their site. With, I assume, the presumption that users will be more satisfied and more likely to stay on their site because of that. These studies indicate that that is false premise.

Testing the three click rule:

[uie.com...]

Trying to figure out why some people keep clicking and others give up:

[uie.com...]

tedster

5:16 am on Feb 24, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wow, I like those studies -- especially the second one. The "Scent of Information" -- sounds like a new movie.

As with all good usability sutides, this one just feels true and right. It resonates with my personal experience both as a user and as a web builder.

tolachi

4:18 pm on Mar 4, 2004 (gmt 0)

10+ Year Member



Sorry to bump this, but I found a few more interesting and more pertinent studies.

Basically users decide where to click before moving their mouse, which limits the effectiveness of links hidden in dropdown menus.

[uie.com...]

People say they want dropdowns but don't like actually like to use them, actually like using them. Pretty anecdotal but interesting.

[microusability.com...]

Some intelligent words from someone at IBM.

[www-106.ibm.com...]

And a nice synopsis which is where most of the above links came from.

[strangesystems.net...]

[edited by: tedster at 8:08 pm (utc) on Mar. 4, 2004]
[edit reason] activate links [/edit]

tedster

8:07 pm on Mar 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Thank you so much for those links, tolachi.

users decide where to click before moving their mouse, which limits the effectiveness of links hidden in dropdown menus.

That's it exactly. And seeing the roasting that big name sites get in that usability study makes my day and gives me some ammo for my ongoing struggles with development teams.

This 67 message thread spans 3 pages: 67