The Menu That Needs Two Hands

Phones got bigger and the layout did not move

A decade ago a phone screen could be crossed by a thumb without shifting your grip.

Current handsets cannot, and the conventions established on smaller devices stayed put: the menu in the top right, the logo top left, the search icon beside the menu.

Those positions were sensible when the whole screen was within reach. On a large phone they are the two least accessible points on the display.

Nothing was decided badly. The devices changed underneath a convention and the convention did not follow.

How people actually hold a phone

Most of the time, in one hand, with the thumb doing the work.

People are frequently doing something else: carrying a bag, holding a coffee, standing on a bus, walking, or working with the other hand.

The thumb sweeps a rough arc centred near the lower middle of the screen. Within that arc, taps are quick and accurate.

Outside it, the person has to shuffle the phone down the hand, use their other hand, or stretch in a way that briefly risks dropping it.

None of that stops anybody. It just adds friction at exactly the moments you least want it.

The zones, roughly

• Lower middle: easiest, where the thumb rests.
• Lower corners: comfortable, slightly less so on the far side.
• Middle of the screen: a short stretch, fine.
• Upper middle: requires a grip shift on large phones.
• Top far corner: the hardest point on the device.

The top far corner is where the menu button sits on a large majority of websites, and where a right-handed person reaches least comfortably.

What this means practically

It does not mean redesigning your site around thumb ergonomics, which would be a disproportionate response.

It means putting the things people do often within reach, and accepting that rarely used controls can live in awkward places.

A call button, a primary action, a form submit, and the main navigation are frequent. A language switcher, an account link, and a logo are not.

The most common practical change is a persistent action bar along the bottom of the screen carrying one or two important actions, which sits directly in the easiest zone.

The sticky call button

For a service business this is often the single highest-return mobile change available.

A bar fixed to the bottom of the screen with a tap-to-call button, visible at every scroll position, means a visitor can call from anywhere on any page without navigating back to a header.

It occupies the easiest part of the screen and removes the need to find anything.

Two cautions. Keep it slim, since a tall fixed bar eats a phone screen, and make sure it does not cover content at the bottom of the page, which is a common oversight that hides the last line of every page on the site.

A worked example

A locksmith relied heavily on emergency calls from mobile visitors.

The phone number was in the header, correctly tappable, and disappeared as soon as anybody scrolled.

A customer reading a page about a lockout, halfway down, had to scroll back up to call, and the site had no other route.

They added a slim fixed bar at the foot of the screen with one button reading call now, present on every page.

Calls originating from the website rose by roughly a third over two months, with no change in traffic.

The interesting detail was where the calls started: most came from part-way down service pages, from people who had found what they needed and would previously have had to navigate back up to act on it.

Bottom navigation, and when it fits

Applications have largely settled on navigation at the bottom of the screen, and websites mostly have not.

It suits sites where people move repeatedly between a small number of sections, such as a shop with browse, search, basket, and account.

It suits a brochure site much less, where a visitor typically reads one or two pages and leaves, and a permanent navigation bar is mostly taking up space.

For most small business sites the better compromise is a conventional header menu plus a single fixed action at the bottom, which puts the one thing you want people to do in the easiest place without committing the whole layout to it.

Left and right hands

A detail worth knowing, though it rarely changes a decision.

Most people hold a phone in whichever hand is free rather than consistently, and a substantial minority use the left even when right-handed.

So designing specifically for a right thumb is not reliable, and the practical conclusion is to favour the lower centre over either corner.

Where two important actions sit side by side at the bottom, keep both away from the extreme edges, and never place a destructive action next to a common one at the far edge, where accuracy is lowest.

Check what your fixed elements cover

Fixed bars solve a reach problem and create an occlusion one.

A bar at the bottom covers the final portion of every page, which is where footers, contact details, and final calls to action usually live.

A sticky header does the same at the top and is worse on a phone, where vertical space is scarce.

The fix is padding at the end of the page equal to the height of the bar, and it is routinely forgotten, so the last line of content sits permanently underneath a button on every page of the site.

The counter-case

Reach zones are a real constraint and they are not the only one.

Putting controls at the bottom of a phone screen can conflict with the operating system's own gestures and bars, and a button too close to the very bottom edge becomes hard to hit or triggers something else.

There is also value in convention. A menu in the top right is where people look for it, and moving it somewhere more reachable but unexpected can cost more in confusion than it gains in comfort.

The safe version of this advice is additive: leave the conventional navigation where people expect it, and add the frequent action somewhere easy to reach.

What to change

1. List the actions visitors take most often.
2. Check where each sits on a phone screen.
3. Add a slim fixed bar with the primary action.
4. Keep the conventional menu where people expect it.
5. Keep both away from the extreme edges.
6. Add padding so nothing sits under a fixed bar.
7. Test one-handed on the largest phone you can borrow.

Step three is the one that changes the numbers, and on most sites it is an afternoon.

Readability on a phone is covered in a restaurant site you cannot read on a phone.

Frequently asked questions

West Coast Media Solutions Inc. provides web design, web development, hosting, digital marketing, and business consulting to organisations across Canada, drawing on more than twenty-five years in the field.