2

I have one button that offers the user up to ~10 choices. The button label says 'apply as' and the dropdown lists all the possible choices. I have multiple choices on how to design this.

As a hover, where the dropdown opens on hover. As a onClick, where the dropdown opens on click.

I think I will be going for the hover as it is most commonly used, however should the 'apply as' also be clickable in that case? I dont have anywhere where the user should go as they need to define their choice first. It feels wrong to have a button that is not actually clickable, but only function as a placeholder for the dropdown.

Whats your opinion / advice?

Mockup: enter image description here

5 Answers 5

2

Should a button with a dropdown always have a click action?

Absolutely! Unless you don't care about mobile/tablet support which do not have a "hover state".

I'm a strong advocate of keeping things simple and not reinventing the wheel:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

If you decide to keep the hover initiated dropdown be sure to read the timing guidelines outlined here: https://www.nngroup.com/articles/timing-exposing-content/

1

For material, they have a segmented dropdown button

A segmented dropdown has two sections: the current state and the dropdown arrow icon. Pressing the current state will cause that state’s action to fire within the screen. Pressing the dropdown arrow will display all the state options. Selecting one will change the displayed state

EDIT

From your mock, this maybe more similar to a batch actions dropdown button you often see above a data table. Clicking the label of the button reveals the dropdown with the list of choices to initiate the action.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

You don't need an additional submit or apply button in this case, so it's 2 clicks instead of 3.

4
  • I see. However that might work fine for forms etc, but I dont it works well for action buttons. For example in that case, what if the default value is the required option? Should there be a button next to it to actually confirm that decision? It should also be inviting to actually change it. The default value therefor should be something that doesnt work in any case.
    – Alesis
    Aug 28, 2017 at 14:57
  • hmm. maybe i misunderstood. The dropdown shows the choices, with a label saying 'apply as', and they need to click this button no matter what to initiate the next action, correct? Is the concern that showing a current state will not make them think they have to do something? Sorry if I misunderstood. Do you perhaps have a mock with what you have so far?
    – Mike M
    Aug 28, 2017 at 15:02
  • Thanks for your help Mike. Ive just added a mockup. I dont think I can have the default state such as 'student' as it might prevent 'parents' from clicking/hovering the button. Instead i use a label that urges the user to use it. So im not sure if the user should click to show the dropdown, if he should hover, or both? And if its hover, isnt it weird that there is no click action on a button?
    – Alesis
    Aug 28, 2017 at 15:16
  • Okay, I see this more in line with an 'actions' button you'd see on the top right of many data grids. Is that a little more in line with your use case?
    – Mike M
    Aug 28, 2017 at 15:50
1

I have recently done some user testing on hover dropdowns, and there was a general expectation from users that the top level should also be clickable.

1
  • 1
    I agree, but I wish the answer weren't a short anecdote only... Sep 14, 2017 at 19:41
0

I would say it depends on the situation. The problem is accidental selection of the wrong option.

For example, say selecting something in the dropdown triggers a refresh of data with no/little performance overhead that doesn't perform any sort of update or submission. The user can then easily select another option, and it won't slow them down.

However, using your example, if the user accidentally selects teacher instead of student, they might be moved to a page with a form designed for a teacher. Now they have to go back and make another selection. In a case like this, where a form is being submitted, or a page refresh occurs, it's usually best to have a submit button.

0

Yes

But I've seen sites that remove the hover function and only have the menu display onclick which seems a bit senseless.

Edit: in your case, you're using the wrong object. It shouldn't be a button, but a drop down menu. Buttons are meant for onsubmit actions

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.