~~--- title: "Fitts's Law" ready: true
Fitts's Law
The amount of time required for a user to hit the target area depends on the distance to the target and its size.
In other words, the bigger and closer an object is, the easier it is to hit it. The smaller and further the object is, the harder it is to hit. The illustration below shows this concept (consider the red dot to be a cursor).
In practice what it means is that we should keep an eye on the size of elements and their clickable area. There are a lot of things to consider. For example, the clickable area of checkboxes should include their labels.
By supplying menu icons with labels and even some description, we can make the clickable area much bigger.
Sometimes we can add padding to elements — like a close button — to make them easier to hit. But this is not a universal solution because paddings are invisible, and users might not be aware that an element has a bigger clickable area.
Long time ago I had a project which was an app specifically designed and used only on tablet devices. In this app there was a chart with dots which allowed you to change the chart. Similar to sound editing apps, where you can change frequencies.
In order to make the dots easy to hit, there was an invisible area around them which you can touch and drag the dots. In this case it worked pretty well, even though users don't realise that there is an invisible area.
Also I have to mention WCAG standards for minimum target size. For example, the bare minimum size for an interactive element should be 24x24 pixels.
There is a wonderful article Getting To The Bottom Of Minimum WCAG-Conformant Interactive Element Size by Eric Bailey which explains much more about WCAG requirements.
By the way, there is a fun interactive visualisation of fitts's law.