A 2.5-hour workshop I created and shared with my colleagues at Razorfish Austin in October 2012. Inspired by Dan Saffer's half-day workshop on the same topic, presented at Webvisions 2012.

1. Touchscreen Design Workshop
Kirsten Miller ~ October 5, 2012 ~ Razorfish Austin
1

2. Credit where credit is due...
Dan Saffer
Director, Interaction Design
Smart Design
Follow @odannyboy on Twitter to learn about
his upcoming book, Microinteractions, to be
published next spring by O’Reilly.
2

3. Keeping it basic
What we'll be covering:
• Some guiding principles for creating
touchscreen experiences, with a
focus on smartphones and tablets
(capacitive technology)
• Fingers and hands
• Activity zones
• Common app structures
• Multitouch and gestures
• Prototyping tools
What we won't be covering:
• Devices using touch technologies
like infrared beams, cameras,
ultrasonic waves, resistance
• Platform differences
• Resolution differences and
responsive design
• Strategy
• Coding, development
3

4. Workshop activities
• Fun warm-up
• Smartphone sketch
activity
• Tablet activity focusing
on multitouch/gesture
http://genelu.com/2011/04/nike-plus-dogs/
4

5. Warm-up exercise!
Sketch a touchscreen version of a simple household thermostat.
(10 minutes)
Requirements:
• Accessed via whatever touchscreen interface(s)
you choose
• See current temperature
• Set desired temperature
• See whether system is heating or cooling
• Turn system off or on
Not required for this exercise:
Programming dates/times, controlling multiple rooms
5

6. Fingers and hands
touch targets and coverage
6

7. Let’s talk about fingers
They’re far less accurate
than a screen cursor.
1 mm 8-10 mm diameter
(fingertip)
7

8. Touch target sizes
Saffer’s minimum size
guidelines for touch
targets:
8 mm
1 cm
2 mm
Option3Selected Option2
8

9. Touch target sizes
8 mm
1 cm
2 mm
Option3Selected Option2
Physical keyboard:
8 mm
15 mm 4 mm
15 mm
Saffer’s minimum size
guidelines for touch
targets:
9

10. Touch target sizes
5 mm
6.5 mm 1 mm
iOS keyboard, landscape:
Discuss.
8 mm
1 cm
2 mm
Option3Selected Option2Saffer’s minimum size
guidelines for touch
targets:
10

11. Touch target size tricks*
OK
* Require coordination with development!
Iceberg tips:
(responsive area larger than visual)
11

12. Touch target size tricks*
Adaptive targets:
(anticipates your next move)
Iceberg tips:
(responsive area larger than visual)
OK
* Require coordination with development!
12

13. Touch target size tricks
Forthcoming from Steven Hoober, 4ourth Mobile Design
13

14. Let’s talk about hands
Those pesky fingers are always attached to something
that often blocks the view of much of the interface.
“Avoid putting essential features or
information like a label below an interface
element that can be touched, as it may
become hidden by the user’s own hand.”
(quote from Dan)
14

15. Let’s talk about hands
Those pesky fingers are always attached to something
that often blocks the view of much of the interface.
“Avoid putting essential features or
information like a label below an interface
element that can be touched, as it may
become hidden by the user’s own hand.”
(quote from Dan)
16-20 mm
wide
14

16. Let’s talk about hands
Those pesky fingers are always attached to something
that often blocks the view of much of the interface.
“Avoid putting essential features or
information like a label below an interface
element that can be touched, as it may
become hidden by the user’s own hand.”
(quote from Dan)
16-20 mm
wide
much bigger
14

17. Don’t talk to the hand!
TitleBack Save
My Selection
Hey! This action is
undoable. Are you sure
you want to proceed?
OK Cancel
TitleBack Save
Hey! This action is
undoable. Are you sure
you want to proceed?
OK Cancel
My Selection
TitleBack Save
15

18. Activity zones
easy vs. reach
16

19. Easy vs. reach
“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”
(Dan in a kickerstudio.com blog post)
17

20. Easy vs. reach
“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”
(Dan in a kickerstudio.com blog post)
17

21. Easy vs. reach
“Some of the best [touchscreen apps] have placed controls in ways that best match the ergonomics
of our hands while holding [the devices]… Put the high-use controls in the Easy zones, and controls
that are less used (and certainly those you don’t want accidentally pressed) in the Reach zones.”
(Dan in a kickerstudio.com blog post)
17

22. Easy vs. reach
18

23. Easy vs. reach
What about lefties?
18

24. Easy vs. reach
What about these people?
19

25. A brief survey
Thumbs Fingers
phone:
20

26. A brief survey
Thumbs Fingers
tablet:
21

27. Common app structures
flat, star, decentralized
22

28. Flat
Detail Detail Detail Detail Detail
23

29. Flat
24

30. Star
Detail
Detail
Home
Detail
Detail
Detail
25

31. Star
Home DetailDetail
26

32. Decentralized
Overview Overview Overview Overview Detail
Detail
Detail
Detail Detail
Detail
Detail
persistent menu:
27

33. Decentralized
Overview Overview Overview Overview Detail
Detail
Detail
Detail Detail
Detail
Detail
persistent menu:
“Strive for a single entryway into any screen.”
(quote from Dan)
27

34. Decentralized
28

35. Too many taps?
29

36. Too many taps?
“Counting taps is often a
pointless exercise. Taps aren’t as
odious as clicks.
“But watch for excess taps
around high-frequency actions.”
Dan the Man
29

37. What’s wrong?
30

38. What’s wrong?
30

39. Keep app chrome to a minimum
31

40. Keep app chrome to a minimum
31

41. Smartphone exercise!
Sketch a smartphone app that quickly updates a user’s
multiple Google calendars with out-of-office status.
(15 minutes)
Requirements:
• Set start and end dates
• Set status as all-day or as specific hours
• Option to decline meeting requests automatically
• Choose which Google calendars to apply status to
Ack! Susie always forgets to put something in her Google
calendar to let her co-workers know she’s out of the office!
Not required for this exercise:
Naming events, custom replies
Tip:
Consider smart defaults
32

42. Multitouch and gestures
careful now
33

43. Ground rules
• Use multitouch sparingly, i.e., only when a
tap or swipe won’t do.
• Use multitouch as you would use common
command key shortcuts in a desktop app.
• Don’t try to reinvent standard gestures.
• Don’t use an established gesture to do
something very different from the established
use.
34

44. Do we need it?
• What is the task that must be performed?
• Is there a standard gesture for this task
within the OS?
• Is there a familiar gesture we could extend?
• Is the proposed custom gesture easy for the
human hand to perform?
35

45. Complexity
• The more important the task, the more
discoverable the interaction should be.
• Attract and instruct.
• Match the complexity of the gesture to the
complexity of the task.
• Do make it difficult to perform certain
gestures (to protect the user).
36

46. Multitouch/gesture exercise!
You’re working on a tablet app for creating simple architectural drawings.
Identify touches and gestures for the following tasks:
(10 minutes)
• Add a window or door on an existing wall
• Remove a window or door on an existing wall
• Remove a wall to combine two rooms into one
• Switch between 2D (floorplan) and 3D
(elevation) views
• Rotate the 3D view
• When in 3D view, make a wall invisible
(to see through) and then visible again
Not required for this exercise:
Adding rooms/walls, sizing anything
Tip:
Don’t overlook the simplest options
37

47. Prototyping
tools to check out
38

48. Prototyping tools
Stencils for Omnigraffle and Visio
Export to clickable PDF
39

49. Prototyping tools
Keynotopia with Keynote and PowerPoint
Export to clickable PDF
Watch the 19-minute video at the bottom of the page at keynotopia.com!
40

50. Prototyping tools
TAP plugin with Fireworks
Multitouch/gesture
41

51. Prototyping tools
Adobe Proto
The tablet app that creates
tablet app wireframes,
prototypes
42

52. Prototyping tools
And many more...
• iMockups for iPad
• Flairbuilder
• Axure with libraries
• App Press
• Invision App
• App Cooker
• PhoneGap
43

53. Credit where credit is due...
Dan Saffer
Director, Interaction Design
Smart Design
Follow @odannyboy on Twitter to learn about
his upcoming book, Microinteractions, to be
published next spring by O’Reilly.
44