What is the ideal height of a button in regular desktop applications?

Question

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)

Answer 1

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:

Answer 2

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...

Answer 3

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...).

Answer 4

One more comment: in MFC, all buttons are default to 50x14 DLU (which is font dependent). In my app where MS Shell Dlg(9) is used, the size is converted to 88x25 pixels.