8

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

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
4

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)

4

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

3

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

  • 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
2

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)

1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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