10

I had a discussion with a colleague about whether or not to use split buttons, such as this one from Powerpoint:

An example split button from Microsoft Powerpoint

(Dis)advantages

Advantages:

  • Allows you to group related actions, and helps to keep your UI clean
  • Just one click 'slower' than a separate button, but still quickly accessible

Disadvantages:

  • Hides commands from the user
  • Requires additional mouse clicks for some actions

The dispute

While we both clearly understand the (dis)advantages, we cannot agree on whether or not the split button pattern is a good one at all. We figured that our preferences were related to me being used to Microsoft products, and my colleague being more used to Apple products. Microsoft seems to use the pattern frequently, Apple (as far as I know) not at all.

Given this discrepancy, we wondered: are there any usability studies that have validated the pattern?

5
  • 3
    I bet the Microsoft UX team having performed usability studies to validate this pattern. You have missed one other advantage - a default action can be assigned to the button, which is often based on popularity, e.g. in your example Copy is likely to be a more common action than Duplicate.
    – SteveD
    Sep 19, 2016 at 12:32
  • 1
    I'd bet folding money that it's as valid as any other menu. That's all it is, after all: a menu. It's reachable from a button rather than a menu bar, and the default choice is already bound to the bigger part of the button so that you don't have to open the menu, as you do with most menu-bar menus, to get at the desired action.
    – MMacD
    Sep 19, 2016 at 13:58
  • 1
    Also another disadvantage: The pull down button is often very small and thus requires more aiming to hit. This can become quite annoying quickly.
    – Mononess
    Sep 19, 2016 at 22:45
  • Might be a bit off topic but, I don't get why you first say it's an advantage that it's only 1 click extra, then you say its a disadvantage that it's 1 click extra. Which one is it?
    – MJB
    Sep 20, 2016 at 6:07

3 Answers 3

3

There is nothing wrong with this pattern.

It doesn't have any major flaws or critical issues as Google included it in its design guidelines as dropdown buttons. And believe me they test everything thoroughly, so don't worry it is a safe bet.

As everything else it has its own advantages and disadvantages as you pointed out. You just have to decide in which situation it is appropriate for use and in which not.

If you have lots of actions in a single screen in some cases it is wiser to group them under 1 dropdown button to reduce visual clutter. Sometimes it is the other way around, but its the UI/UX designers call to decide which is better for the current situation.

3
  • 6
    One of the biggest mistakes in UX is that if it works for "X" (Google, Amazon, Apple, what ever brand), it will work for you. Whether or not Google uses this tells you basically nothing about what your own users want or feel comfortable with.
    – MJB
    Sep 20, 2016 at 6:11
  • 4
    The dropdown button seems to have been dropped from Google's design guidelines.
    – Damien
    Nov 28, 2018 at 14:38
  • Interesting ... Google may have dropped it from the design guidelines, but it still exists as a Material UI component.
    – cmdoc
    Jan 7, 2021 at 15:51
2

It has its purpose.

  1. It saves you when screen space is premium
  2. It helps you make "frequently used operations" more visible
  3. It helps you categorize related operations (similar to menus).

Consider a calculator. If you combine +,-,*,/ into a split button, people will frown upon you (because they are frequently required). But, if you combine sin,cos,tan, it may not look that odd.

If your users feel strongly against a split button, an alternative is to use a drop-down selection box and put a "Submit" button on its side.

0

It's just a menu, but attached to a button rather than a menu bar.

So it's readily understood, has the goodness associated with pulldown menus, and is potentially more convenient than a menu-bar menu. It's quite possible that menu bars will be redesigned to reflect the convenience (already seen in Photoshop 7, at least) of having the default action bound to the text on the bar.

1
  • You must mean Photoshop CC (what would have been Photoshop CS 7 if the CS series hadn't ended). Photoshop 7 was a great product that preceded Photoshop CS 1.
    – Roy Tinker
    Mar 20, 2018 at 21:06

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.