2

I think my current solution for this looks ugly and feel like it's too many buttons. Do you have any better solution without taking away from the quickness by having many buttons.

enter image description here

What are the alternatives to many buttons? I've thought about having a drop down list and a button next to it but I feel like that slows the user down.

  • Are the buttons "C-A" to "C-D" a group where each option belongs to Type C? – Marvin Aug 6 '15 at 14:16
  • Yes, they are. And the reason I don't put them in one long row is because of width space in my program. – uraza Aug 6 '15 at 15:22
1

If you have space issues, you can always use dropdowns, like this (closed and open states):

enter image description here

This works as a select element or a Jquery selector or whatever. Alternatively, you can make the options radio or checkbox input (the latter if options are multiple). This way, you can save space and the element has an expected affordance most users will recognize at first view

0

Use Radio Buttons

Here is an example that may seem more aesthetically appealing and fits your requirements.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Here are the Cons to the above design

  • There are now 2 click actions instead of 1
  • It is slightly more difficult to mentally associate the radio buttons to the "Add" action button than the direct association of button and its label
  • This design addresses the immediate concern but it does not consider the context of the action being taken (context is king in UX)
  • Thank you for the tip but I agree with point two you mention about the cons of this design. I have a hard time associating Radio buttons with add action. – uraza Aug 6 '15 at 15:25
0

I would copy the idea of having IOS tab styled buttons in a horizontal row so user can scan easily from left to right. So if you put the buttons in horizontal row like i have shown, user eyes need to scan the row only once...In case of dropdown or vertical layout...User eyes fixations are a lot more so difficult to find the right button...

Put the most commonly used buttons in that row and use a more drop down to access the rest

I have provided two layout ideas, use whatever seems good to you. Also use human styled language from to clarify the button selection process and to avoid putting duplicate words on each button...

two layouts for a lot of buttons

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.