Alles wat je moet weten over Apples 3D Touch

Wat is 3D Touch?

Niet iTouch? Nee, dit keer niet. 3D Touch ontleent zijn naam aan de drie verschillende drukniveaus die het kan meten.

1. Geen druk (‘ouderwetse’ multi-touch)
2. Lichte druk
3. Stevige druk

Deze verschillen in druk kunnen vervolgens bepaalde acties triggeren. Apple omschrijft het zelf als volgt:

‘iPhone detecteert nu voor het eerst hoe hard je met je vinger op het display drukt. Dankzij 3D Touch beschik je nu ook over de nieuwe functies Peek en Pop. Deze geven je iPhone een geheel nieuwe dimensie.’ – Apple.nl

Hier schuilt natuurlijk ook een heel technisch verhaal achter. Kort gezegd meten 96 sensoren, geïntegreerd in het backlight van het scherm, microscopische verschillen in de afstand tussen de sensor en het glasplaatje. Hierdoor voegt Apple een nieuwe laag toe aan iPhone interactie.

3D Touch bestaat uit meerdere lagen die samenwerken.

Hoe werkt 3D Touch?

Hoewel er steeds meer nieuwe invullingen komen aan 3D Touch zijn op het moment de hoofdpilaren de Peek & Pop en Quick actions.

Peek & Pop

Apple’s iOS design guidelines beschrijft Peek & Pop zelf zo:

‘Een Peek laat gebruikers een item previewen en gerelateerde acties uitvoeren zonder de huidige context te verlaten. Een item geeft aan dat het Peek ondersteunt door een kleine rechthoekige view te tonen als reactie op een lichte druk.’ – Apple iOS design guidelines

Om het wat simpeler te zeggen maakt ‘Peek’ het mogelijk om de inhoud van een link of vervolgscherm snel te previewen. Zo is het bijvoorbeeld mogelijk om via een link naar een webpagina snel een kijkje te nemen op de betreffende pagina, zonder hiervoor je huidige omgeving te verlaten. Het vervolgens echt openen van de pagina noemt Apple ‘Pop’.

Peek: constante druk uitoefenen om een preview van een item te zien, Pop: Harder duwen op wat je op dat moment aan het previewen bent om de volledige weergave te openen.

Hoe activeer je Peek & Pop

Met een wat hardere druk op het scherm wordt de Peek state geactiveerd. Nu is het simpelweg een kwestie van het scherm aan blijven raken om in deze Peek state te blijven. Het is dus niet nodig voor de gebruiker om even hard op het scherm te blijven drukken. Tussen de Peek en Pop hoeft ook geen specifieke tijd te zitten. Het is dus mogelijk om heel snel van Peek naar Pop te gaan.

Vuistregels bij Peek & Pop

Zoals altijd zijn ook aan het gebruik van Peek & Pop een aantal regels verbonden. Of laten we het in dit geval vuistregels voor goed gebruik noemen.

1. Elke Peek heeft een Pop, het is niet mogelijk om alleen te previewen zonder dat de volledige weergave geopend kan worden.
2. De Pop toont dezelfde view als het direct openen van het betreffende item via een tap of klik.
3. Peek mag nooit de enige manier zijn om een bepaalde actie uit te voeren.

Hoe wordt Peek & Pop nu ingezet?

In de praktijk hebben Peek & Pop verschillende nuttige uitwerkingen. Een kleine greep uit het aanbod:

Apple Mail

https://www.youtube.com/watch?v=BQVYmNrPszQ

3D Touch in Apple mail laat je meer details zien van je contacten. (bron: Apple Mail)

Apple Maps

https://www.youtube.com/watch?v=DS7oLUu6G54

Met een harde druk ontvouw je een stuk meer informatie en acties in Apple Maps. (bron: Apple Maps)

Quick actions

Naast Peek & Pop is de andere hoofdfunctie van 3D Touch de Quick Action Menu’s die zich in het app icon verschuilen. Het doel van deze Quick Actions is om acties te ondernemen die eigenlijk één of meer taps verder liggen. Deze Quick Action menu’s kunnen uit maximaal vier taken bestaan. Iedere app kan hierbij zelf besluiten welke acties ze aan dit quick menu toevoegen.

Het 3D Touch quick menu kan verschillende vormen aannemen

Andere toepassingen van 3D Touch

Naast de hoofdfuncties Peek & Pop en Quick actions wordt 3D Touch nog ingezet voor een scala aan creatieve shortcuts. Na een korte zoektocht vonden we de volgende interessante voorbeelden:

Verplaatsen van de cursor

https://www.youtube.com/watch?v=Zw2rpjhfSKc

Verplaats je cursor door hard op je toetsenbord te drukken. (bron: Apple Mail)

Bepalen van lijndikte bij schetsen

https://www.youtube.com/watch?v=0AO9jiN0FsA

Pas de dikte van je lijnen aan door harder te drukken. Net als in het echt!

Magic Piano

Realistischer piano spelen op je telefoon? 3D Touch helpt je een handje.

3D Touch op het web

3D Touch is niet alleen binnen apps inzetbaar. Ook op het web, in de browser, zijn pioniers bezig met innovatieve inzet van 3D Touch. Natuurlijk staat het allemaal nog in de kinderschoenen maar er is een hoop mogelijk. Wij vonden alvast de volgende veelbelovende concepten:

Laurens van Heems’ Instagram concept

https://www.youtube.com/watch?v=r3D2FnOBGks

Foto’s previewen op Instagram was nog nooit zo makkelijk.

Freinbichler.me

https://www.youtube.com/watch?v=i8SFdvDEgYU

Niet heel praktisch, maar wel een voorbeeld van wat er allemaal mogelijk is.

Waar zien wij nog mogelijkheden voor 3D Touch?

Hoewel het natuurlijk super interessant is om te kijken waar we nu staan, is het voor ons als designers altijd belangrijk om naar de toekomst te blijven kijken. En dus denken we bij iedere nieuwe functie na over hoe wij dit zelf in de praktijk vorm zouden kunnen geven. En zo onderwierpen we ook 3D Touch aan onze analyse. Met een paar interessante resultaten.

Buttons

Situatie

Wie kent het niet? De pop up die je vraagt of je écht heel zeker weet dat je een bestand wil verwijderen. Hoewel het natuurlijk nuttig is om dit soort destructieve acties niet te makkelijk toegankelijk te maken is deze pop up vaak alleen maar een vervelende extra klik. 3D Touch zou hier een einde aan kunnen maken.

Mogelijkheid

Sla de pop up over nadat de gebruiker een periode hard op de knop gedrukt heeft. Per ongeluk 3D Touch activeren is zo goed als niet mogelijk.

Voor- en nadelen

• + Minder taps
• – Pop-over kan soms handig zijn (upsell/cross-sell)

Online shopping

Situatie

Wanneer je lekker door een lijst met artikelen aan het scrollen bent en je inmiddels al 4x op ‘laad meer items’ heb getapt kan het beangstigend zijn om een item ook daadwerkelijk aan te klikken. Ga ik straks wel weer op dezelfde scroll positie terugkomen als voordat ik op dit artikel klikte? Hiervoor kan 3D Touch ook een oplossing bieden.

Mogelijkheid

Peek en pop mogelijk maken bij artikelen. Krijg een mooie preview van alle nuttige informatie zonder het overzicht te hoeven verlaten.

Voor- en nadelen

• + Sneller verkennen
• – Je vinger kan het zicht belemmeren

https://www.youtube.com/watch?v=N0zBC5EPz7c

Bekijk snel wat een webwinkel je allemaal te bieden heeft.

Zoomen

Situatie

Soms is het nodig om een product écht even van dichtbij te zien. Op een mobiele telefoon ben je nu vaak overgeleverd aan pinchen om dit voor elkaar te krijgen. Helaas zoomt dan de hele pagina in, en niet alleen het artikel dat je graag wilt bekijken. 3D Touch kan hier een oplossing voor bieden.

Mogelijkheid

Druk harder op een afbeelding om er op in te zoomen en verminder de druk om weer uit te zoomen.

Voor- en nadelen

• + Werkt goed op mobiel
• + Zoom niveau is heel gedetailleerd aan te passen
• – Andere interactie dan op desktop

https://www.youtube.com/watch?v=n0lXS1ecF18

Inzoomen met 3D Touch geeft je veel controle over het zoom niveau.

Bladeren tussen pagina’s

Situatie

Soms kan het fijn zijn om te bladeren tussen verschillende pagina’s zonder weer terug te hoeven naar een lijst. Denk bijvoorbeeld aan een het switchen tussen verschillende categorieën binnen een blogging app.

Mogelijkheid

Overzichtelijker en sneller bladeren tussen verschillende pagina’s door het huidige scherm naar achteren te duwen.

Voor- en nadelen

• + Overzichtelijk
• + Tekst selectie functie blijft behouden
• – Geen indicatie dat het mogelijk is in de interface

https://www.youtube.com/watch?v=2EzR2gbvKqY

Blader snel door content met 3D Touch

Conclusie

Of 3D Touch een succes gaat zijn hangt af van een aantal factoren. Wij denken dat het voornamelijk belangrijk is dat mensen de leercurve door weten te komen? Hoe wordt het duidelijk waar het in te zetten is en waar het dan toe dient. De volgende quote van Jonny Ive vat het sentiment goed samen: ‘Het gaat er niet om dat sommige 3D Touch-functies ook met een knop uitgevoerd zouden kunnen worden. Deze techniek zorgt voor een vloeiende connectie met de content op het scherm, iets waar iedere iPhone-gebruiker mee te maken krijgt. Bovendien, zijn we hier om dingen gemakkelijk voor ons te maken, of willen we verder kijken.’ – Apple iOS design guidelines.

Wil je nog meer informatie over 3D Touch? Check dan onze slideshare post.

*) Dit artikel is geschreven in samenwerking met Hakki Altun

**) Dit artikel is tevens gepubliceerd op de website van Soda Studio.