An update about 3D Touch - What is it and what can we do with it?
Post on 14-Apr-2017
609 Views
Preview:
Transcript
sodastudio.nl
Questions? Email us at info@sodastudio.nl
An update about 3D Touch .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 possibilities /What could be possible ways
to apply 3D touch in a new way?
What is 3D touch?
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 pressure 3. Firm pressure
3 different pressure levels
iOS Mail app
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
Pre
ssir
e
peek mode
time (of touching)
pop
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
Pre
ssir
e
time (of touching)
3 different pressure levels
peek mode pop
And it can be done much quicker.
Pressure levels
Pre
ssir
e
time (of touching)
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
How is it meant to be used?
Quick Actions
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.
Instagram provides ‘quick’ access to the most used options in the app.
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.
Shortcuts in native iOS apps
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
FlipboardFlipboard'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
FoursquareThis Foursquare quick actions list adapts to the user and shows their most recently viewed location.
Shortcuts in native iOS apps
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
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
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 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..
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.
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.
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.
Peek & Pop
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
‘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
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.’
Users want to push buttons. ‘Peek’ however disappears when you take your finger of the screen.
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
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
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
..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 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.
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.
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.
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.
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.
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?
Other ways to apply 3D touch
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
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
• 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
“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
Creative uses
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
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
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
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
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
What are the possibilities /How can we apply 3D touch?
Buttons
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
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
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
Lists and grids
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
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
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
Pop-overs
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
Zoom
Example: Zoom
ZoomSituation: 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
Menu & tabs
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
Browsing
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
Text selection
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
…So
sodastudio.nl
Let’s revolutionize user interaction!
Good luck!
Questions? Email us at info@sodastudio.nl
top related