4ourth Mobile Touch Template (3-3/8” x 2-1/8”)

13 JUL 2012
Revisions:
• Additional branding, labeling info.
• Added CC icons.
• Labeled size of text as in pt.
• Some space tweaks to make things more readable.

• Added explanatory content to the presumed sleeve the stencil fits inside.
• To the right, example information IF I get to print on two sides. Not sure that’s possible.

1 mm

0

1

2

3

4 cm

Minimum target
5/16”  8 mm

Preferred target
3/8”  10 mm

4ourth Mobile Touch Template – 2012
For design and test of mobile devices
4ourth.com

12

24 pt

2”

6 pt Helvetica
7
8
9
10
11
12
14
16
18

Minimum form field height

14/16 pt baseline

Minimum button height

1/2

1/4

1/16

1/8

10/12 pt baseline

4ourth Mobile Touch Template
Mobile devices have to be designed to work with humans in mind. No pixel-based measures will work. You need to measure real interfaces, on real screens.
Put your design (production, prototype or comps) on the targeted device, then inspect with this tool.

GOOD:

Link above it
Target link
And link below

AVOID:

If more than one link, button, or other interactive item can be placed inside any circle, users will sometimes accidentally activate the wrong one.
Type is measured in points (pt). 1 pt = 1/72”. Not the same as an iOS device independent pixel “point.”

Minimum sizes:
10 mm	touch target size
10 pt 	type size for readability
10/19 pt 	type line spacing for a series of links
12 pt	line spacing for smallest readable text

4ourth Mobile Touch Template	August 2012
4ourth.com

Touch Inspection Guidelines

Visual target

Don’t measure the visible size of buttons or links.
Use the circles on the template to check for interference with adjacent clickable items.

Touch area

Low-importance items, if the user can click on them when still (not walking, on a train...) can be 20% smaller. This is the 8 mm size on the template.
Same applies to type. 8 pt is just barely acceptable for disclaimers, icon labels and other low-importance text.

Buttons up against the bezel can be 40% smaller in that one dimension.

Effective overflow touch area

Bezel

Edge of screen

Screen

Actual
touch
area

16 FEB 2012
As laser cut for prototypes.

www.4ourth.com

24pt

Typical target
5/16” / 8 mm

Priority target
3/8”  / 10 mm

If more than one link, button, or other interactive item can be placed inside a circle, users will sometimes accidentally activate the wrong one.

14 pt baseline

mobile	design
for
touch
screen

10 pt type baseline

20 JUN 2012
Revisions:
• Baselines centered, to allow flipping template and making straight lines w/o right-angle tool.
• Baselines incorrectly sized! Now correct and labeled.
• Removed OS-specific icons.
• Added type scale.
• Increased some line weights.
• Renamed targets to be more clear.
• Labeled remaining items.
• Moved stuff around.
• Moved all rulers off radiuses

Minimum height of any text / numeric form element

4ourth.com

Minimum target
5/16” / 8 mm

Preferred target
3/8”  / 10 mm

If more than one link, button, or other interactive item can be placed inside any circle, users will sometimes accidentally activate the wrong one.

Minimum height of any button

6 pt
7 pt
8 pt
10 pt
11 pt
12 pt Helvetica

10 pt baseline (12pt)

25 JUN 2012
Revisions:
• Removed big branding.
• Fixed a number of typos.
• Changed baseline references to typographers default.
• Moved pt scale slightly.
• Fixed serious error in mm scale.
• Moved hand, and circles. Added another punched circle.
• Added in type scales up to 18 pt.
• Changed the way the button and form are shown.

Add in more brand line. Also creative commons attribution?

6 Helvetica
7
8
9
10
11
12
14
16
18

iOS Back and header buttons are common, but too small and OS-specific. Find a place for it, or leave it out?

Would like to put a bigger type scale in there, but it is big!

6 Helvetica
7 Helvetica
8 Helvetica
9 Helvetica
10 Helvetica
11 Helvetica
12 Helvetica
14 Helvetica
16 Helvetica
18 Helvetica

mobile	design
for
every
screen

Slacker Media

Steven Hoober
steven@4ourth.com
+1 816 210 0455
@shoobe01
shoobe01 on:
www.4ourth.com