4

I have been reviewing some UI design patterns where the use of dropdown buttons as both a selection and call-to-action has been ambiguous, and I am thinking of how it relates to various design patterns and modes of interaction that is out there.

The basic design of a dropdown button has two components, the left hand side consisting of a label that is the primary or default call-to-action, while the right hand side has the typical down arrow used in dropdown menus or selection input.

The problem arises when the right hand side isn't styled as a separate 'button', which leads to people thinking whether clicking on the whole button should just default to a selection interaction with the actual selection serving as the call-to-action. However, this then defeats the purpose of splitting the button up so you can have the call-to-action and selection working independently.

I am wondering if there is a difference in the styling and interaction/behaviour for dropdown buttons, especially between Bootstrap and Material Design, and whether people follow those implementation conventions or if there's another 'standard' design pattern out there?

Boostrap single and split button dropdown component: http://getbootstrap.com/components/#btn-dropdowns

Google material design dropdown button component: https://www.google.com/design/spec/components/buttons.html#buttons-dropdown-buttons

Additionally, does this matter whether you are doing a single selection or multiple section for the right hand side? I assume it does because then the left hand side label might actually stay the same unlike for a single selection where the label might change to correspond with the selection.

Improve this question
2

1 Answer 1

Reset to default
1

You might be mixing up use cases. Bootstrap might be responsive, but it's mainly focused on quickly bootstrapping websites. Whereas Material Design was created with a very heavy focus on mobile interactions.

I would argue that, while on bootstrap you do have a dropdown + call-to-action button, on Material Design the second part is not a call-to-action. It is a minor action, such as editing the zoom value or inserting a bullet list. This is probably because dropdown + call-to-action on mobile might be somewhat of a problem.

I would personally recommend that, if your product will be viewed on a mobile platform, you separate the dropdown from the action itself and clearly delineate different buttons and click areas, with a reasonable margin between both to avoid accidental taps.

Furthermore, usability expert Luke Wroblewski advocates that dropdowns should be the UI of last resort:

All too often mobile forms make use of dropdown menus for input when simpler or more appropriate controls would work better.

He gets into a lot of detail these and other best practices for mobile in these videos (highly recommended):

• Luke Wroblewski Part 1 - Conversions@Google 2014

• Luke Wroblewski Part 2 - Conversions@Google 2014

• Luke Wroblewski - Mobile Design Essentials Part 1 - Conversions@Google 2015

• Luke Wroblewski - Mobile Design Essentials Part 2 - Conversions@Google 2015

Improve this answer
1
  • I would say that Material Design is designed to provide a common user interface and behaviour across different devices (and mediums), and that even though a drop down might be more relevant for desktop, the question is still valid.
    – Michael Lai ♦
    Aug 6, 2018 at 22:15

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.