21

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

This is a general rule?

Improve this question
1
  • 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, 2017 at 22:57

6 Answers 6

Reset to default
13

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

Improve this answer
2
  • 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, 2017 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, 2017 at 10:52
6

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.

Improve this answer
1
  • 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, 2017 at 4:44
4

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

Improve this answer
1
2

Madalina, a general minimum width for buttons, as stated in the Material Design Guidelines, is important, because it ensures that all buttons are reasonably easy to click or tap even for very short labels such as OK. Think "Fitts's Law."

And while same-width buttons may look more aesthetically pleasing, I've yet to see research that shows any usability benefits for using them.

Improve this answer
2
  • Can you refer to the relevant section in the Material Design Guidelines that has recommended minimum width? I saw only a reference for a minimum height.
    – Madalina Taina
    Jul 9, 2019 at 12:51
  • 1
    The images in the Specs section way down on the Buttons page indicate a minimum button width of 64dp.
    – JochenW
    Jul 10, 2019 at 4:51
1

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.

Improve this answer
1

In the design system that I've created for my company, I combined both types. Fixed-sized buttons better use for modal windows and pop-ups. That's more aesthetical and usual for users and pretend to be as "design pattern". So fixed-sized everywhere when we have 2 or a group of buttons. The width, in this case, is calculated by the longest possible text label. In all other cases, I use buttons with paddings, e.g. 16px+TextLabel+16px.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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