What does the user want to do to see a menu? Press a button? Hover?

Question

EDIT: Thank you everybody for your answers and opinions. Just what I needed and was looking for. I wish I could accept every answer.

I have a huge, unwieldy page that's just a deep, wide table. User can ask for special treatment on each column -- select the col for later operations; sort the col up or down; minimize the col; and more.

The user asks for these special treatments via a dropdown (that I just decided I needed, so not implemented yet) on each col. I need to find the "best" way for the user to see a column dropdown. I have some ideas:

1. User hovers on the col <th> and, after some few tenths of seconds, the dropdown appears.

2. User actively clicks on the col <th> and the dropdown shows up right away.

3. User has a button (tooltip = "menu"), part of the <th>, that s/he clicks/hovers to show the menu dropdown.

I like the notion of hover to see the dropdown and, in this application, it could actually work well. But the second-worst thing is to move the mouse around idly and have all these crazy <div>s flashing on and off all over the place. So hover needs a timeout: I'm thinking that .3 seconds might be close to right.

The first -worst thing, to me, is to hover on an element; to see the dropdown I want; and then, when I go to move into the dropdown menu, the damn thing disappears! So the un-hover state wants to be timed out as well, to keep the dropdown in view until the user gets there. Maybe a half-second timeout would work here.

As for a button to show the dropdown, that's simple but, really, why waste the screen real estate; and why make the user do the click?

And as to clicking right on the <th>, I'm leery of dedicating a click -- a huge resource -- just so the guy can see a menu.

But the question is about affordance and ease. So:

What does the seasoned user expect when I want to show a dropdown menu? What is natural, habitual, intuitive?

Thanks so much! I'm a true beginner at this UI stuff and flying blind.

Answer 1

I would question the use of a menu for providing the options you need. There are other mechanisms for providing features like sorting, paging, selection, resizing, and so forth. For example, jquery plugins that allow a lot of functionality. Have a look at http://webdesignledger.com/resources/12-useful-jquery-plugins-for-working-with-tables for some examples.

I guess the point I am making is that a menu is not always where a user would expect some control option to be found. Resizing a column is one example. I would expect to be able to do this by dragging the column edge where the cursor changes to an arrow. Move is another one where you should be able to drag the column and the cursor goes to a cross shape.

I don't know what else was in your list of special treatments, but is there a way of attacking each one on its own? Hopefully there are not too many of them. Too many in a menu would present its own issues anyway.

If you find you really do need the menu then I quite like the way that Google has done their column menu in the Sheets app. It is invoked with a little button, which only appears when your mouse enters the header cell, and then the user must click it to see the menu. However, this gets rid of all the timing issues associated with hover because the hover effect is on the button and not the actual menu.

Answer 2

Hover is a bad idea. Clicking is an important interaction tool and it has become even more important due to tablets and touch screens. (And remember that the users of your system probably don't want to wait "some few tenths of seconds" for the menu to appear. The mouse clicking isn't a huge cost for the user, so you don't need to worry about the user effort and efficiency effect of mouse clicking. KLM defines mouse clicking to be a 0.1 second operation. Mental preparation on the other hand might take 10-12 times longer!).

The best "no-click" implementation I've seen is on the dontclick.it site, but most users will probably get lost and feel that they are not in charge of the interaction on this site. (Haven't tested though).

Buttons and links have been the common standard for a longer time than menus in web design. And I believe that these still have a stronger affordance than ordinary menus.

Menus became more common when the support for layers became better, and even better when ajax took off.

Generally, menus (and context menus) should include all functionality (or relevant functionality) but the purpose is not to invoke them frequently. Buttons and links are primary action elements that fulfills the everyday use.

I believe that this is the background for Office Ribbon, to bring forth the functionality and present this as well organized buttons with a higher affordance than the unavailable and hidden menu items.

...and then the conclusion:

• Don't use hover.
• Column header clicking is most common for sorting the table by that column. Clicking the header should not show a drop-down menu.
• A web based context-menu should be invoked by (left-)clicking a drop-down button.

Answer 3

1. make the table 100%. (maybe min-width)
2. you can make the TH on two rows (Label/buttons)
3. where do you get your icons from? they are sort of '98-ish
4. what's with the validation icons? what use do they have?

menu on click, to be short