Watch people use their phones on a bus or in line and you will notice that most of them use one hand. The thumb does all the work, and a thumb can only reach so far. Designing with that in mind is one of the simplest ways to make a website feel easier.
Fitts’s law in one sentence#
The bigger a target is, and the closer it is, the faster and more accurately people can hit it. On a desktop that applies to the mouse pointer. On a phone it applies to the thumb, which is far less precise than a pointer and cannot reach every part of the screen comfortably.
The thumb zone#
Hold your phone in one hand and move your thumb around the screen. The middle and lower part of the screen is easy. The top corners are a stretch, especially the corner opposite your thumb. Many sites still put their most important controls in exactly those hard-to-reach places, because that is where they sit on a desktop layout.
- Easy: the lower middle of the screen.
- A stretch: the top of the screen and the far edge.
- Hard: the top corner opposite your thumb.
Make targets big enough#
Small links and tiny icons are easy to miss and easy to hit by accident. A good rule is to make anything tappable at least 44 to 48 pixels tall, with enough space around it that a thumb doesn’t catch its neighbor.
Before
A small text link, “book now”, at the end of a paragraph, easy to miss and hard to tap.
After
A full-width button, Book an appointment, 48 pixels tall, with space above and below.
Put key actions within reach#
The action people take most, such as “Add to basket”, “Show results” or “Book”, should sit where the thumb already is. On long pages and in search filters, a button fixed to the bottom of the screen keeps the main action within reach as people scroll.
Before
The Apply filters link sits in the top-right corner of the filter panel.
After
A wide Show 24 results button stays fixed at the bottom of the screen while people choose filters.
Fixed bars should be slim and few. One bottom bar helps; a fixed header, a fixed banner and a chat bubble together leave little room for the page itself.
Keep risky actions apart#
Fitts’s law works both ways. If a destructive action sits right next to a common one, people will hit it by mistake. Put distance between “Delete” and “Save”, or between “Cancel order” and “Continue”, and make the risky option look different, so it is never tapped by accident.
Check it on your own phone#
- Open your website on your phone and hold it in one hand.
- Try your three most important tasks using only your thumb.
- Notice every time you stretch, shift your grip or tap the wrong thing.
- Try it with the other hand too; around one in ten people are left-handed.
Each stretch and mis-tap is a small moment of friction. Remove a few of them, and your site will feel noticeably easier, even though nothing about its look has changed.