# Interactive elements have adequate spacing between them

- **Pattern:** `ab-001957` (`mobile-ux-patterns.touch-gestures.spacing-between-elements`)
- **Severity:** high
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001957
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001957)

## 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:

```tsx
<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.

## Detection

- **ID:** `spacing-between-elements`
- **Severity:** `high`
- **What to look for:** Enumerate all layouts with multiple adjacent interactive elements (button groups, form fields, list rows, tab bars). For each group, measure the gap between adjacent touch targets using margin, padding, or `gap` values.
- **Pass criteria:** Interactive elements are spaced at least 8 points apart in all layouts. Denser layouts in lists or grids have at least 8pt spacing that prevents accidental taps.
- **Fail criteria:** Any interactive elements are touching or have less than 8 points between them, creating a high risk of accidental taps. Do NOT pass when gap values are set only in one direction (e.g., vertical gap but no horizontal gap in a grid).
- **Skip (N/A) when:** The app has fewer than 2 interactive elements per screen or uses single-column layouts where spacing is not a concern.
- **Detail on fail:** Identify areas where elements are too close. Quote the actual spacing values. Example: `"Button group in settings has zero spacing between buttons — users can easily tap the wrong action."` or `"Tab bar items are 80pt wide on a 375pt screen with no margin, no gap between them."`
- **Remediation:** Add margin or gap between interactive elements to reduce accidental taps. In FlatList or grid layouts, use `columnWrapperStyle` or item margin:

  ```tsx
  <View style={{ flexDirection: 'row', gap: 12 }}>
    <TouchableOpacity><Text>Button 1</Text></TouchableOpacity>
    <TouchableOpacity><Text>Button 2</Text></TouchableOpacity>
  </View>

  // Or in FlatList
  <FlatList
    data={items}
    renderItem={() => <Item />}
    ItemSeparatorComponent={() => <View style={{ height: 8 }} />}
    columnWrapperStyle={{ gap: 12 }}
  />
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001957