Is a split button valid without proper visual grouping

Question

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 ..

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

  

  If this is considered valid, kindly state the reason.

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

Answer 1

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

Answer 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.

Answer 3

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