Spacing

Should

An inactive space should be provided around actionable elements.

Description

Anyone can find it challenging to interact with small controls that are closely grouped together, in particular users with motor or vision impairment.

Actionable elements should not touch or overlap, and there should be an inactive space between actionable elements in order to reduce the risk of activating the wrong control. The minimum space possible to set on any device or screen resolution is 1 pixel, preferably the space would be larger.

IOS

 When placing targets/actionable items ensure there is at least one (1) pixel between targets and that the edges of targets do not touch unless the space is non-actionable.

iOS example

A touch target that is up against another touch target with 1 pixel of inactive space between them.

[AButton setFrame:CGRectMake(50, 50, 50, 50)];
[BButton setFrame:CGRectMake(101, 50, 50, 50)];                        

A touch target that overlaps another touch target with no inactive space between the two targets.

[AButton setFrame:CGRectMake(50, 50, 50, 50)];
[BButton setFrame:CGRectMake(99, 50, 50, 50)];                        

ANDROID

Use the layout_margin attribute or set the margin programmatically using the setMargins. method.

Android examples

<ImageButton android:id="@+id/addBookmarkBtn" android:layout_margin="1"
 android:layout_height="wrap_content"
 android:layout_width="wrap_content"
 android:src="@drawable/addBMK" />

// or

LinearLayout layout = new LinearLayout(...);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(...);
params.setMargins(1, 1, 1, 1);
ImageButton addBookmarkBtn = new ImageButton(...);
layout.addView(addBookmarkBtn, params);                        
<ImageButton android:id="@+id/addBookmarkBtn" android:layout_margin="0"
 android:layout_height="wrap_content"
 android:layout_width="wrap_content"
 android:src="@drawable/addBMK" />

// or

LinearLayout layout = new LinearLayout(...);
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(...);
params.setMargins(0, 0, 0, 0);
ImageButton addBookmarkBtn = new ImageButton(...);
layout.addView(addBookmarkBtn, params);                        

HTML

 Ensure that borders, margins or some other mechanism for spacing exists around each target/actionable item.

HTML example

Add borders or margins around touch targets to add at least 1px of inactive space.

<style>
    .main-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .main-nav li {
        float: left;
    }
    .main-nav a {
        display: block;
        margin: 0 0.2em;
        padding: 0.5em 1em;
        border: 1px solid #333;
    }
</style>

<ul class="main-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/sport">Sport</a></li>
</ul>                        

In this example there are no margins or borders around each link so there is no inactive space between them.

<style>
    .main-nav {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .main-nav li {
        float: left;
    }
    .main-nav a {
        display: block;
        margin: 0;
        padding: 0.5em 1em;
    }
</style>

<ul class="main-nav">
    <li><a href="/">Home</a></li>
    <li><a href="/news">News</a></li>
    <li><a href="/sport">Sport</a></li>
</ul>                        

TESTING

Because 1 pixel of space is very small it may be difficult to verify this item visually unless there is a visual separator between the two targets. In the case of no visual separation such as when a consistent background image is used around toolbar icons the code or .nib/.xib file may need to be inspected.

Procedures
  1. Activate the app.
  2. Locate all touch targets/actionable items.
  3. Verify that there appears to be inactive space between every touch target/actionable item.
Results

The following checks are all true:

  1. All touch targets/actionable items have inactive space between them.