Fitts’ Law and A-Z Listings

Snapshot of Boston University A-Z navigationBoston University’s A-Z Listing

A common navigation element on university web sites is the A-Z list. In general, the lists work as a pseudo-site map. They are effective in getting people to common “tags” quickly.

A-Z listings by their very nature have small hit areas; each letter is linked to a distinct page. These small hit areas are trouble for physically impaired people or people using imprecise pointing devices. Fitz law states that there is a correlation between the distance from the final target and its size to the accuracy of completing the hitting task. In other words, a small link that is far away from the mouse pointer will be harder to click on than a big link that is close to the mouse pointer. A-Z listing are great stopgap solutions for findability, but trouble for usability.

There are a couple of solutions to this problem, but they are not used very often. Below are the A-Z listings for Cornell, Berkeley, and KU. Of these, KU’s is the least ideal solution. Its hit area is small and the spacing between the letters (hit areas) is small. The other two still have small hit area’s but have more spacing between the letters. The spacing should reduce the number of missed clicks.

The first solution to the problem is to increase the hit area for each letter. Larger hit area The hit area does not need to be indicated upon first impression, though that would be nice. It does need to have a indicated that area when the mouse pointer is hovering the letter. This small visual cue will confirm with the user that they are indeed about to click on the right letter.

The other solution is to group letters together. Boston University does this. The grouping of letters automatically increases the hit area, which in turn solves the problem of Fitz Law.

Snapshot of Kansas A-Z navigation
KU’s A-Z Listing
Snapshot of Berkeley A-Z navigation
Berkeley’s A-Z Listing
Snapshot of Cornell A-Z navigation
Cornell’s A-Z Listing

Leave a Reply

You must be logged in to post a comment.

Powered by WordPress
Entries (RSS) and Comments (RSS).