Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

On most GUI creator (I just checked Qt Creator and Flex Builder), it seems the default button height is about 22 pixels. This is what I use for most desktop applications I create except those I make for myself. In this case, I use bigger buttons - 30 or 40 pixels height because I feel that, with 22 pixels, I need to "take aim" more than necessary. Also, as our screens get bigger, I think we can make buttons bigger too.

So are these 22 pixels based on some proper usability study? Or is it an arbitrary number that perhaps comes from an old default in Visual C++ or some other popular development environment? If 22 is not a good default, what button height is generally recommended? Any suggestion?

(By the way, I'm only talking about regular desktop applications)

share|improve this question
    
+1 Good question with good answers. You might want to constrain your question title to mention regular desktop applications. Without that context, "the ideal height of a button" seems like an unanswerable it depends question. Just a thought. –  peteorpeter Aug 13 '11 at 19:15
    
I would recommend that any size is fine as long as the text is readable and as long as it can be clicked without any issues. To this end, I would say use relative font-size's (percentages or em). Also, make sure to use a verb on your buttons instead of just Yes or OK be more specific 'Yes, Format my Hard drive', 'Yes, send the email' etc. –  Ali Aug 14 '11 at 11:11
add comment

3 Answers

up vote 6 down vote accepted

Qt is a cross platform ui toolkit so will conform to the OS style accordingly. Unsurprising then that Qt will use the Windows recommended button height when on a windows platform which is 21 pixels border to border inclusive, on Vista and Windows 7, as per the MS UX guidelines. On Mac OS X then the standard button height is also around the same height and I believe if you resize a pushbutton up to 23 pixels, it changes from a round ended push button to a square ended button. I think the Aqua default button height is 20 pixels.

However, if you look Qt's example stylesheets that are distributed with Qt by default, then themes like PageFold use a height of 22 pixels, and Plastique 23 pixels, and CleanLooks a huge 33 pixels.

Now personally, if I repeatedly draw out the size of a button that 'seems a nice and comfortable size to use' (for a text push button on a desktop application), then I almost invariably end up with something around 90x26. A height of 26 tends to be what I use when designing an interface from scratch (although some applications I have designed have looked better with buttons up to 35 pixels in height). At 26 pixels, the appearance seems nice on the eye and it's a little less fiddly to use whilst not looking completely out of place or too chunky.

But I feel bad that I disagree with Microsoft and Apple, after all they've probably spent rather more time and money coming up with a height of 21 than I have coming up with 26. On the other hand I like to design interfaces that do not have huge amounts of functionality crammed into a space and therefore if I use buttons with a height of 21 pixels then the buttons look all lost and alone, so it can be a matter of how it fits in with the rest of the design, and how much control you have over the whole application - since it's also important to be consistent. I think context is definitely going to be a factor in the ideal button size in a given situation.

I also just noticed that when I upload an image here on SE, the upload/cancel buttons are 91x26, so at least I know I'm not alone in liking this size :-)

So here's my ideal button size: enter image description here

share|improve this answer
    
+1 I usually use 26 as my height as well. –  Matt Rockwell Aug 15 '11 at 11:47
add comment

Well, the Windows User Experience Interaction Guidelines specifies everything for the Windows applications. Including Recommended sizing and spacing. As you can se, 73x21 is the recommended button size. 75x23 if you include the invisible 1px border.

Fitts' law, however, is the usability research you are looking for if you want to calculate the time it will take to move to the button. In short (and not surprisingly): larger buttons and shorter distance is faster...

share|improve this answer
4  
Congratulations on being the 10000th UX post! :-) –  Rahul Aug 14 '11 at 11:46
add comment

I don't think there are restrictions. But you should be consistent in your implementation. Note that the visual proportion should be balanced to other dialog elements and controls (e.g. textfields, checkboxes...).

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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