Taking a page from the book of HCI specialists, mezzoblue v5 makes liberal use of large link target areas for the sake of easier use.
The time to acquire a target is a function of the distance to and size of the target.
On the web that means the bigger your link area, the better. It also roughly means that grouping elements likely to be used together is a smart idea, but the target area is what I’m interested in at the moment.
Once stated, it’s a fairly obvious and intuitive principle that’s all too often overlooked. The new header of mezzoblue puts the idea to work. Instead of maddeningly small target areas that surround only the link text itself:
I’ve adjusted the link boundary area to fill as much logical space as possible and create non-visible, clickable haloes around each link:
While it might have been possible to expand each even further into the boundaries surrounding it, the key word is ‘logical’ — the ability to click an area with no apparent link is more confusing than useful.
A larger clickable area means less precise mouse movement is required to focus on the link. Without impacting the design in any way (the halo is non-visible after all) the usability of the header improves. While the main goal is increased usability in this case, there are positive implications for accessibility as well. Those with motor skill disabilities may have difficulty using a mouse; larger areas to click makes the act easier, which makes a big difference to them.
A personal example: Windows XP comes with a utility called MouseKeys that allow those who are uncomfortable with a mouse to control a cursor with the keyboard instead. It’s frustrating and inaccurate, but I’m forced to use it when on my PC due to the testing setup here.
My PC keyboard navigation skills have always been sharp, but MouseKeys are tough to operate efficiently; the cursor is either too fast or too slow. Smaller areas are much trickier to hover so larger links are helpful and appreciated, especially for important elements like primary navigation.
Though I’m using CSS to apply Fitts, the two sometimes collide. Secondary navigation on this site which appears in the red contextual bar underneath the header could use more space for instance, but the background image used for the faint shadow effect requires precise clipping. (Throwing in an extra
<span> element could work around this if I were so inclined.) And I don’t see a comfortable way to apply the principle to links within body copy, since a larger link area would shift the type baseline and cause ugly gaps between lines of text.
This application of Fitts is just a preliminary stab, there is definitely room for improvement. More reading on Fitt’s Law.