In React Native and Apple HCI they recommend a 44px x 44px hit area at minimum. But I found that on the iPhone SE it seems a bit hard to hit on the sides and corners. Primarily because of the having a case. So I was wondering what is the ideal hit area with slop for those conditions?
1 Answer
This is a clear "it depends":
- It depends on pixel density. If 44px are equal to 2cm (80 PPI), it's a different story than if they're equal to 0.5cm (315 PPI). The original iPad came at 132 PPI, the iPhone SE at 326 PPI.
- It depends on target audience. If you're targeting construction workers who likely will wear gloves and/or have big hands, you need bigger targets than if you're targeting people which don't do that. Also the thickness of probable cases changes depending on the audience.
- It depends on the device. Some phones have curved screens towards the edges, which may or may not react to input at the edges. Put a case on those phones and who knows what might happen.
I'm not sure what exactly you want to do, but many of the things traditionally placed on the side may have appropriate and safer alternatives. For example, scrolling on phones is done as a gesture across the whole screen and not constrained to the side. Menus may be summoned by swiping from the left to the right in some apps. Navigation bars and overflow menus are offset from the edge quite some ways, and are relatively big.