The thumb-zone rule: why your phone-call CTA is 80px too high
Hold your phone one-handed. The arc your thumb covers is where customers tap. Most home-service phone buttons sit just outside it — and bleed conversions.
Hold your phone with one hand. Look at where your thumb naturally rests. It’s a curved arc roughly across the bottom third of the screen, centered slightly to your dominant-hand side.
That arc is called the “thumb zone.” Designers at Apple, Google, and the major UX research labs have spent years studying it. The findings are consistent: buttons placed inside the thumb zone get tapped 2.4x more often than buttons placed outside it.
On most home-service websites, the primary phone-call button is above the thumb zone. Typically in the header. Sometimes in the hero. Often hidden behind a hamburger menu.
That placement is costing you calls every day.
What the thumb zone actually is
Visualize your phone in portrait. The screen is roughly 7” tall. The thumb zone is:
- Bottom 30% of the screen — easiest reach, fingers go here naturally
- Bottom 60% of the screen — comfortable
- Top 40% of the screen — requires shifting grip or two-hand use
- Top corners — almost requires a grip change
Most home-service site headers are at the very top — the hardest spot to reach. The visitor has to consciously shift their grip to tap your phone number. Each shift is a small friction point. Each friction point is a chance they bail.
What to do
Put your phone-call CTA in the bottom third of the screen on mobile. Two ways:
Option 1: Sticky bottom CTA bar. A persistent bar at the bottom of every page, ~64px tall, with your phone number as a full-width tap-to-call button. Always visible, always in the thumb zone, always tappable.
This is what most apps do. Banking apps. Food apps. Ride apps. They all have a primary action sticky in the bottom zone.
Option 2: Hero with bottom-aligned CTA. If you don’t want a sticky bar, put the primary CTA button below your hero text, near the natural fold (about 60% down the viewport). Make it 56px tall minimum. Center it horizontally so either hand can reach it.
The 80px math
The reason this article says “80px too high” is because most home-service site headers put the phone button about 80–120px from the top of the screen. The thumb zone starts roughly 60% down the screen — let’s say 400px in a 700px viewport.
That puts the phone button 280–320px outside the thumb zone. Even worse, it’s in the part of the screen the brain pattern-matches as “header” — meaning many users don’t even register it as a tappable element. They scroll past it looking for “the real CTA.”
A simple test
Open your site on a phone. Hold the phone naturally with one hand. Can you tap the phone-call CTA without shifting your grip?
If no, your CTA is in the wrong place. The fix is a 30-minute job for any web developer: add a sticky bottom bar, or move the hero CTA down.
Home-service shops who make this change see 15–30% more call clicks immediately. It’s the single highest-leverage UX change for mobile-heavy traffic.