Interactive elements have adequate spacing between them
Why it matters
Adjacent touch targets with zero or sub-8pt gaps produce mis-taps on every interaction — users hit the wrong button in a settings screen, delete the wrong row in a list, or cancel when they meant to confirm. This is the dominant source of rage-taps and one-star reviews on mobile, and it violates the Apple HIG 44pt target and Material Design 48dp target guidance that app store reviewers check against.
Severity rationale
High because mis-tap rates compound across every session and directly drive refund requests, negative reviews, and churn.
Remediation
Add explicit spacing between every adjacent interactive element. In flex rows, set gap: 12 on the parent View; in FlatList grids, pass columnWrapperStyle={{ gap: 12 }} plus an ItemSeparatorComponent for vertical spacing:
<View style={{ flexDirection: 'row', gap: 12 }}>
<TouchableOpacity><Text>Cancel</Text></TouchableOpacity>
<TouchableOpacity><Text>Delete</Text></TouchableOpacity>
</View>
Audit every button group, tab bar, and list row for both horizontal and vertical gaps.
DetectionPro
The detection method for this pattern is part of AuditBuffet Pro.
The full method (what to look for, pass and fail conditions, and how results get reported) ships inside the Mobile UX Patterns Audit. The pattern definition, severity rationale, and remediation remain openly licensed under CC-BY-4.0.
Taxons
History
- 2026-04-18·v1.0.0·Initial import from mobile-ux-patterns·automated