User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I am not a UI designer by any means. I have noticed in the last year or two that important buttons/links...etc on many websites now have very big click zones. I must say that I appreciate it, as getting the cursor just so to take action is a pain. I would say its probably more relevant now with mobile, which may even be the driver for these design changes.
So, is there a rule of thumb for button/link sizes on a web page?
It's all based on Fitts's law which gives you the average time it takes to user to get the cursor to the button. You can find different articles on the subject like Fitts's UI Law Applied to the Web or even the Jared Spool's podcast.
And the rule of thumb is easy: an important button should be so big that it can be pressed with, literally, a thumb (hello, iPad) :-)
Here's a rule of thumb for the iPhone, from Apple's Human Interface Guidelines.
Create controls that are at least 29 pixels high and provide a target area that’s 44 pixels high.
More from the book, Tapworthy, where I actually discovered it.
But just how big is big enough when it comes to iPhone tap targets? Well, what's the size of a fingertip? Apple pegs it precisely at 44 pixels and this measure appears reliably throughout the standard iPhone controls
There's not so much a rule of thumb as there is a developing awareness that not all Internet users have the dexterity and agility of a professional, fulltime interface designer. Back in 1999/2000 you saw a lot of "pixel" designs where things were tiny and used buttons 8x8 big. Since the usability boom inspired by Steve Krug, Kathy Sierra, 37signals, Jakob Nielsen and others throughout the 2000s people have become more aware of how usable their apps and sites are and have started designing accordingly.
Another side to the story is that screens and screen resolutions in general are getting bigger. Today's average is probably 1280x1024 and up, whereas ten years ago you'd be lucky to find a 1280x1024 visitor on your site as most people were still averaging around 800x600. Because resolutions are bigger, more pixels fit on the screen and what was previously pretty easy to see is now getting even tinier (and as such, harder to click).
And finally, the introduction of touch-based devices has caused a lot of developers to start taking click area seriously, since it's hard to hit a small target with something as imprecise as a finger when compared to the extreme precision of the mouse pointer.
All of these changes will probably lead to rules of thumb at some point, but overall the best thing you can do is to identify what kind of audience is visiting your site and design accordingly, taking into account who they are, what devices they're using, and other elements such as how much space you have on your screen/window.
To an extent, the size of the click zone is relative to the other elements on the page. I don't have a strict standard, but I generally find that my buttons have a height of at least 40px and my text size is usually at least 13px. I also think that for navigation and other buttons with at least some graphical component, it's important to make the entire area clickable, rather than just the text.
