6

Split button is basically a button with a default action and several other actions which are shown in a drop-down menu.

While there's no doubt in how it functions, the issue is with how the default-action and more-actions icon should be highlighted in UI.

I have created basic variations of split buttons in below pen.

https://codepen.io/paulj05hua/full/PooayrP

-- edit -- Adding GIF ..

split-button-cases

In the above, both styles 1 & 2 are properly highlighted as a single group. But with style 3 user might mistake the more-actions arrow as separate button.

So the question is whether style 3 is valid or not ?

PS:

  • style 3 is used by Gmail in the mail list panel for selecting emails

    gmail-split-button-usage

    If this is considered valid, kindly state the reason.

  • There's no mention of this type of component in material design ( material.io )

  • Hi @paulj05hua, thanks for your contribution to UXSE. It is a really interesting question about a common design pattern for a UI component, and hopefully there will be some good answers. – Michael Lai Nov 9 '19 at 23:10
  • I feel like there is no real argument for style 3 that would outweigh the usability aspect of the first two. Especially with something so little as a hover effect. – Big_Chair Nov 13 '19 at 13:03
  • @MichaelLai Thanks ! – paulj05hua Nov 13 '19 at 21:50
  • @Big_Chair Yes. That's what I was thought too. But posted here to get clarity. – paulj05hua Nov 13 '19 at 21:52
5

The best and the worst thing about UX is that there are no laws

There are guidelines, best-practices, widely-accepted patterns and certain broadly defined rules. But no unbreakable laws.

Split-buttons, by definition, should be styled as a group and at the same time, be properly separated. Styles 1 and 2 clearly indicate to the user that the dropdown next to "Reply" is related to it.


But now, to answer your question... Style 3, unfortunately, is not invalid. IT'S NOT RECOMMENDED, but it is not invalid.

I like to keep mentioning this to many of my colleagues and to the people in the community that, "just because a big, famous company did something, doesn't mean it's right". So, always try to make your design as accessible as possible and if there's a conflict, A/B test with a group of users

  • 2
    +1 It would be nice sometimes if there were laws... then we can penalize people for bad design :D – Michael Lai Nov 14 '19 at 0:03
  • I'm choosing this as the answer, for now. To add to this, I agree with @Pete & Karthi 's answers on using spacing to reduce the confusion. However, while considering cognitive-load of a typical user, I guess styles 1 & 2 greatly reduces the load here, and style 3 only increases it. User will at least think twice or thrice before actually clicking the drop-down button, as it shows hover-highlight separate from the default action button, and user might initially think those are two different actions. – paulj05hua Dec 5 '19 at 17:52
2

I think it stands to reason that it must be "valid", otherwise Google wouldn't be doing it. I think that the only thing you need to look out for is the spacing - in the case of the Gmail screenshot you posted, note how close the drop-down arrow is to the checkbox that it relates to, and note how the space between the drop-down arrow and the next button (refresh) is about as wide as the drop-down arrow button itself. This establishes a very clear visual cue that the drop-down arrow button relates to the checkbox.

In the attached screenshot, I've closed up the space between the buttons, and you can see how the purpose of the drop-down arrow starts to become ambiguous.

mockup of gmail interface with whitespace between buttons reduced

  • As mentioned in the other answer, just because a big, famous company did something, doesn't mean it's right. – Luciano Nov 14 '19 at 11:02
0

whether style 3 is valid or not

Yes, it could be considered valid,

When the actions inside dropdown are on a similar level to "Reply". For Ex: Forward and Reply All,


It goes invalid when the dropdown values are just a dependent of the primary value For Ex: Reply Preferences.

This is because highlighting dependent actions alongside a primary action isn't as important as highlighting actions of a similar level.

However, for both cases, it is important that the dropdown is in close proximity to its primary action (Reply) so it is obvious that the actions are intentionally grouped together

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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