Drop-down lists, menus and combo boxes are all very common user interface elements. Users are accustomed to seeing these elements in native applications and sometimes web apps, but there are a few problems with them.

You have to aim the mouse. Some menus collapse when you mouse out, and some have submenus that you have to aim at to expand.

You can't see the options without aiming the mouse first.

These are the main things that trouble me, maybe other people notice other issues as well. I normally don't use drop-down menus at all if I can help it.

The problem is that I sometimes want to present a long list of options in limited space. Issue 2 is a sacrifice I'm willing to make, but I'm wanting to know if anyone has any tricks to make these drop menus easier to use. Maybe someone has invented a new style of list control.

I'm sure that if these types of controls annoy me, then they annoy users of my site more.

3 Answers
3

You could try something like Mac OS/X has for its taskbar, similar to the selection bar in YouTube. I think the common term is a bubble bar where small images animate larger as the mouse rolls over them, but shrink back down to such a size that all items are visible when the mouse is not over the control.

The advantage of this method is that the list takes less space,while the selected item is big enough to read. That's a pretty good idea. I'm not sure how one would add a submenu to it. Maybe it's good to avoid submenus in things like this anyway.
–
MnebuerquoOct 23 '08 at 14:55

Unfortunately the layout in my project doesn't lend itself well to this type of thing. But it's a novel idea for the web.
–
MnebuerquoOct 30 '08 at 13:59

You could try variations on the theme. Maybe have a single point that expands to a circle of options, each option becomes the centre of another circle of options.
–
Jeff YatesOct 31 '08 at 16:47

Hmm..one more thing which annoys me about the dropdown list is the inability to control their width as it expands with the text (or is their something which I am unaware of ?).

For an alternate, I think about a little popup which initially displays a list of available options in form of Alphabetic index and when the user clicks on an alphabet link, it displays the relevant options to select from. This will reduce the options to select from.

On the same terms, we can use ajax to build the options on the fly as user types in.

I've already replaced the browser drop lists with my own using javascript, but the width thing can be controlled with some css. I think it's called an accordion menu where the submenus are expanded inline instead of to the side. Doing that alphabetically with a long list might help a lot.
–
MnebuerquoOct 23 '08 at 14:59

@Nrj
width='20px' will keep the collapsed drop down at a width of 20px. Problem is, Inernet Explorer shows the expanded item with this width also, while all other browsers i met so far will show you the full menu.