Expert Guide Series

How Do I Design Buttons That Everyone Can Actually Press?

A major news publisher launched their mobile app a few years back and within the first month they noticed something odd in their analytics. Readers were accidentally tapping the wrong articles—constantly. The "share" button kept getting hit when people meant to tap "save for later". Turns out their buttons were too small and packed too tightly together. They lost thousands of engaged readers who just got frustrated and deleted the app. The fix? Bigger buttons with proper spacing. Simple really, but it cost them dearly to learn that lesson.

I've spent years building apps for all sorts of clients and I can tell you that button design is where most apps mess up right from the start. Its not flashy work, its not the bit that gets shown off in pitch decks, but get it wrong and your app becomes a nightmare to use. The thing is, our fingers haven't evolved to work with touchscreens—they're still the same chunky digits they've always been. When you're designing buttons for mobile, you're designing for real human hands in real situations; on the bus, walking down the street, lying in bed half asleep.

The difference between a button someone can tap easily and one they keep missing is often just a few pixels, but that difference determines whether they keep using your app or uninstall it in frustration.

What I've learned from building apps across healthcare, fintech and e-commerce is that accessible button design isn't just about helping people with disabilities—though that's hugely important. Its about making your app work for everyone in every situation. The elderly person with arthritis, the commuter on a crowded train, the parent holding a baby in one hand. These aren't edge cases; they're your actual users. And if your buttons don't work for them? They'll find an app that does.

Why Button Size Actually Matters for Real People

I've lost count of how many times I've watched users struggle to tap buttons in apps we've tested—buttons that looked perfectly fine on a designer's high-resolution monitor but became impossible targets on an actual phone held in one hand while someone's walking down the street. And that's the thing about button size, it's not just about aesthetics or following some arbitrary design rule; its about whether real people can actually use your app in real situations.

The data from our user testing sessions tells a pretty clear story. When we built a healthcare app for a clinic managing elderly patients, we initially went with 40x40 pixel buttons because that seemed reasonable. The number of mistaps was honestly shocking—users would try to book an appointment and accidentally hit the cancel button instead. We increased the minimum size to 48x48 pixels (about 9mm) and suddenly those errors dropped by roughly 70%. But here's what I find really interesting: people didn't just make fewer mistakes, they also used the app faster because they weren't second-guessing themselves before every tap.

Different contexts demand different sizes though, and this is where experience really matters. For primary actions like "Buy Now" or "Submit Payment" in our fintech projects, we typically go larger—anywhere from 56 to 64 pixels tall. Why? Because the cost of a mistap is high, both for the user and the business. Nobody wants to accidentally transfer money to the wrong account because they hit the wrong button on a cramped screen. Secondary actions can be slightly smaller, but I wouldn't go below 44 pixels for anything users need to tap regularly.

Minimum Button Sizes That Actually Work

  • Primary actions (checkout, submit, save): 56-64 pixels minimum height
  • Standard buttons (navigation, forms): 48-52 pixels minimum height
  • Icon-only buttons: 48x48 pixels minimum touch area, even if the icon itself is smaller
  • Buttons in dense interfaces (tables, lists): 44 pixels absolute minimum, but only when spacing permits
  • Thumb-zone buttons (bottom of screen): Can go slightly smaller at 44 pixels as they're easier to reach

One mistake I see constantly is designers making the visible button look nice and compact but forgetting about the actual touch target. In a banking app we developed, we had small icon buttons for quick actions, but we extended the invisible tap area beyond the visible icon by about 4-8 pixels in each direction. Users never knew we did this, but it made those tiny icons much more forgiving to tap. The trick is you can make something look minimal while still being functionally generous—thats proper mobile design right there.

The Science Behind Touch Targets and Fat Fingers

Here's something most people don't realise—the average adult fingertip is about 10mm wide, but when you press your finger on a glass screen it actually spreads to around 11-13mm. I've watched hundreds of user testing sessions over the years and honestly, its fascinating to see how this simple physical reality breaks so many apps. Your finger isn't a precise pointing device like a mouse cursor; its more like stamping with a blunt object, and your app needs to account for that.

Apple's Human Interface Guidelines recommend a minimum touch target of 44x44 points (about 9mm on most devices), while Android suggests 48x48 density-independent pixels. But here's the thing—I've found these are absolute minimums, not ideal sizes. When I worked on a healthcare app for managing prescriptions, we initially used 44pt buttons and the error rate during testing was mad. People kept tapping the wrong medication, which in healthcare is... well, you can imagine the problem there. We bumped everything up to 56x56pt and the mistaps dropped by about 60%.

Real-World Touch Target Sizes

Element TypeMinimum SizeRecommended Size
Primary Actions44x44pt56x56pt or larger
Secondary Buttons44x44pt48x52pt
Icon-Only Buttons48x48pt60x60pt
List Items44pt height56-64pt height

The actual tappable area doesn't need to match the visual size of your button—that's a trick I use all the time. You can have a small-looking icon but extend its touch target beyond the visible edges using padding or invisible hitboxes. I did this on an e-commerce app where the client wanted tiny, minimal icons in the navigation but we needed them accessible; the visible icon was 24x24pt but the touch target was 48x48pt. Nobody noticed the extra space, but everyone could tap them easily.

Test your buttons with your thumb whilst holding your phone one-handed—if you need to adjust your grip or stretch uncomfortably to reach something, its probably in the wrong place or too small. This simple test has saved me countless redesigns.

Spacing Between Buttons and Why It Stops Mistakes

I've seen this problem cost companies thousands in lost revenue. Someone's trying to confirm their purchase and they accidentally hit "Cancel" instead—then they give up and buy from somewhere else. It happens way more than you'd think, and its usually because buttons are crammed too close together.

The spacing between buttons is just as important as the size of the buttons themselves. I mean, you could have perfectly sized 44x44 pixel buttons but if they're only 2 pixels apart? People are still going to hit the wrong one. We learned this the hard way on a banking app where customers kept accidentally transferring money to the wrong accounts because the "Confirm" and "Edit" buttons were practically touching each other. The support tickets were piling up daily.

How Much Space Do You Actually Need

Here's what I recommend based on years of testing across different types of apps; primary and secondary buttons should have at least 8-16 pixels of spacing between them on mobile. For destructive actions like "Delete" or "Cancel", I go even further—usually 24-32 pixels minimum. Sure, it takes up more screen space, but preventing mistakes is worth it.

When buttons are stacked vertically, the spacing needs to be even more generous because thumbs naturally move up and down the screen in less precise ways than left to right. On an e-commerce app we built, we increased vertical spacing from 12 to 20 pixels between "Add to Basket" and "Save for Later" buttons, and accidental saves dropped by 40%.

Where Spacing Matters Most

Not all button pairs need the same treatment. Look at where mistakes would actually cause problems:

  • Payment confirmation screens—people rushing through checkout need clear separation between "Pay Now" and "Go Back"
  • Form submissions—especially when "Submit" sits near "Clear Form" or "Cancel"
  • Account settings—anywhere users might delete data or cancel subscriptions
  • Multi-step processes—forward and backward navigation buttons should be visually distinct through spacing
  • Modal dialogues—"OK" and "Cancel" need breathing room because users often tap quickly without reading

One healthcare app we worked on had a prescription refill feature where "Order Now" and "Remind Me Later" were too close together. Patients were accidentally ordering medications they didn't need yet, which created pharmacy headaches and frustrated users. We added 20 pixels between them and repositioned them so they weren't aligned—mistakes dropped almost immediately. The pharmacy staff actually sent us a thank you note, which doesn't happen often in app development!

Making Buttons Work for Different Abilities

I worked on a healthcare app a few years back where we had to design medication tracking buttons for users with arthritis. The client had assumed standard 44px touch targets would be fine, but during testing we watched users struggle—and I mean really struggle—to tap the confirmation buttons. Their hands would shake slightly, they'd miss the target, and you could see the frustration building. We ended up increasing those specific buttons to 60px and adding more spacing around them. The difference was night and day.

Different abilities mean different button needs, and its not just about physical disabilities. Users with vision impairments need buttons with strong contrast ratios (at least 4.5:1 for normal text, 3:1 for large text). Colour-blind users can't rely on red and green alone to distinguish between cancel and confirm actions—we learned this the hard way on a fintech app where users kept mixing up transaction buttons because we'd only used colour to differentiate them. Now I always add icons or text labels as secondary indicators.

The best accessible design is the kind nobody notices because it just works for everyone, regardless of their abilities or circumstances

Motor control issues are more common than you'd think; parkinsons, tremors, temporary injuries, or just holding a phone whilst walking all affect how accurately someone can tap. That's why I now design primary actions with larger touch targets (minimum 48px but often 52-56px) and make sure there's adequate spacing between adjacent buttons. Sure, it takes up more screen space, but the alternative is excluding users who genuinely need your app. And here's something most developers miss—some users navigate entirely with voice control or switch devices, so buttons need proper labelling in the code that screen readers can understand. You can't just rely on visual design alone.

How Mobile Screens Change Everything

The jump from desktop to mobile isn't just about making things smaller—its about completely rethinking how people interact with your app. I've rebuilt apps that worked perfectly on desktop but absolutely fell apart on mobile, and its usually because nobody properly considered how screen size affects button design. A button that's easy to press on a 27-inch monitor becomes frustratingly tiny on a 6-inch phone screen, and that's before we even talk about people using their phones one-handed whilst standing on a packed train.

Screen real estate is precious on mobile. Really precious. I mean, you've got maybe 375 pixels of width to work with on an iPhone SE, compared to 1920 pixels on a desktop monitor. That means every single pixel counts, and you need to be smart about how you use them. But here's the thing—being smart doesn't mean making buttons smaller to fit more stuff on screen. I've seen countless apps try to cram desktop interfaces onto mobile screens by shrinking everything down, and it never works. Users end up tapping the wrong buttons, getting frustrated, and uninstalling your app.

The Thumb Zone Problem

Most people hold their phones in one hand and use their thumb to navigate. There's actually a comfort zone where your thumb can reach easily without stretching, and it covers roughly the bottom two-thirds of the screen in an arc shape. I learned this the hard way on a banking app we built where we put the main action button at the top of the screen? Engagement dropped through the floor because people literally couldn't reach it comfortably. Once we moved critical buttons into the thumb-friendly zone at the bottom, interactions went up by about 40%.

Different Screens Need Different Solutions

Not all mobile screens are created equal. You've got everything from compact phones to tablets, and your buttons need to work across all of them. Here's what I've found works best for different screen sizes:

  • Small phones (under 5 inches): Keep primary buttons at the bottom, use full-width buttons where possible, avoid putting multiple buttons side by side
  • Standard phones (5-6.5 inches): You've got more flexibility here but still respect the thumb zone; secondary actions can go higher up the screen
  • Large phones and phablets (6.5+ inches): Consider adding a floating action button or bottom navigation since the top of the screen is basically unreachable one-handed
  • Tablets: You can use desktop-style layouts but keep buttons in reachable positions when held in portrait mode

Context matters too. If someone's using your app whilst walking, their accuracy drops significantly compared to sitting down. I worked on a food delivery app where we noticed error rates spiked during lunch hours when people were ordering on the go. We increased button sizes and spacing during those peak times, and accidental taps dropped by nearly a third. Its a bit mad that time of day affects button design, but it does.

Testing Your Buttons with Actual Users

I used to think I could design perfect buttons just by following guidelines and best practices. Then I watched a 67-year-old woman struggle for nearly a minute trying to tap a 'Submit Payment' button in a banking app we'd built. The button was technically 44px—it met the guidelines—but her arthritis meant she couldn't hit it consistently. That session changed how I approach user testing completely.

You need to test with real people, not just your development team. I mean, your team knows where the buttons are, they've been staring at them for weeks. That's not a realistic test, is it? For every app we build now, we run at least two rounds of usability testing with people who match the actual target audience. For a healthcare app, that means testing with elderly users, people with vision problems, and folks who aren't particularly tech-savvy.

Here's what actually works when testing buttons:

  • Watch where people naturally tap without giving them instructions—you'll see their instincts before they think too much about it
  • Test in realistic conditions like outdoors or while walking (not just in a quiet lab)
  • Include people with different hand sizes and dexterity levels
  • Record the sessions so you can review exactly where they're tapping
  • Track error rates, not just whether they eventually succeed
  • Test with one hand and two-handed use separately

We built an e-commerce app where users kept accidentally tapping 'Delete Item' instead of 'Add to Favourites' because the buttons were too close together. Our internal testing missed it completely because we knew what we were doing. Five user sessions caught it immediately. The error rate was 23% in testing—that would've been thousands of frustrated customers.

Test your buttons with at least 5 different users from your target audience before launch. You'll catch issues that no guideline or checklist will reveal, and its way cheaper than fixing problems after thousands of people have already struggled with your app.

The most valuable feedback comes from watching people fail. When someone taps the wrong button three times in a row, that's your design talking, not their incompetence. I've learned more from watching users struggle than from any design course I've ever taken.

Common Button Design Mistakes I See All The Time

I've reviewed hundreds of app designs over the years and honestly, the same button mistakes keep popping up. Its like nobody learned from the apps that came before them. The most common one? Making buttons too small because the designer wants a "clean" interface. I get it, minimalism looks great in screenshots, but it falls apart the moment someone tries to use your app on the bus with one hand. I worked on a fintech app where the original designs had buttons at 36 pixels—looked lovely on desktop but people were tapping the wrong amounts constantly. We bumped them to 48 pixels minimum and error rates dropped by about 60%. Not a small difference.

Another big issue is putting buttons too close together. I see this all the time with "Yes/No" dialogs or payment confirmation screens where Cancel sits right next to Confirm. You know what happens? People accidentally cancel their orders or delete things they didnt mean to. Apple's own guidelines recommend 8 pixels minimum between touch targets, but I usually push for 12-16 pixels in high-stakes areas like checkout flows. The extra space might not win design awards but it saves your users from frustration.

The Biggest Button Mistakes

  • Making buttons smaller than 44x44 pixels (especially on iOS where people expect Apple's standard)
  • Using low contrast colours that look nice but fail accessibility checks—light grey on white is a nightmare
  • Forgetting about button states; your button needs to look different when its pressed, disabled, or loading
  • Placing important actions at the very edge of the screen where they're harder to reach
  • Not testing with actual devices—what works on a simulator often fails on real phones with screen protectors and sweaty fingers

The weirdest mistake I've seen? A healthcare app where the emergency contact button was styled to look like disabled text. Nobody could find it during user testing. Sometimes being too subtle is worse than being too obvious, and in healthcare apps that can literally be dangerous. This connects to a broader issue I see constantly - when designers focus too much on creating clean, minimal interfaces without considering how people actually interact with their apps.

Conclusion

Look, designing buttons that people can actually press isn't rocket science—but it does require you to think about real humans using your app in messy, real-world situations. I've built apps for financial services where a missed tap could mean transferring money to the wrong account, and healthcare apps where elderly users needed to book urgent appointments. In those situations, getting touch targets right isn't just good design practice, its literally a necessity. The 44x44 pixel minimum isn't some arbitrary number cooked up by designers who had nothing better to do; it comes from actual research about human fingers and how we interact with glass screens.

The thing is, most button problems I see aren't because developers don't know the rules—they know them. Its because somewhere along the line, business requirements or aesthetic preferences took priority over usability. Someone decided that cramming five buttons into a tight space looked cleaner, or that making the hit area smaller would give more room for content. I get it, I really do. There's always pressure to fit more onto the screen. But here's what I've learned after years of watching users struggle with poorly designed interfaces: every time you compromise on touch target size or spacing to save a few pixels, you're making a trade-off that affects real people trying to complete real tasks.

Test your buttons with actual users who aren't you. Watch someone's mum try to use your app, or test it with people who have arthritis or visual impairments. You'll learn more in ten minutes of real user testing than from reading a hundred design guides. And honestly? Once you see someone struggle to tap a button you designed, you'll never cut corners on accessibility again.

Frequently Asked Questions

What's the minimum button size I should use for mobile apps?

Based on my testing across healthcare and fintech apps, 48x48 pixels is the practical minimum for standard buttons, but I recommend 56-64 pixels for primary actions like payments or submissions. Apple's 44x44 pixel guideline is an absolute minimum—I've seen error rates drop by 60-70% when increasing from 44 to 48+ pixels in real user testing.

How much spacing should I put between buttons to prevent mistaps?

I typically use 8-16 pixels between standard buttons, but increase this to 24-32 pixels for destructive actions like "Delete" or "Cancel" buttons. On a banking app we built, customers kept accidentally hitting the wrong button with only 2 pixels separation—increasing to 20 pixels practically eliminated transfer errors.

Should button sizes be different for elderly users or people with disabilities?

Yes, absolutely. When we built a healthcare app for elderly patients, increasing buttons from 40 to 48 pixels reduced mistaps by 70%, but going to 60 pixels worked even better for users with arthritis or tremors. You also need strong contrast ratios (4.5:1 minimum) and can't rely on colour alone to distinguish between actions.

How do I test if my buttons are actually working for real users?

Test with at least 5 people from your actual target audience—not your development team—and watch where they naturally tap without instruction. I record sessions and test in realistic conditions like outdoors or while walking, since accuracy drops significantly when people are on the move versus sitting in a quiet lab.

Can I make buttons look smaller but keep the touch area larger?

Yes, this is one of my favourite tricks. You can extend the invisible tap area 4-8 pixels beyond the visible button using padding or hitboxes. I did this on an e-commerce app where we had 24x24 pixel icons but 48x48 pixel touch targets—users never noticed the extra space but could tap them much more easily.

Where should I place buttons on mobile screens for easy thumb access?

Keep primary actions in the bottom two-thirds of the screen where thumbs can reach comfortably. I learned this lesson on a banking app where we initially put the main button at the top—engagement dropped through the floor until we moved it to the thumb-friendly zone, then interactions increased by 40%.

What are the most common button design mistakes that cause user problems?

The biggest issues I see are buttons smaller than 44 pixels, insufficient spacing (especially near destructive actions), and low contrast colours that fail accessibility standards. On one fintech app, 36-pixel buttons looked clean but caused constant mistaps—bumping to 48 pixels reduced errors by 60%.

Do button requirements change for different types of apps?

Yes, context matters enormously. Healthcare and fintech apps need larger buttons (56-64 pixels) because mistakes are costly, whilst e-commerce apps can sometimes use smaller secondary buttons but should keep checkout actions large. I also adjust sizes based on usage patterns—error rates spike during lunch hours on food delivery apps when people order while walking.

Subscribe To Our Learning Centre