Popups

When making targets for your user to click or point on, the bigger you can make it, the better. This is shown by Fitts’ law, which states:
Time = a + b log2(distance/size + 1)

Where a is the start/stop time of the device, bthe speed of the device, distance is how far is is from the starting point to the target, and size is how big the target is (or rather, how wide it is on the axis of the direction you are moving).

How does this affect me?

There’s two ways which Fitts’ law can be used to your advantage to make your websites more accessible: putting your targets near the “starting point” and making them nice and big.

Put your targets nearby

It goes without saying that the further away something is, the longer it will take to get there. Of course, if you are designing a website then you won’t know where the user’s mouse pointer is, but you can make a guess. For example, if they’ve just filled in a form, then it’s probably likely that their mouse pointer is over the last field that was filled in, so put the submit button near the last field.

Popup menus can be useful for proximity, since the target is pretty much right next to the pointer. The most common usage of this is the popup menu you get in Windows when you right-click, but this could also be done on the left-click or even when a user presses and holds on a touch-screen device (such as in Windows 7).

However, you need to beware that popup menus don’t get in the way of the intended target. The Marks and Spencer website does this by covering up a large amount of the page (including the search box) when you go over the menu item (see below). This could be solved by either having a short delay before showing the menu, or having it show when the user clicks on the menu bar.

Another noteworthy method is having the targets at the edge of the screen, for example having the Windows Start menu at the bottom left, and the Dock at the bottom of the screen in Mac OS. Mac OS also make extensive use of hot spots, where the corner of a screen is the target.

Make your targets big

When making links, make them nice and big. Don’t use small 5px high buttons, make them nice and clunky!

A common mistake designers make is to ignore the whitespace around links in menu bars. So even though the link itself is small, if you make the whitespace active then the target is made bigger! For example, the BBC News website (see right) has wide menu items in the sidebar, where the whole width of the sidebar is active rather than just the link text. This can be seen in the image where the whole ‘politics’ menu item has been highlighted.

It’s also helpful for accessibility!

Your older visitors will thank you for having large link targets: those with poor motor skills will struggle to move the mouse with fine detail, so will be able to browse quicker. To see this for yourself, try using your mouse with the tip of only one finger: you’ll notice yourself slowing down to try and hit the small targets.