Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
sodastudio.nl
Questions? Email us at info@sodastudio.nl
Anupdate
about3DTouch.
What is it and what can we do with it?
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 p...
Whatis3Dtouch?
3D touch is the name for the screen technology by Apple which can detect
how hard you press on the screen
“
”
As the name implies, 3D touch
detects 3 different pressure
levels.
1. No pressure (‘old fashioned’
multi-touch)
2. Light p...
Once ‘peek’ mode has been
triggered the user only has to
keep touching the screen to
stay in ‘peek’ mode.
3 different
pres...
3 different
pressure levels
peek mode pop
That means it’s not necessary
to apply the same amount of
pressure. Simply keep ...
3 different
pressure levels
peek mode pop
And it can be done much
quicker.
Pressure levels
Pressire
time (of touching)
96 sensors, integrated into the
backlight of the screen, that can
detect microscopical
differences in distance
between the...
Howisitmeanttobeused?
QuickActions
Quickly jump to screens or
undertake actions that are
otherwise one or multiple taps
away.
(maximum of 4 tasks)
Quick Acti...
Instagram provides ‘quick’
access to the most used
options in the app.
Instagram
Shortcuts in native iOS apps
Facebook puts their focus on
what they want their users to
do; create content. This way
users can do that in less time.
Fa...
The Dropbox shortcut gives
you a way to quickly access
your most recently viewed file.
Here we also see that there is a
po...
Flipboard
Flipboard's 3D touch shortcuts
stick with the tabs they have in
their app.
It’s open for discussion
whether this...
Foursquare
This Foursquare quick actions
list adapts to the user and
shows their most recently
viewed location.
Shortcuts ...
3D touch menu
• Icons can be left and right
aligned, depending on the
position of the app on the
home screen.
• Titles can...
Contacts (iOS)
Contacts iOS app
Quick actions can also occur in
apps.
Interesting: the use of
accordeons
*Check out the de...
Maps
Maps iOS app
Quick actions for locations on
the map
*Check out the demo video on the next page
..you get the point
Pro’s Cons
• Faster ways of accessing deeper
lying actions without having to open
the app. (e.g. quickly Shazam a song
or ...
Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture)...
Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture)...
Pro’s Cons
• Faster ways of accessing deeper
lying actions (e.g. quickly Shazam a
song or quickly snap that great
picture)...
Peek&Pop
A peek lets users preview an item and perform related actions without
leaving their current context. An item indicates tha...
‘Peek’ makes it possible to
quickly preview the content of
a link or following screen.
When the link or following
screen i...
Peek & Pop
Peek & Pop in native iOS apps
Rule: Every ‘peek’ should have
the possibility for a ‘pop.’
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.
Peek & Pop
Peek & Pop in native iOS apps
Rule: Show as little elements
that look like buttons as
possible during ‘peeking....
Mail
Mail iOS app
• Previewing emails.
• Quick actions during
‘peeking.’
Advice: Actions that you
already offer on for ins...
Instagram
Instagram iOS app
• Previewing and opening
photos.
• Previewing and opening user
feeds.
Rule: The ‘pop’ shows th...
Dropbox
Dropbox iOS app
• Previewing and opening of
files.
• Quick actions.
Rule: Never use ‘peek’ as the
only way to perf...
..you get the point
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Pro’s Cons
• Quickly check the relevance of
content without having to leave the
current screen. (e.g. scan an incoming
mai...
Otherwaystoapply3Dtouch
Cursor
Cursor in iOS
Useful application: The cursor
can be moved faster and more
accurate. This is activated by
pressing f...
Sketching
Sketching in Notes (iOS native)
Useful application: The
thickness of a pen/pencil
drawn line changes with the
am...
• Use a ‘peek’ to show a live, content-rich preview of an item.
• Every ‘peek’ should have the possibility to ‘pop.’
• The...
“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’...
Creativeuses
Gravity makes use of 3D touch
to measure weight. It does this
with a spoon, because the
object has to be conductive
and ov...
This app uses pressure
sensitivity to make a note
sound louder or softer. Just like
on a real piano.
Magic Piano
Magic Pia...
Freeblade uses 3D touch to give
users the possibility to switch
weapons, without displaying
an extra button for this on th...
3D Touch on the
web
freinbichler.me
http://freinbichler.me/apps/
3dtouch/
Marcel Freinbichler, a web
developer, makes use ...
3D Touch on the
web
codepen.io
http://codepen.io/
laurensvanheems/full/
KdWRME/
Laurens van Heems
demonstrates 3D touch on...
Whatarethepossibilities/How
canweapply3Dtouch?
Buttons
Situation:
On mobile split buttons can
become annoying when the
dropdown part becomes too
small.
Possibility:
Activate a d...
Situation:
Some buttons(like delete) ask
for a confirmation in the form
of a pop-over.
Possibility:
Skip the pop-over when...
Situation:
Looking for information but
not being sure in which
accordeon it is found.
Possibility:
Apply soft pressure to ...
Listsandgrids
Situation:
Lists often have an edit button
to edit the list.
Possibility:
You could move list items by
pushing them harder...
Selection in a grid
Situation:
To select items you often have
an edit button to enter edit
modus.
Possibility:
You could s...
Situation:
Sometimes you quickly want
to see more details (e.g. during
shopping).
Possibility
Regular ‘peek’ and ‘pop’ wit...
Pop-overs
Situation:
Pop-overs often contain brief
info about a certain part or a
complete page.
Possibility:
A quick check can be f...
Zoom
Example: Zoom
Zoom
Situation:
Sometimes a shop offers the
possibility to zoom in on an
image on hover.
Possibility:
You co...
Menu&tabs
Situatie:
Sometimes tabs or menus are
in the way and disturb the user
experience. (E.g. a good article).
Mogelijkheid:
Mak...
Browsing
Situation:
Quickly browse between
multiple screens without
having to go back to a list.
Possibility:
Better and quicker ov...
Textselection
Situatie:
Text selection can now be
difficult, and requires a long
press and moving handles.
Possibility:
Push hard and mo...
…So
sodastudio.nl
Let’srevolutionize
userinteraction!
Good luck!
Questions? Email us at info@sodastudio.nl
An update  about 3D Touch - What is it and what can we do with it?
An update  about 3D Touch - What is it and what can we do with it?
Upcoming SlideShare
Loading in …5
×

An update about 3D Touch - What is it and what can we do with it?

828 views

Published on

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.

Published in: Technology
  • Be the first to comment

An update about 3D Touch - What is it and what can we do with it?

  1. 1. sodastudio.nl Questions? Email us at info@sodastudio.nl Anupdate about3DTouch. What is it and what can we do with it?
  2. 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. 3. Whatis3Dtouch?
  4. 4. 3D touch is the name for the screen technology by Apple which can detect how hard you press on the screen “ ”
  5. 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. 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. 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. 8. 3 different pressure levels peek mode pop And it can be done much quicker. Pressure levels Pressire time (of touching)
  9. 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. 10. Howisitmeanttobeused?
  11. 11. QuickActions
  12. 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. 13. Instagram provides ‘quick’ access to the most used options in the app. Instagram Shortcuts in native iOS apps
  14. 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. 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. 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. 17. Foursquare This Foursquare quick actions list adapts to the user and shows their most recently viewed location. Shortcuts in native iOS apps
  18. 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. 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. 20. Maps Maps iOS app Quick actions for locations on the map *Check out the demo video on the next page
  21. 21. ..you get the point
  22. 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. 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. 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. 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.
  26. 26. Peek&Pop
  27. 27. 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
  28. 28. ‘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
  29. 29. Peek & Pop Peek & Pop in native iOS apps Rule: Every ‘peek’ should have the possibility for a ‘pop.’
  30. 30. 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.
  31. 31. 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.
  32. 32. 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
  33. 33. 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
  34. 34. 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
  35. 35. ..you get the point
  36. 36. 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.
  37. 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. Useful with shops, grids and tables.
  38. 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 for lists of items that can be interacted with. For instance, saving, adding, favoriting or bookmarking items.
  39. 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. This is where 3D touch can really shine. No more having to switch apps all the time.
  40. 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. What you show during ‘peek’ shouldn’t be too detailed.
  41. 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. Optimizing for peaks?
  42. 42. Otherwaystoapply3Dtouch
  43. 43. 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
  44. 44. 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
  45. 45. • 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
  46. 46. “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
  47. 47. Creativeuses
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. 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
  53. 53. Whatarethepossibilities/How canweapply3Dtouch?
  54. 54. Buttons
  55. 55. 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
  56. 56. 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
  57. 57. 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
  58. 58. Listsandgrids
  59. 59. 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
  60. 60. 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
  61. 61. 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
  62. 62. Pop-overs
  63. 63. 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
  64. 64. Zoom
  65. 65. 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
  66. 66. Menu&tabs
  67. 67. 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
  68. 68. Browsing
  69. 69. 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
  70. 70. Textselection
  71. 71. 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
  72. 72. …So
  73. 73. sodastudio.nl Let’srevolutionize userinteraction! Good luck! Questions? Email us at info@sodastudio.nl

×