A primer on considerations for making usable touchscreen experiences. Presented at General Assembly, Seattle, in May 2015.

1. TOUCHSCREEN UX
DESIGN WORKSHOP
Kirsten Miller, UX Lead, Razorfish

2. AGENDA
I.
‣ Introductions and
overview
‣ Warm-up exercise
‣ Fingers, hands, and touch
targets
II.
‣ Activity zones
‣ App structures
‣ Smartphone exercise
III.
‣ Scrolling, taps, and
chrome
‣ Multitouch and gestures
‣ Final exercise
‣ Tools and further reading
‣ Wrap up
LOTS OF STUFF!

3. ‣ Your name
‣ Live in Seattle? How long?
‣ Occupation
‣ Why you’re here today
INTRODUCTIONS
HELLO!
Photograph: Andrea Arden/flickr, Creative Commons license 2.0

4. TOUCHSCREEN UX DESIGN WORKSHOP
WE’LL COVER:

5. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
WE’LL COVER:

6. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
WE’LL COVER:

7. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
WE’LL COVER:

8. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
WE’LL COVER:

9. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
‣ Guidelines on incorporating multi-touch and
gestures
WE’LL COVER:

10. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
‣ Guidelines on incorporating multi-touch and
gestures
WE’LL COVER: SORRY, WE WON’T COVER:

11. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
‣ Guidelines on incorporating multi-touch and
gestures
WE’LL COVER:
‣ Platform, OS differences
SORRY, WE WON’T COVER:

12. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
‣ Guidelines on incorporating multi-touch and
gestures
WE’LL COVER:
‣ Platform, OS differences
‣ In-depth discussion of screen resolution or
responsive design considerations
SORRY, WE WON’T COVER:

13. TOUCHSCREEN UX DESIGN WORKSHOP
‣ How designing user experiences for
touchscreens is different from designing
experiences for pointing device environments
‣ How people interact with touchscreens
‣ Guidelines for making touchscreen
experiences usable
‣ Discussion of organizing concepts for
touchscreen/small screen experiences
‣ Guidelines on incorporating multi-touch and
gestures
WE’LL COVER:
‣ Platform, OS differences
‣ In-depth discussion of screen resolution or
responsive design considerations
‣ Coding/development
SORRY, WE WON’T COVER:

14. WARM-UP EXERCISE!
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: William Warby/flickr, Creative Commons license 2.0

15. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Sketch a touchscreen version of a simple
household thermostat (15 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/on
‣ Not required:
Programming dates/times, controlling specific
rooms
WARM-UP EXERCISE
Photograph: starmanseries/flickr, Creative Commons license 2.0

16. FINGERS, HANDS AND TOUCH
TARGETS
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Trace Meek/flickr, Creative Commons license 2.0

17. TOUCHSCREEN UX DESIGN WORKSHOP
‣ They’re far less accurate than
a screen cursor
LET’S TALK ABOUT FINGERS 1 mm 8-10 mm
diameter
Image: public domain

18. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Minimum size guidelines for
touch targets:
TOUCH TARGET SIZES
8 mm
10 mm
Option3Selected Option2

19. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Minimum size guidelines for
touch targets:
‣ Physical keyboard:
TOUCH TARGET SIZES
8 mm
10 mm
Option3Selected Option2
8 mm
15 mm 4 mm
15 mm

20. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Minimum size guidelines for
touch targets:
‣ iOS keyboard, iPhone 5s:
TOUCH TARGET SIZES
8 mm
10 mm
Option3Selected Option2
5 mm
8 mm 0.8 mm

21. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Minimum size guidelines for
touch targets:
‣ iOS keyboard, iPhone 5s:
TOUCH TARGET SIZES
8 mm
10 mm
Option3Selected Option2
5 mm
8 mm 0.8 mm4 mm
6 mm

22. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Iceberg tips:
TOUCH TARGET TRICKS
OK tappable area

23. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Iceberg tips:
‣ Adaptive targets:
TOUCH TARGET TRICKS
tappable area
Q, then ?
anticipate
your next
move…
OK

24. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Usability testing: Watch real
people play with an interactive
prototype
‣ Before that? Try a testing
template, like this one from
Steven Hoober / fourth Mobile
HOW DO YOU KNOW IF YOUR TOUCH
TARGETS ARE OK?
Photograph: 4ourth Mobile

25. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Those pesky fingers always seem to be attached to hands…
which often block much of the interface.
AND IT’S NOT JUST ABOUT FINGERS

26. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Those pesky fingers always seem to be attached to hands…
which often block much of the interface.
AND IT’S NOT JUST ABOUT FINGERS

27. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Those pesky fingers always seem to be attached to hands…
which often block much of the interface.
AND IT’S NOT JUST ABOUT FINGERS
15-25 mm
wide

28. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Those pesky fingers always seem to be attached to hands…
which often block much of the interface.
AND IT’S NOT JUST ABOUT FINGERS
15-25 mm
wide

29. TOUCHSCREEN UX DESIGN WORKSHOP
DON’T TALK TO THE HAND!
this is awesome!
Choose one:
The best option
Another option
The third option

30. TOUCHSCREEN UX DESIGN WORKSHOP
DON’T TALK TO THE HAND!
this is awesome!
Choose one:
The best option
Another option
The third option
this is awesome!
Choose one:
The best option
Another option
The third option
APPLY
Oh, hey! The action
you selected can’t
be undone. Are you
sure you want to do
it?

31. TOUCHSCREEN UX DESIGN WORKSHOP
DON’T TALK TO THE HAND!
this is awesome!
Choose one:
The best option
Another option
The third option
this is awesome!
Choose one:
The best option
Another option
The third option
APPLY
Oh, hey! The action
you selected can’t
be undone. Are you
sure you want to do
it?
this is awesome!
Choose one:
The best option
Another option
The third option
Oh, hey! The action
you selected can’t
be undone. Are you
sure you want to do
it?
APPLY
Cancel

32. TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Faith Goble/flickr, Creative Commons license 2.0
BREAK!

33. ACTIVITY ZONES
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Faith Goble/flickr, Creative Commons license 2.0

34. “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 Saffer
Author of Designing for Interaction and
Microinteractions
TOUCHSCREEN UX DESIGN WORKSHOP
EASY VS. REACH
“

35. “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 Saffer
Author of Designing for Interaction and
Microinteractions
TOUCHSCREEN UX DESIGN WORKSHOP
EASY VS. REACH
“

36. “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 Saffer
Author of Designing for Interaction and
Microinteractions
TOUCHSCREEN UX DESIGN WORKSHOP
EASY VS. REACH
“

37. TOUCHSCREEN UX DESIGN WORKSHOP
EASY VS. REACH

38. TOUCHSCREEN UX DESIGN WORKSHOP
Hey, what
about lefties?
EASY VS. REACH

39. TOUCHSCREEN UX DESIGN WORKSHOP
What about
these people?
EASY VS. REACH
Photographs: Tom Newby/flickr, Creative Commons license 2.0 | NYC Media Lab/flickr, Creative Commons license 2.0

40. TOUCHSCREEN UX DESIGN WORKSHOP
A BRIEF SURVEY, PART 1
Photographs: N i c o l a /flickr, Creative Commons license 2.0 | r. nial bradshaw/flickr, Creative Commons license 2.0 | Tony Hughes, public domain

41. TOUCHSCREEN UX DESIGN WORKSHOP
A BRIEF SURVEY, PART 1
A
1 hand
Photographs: N i c o l a /flickr, Creative Commons license 2.0 | r. nial bradshaw/flickr, Creative Commons license 2.0 | Tony Hughes, public domain

42. TOUCHSCREEN UX DESIGN WORKSHOP
A BRIEF SURVEY, PART 1
A
1 hand
B
2 hands, thumbs
Photographs: N i c o l a /flickr, Creative Commons license 2.0 | r. nial bradshaw/flickr, Creative Commons license 2.0 | Tony Hughes, public domain

43. TOUCHSCREEN UX DESIGN WORKSHOP
A BRIEF SURVEY, PART 1
A
1 hand
B
2 hands, thumbs
C
2 hands, finger
Photographs: N i c o l a /flickr, Creative Commons license 2.0 | r. nial bradshaw/flickr, Creative Commons license 2.0 | Tony Hughes, public domain

44. TOUCHSCREEN UX DESIGN WORKSHOP
A BRIEF SURVEY, PART 2
A
Thumbs
B
Finger
Photographs: Serge Kij/flickr, Creative Commons license 2.0 | NYC Media Lab/flickr, Creative Commons license 2.0

45. TOUCHSCREEN UX DESIGN WORKSHOP
SOME REAL RESEARCH
In January 2013, a UX designer named Steven Hoober led a study observing 1,333 real live people using their
mobile devices in the wild. Here’s what the researchers found.

46. TOUCHSCREEN UX DESIGN WORKSHOP
SOME REAL RESEARCH
In January 2013, a UX designer named Steven Hoober led a study observing 1,333 real live people using their
mobile devices in the wild. Here’s what the researchers found.
49%
one hand
right hand 67%
left hand 33%

47. TOUCHSCREEN UX DESIGN WORKSHOP
SOME REAL RESEARCH
In January 2013, a UX designer named Steven Hoober led a study observing 1,333 real live people using their
mobile devices in the wild. Here’s what the researchers found.
49%
one hand
right hand 67%
left hand 33%
36%
“cradled”
thumb on screen 72%
finger on screen 28%

48. TOUCHSCREEN UX DESIGN WORKSHOP
SOME REAL RESEARCH
In January 2013, a UX designer named Steven Hoober led a study observing 1,333 real live people using their
mobile devices in the wild. Here’s what the researchers found.
49%
one hand
right hand 67%
left hand 33%
36%
“cradled”
thumb on screen 72%
finger on screen 28%
15%
two hands
both thumbs
on screen

49. TOUCHSCREEN UX DESIGN WORKSHOP
SOME REAL RESEARCH
“The way in which users hold their phone is not a
static state. Users change the way they’re holding
their phone very often—sometimes every few
seconds.
“
See more at: http://www.uxmatters.com/mt/archives/2013/02/how-do-users-really-hold-mobile-devices.php

50. APP STRUCTURES
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: USGS Bee Inventory and Monitoring Lab/flickr, Creative Commons license 2.0

51. TOUCHSCREEN UX DESIGN WORKSHOP
WHY TALK ABOUT
APP STRUCTURE?

52. TOUCHSCREEN UX DESIGN WORKSHOP
FLAT STRUCTURE
Detail Detail Detail Detail Detail

53. TOUCHSCREEN UX DESIGN WORKSHOP
FLAT STRUCTURE

54. TOUCHSCREEN UX DESIGN WORKSHOP
STAR STRUCTURE
Detail
Detail
Home
Detail
Detail
Detail

55. TOUCHSCREEN UX DESIGN WORKSHOP
STAR STRUCTURE
Flight
Tracker
My
Trips Cars
Flights
Hotels

56. TOUCHSCREEN UX DESIGN WORKSHOP
DECENTRALIZED STRUCTURE
Detail
Detail Function
1
DetailDetail
Detail
Function
2
Function
3
Function
4
Detail
persistent menu:

57. TOUCHSCREEN UX DESIGN WORKSHOP
DECENTRALIZED STRUCTURE
Blog
Instagram
Category Search
Find a
WL
Save for
later
Checkout

58. SMARTPHONE APP EXERCISE!
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Janet Ramsden/flickr, Creative Commons license 2.0

59. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Ack! Susie always forgets to put something in
her Google calendar to let her co-workers know
she’s out of the office!
‣ Sketch a smartphone app that quickly updates
a user’s multiple Google calendars with out-of-
office status. Requirements:
‣ Set start and end dates
‣ Set time as all day or specific hours
‣ Option to decline meeting requests automatically
‣ Choose which calendars to apply status to
‣ Not required:
Naming events, custom replies
SMARTPHONE EXERCISE
Photograph: Andy Price/flickr, Creative Commons license 2.0

60. TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Faith Goble/flickr, Creative Commons license 2.0
BREAK!

61. TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Faith Goble/flickr, Creative Commons license 2.0
SCROLLING, TAPS AND
CHROME

62. TOUCHSCREEN UX DESIGN WORKSHOP
IS THERE SUCH A THING AS TOO MUCH SCROLLING?

63. TOUCHSCREEN UX DESIGN WORKSHOP
IS THERE SUCH A THING AS TOO MUCH SCROLLING?
There’s a great article on infinite scrolling in Smashing Magazine:
Infinite Scrolling: Let’s Get To The Bottom Of This
By Yogev Ahuvia
http://www.smashingmagazine.com/2013/05/03/infinite-scrolling-lets-
get-to-the-bottom-of-this/

64. TOUCHSCREEN UX DESIGN WORKSHOP
TOO MANY TAPS?
Photograph: Jack Delano, Licensed under Public Domain via Wikimedia Commons

65. TOUCHSCREEN UX DESIGN WORKSHOP
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 Saffer
Author of Designing for Interaction and
Microinteractions
“
Photograph: Jack Delano, Licensed under Public Domain via Wikimedia Commons

66. TOUCHSCREEN UX DESIGN WORKSHOP
WHAT’S WRONG?

67. TOUCHSCREEN UX DESIGN WORKSHOP
WHAT’S WRONG?

68. TOUCHSCREEN UX DESIGN WORKSHOP
KEEP APP CHROME TO A MINIMUM

69. TOUCHSCREEN UX DESIGN WORKSHOP
KEEP APP CHROME TO A MINIMUM

70. MULTITOUCH AND GESTURES
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Trace Meek/flickr, Creative Commons license 2.0

71. TOUCHSCREEN UX DESIGN WORKSHOP
GROUND RULES

72. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Use multitouch sparingly, i.e., only when a
tap or swipe won’t do.
GROUND RULES

73. TOUCHSCREEN UX DESIGN WORKSHOP
‣ 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.
GROUND RULES

74. TOUCHSCREEN UX DESIGN WORKSHOP
‣ 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.
GROUND RULES

75. TOUCHSCREEN UX DESIGN WORKSHOP
‣ 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.
GROUND RULES

76. TOUCHSCREEN UX DESIGN WORKSHOP
‣ 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?
DO WE NEED IT?

77. TOUCHSCREEN UX DESIGN WORKSHOP
‣ 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).
COMPLEXITY

78. MULTITOUCH / GESTURE
EXERCISE!
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Janet Ramsden/flickr, Creative Commons license 2.0

79. TOUCHSCREEN UX DESIGN WORKSHOP
‣ You’re working on a tablet app for creating
simple architectural drawings. Identify touches
and gestures for the following tasks:
‣ 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:
Adding rooms/walls, sizing anything
MULTITOUCH / GESTURE EXERCISE

80. PROTOTYPING
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: William Warby/flickr, Creative Commons license 2.0

81. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Keynotopia with Keynote and PowerPoint
‣ Extensive set of smartphone and tablet
interface templates
keynotopia.com
PROTOTYPING TOOLS

82. TOUCHSCREEN UX DESIGN WORKSHOP
‣ InVision
‣ Import design mockups created with your
preferred tool, then add interactivity
‣ Quickly becoming a favorite among
interface designers
‣ Recently added Apple Watch support
invisionapp.com
PROTOTYPING TOOLS

83. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Proto.io
‣ Build your interface using component
libraries
‣ Support for many gestures and transitions
‣ Great for viewing and testing designs on
actual devices
proto.io
PROTOTYPING TOOLS

84. CONTINUE LEARNING!
TOUCHSCREEN UX DESIGN WORKSHOP
Photograph: Faith Goble/flickr, Creative Commons license 2.0

85. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Tapworthy: Designing Great iPhone Apps
‣ Josh Clark
FURTHER READING

86. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Mobile Design Pattern Gallery
‣ Theresa Neil
FURTHER READING

87. TOUCHSCREEN UX DESIGN WORKSHOP
‣ Microinteractions
‣ Dan Saffer
‣ odannyboy.com
‣ Dan’s web site
FURTHER READING

88. TOUCHSCREEN UX DESIGN WORKSHOP
‣ smashingmagazine.com
‣ alistapart.com
FURTHER READING

89. TOUCHSCREEN UX
DESIGN WORKSHOP
Kirsten Miller, UX Lead, Razorfish