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.

What are the current usability guidelines for the size of buttons (or anything clickable) on web pages?

share|improve this question

migrated from stackoverflow.com May 19 '11 at 9:26

This question came from our site for professional and enthusiast programmers.

    
You can find out more information about this at below mentioned link. jaysonjc.com/programming/… I think it may be help –  Pankaj Agarwal Nov 22 '10 at 10:19
    
Thanks, didn't know about that site, will take a look... –  Tony the Pony Nov 22 '10 at 10:20
add comment

5 Answers

up vote 4 down vote accepted

there are no "official" guidelines for this, so i would recommend to simply take a look at some famous sites. lets's take SO as an example - it wouldn't be such popular without:

  • a good, easy to use and easy to understand ui
  • the main-menue consists of only few points, so nobody gets confused
  • the buttons are big, so the're easy to click, but not too big (they don't force you to move your mouse too far)
  • the font-size is nice, a bit taller than the normal text to be apparent and with a good contrast to the background for easy reading without hurting your eyes
  • the site itself is light and bight, the text is black on white (good contrast again, for a lot of text this is better than withe on black (in my opinion))

for more information, you could ask google for ergonomic ui and take a look at this (it's not specific for websites/webapps, but good points anyway)

share|improve this answer
add comment

As large as possible. The larger a clickable item is, the easier it is to click on.

There are of course other factors that conflict with this, like that you want to have room for other things than just buttons...

share|improve this answer
    
I must disagree, if you make your buttons too large (as in frickin' huge) your site feels like Duplo. It also depends whether designing for touch or mouse - touch generally warrants bigger buttons. –  Jakub Hampl Nov 22 '10 at 10:27
1  
@Jajub Hampl: That's not a usability concern at all, that's just a design concern. There is nothing that says that a button has to look as large as it actually is. A common example would be a modal popout with what looks like a close button, but clicking anywhere in the window closes the popout, so the button is actually huge and covers the entire window. –  Guffa Nov 22 '10 at 11:15
add comment

Someone asked a question about the size of clickable elements and no one has mentioned Fitts's Law?

http://en.wikipedia.org/wiki/Fitts_law

http://particletree.com/features/visualizing-fittss-law/

All other considerations aside, Fitts's Law says (aproximately) "Bigger is better, but you'll get more return from changing from small to medium than medium to big.)

share|improve this answer
add comment

One thing to consider is if you'll be aiming to add touch capabilities to your site. If so, that's a factor to take into consideration. On a touch device you'll want more space between buttons and, ideally, larger buttons (or at least larger target areas)

share|improve this answer
    
Adding to DA01's answer: Check out this question for more answers on button sizing for touch: ux.stackexchange.com/questions/39023/… And definitely check out LukeW's site, especially this article on touch target sizing: lukew.com/ff/entry.asp?1085 –  brianinseattle May 26 at 16:34
add comment

IF you wish to follow Windows UX guidelines, there are indeed guidelines for the size of the button. This can be replicated to Web applications. But not sure if you would do that for web pages. 23px is what windows UX guidelines say

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.