A button with choices

Question

I have list of buttons that can be pressed or unpressed individually (like checkbox functionality). Some of the buttons can also have some attributes (+ or -), but it's uncommon to select those attributes, the far most common is just to use the initial button values.

See my attached image:

The idea of the design is to let users just click the values they want, which is a pretty fast way of doing the choices. If the user want's to add the attribut + or - (available on "b" and "c") - press the button and after some delay a drop down list appears with the choices.

The disadvantage of this, as I see it, is that I try to merge two standard UI elements - a button and a drop down list, is it intuitive?

Unfortunately I don't have the time to make a user testing scenario to test this.

Can I get some feedback on this? Can you suggest a better way of adding + or - to "b" and "c"?

Answer 1

For mouse interaction you can use split buttons instead of menu buttons. In the buttons "A", "B", ... above you can choose the pressed or unpressed state. With the drop down buttons below you can choose the attributes.

See microsoft ui guidelines

Example with split buttons (not styled):

Other approach: The selection of the attributes is displayed when the mouse is over buttons "A", "B" ....

Answer 2

The way you've proposed it is the way OmniGraffle does it, and I've always found it quite intuitive. A few details of their implementation:

• Their long press is really short; no more than a couple hundred milliseconds before triggering the dropdown. Makes it feel snappy and responsive.
• If the user actually clicks on the small arrow in the lower-right corner of the button, it triggers the dropdown immediately. While it requires a bit of dexterity, it's nice to have that option available if you know what you want is in the menu.
• As you diagrammed, you're retaining the user's selection if they select a sub-item, making it the 'default' choice on the top button. In my opinion, this is the correct behavior, and it's what OmniGraffle does, too.
• As KatDNA mentioned above, make sure you're designing for desktop (mouse) usage. The interface would necessarily be a bit different on touch (although long-touch is acceptable in a gestural interface to reveal greater complexity, as well)

Answer 3

My first thoughts on this:
Is it quite necessary to first hide the options and bring into view only after clicking the button? That can come as a surprise to the first time user.

If the button could include the plus and minus signs above and below the symbol [a/b/c/d] and the UI logic is hidden from the user, that might make it much more intuitive. Perhaps also reduce the number of clicks needed.