What is the best practice for a UI, to make all the similar buttons with a fixed width, no matter how long is the text (with the condition to fit) or make the width proportional with the text and add the same padding?

enter image description here

Update:

Please check also this example on Material Design Guidelines that suggest a minimum width and flexible width.

enter image description here

Dialog buttons Button height: 36dp Button top margin: 24dp Button padding: 8dp Button alignment: Right edge for LTR scripts Button width: Varies based on button text length

enter image description here

It is this a general rule?

  • Does your app/site need to be translatable? Different languages mean different word lengths so that would play into making the lengths proportional. – kerr Nov 16 '17 at 22:57

In my opinion, if the buttons are one over the other then try to adapt the shorter to have the wider's width. In your example it would be the green option, but giving less padding to the "Subscribe" button.

If the buttons are horizontal there is no need to give them the same width.

enter image description here

  • 1
    It is an interesting approach, but if there are multiple buttons and maybe in a page of a website it doesn't appear the button with the widest width, it is basically the first option. Anyway, like I said, interesting point of view. Did you find any research on this? – Madalina Taina Feb 5 '17 at 10:43
  • 1
    Sorry, I didn't check any research. Well I mean if the buttons are one over the other (if they are in different parts of the page it doesn't apply) and always with certain limits. If a button is too wide vs a too short then I would leave them as they are or try to make the widest be double width of the short one, if possible. – Alvaro Feb 5 '17 at 10:52

I think fixed width is better option because it gives visual balance to the screen. Different size also sometimes used to give emphasis, for ex- it might be possible that buttons at the same level but the button with bigger size is getting more attention.

  • Thank you for your answer. @alvaro suggested also buttons with the same width, but your explanation is something extra. Do you have any research on this? – Madalina Taina Feb 7 '17 at 4:44

Fixing the width for buttons will give a coherent aspect to the interface. Yet, it has the risk of not being able to handle further buttons with perhaps longer labels. This reason makes it incompatible with a fixed guideline.

You can always emphasise one particular button by playing on size, colour and padding.

After I made research multiple times on this issue, I didn't find a good reason to believe that buttons with the same width help the user in any way, influence less the decision or improve accessibility. Instead, I think we shouldn't ignore the recommendation from Material Design Guidance that suggests a preferred height, but not a fixed width: "Accessibility

To ensure usability for people with disabilities, give buttons a height of 36dp and give touchable targets a minimum height of 48dp."

enter image description here

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.