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.

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?

share|improve this question
    
That would be "Actionable", I believe... :) –  Kevin M Aug 30 '10 at 1:33
    
There would be a big difference between desktop and mobile applications, especially with the prevalent use and trend of people accessing the Internet on mobile devices. It would be good to differentiate or put this question in the context of desktop and mobile websites. –  Michael Lai Jul 29 at 1:10

4 Answers 4

up vote 10 down vote accepted

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

share|improve this answer

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.

share|improve this answer
    
In fact, I've actually had usability problems crop up as a result of some crazy guy using a 27" Mac trying to fullscreen my app and complaining that everything's too narrow and small. Didn't see that one coming, I can tell you. –  Rahul Aug 20 '10 at 14:23
    
Right, so I am searching for some kind-of relative em way of making sure my click-able actions stand out. It may be a pipe dream, I don't know. –  rick schott Aug 20 '10 at 14:29
    
It is a pipe dream. You need to understand who and for what medium you're designing and make the best decision based on the app/site. Outside of exceptions (like the iPhone HUG) there's not much else you can do. –  Rahul Aug 20 '10 at 17:31

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.

share|improve this answer

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

share|improve this answer
    
It would be helpful to mention that the guidelines you quoted (first link) refer to iPhone targets, i.e. touch devices, since the question is not restricted to that area. –  LarsH Dec 14 '12 at 19:33

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.