8

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

  • 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
  • I think it depends on whether the user is accessing the web page on desktop or mobile devices to start with, and also there are similar questions already on UXSE like this: ux.stackexchange.com/questions/9997/… – Michael Lai Feb 26 at 23:10
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)

|improve this answer|||||
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.)

|improve this answer|||||
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...

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

|improve this answer|||||
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

|improve this answer|||||
0

I'v just been sent a demo build which has a rounded corner checkout button that stretches the whole width of the screen. Beyond saying it kind of looks patronising I can't really back up my opinion with any data.

How big is too big for a desktop button?

Hopefully I will be able to come to a compromise with the developer using consistency of button size across the site as my argument. Fingers crossed I can make it a 3rd of the size but having it fixed on scroll so it's still always in reach.

Hard to keep up the premium look of a trust worthy brand with buttons that look like a "childs play thing"

|improve this answer|||||

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.