Ideal button Size

Question

My coworker and I constantly argue about button sizes. I like to have buttons that have a fixed size (ie if minimized/maximized the button sizes dont change,other controls may but not buttons), width= text in it and height=27 -30 pixels.

My co-worker prefers buttons that are only 20 pixels in height and the width is docked to vary as screen is resized. that is to say,when a screen is maximized the button elongates itself.

Personally,I don't like buttons that resize. I was wondering if anyone else want to chime in on this UI argument?

Answer 1

Buttons that resize would annoy me.

I'm no designer, but that just doesn't sound right.

Actually, that would drive me nuts and make me very angry at you.

Answer 2

I vote for buttons that do not get wider as the form gets wider. Personally, I think it is just ugly and makes the buttons harder to use because your eye is no longer drawn to the text in them.

Also, with 16:9 and 16:10 ratio monitors becoming popular, those buttons will be abnormally wide ;)

Answer 3

Please don't resize the buttons...

Answer 4

It's not the size of the button that counts, but what you do with the button.

Resizing buttons based on the screen is fine if they stay in proportion and they still need to have a cap - this is normally done when the form is launched and not during any resizes. However, resizing the buttons when the window resizes - that's a no-no.

Answer 5

I think it would depend on exactly what else is going on in your app. If everything else resizes horizontally, maybe it would make sense?

The only way to know for sure is usability tests. Get real users, sit them down, have them try it out and see what they think, and whether they are confused (or annoyed). Asking a bunch of developers and designers can only get you so far.

Answer 6

Resizing is bad, IMO, but do be sure to anchor buttons to the appropriate corner(s).

Answer 7

Buttons should not resize, for a variety of reasons. Firstly, it would be a hell of a task to style and implement resizable buttons. QAing them would be a nightmare, probably.

Secondly, much of usability is based on pattern recognition; people look for familiar concepts when they seek information. When you show a user a bunch of different button sizes, you risk confusing them; they might think some buttons are more important than others.

I am not opposed to buttons that are liquid with the amount of text inside them, though. Sometimes a button just needs to be a bit wider to accomodate text.

That being said, the text inside a button should be clear, concise, and to the point. If you are having to create buttons that are super wide to accomodate the sentence you put inside them, you need to cut-down the label to a word or two that the user can understand quickly.

Answer 8

thanks guys!! I think I see a clear winner!!

Answer 9

For what it's worth, according to the Vista UX Guidelines the default button size should be 14 x 50 "dialog units" (about 28px by 100px on a 96dpi monitor), with about an 11px border from the side.

Regardless of how you feel about Microsoft as a company, I think they do a good job with an uniform UI. If you are working on Windows apps then I think this guideline is a must follow.

Answer 10

If you create buttons, please make sure the text has enough space left. Because if you want to translate the text into an other language (than english) you will probably need more space.

We use a fixed size for buttons but there are some exceptions (just because our software has to be translated into several languages.),

Answer 11

When thinking about button sizing that need text captions (i.e. not icon type buttons) it's always good to allow at least an extra 60% for non-english text, if you ever expect to localise the app.

Answer 12

I agree that some scenarios where localization of an app is needed requires you to take into consideration the button size.However that still does not call for buttons that stretch to 75% of your screen in width(height remaining the same).

Answer 13

Usability wise I think it is import to keep buttons in a consistent size and position.

The button should be anchored, the user should not have to hunt for it. The user should not have a "woah, why are the buttons so big now" moment. Remember "Don't make me think"

To me it sounds like one of those times when a developer wants to resize buttons because they can, and the code ts cool, not because it would make a better user experience.