Please note: This site's design is only visible in a graphical browser that supports Web standards, but its content is accessible to any browser or Internet device. To see this site as it was designed please upgrade to a Web standards compliant browser.
 
Signal vs. Noise

Our book:
Defensive Design for the Web: How To Improve Error Messages, Help, Forms, and Other Crisis Points
Available Now ($16.99)

Most Popular (last 15 days)
Looking for old posts?
37signals Mailing List

Subscribe to our free newsletter and receive updates on 37signals' latest projects, research, announcements, and more (about one email per month).

37signals Services
Syndicate
XML version (full posts)
Get Firefox!

Usability tip: Pad Little Links

23 Jul 2003 by Ryan Singer

Small text links like numbers or short verbs may serve an interface well but make for tiny mouse targets. While working on a new 37signals service (codename: Misto), we found that adding some CSS-based padding helps people activate the target 4px sooner than expected.

Padding tip screenshot

31 comments so far (Post a Comment)

23 Jul 2003 | Benjy said...

Great tip! I hate when trying to hit small numbers as links, say when clicking through pages of products on e-commerce sites. Hope Nordstrom adds this on their shoe listings...

23 Jul 2003 | Mal Ross said...

Hmmm... yeah, I've been doing this for a while on our intranet.

However, I can't help feeling that unless the link looks easier to hit before you get there, the user will still put extra effort into controlling the mouse more precisely. Even though there is a benefit to the padded hit area -- as I say, I do it myself -- I'm not sure there's as much benefit as you'd hope for.

23 Jul 2003 | Mike said...

Codenames eh?

How about giving us just a little preview?

23 Jul 2003 | Don Schenck said...

HAHA ... *I* know what it is! Jason told me back when I was guest poster.

My lips are sealed. Hurry, though!

23 Jul 2003 | mick said...

37signals better File Pile?

23 Jul 2003 | Joshua Kaufman said...

Or, more simply, make interface elements that do something easy to click on.

23 Jul 2003 | Mike said...

Misto... hmm.

I'm going to take some guesses on what this could be, anyone else have ideas, tack 'em on!

  • A usable CMS for small-scale websites
  • A file/workflow sharing tool for developers
  • An easy to implement and use extranet template builder

Ofcourse I'm basing this on that "example" that they gave, so I might be completely off!

23 Jul 2003 | John said...

If I had my choice of Mike's guesses, I'd love to see a 37 CMS for small websites. With an inexpensive commercial license.

23 Jul 2003 | Adam said...

Great usability tip, guys! I love these little things.

24 Jul 2003 | G said...

37BetterOliveOilSpray??

24 Jul 2003 | Masad said...

Another little idea:

If you have a verticle list of links like so many people do, setting the link as display:block and giving it a width of 100% makes it so that not just the text gets activated on :hover but the whole width of the list element. (I believe that this is how it was described in the ALA article - "taming lists")

However, I can't help feeling that unless the link looks easier to hit before you get there, the user will still put extra effort into controlling the mouse more precisely.

Maybe so, but I've been to sites that don't apply what I described above and others that do, and it's just enough so that you notice a difference.

Oh, and IE (6 for sure) comes with a bug. If you have background color of the link set to transparent, again only the text reacts to :hover. Give it a background color and it works (and keeps those warnings from the validator at bay too).

25 Jul 2003 | Masad said...

"If I had my choice of Mike's guesses, I'd love to see a 37 CMS for small websites. With an inexpensive commercial license."

We'll throw our hat into that ring too.

25 Jul 2003 | JF said...

I'd love to see a 37 CMS for small websites.

No comment other than this: Aren't there enough small CMS tools already?

26 Jul 2003 | Masad said...

"A usable CMS for small-scale websites"

(sadly) - perhaps a niche market product?

We're pulling apart and putting together something (not a CMS) right now, trying to work in usability and accessibility. It's a great piece of code (programming), but the writers seemed to confuse the paragraph tag with the table tag, amongst other things. (Maybe they should but into the 'be good at one thing theory?')

(Not trying to be snooty here - we're not wiley veterans and our xhtml/css may leave somthing to be desired as well)

Anyway, just found a nice site that apparently has 40 live CMS's for testing (thanks Sitepoint!). Maybe that will make it a bit easier to find something acceptable.

28 Jul 2003 | Ron Zeno said...

Fitts' Law

28 Jul 2003 | Jesse Ruderman said...

I don't understand this tip. Adding padding increases the clickable area, but it also makes it look like there's an extra space on each side of the link. Are you supposed to remove the actual spaces around the link? But then there won't be any space in text browsers or in Netscape 4 (which you have to hide this rule from because it barfs if you give a link padding without also giving it display:block).

30 Jul 2003 | emsef said...

Or you could just wrap the link around the  number 

30 Jul 2003 | emsef said...

oops...  number 

31 Jul 2003 | Luke said...

Very neat ...

09 Nov 2003 | Abel said...

Great stuff here, i have found a lot of valuable information on your site. Congratulations to your fantastic Site. Thanks

09 Dec 2003 | Martha said...

Hello, I just wanted to say you have a very informative site which really made me think, Thanks !

01 Jan 2004 | Albert said...

Great stuff here, i have found a lot of valuable information on your site. Congratulations to your fantastic Site. Thanks

11 Jan 2004 | alojamiento said...

Please, don't spam the blog

11 Jan 2004 | consultoria said...

Thanks for the info
and, please, this people, don't do that in the blog :'(
diseo web

11 Jan 2004 | chicas rusas said...

Hey, good tool! very, useful.
Why that guy do that in the blog??, i doesn't stand that people
Reggards

11 Jan 2004 | diseo de paginas said...

The tool is free for use?, thanks ryan.

12 Jan 2004 | Entradas Real Madrid said...

good site

16 Jan 2004 | Agnes said...

This topic is one we will tackle later in this article, but it refers to making sure that your application and the dock aren't fighting it out for supremacy of the screen.

16 Jan 2004 | Ebotte said...

At WWDC, I listened to Apple representatives make some excellent points about taking the time to build a 100%-compliant Aqua application, and I think all developers need to look beyond the code and listen to what the folks at Apple have to say

31 Jan 2005 | compatelius said...

bocigalingus must be something funny.

17 Feb 2005 | consolidation online said...

5630 Nice site here

Comments on this post are closed

 
Back to Top ^