an update about 3d touch - what is it and what can we do with it?

sodastudio.nl

Questions? Email us at [email protected]

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

mailto:[email protected]?subject=

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.


Pressure levels

Pre

ssir

e

peek mode

time (of touching)

pop


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)


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.

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.

Facebook


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


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.


FoursquareThis Foursquare quick actions list adapts to the user and shows their most recently viewed location.


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


..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.


Useful for apps where speed is key. Content creation apps for example.

Pro’s Cons




Keep actions that are important or used a lot visible.

Pro’s Cons




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


Rule: Every ‘peek’ should have the possibility for a ‘pop.’

Peek & Pop


Rule: The ‘pop’ shows the same view a tap on the item would have given the user.

Peek & Pop


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

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.’


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.


Dropbox

Dropbox iOS app

• Previewing and opening of files.

• Quick actions.

Rule: Never use ‘peek’ as the only way to perform certain actions.


..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







Useful with shops, grids and tables.

Pro’s Cons






• 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







This is where 3D touch can really shine. No more having to switch apps all the time.

Pro’s Cons







What you show during ‘peek’ shouldn’t be too detailed.

Pro’s Cons







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.


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.


• 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


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


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.


http://freinbichler.me

http://freinbichler.me/apps/3dtouch/

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.


http://codepen.io

http://codepen.io/laurensvanheems/full/KdWRME/

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


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


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


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.


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


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

sodastudio.nl

Let’s revolutionize user interaction!

Good luck!

Questions? Email us at [email protected]

mailto:[email protected]?subject=

an update about 3d touch - what is it and what can we do with it?

Technology