A detailed presentation about possibilities 3D touch offers. We go in depth about how Apple's 3D touch is meant to be used and how it's actually used now. Next we check out some creative uses and think of possible ways to apply 3D touch in the future.

1. sodastudio.nl
Questions? Email us at info@sodastudio.nl
Anupdate
about3DTouch.
What is it and what can we do with it?

2. Agenda
1. What is 3D touch?
2. How is it meant to be used?
3. How is it actually used?
4. Creative uses
5. Where are the possibilities /What could be possible ways
to apply 3D touch in a new way?

3. Whatis3Dtouch?

4. 3D touch is the name for the screen technology by Apple which can detect
how hard you press on the screen
“
”

5. As the name implies, 3D touch
detects 3 different pressure
levels.
1. No pressure (‘old fashioned’
multi-touch)
2. Light pressure
3. Firm pressure
3 different
pressure levels
iOS Mail app

6. Once ‘peek’ mode has been
triggered the user only has to
keep touching the screen to
stay in ‘peek’ mode.
3 different
pressure levels
Pressure levels
Pressire
peek mode
time (of touching)
pop

7. 3 different
pressure levels
peek mode pop
That means it’s not necessary
to apply the same amount of
pressure. Simply keep touching
the screen will do.
Pressure levels
Pressire
time (of touching)

8. 3 different
pressure levels
peek mode pop
And it can be done much
quicker.
Pressure levels
Pressire
time (of touching)

9. 96 sensors, integrated into the
backlight of the screen, that can
detect microscopical
differences in distance
between the sensor and the
glass.
The technical
story
Glass
Retina screen
Capacitive pressure sensors
Taptic engines

10. Howisitmeanttobeused?

11. QuickActions

12. Quickly jump to screens or
undertake actions that are
otherwise one or multiple taps
away.
(maximum of 4 tasks)
Quick Actions
Quick Actions in native iOS apps
Rule: Only use this menu to
‘deep-link’ to the most
important and meaningful
actions/tasks.

13. Instagram provides ‘quick’
access to the most used
options in the app.
Instagram
Shortcuts in native iOS apps

14. Facebook puts their focus on
what they want their users to
do; create content. This way
users can do that in less time.
Facebook
Shortcuts in native iOS apps

15. The Dropbox shortcut gives
you a way to quickly access
your most recently viewed file.
Here we also see that there is a
possibility to add a sub-text to
actions in the list.
Dropbox
Shortcuts in native iOS apps

16. Flipboard
Flipboard's 3D touch shortcuts
stick with the tabs they have in
their app.
It’s open for discussion
whether this is actually faster
than opening the app. It’s not
really deep-linking.
Shortcuts in native iOS apps

17. Foursquare
This Foursquare quick actions
list adapts to the user and
shows their most recently
viewed location.
Shortcuts in native iOS apps

18. 3D touch menu
• Icons can be left and right
aligned, depending on the
position of the app on the
home screen.
• Titles can take up two rows.
• When there’s a subtitle only
one title row is possible.
• Long titles get truncated.
• Subtitles can also be above
the title.
Menu examples

19. Contacts (iOS)
Contacts iOS app
Quick actions can also occur in
apps.
Interesting: the use of
accordeons
*Check out the demo video on the next page

20. Maps
Maps iOS app
Quick actions for locations on
the map
*Check out the demo video on the next page

21. ..you get the point

22. Pro’s Cons
• Faster ways of accessing deeper
lying actions without having to open
the app. (e.g. quickly Shazam a song
or quickly snap that great picture).
• There’s no indication that 3D touch is
possible and which functions it will
unfold.
• It doesn’t always save time,
especially when the links don’t go
deeper than 1 tap/layer or have load
times..

23. Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture).
• There’s no indication that 3D touch is
possible and which functions 3D will
unfold.
• It doesn’t always save time,
especially when the links don’t go
deeper than 1 tap/layer or have load
times..
Useful for apps where speed is
key. Content creation apps for
example.

24. Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture).
• There’s no indication that 3D touch is
possible and which functions 3D will
unfold.
• It doesn’t always save time,
especially when the links don’t go
deeper than 1 tap/layer or have load
times..
Keep actions that are important
or used a lot visible.

25. Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture).
• There’s no indication that 3D touch is
possible and which functions 3D will
unfold.
• It doesn’t always save time,
especially when the links don’t go
deeper than 1 tap/layer or have load
times..
Only useful when you link to
the most important deeper
lying actions or tasks.

27. Peek&Pop

28. A peek lets users preview an item and perform related actions without
leaving their current context. An item indicates that it supports peek by
displaying a small rectangular view (sometimes called a hint) in response to a
light press.
“
”
Apple iOS Human Interface Guidelines

29. ‘Peek’ makes it possible to
quickly preview the content of
a link or following screen.
When the link or following
screen is then actually opened
this is called ‘pop.’
Peek: constantly put pressure
on what you want to preview.
Pop: Firmer press on what you
are previewing to open it.
Peek & Pop
Peek & Pop in native iOS apps

30. Peek & Pop
Peek & Pop in native iOS apps
Rule: Every ‘peek’ should have
the possibility for a ‘pop.’

31. Peek & Pop
Peek & Pop in native iOS apps
Rule: The ‘pop’ shows the
same view a tap on the item
would have given the user.

32. Peek & Pop
Peek & Pop in native iOS apps
Rule: Show as little elements
that look like buttons as
possible during ‘peeking.’
Users want to push buttons.
‘Peek’ however disappears
when you take your finger of
the screen.

33. Mail
Mail iOS app
• Previewing emails.
• Quick actions during
‘peeking.’
Advice: Actions that you
already offer on for instance
touch and hold work great as
quick actions during ‘peek.’
*Check out the demo video on the next page

34. Instagram
Instagram iOS app
• Previewing and opening
photos.
• Previewing and opening user
feeds.
Rule: The ‘pop’ shows the
same view a tap on the item
would give the user.
*Check out the demo video on the next page

35. Dropbox
Dropbox iOS app
• Previewing and opening of
files.
• Quick actions.
Rule: Never use ‘peek’ as the
only way to perform certain
actions.
*Check out the demo video on the next page

36. ..you get the point

37. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.

38. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.
Useful with shops, grids and
tables.

39. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.
Useful for lists of items that can
be interacted with. For instance,
saving, adding, favoriting or
bookmarking items.

40. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.
This is where 3D touch can
really shine. No more having to
switch apps all the time.

41. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.
What you show during ‘peek’
shouldn’t be too detailed.

42. Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mail).
• Follow up actions allow extra
functions from within peak (e.g.
delete or archive an e-mail)
• Better integration between apps. (e.g.
set a Calendar event from within the
Apple Mail app.
• Your thumb is often obstructing your
sight.
• Load times aren’t always faster than
just opening the app and doing what
you want. Longer loads require you
to keep your finger on the screen
constantly.
• No indication 3D touch is possible.
Optimizing for peaks?

44. Otherwaystoapply3Dtouch

45. Cursor
Cursor in iOS
Useful application: The cursor
can be moved faster and more
accurate. This is activated by
pressing firmly on the
keyboard.
*Check out the demo video on the next page

46. Sketching
Sketching in Notes (iOS native)
Useful application: The
thickness of a pen/pencil
drawn line changes with the
amount of pressure you apply.
This makes the sketching feel
more life-like.
*Check out the demo video on the next
page

47. • Use a ‘peek’ to show a live, content-rich preview of an item.
• Every ‘peek’ should have the possibility to ‘pop.’
• The possibility to ‘peek’ means edit menu’s aren’t possible anymore. So
carefully choose what has more worth.
• Avoid buttons within a ‘peek.’
• Make ‘quick actions’ within a ‘peek’ possible when an element already allows
extra actions.
• Don’t use ‘peek’ as the only way to perform a certain action.
Overview

48. “Why would we spend this many years working on 3D Touch when you can
do some of these things with a button? Well it’s, it’s just such a fluid
connection with your content. And not everything is binary, is it? Are we
developing stuff to make things easy for ourselves, or are we developing
products to move this forward? I have no interest, and I don’t think anybody
here has interest, in just designing something that will fit into a family and
behave itself.”
“
”
Jony Ive

49. Creativeuses

50. Gravity makes use of 3D touch
to measure weight. It does this
with a spoon, because the
object has to be conductive
and oval. (It has to resemble a
finger.)
Gravity
Gravity app

51. This app uses pressure
sensitivity to make a note
sound louder or softer. Just like
on a real piano.
Magic Piano
Magic Piano app
*Check out the demo video on the next
page

52. Freeblade uses 3D touch to give
users the possibility to switch
weapons, without displaying
an extra button for this on the
screen.
Freeblade
(game)
Freeblade game
*Check out the demo video on the next
page

53. 3D Touch on the
web
freinbichler.me
http://freinbichler.me/apps/
3dtouch/
Marcel Freinbichler, a web
developer, makes use of 3D
touch and displays how
accurately it works.
*Check out the demo video on the next page

54. 3D Touch on the
web
codepen.io
http://codepen.io/
laurensvanheems/full/
KdWRME/
Laurens van Heems
demonstrates 3D touch on the
web with an Instagram feed.
*Check out the demo video on the next page

55. Whatarethepossibilities/How
canweapply3Dtouch?

56. Buttons

57. Situation:
On mobile split buttons can
become annoying when the
dropdown part becomes too
small.
Possibility:
Activate a dropdown with a
longer push.
Pro’s and cons:
+ Increased touch surface.
- No clear indication this is
possible at all.
Split buttons
Example of a split button
Split button

58. Situation:
Some buttons(like delete) ask
for a confirmation in the form
of a pop-over.
Possibility:
Skip the pop-over when
pressure is firm. 3D touch
makes it nearly impossible to
accidentally perform an action.
Pro’s and cons:
+ Less taps/clicks.
- Pop-over can sometimes
be useful (upsell/cross-sell).
Button without
confirmation
Example of a delete button
Delete

59. Situation:
Looking for information but
not being sure in which
accordeon it is found.
Possibility:
Apply soft pressure to preview,
push harder to keep the
accordeon open.
Pro’s and cons:
+ Less taps.
- Not very convenient when the
accordeon is at the bottom of
the screen.
Example animation accordeon
Accordeon
*Check out the demo video on the next page

60. Listsandgrids

61. Situation:
Lists often have an edit button
to edit the list.
Possibility:
You could move list items by
pushing them harder.
Pro’s and cons:
+ Faster.
- Edit a list or a grid.
Editing the order of a list
Edit a list or a
grid
*Check out the demo video on the next page

62. Selection in a grid
Situation:
To select items you often have
an edit button to enter edit
modus.
Possibility:
You could select an item by
pressing it harder.
Pro’s and cons:
+ Faster.
- No clear indication this is
possible at all.
Edit a list or a
grid
*Check out the demo video on the next page

63. Situation:
Sometimes you quickly want
to see more details (e.g. during
shopping).
Possibility
Regular ‘peek’ and ‘pop’ with
the list items.
Pro’s and cons:
+ Faster exploration.
- Your finger can be in the way
of what you want to see.
Editing list order
Peek & Pop
*Check out the demo video on the next page

64. Pop-overs

65. Situation:
Pop-overs often contain brief
info about a certain part or a
complete page.
Possibility:
A quick check can be faster on
mobile with 3D touch.
Pro’s and cons:
+ Fast.
- Your finger is in the way of
what you want to see.
Pop-overs
Example of a pop-over
*Check out the demo video on the next page

66. Zoom

67. Example: Zoom
Zoom
Situation:
Sometimes a shop offers the
possibility to zoom in on an
image on hover.
Possibility:
You could activate zoom with a
hard press.
Pro’s and cons:
+ Zooming made easier on
mobile.
+ Amount of pressure indicates
amount of zoom.
- Different interaction from
desktop.
*Check out the demo video on the next page

68. Menu&tabs

69. Situatie:
Sometimes tabs or menus are
in the way and disturb the user
experience. (E.g. a good article).
Mogelijkheid:
Making the menu, or tabs
appear with a hard press.
Voor- en nadelen:
+ More space.
- Hamburger discussion.
Displaying
Menu or tabs
Editing list order
*Check out the demo video on the next page

70. Browsing

71. Situation:
Quickly browse between
multiple screens without
having to go back to a list.
Possibility:
Better and quicker oversight by
pushing the current screen
backwards.
Pro’s and cons:
+ Oversight.
+ Text selection function still
possible.
Editing list order
Browsing
*Check out the demo video on the next page

72. Textselection

73. Situatie:
Text selection can now be
difficult, and requires a long
press and moving handles.
Possibility:
Push hard and move your
finger over the text.
Pro’s and cons:
+ A little faster than the current
way.
- You lose other 3D touch
functions.
Text selection
Text selection
*Check out the demo video on the next page

74. …So

75. sodastudio.nl
Let’srevolutionize
userinteraction!
Good luck!
Questions? Email us at info@sodastudio.nl