| HN Mirror

This article, like seemingly ever design-focused article in the last decade, parrots Fitts' Law but doesn't run any numbers:

> An important law to be followed in UX design. In simple words, the larger and closer the touch or click target is, the less time it will require the user to interact with it.

...and mistakenly concludes that, if you just make buttons bigger and add more whitespace everywhere, you get widgets that are easier to click.

If you try to run the numbers on "facelifted" modern interfaces vs. their older counterparts, you'll find that many of them actually fare worse even in terms of Fitts' model.

E.g. if you have three equally-sized widgets side by side -- three buttons, for instance -- simply making them wider by some proportion of the initial width increases the difficulty of getting from the center of the leftmost widget to the center of the rightmost widget, because the distance (up in the nominator) increases by a higher factor than the width (in the denominator). In practice, increasing widget sizes increases the index difficulty in basically every UI that has more than two widgets laid out along a given direction, because it causes the distance to targets to grow by more than the widget size.

(Edit: this is commonly forgotten because "literature" drones about Fitt's conclusion without explaining the context in which it was determined: repetitive motion over a single direction between two already widely-spaced physical items. Making the items bigger resulted in lower distance because, unlike in a modern fluid UI, where widgets are placed at constant paddings that are a fraction of their physical size, that did not cause their centers to drift further apart. Whereas in practical UI cases, increased paddings and widget sizes often result in the average distance to widget centers increasing by way more than (half) the widget width, so the ID actually grows).

The example shown in the article just so happens to fare better because it makes a widget taller by about 10%, while reducing the distance between the only two widgets shown on screen about three times. IRL padding between widgets has steadily grown, so while the numbers line up, this isn't a very representative example -- in fact, many designers would probably object that the design on the right is also bad because there's not enough space between the text field and the button.

But even if we take the design example at face value, generalizing from it is a really bad idea. Because the ID is logarithmically-derived, if you were to take the "narrow" button on the left and just bring it 16px away from the text field, the difference would be minute -- no more than 5% (assuming strictly vertical motion between the midline of the text field and the midline of the button; in practice it's probably way lower than that, since LTR users tend to click towards the left of the field; although FWIW I bet in practice moving the two widgets close together has barely any impact at all, as the text field is likely auto-focused, so motion will commonly happen between wherever the cursor happens to be on the screen and the center of the button).

That's a good trade-off if you only have two widgets on the screen, as in a form -- you don't lose anything other than some whitespace by making a widget bigger. If you have more elements to show, though, that's a very bad trade-off to make. An ID difference of 5% is barely noticeable (IIRC it's just above the "noise floor" in a standard Fitts experiment), which is more than offset by the additional difficulty introduced by scrolling (because you can fit fewer elements on the screen).