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:

enter image description here 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"?

  • Are you designing for mouse interaction or touch? – katDNA Dec 7 '11 at 10:40
  • There's already quite a bit of precedence for this. Examples: Tools pallets in apps like Photoshop, split buttons as you see in many MS apps such as Word, touch devices such as iOS's keyboard. – DA01 Dec 7 '11 at 16:26
  • Designing for mouse interaction. It's for software, not a website. – Henrik Ekblom Dec 8 '11 at 8:15
  • A key feature is that the attributes "+" and "-" are rarely selected, so I feel that the menu doesn't have to be "in your face" obvious. But I don't want users to miss the opportunity to add those attributes - if they want to. – Henrik Ekblom Dec 8 '11 at 8:25

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):

Selection with split buttons

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

selection with roll over

| improve this answer | |
  • thanks for the input. I prefer, as stated on another reply, to keep the number of buttons as low as possible (as any designer would, I guess). But this is an option if the combined drop down/button isn't working out for some reason. – Henrik Ekblom Dec 8 '11 at 8:23

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)

OmniGraffle Tools OmniGraffle Dropdown

| improve this answer | |
  • It works only for an exclusive selection. – sysscore Dec 7 '11 at 17:13
  • Yes, this approach seems to be widely used in different programs, and should be pretty straight forward. Thanks for the input on the suggested button behaviors. – Henrik Ekblom Dec 8 '11 at 8:21
  • @Sysscore - it will work in my case - a, b, c, d and e are not exclusive selection (for example none, all or just "a" and "c" can be selected). But only one attribute can be chosen for each button, and that is what I need. – Henrik Ekblom Dec 8 '11 at 8:39
  • @Hendrik - You're right. With mouse click of the buttons you change the pressed state. With mouse click on the small arrow you can change the attribute (the second point from Daniel). That works. – sysscore Dec 8 '11 at 10:21

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.

| improve this answer | |
  • What I prefer in my design is the minimalistic design - I want to reduce the number of buttons as much as posible (but, of course, not to a point where it's not intuitive what to do) – Henrik Ekblom Dec 8 '11 at 8:19

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.