enter image description here

I have 3 buttons in a 2x2 grid as shown. One primary (Decision) and 2 secondary buttons of equal importance. This leaves a space in either the top right or top left. Which option makes most sense and is there a convention for this? There will be a 4th button in edge cases labelled “More” and this contains a drop down listing a few more options eg run a script etc

  • 3
  • @locationunknown It was asked before, yes, but the previous question was closed for being unclear and has no answers. This is a second attempt at clarifying the same question, and is apparently clearer, as it currently has 3 answers. I think to close this one as a duplicate of the first unanswered version would be counterproductive. – maxathousand Dec 2 at 20:33
  • @maxathousand I think it is counterproductive for same user to ask same question over and over, when all it would've take is to edit the first question and get it re-opened. – locationunknown Dec 3 at 6:30
  • I did edit my original question but it remained closed so I had to create a new one and tried to make the problem as clear as possible. Thank you, – Johnny Power Dec 3 at 11:31

Divide the buttons as per their usage, group them, we can do secondary buttons as one group, primary button in another group - Large button, as shown in picture.enter image description here

  • 1
    Good use of the otherwise wasted place. – maaartinus Dec 2 at 17:27
  • Thanks for the idea but I forgot to mention that we need to leave space for a 4th button which will have a drop down with whatever remaining options we need so we need to have all buttons the same size – Johnny Power Dec 4 at 8:20

I think there's a distributing spaces problem in general, not only in the separation between buttons, but also in the button itself.

The distance between the short text and the icon on such a wide button leaves unevenly noticeable blank spaces, together with the buttons layout cause a visual mismatch throughout the composition.

enter image description here

Personally I would solve it in three columns layout:

enter image description here

If there's not enough space for the text, removing the icons on portrait mobile screens: enter image description here

  • Thanks but we need to leave space for a 4th button so that wouldn’t work but like the idea – Johnny Power Dec 4 at 8:22
  • Also in regard to the test and icon alignment in the buttons I think this follows the material design guidelines ie text is aligned to the left, icon to the right – Johnny Power Dec 4 at 8:27

Eventhough there're possibly many alternatives for every aspects and none of them is perfect or better over the other for each desired case, I prefer the right choice because as far as I know and experienced, human brain works grouping similar things together.

enter image description here

So leaving secondary buttons on the left side and leaving primary button on the right, alters differentiability. Besides, it looks like giving options on the left, and the final decision on the right before going further.

  • 1
    Yes totally agree with you! We will have a 4th button called “more” which will contain a drop down of options eg run a script etc. My thinking was to place the “more” button in top left as its opposite to primary position bottom right. What do you think? – Johnny Power Dec 4 at 8:31
  • I also would recommend the same if there's no restrictions of being opposite on top, this way the dropdown's options will occupy the area where already the other two buttons exist. But I would also give a chance trying it on the left bottom, next to the Decision to see visualization and effects of using alternatives. – Erhan Yaşar Dec 4 at 8:40

From My Point of view every screen or a scenario or a case or for a user goal There should be only one primary action representing goal or activity of that screen, we have to make sure that stands out.

The more options we provide, the more distractive it becomes, the users will distract from the goal, it all depends, sometimes the secondary options provide different ways of achieving the user goals. enter image description here enter image description here

New contributor
Prakash Uppala is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.
  • I like it, thank you! The area / container we have is small (as shown) so fitting in 4 buttons and giving the primary the most space could be the problem but your design is a good start. – Johnny Power Dec 4 at 11:09

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.