User friendly semantic checkboxes applying Fitts's law
Mar 09 2008
On Friday, we had a discussion at work about the usability of radio buttons. Not very exciting, indeed. But since I also ran into an old acquaintance from my HCI books, Fitts’s law [1] earlier this week, their connection inspired me to spend a few thoughts.
Fitts’s law
In his article “Visualizing Fitts’s law”, Kevin Hale visualizes Fitts’s law and its applications in UI design and concludes:
“Just to bring it into the real world, this makes sense since a penny is a lot easier to point at than a freckle and a house is just as easy to point at as an apartment complex. So the next time you optimize your web site based on Fitts’s Law, remember that if your link is already huge, making it “huger” will not significantly increase the speed at which one can access it. However, making tiny links a little bigger does make a difference.”
Nicely said. And easy to remember – no need to memorize the mathematical function.
Checkboxes and radio buttons on websites
Being used in forms, same as for control of web applications and interactive page objects, checkboxes and radio buttons are pretty small UI elements, rarely any bigger than 16×16 pixels (and not scaling when the browser’s font size is increased). Given a screen size of 15″ or bigger, pointing the cursor on them reminds of the search for a needle in the haystack.
Following Fitts’s law, the aim should be to maximize the clickable area for selecting the checkbox or radio button; in particular since these elements rarely can be located right at where the mouse cursor currently is but are navigated to at high velocity (which is one of the foundations of Fitts’s law).
The solution: semantic XHTML
On OS level in all graphical operating systems, checkboxes and radio buttons can always be selected not only by clicking on the UI element itself, but also its text label. This is a nice application of Fitts’s law and even if it were not, this is a behaviour the user is familiar with and its use therefore increases the usability of our website.
Luckily, there’s no need for workarounds or hacks here, as this can be achieved by simply using the semantic XHTML markup that is anyway intended to be used for these applications: using the
<input type="checkbox" id="switch" />
<label for="switch">Clickable text label for the checkbox</label>
Code caption: XHTML code for clickable
Example caption: Result for the XHTML code above
This is just another example how semantic markup does not only increase the machine-legibility of hypertext documents (therefore making the meaningful), but also enhances the user experience through their thoughtful implementation in browser rendering engines – their creators have most likely read the same HCI literature as we have.
Footnotes
-
An amazing discussion (flame war?) about the grammatically correct spelling of “Fitts’s law” vs. “Fitts’ law” is going on at the Discussion page of the Wikipedia entry.
back
