Poor Touch Ergonomics

Putting the doorbell on the ceiling — that's what happens when your CTAs are outside the thumb zone. Design for how people actually hold their phone.

What is this?

Picture a doorbell installed on the ceiling. Technically it is there, but nobody can comfortably reach it. That is what happens when your important buttons and links sit in spots that are awkward or impossible to reach with a thumb. Most people hold their phone in one hand and navigate with their thumb. There is a natural "thumb zone" — an arc of comfortable reach — and your key interactive elements need to live inside it.

Why it matters

For your visitors: When buttons are too small, too close together, or placed where thumbs cannot reach, people mis-tap constantly. They hit the wrong link, accidentally navigate away, or simply cannot reach your call-to-action without awkwardly shifting their grip. This friction makes your site feel broken and frustrating.
For your business: If your "Buy Now" button requires a two-handed grip or is 10px wide, people will not click it. Poor touch ergonomics directly reduces taps on the things that matter most — signups, purchases, and engagement. Every difficult tap is a lost conversion.
The standard: Interactive elements should be at least 44x44px (Apple's Human Interface Guidelines) or 48x48px (Google's Material Design). Spacing between tap targets should be at least 8px. Primary actions should sit in the lower third of the screen where thumbs naturally rest.

Thumb-friendly design

<style>
  .cta-button {
    min-height: 48px;
    min-width: 48px;
    padding: 12px 24px;
    font-size: 16px;
  }
  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 16px;
  }
</style>
<div class="action-bar">
  <button class="cta-button">Add to Cart</button>
</div>

Tiny, unreachable targets

<style>
  .tiny-link { font-size: 11px; padding: 2px 4px; }
</style>
<!-- Tiny links jammed together at the top of the screen -->
<div style="display: flex; gap: 2px;">
  <a class="tiny-link" href="/buy">Buy</a>
  <a class="tiny-link" href="/cart">Cart</a>
  <a class="tiny-link" href="/help">Help</a>
</div>

How to fix it

React / Next.js

Ensure all interactive elements meet minimum size requirements and place key actions within thumb reach.

// Button component with enforced minimum touch target
function Button({ children, ...props }: React.ButtonHTMLAttributes<HTMLButtonElement>) {
  return (
    <button
      className="min-h-[48px] min-w-[48px] bg-primary px-6 py-3 text-base font-medium"
      {...props}
    >
      {children}
    </button>
  );
}

// Sticky bottom CTA — always in the thumb zone on mobile
function StickyBottomCTA() {
  return (
    <div className="fixed bottom-0 left-0 right-0 border-t border-neutral-800 bg-neutral-950 p-4 md:hidden">
      <Button className="w-full">Get Started</Button>
    </div>
  );
}

// Icon buttons need touch targets too — even if the icon is small
function IconButton({ icon: Icon, label }: { icon: React.ElementType; label: string }) {
  return (
    <button
      className="flex h-12 w-12 items-center justify-center rounded-full hover:bg-neutral-800"
      aria-label={label}
    >
      <Icon size={20} /> {/* icon is 20px but touch target is 48px */}
    </button>
  );
}

Plain HTML

Apply minimum sizes to all interactive elements and add proper spacing.

<style>
  /* Base touch target sizes */
  a,
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }

  /* Ensure spacing between adjacent tap targets */
  .nav-links a {
    display: inline-flex;
    align-items: center;
    padding: 12px 16px;
    margin: 4px; /* prevents tap targets from touching */
  }

  /* Mobile-specific: make links full-width for easy tapping */
  @media (max-width: 767px) {
    .nav-links a {
      display: block;
      width: 100%;
      padding: 16px;
      font-size: 18px;
    }
  }
</style>

<!-- Bottom-fixed action bar on mobile -->
<div class="mobile-action-bar">
  <a href="/signup" class="mobile-cta">Start Free Trial</a>
</div>

High impact — mobile~2 paws

The cat knows where thumbs go — and it is not the top corners. Put your important buttons where people can actually reach them.

How the cat scores this

The scanner measures the rendered size of all interactive elements (links, buttons, inputs) at mobile viewport widths. Elements smaller than 44x44px get flagged. Adjacent interactive elements with less than 8px of spacing between them are noted as potential mis-tap risks. The scanner also checks whether primary call-to-action buttons are positioned in the lower two-thirds of the viewport, where they are most reachable.