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 crafting digital experiences 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 designing experiences 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.
I've lost count of how many times I've watched users struggle to tap buttons in apps we've designed—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 designed 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 experience designs, 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.
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 experience we designed, 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.
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 experience 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%.
| Element Type | Minimum Size | Recommended Size |
|---|---|---|
| Primary Actions | 44x44pt | 56x56pt or larger |
| Secondary Buttons | 44x44pt | 48x52pt |
| Icon-Only Buttons | 48x48pt | 60x60pt |
| List Items | 44pt height | 56-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.
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.
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 designed, we increased vertical spacing from 12 to 20 pixels between "Add to Basket" and "Save for Later" buttons, and accidental saves dropped by 40%.
Not all button pairs need the same treatment. Look at where mistakes would actually cause problems:
One healthcare app experience we crafted 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 design!
I worked on a healthcare app experience 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 designers 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.
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 redesigned experiences 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.
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 experience we designed 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%.
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:
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.
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 experience we'd crafted. 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 design 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 experience we design 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:
We designed 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.
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 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.
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 crafted experiences 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 designers 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.
Before any developer writes code - whether that's a freelancer, in-house team, agency, or AI - you need the experience design and user research that turns psychology into accessible, usable interfaces. We craft those experiences, design the psychology behind button placement and sizing, and create the technical roadmap that any development team can then implement. Without this foundation, you're asking developers to guess what users need. Let's craft your experience foundation.