Designtechnieken voor touch devices: skeuomorfisme & tactiliteit

Als er de laatste tijd een lans gebroken wordt voor tactiel ontwerpen, krijgt men dikwijls het woord ‘skeuomorfisme’ terug. Geen wonder ook. Maar wat is precies het verschil tussen beide technieken en hoe kun je ze inzetten als je een touch device (of andere digitale) interface ontwerpt?

Skeuomorfisme & tactiliteit

Een paar maanden terug kwam in het nieuws dat Scott Forstall, de software designer bij Apple, vervangen werd door Jonathan Ive. Forstall was verantwoordelijk voor de look & feel van de iOS-applicaties zoals de kalender, de rekenmachine of het notitieblok. Met het fiat van Jobs maakte hij digitale replica’s van voorwerpen uit het echte leven, om interactie door herkenning te stimuleren. Skeuomorfisme dus, of het kopiëren van vormkenmerken of andere visuele referenties van een element dat met een andere techniek of een ander materiaal gemaakt is.

Met de doorbraak van touch devices werd het toepassen van deze stijltechniek de laatste jaren steeds meer gebruikt – en niet enkel door Apple. Het lijdt geen twijfel dat dit onder het nieuwe beleid zal veranderen. Ive is meer een tactiel ontwerper. In zijn jeugd mocht hij bij zijn verjaardag zijn eigen creaties realiseren in de zilversmederij van zijn vader. Dat ambachtelijke, het erkennen van materialen vind je nu nog steeds terug in zijn hardware-ontwerpen. Geborsteld aluminium en gehard glas. Enkel hoogwaardige plastics. Echte tactiliteit dus.

Maar hoe vertaal je dit gevoel naar de digitale interfaces? Krijgt het een nut of blijft het bij een stijllaagje? Vandaag de dag moeten interfaces schaalbaar, responsive, licht, vectorieel en middels code geanimeerd zijn. Hierbij past de geometrische, minimalistische interface van Windows 8 OS beter, die ervan uitgaat dat mensen ondertussen vertrouwd zijn om te interageren met digitale interfaces. Maar tegelijk is die ook afstandelijk, kil, machinaal. Hoe is hier nu echte tactiliteit in te brengen?

Digitale tastbaarheid

Allereerst moeten we beseffen dat het nastreven van tastbare software, zoals het gebruik van materiaal of textuur, een illusie is. Het aanraakscherm van onze smartphone of tablet blijft een onoverbrugbare barrière tussen onze vingertoppen en de interface. Anderzijds zijn we ondertussen wel gewend geraakt aan andere manieren van interageren met onze devices dan enkel tappen. Pinchen, swipen, kantelen, schudden en zelfs onze stem zijn ingeburgerde gestures geworden.

Zo heeft de volumeknop van de iOS-app niet alleen een aluminium uiterlijk, maar verandert de lichtinval ook bij het kantelen van je iPhone. Hierin zit direct ook het essentiële verschil tussen skeuomorfisme (aluminium textuur) en echte tactiliteit (reageert intuïtief op je beweging).

Gestures

En zo zijn er nog meer voorbeelden te vinden. De 2 weerapps Partly Cloudy en Solar bieden min of meer dezelfde informatie: weersverwachting op basis van je locatie. Partly Cloudy doet dit aan de hand van een wijzerplaat die eruitziet als een thermostaat of een barometer en werkt met schaduw en een textuur in de achtergrond. Erboven staan iconen en numerieke info. Als interface-element kun je een wijzer ronddraaien om verder in de tijd te kijken. Solar maakt gebruik van gradients die de lucht nabootsen en van een lichte, schreefloze letter. Er zijn geen interface-elementen. Swipe je naar boven, ga je verder in de tijd. Naar beneden, komen icoontjes tevoorschijn met de weersverwachting voor de komende dagen. Naar links of rechts, ga je naar settings of een andere locatie.

Waar Partly Cloudy het moet hebben van visuele opsmuk, maar qua interactie enkel draaien aan een wieltje aanbiedt, maakt Solar optimaal gebruik van de hardware van je device. Bovendien reageert Solar ook op kantelen. Dit maakt Solar tactieler dan Partly Cloudy. Hetzelfde betoog kan gemaakt worden voor de Clear app versus de native Notities-app. De ene is minimalistisch en maakt optimaal gebruik van gestures, terwijl de ander met scriptlettertypes en gescheurd papier enkel de sfeer van een notitieblok oproept.

Toeters en bellen

Een doorsnee interface gaat natuurlijk verder dan interactie en wil daarnaast ook een sfeer neerzetten en een boodschap overbrengen. Die boodschap wordt verzorgd door de content. De sfeer wordt bepaald door het visuele design. Hiervoor wordt gebruik gemaakt van grafische software als Photoshop of Indesign, die uitermate geschikt is voor het bewerken en ordenen van visuele elementen. Deze programma’s worden geleverd met steeds meer filters en effecten, wat het creëren van deze visuele elementen steeds makkelijker maakt. Dit verklaart ook de huidige verbreiding van skeuomorfisch design. Terwijl er – voor wie zich iets meer moeite wil getroosten – genoeg manieren zijn om deze digitale val te ontlopen:

1. Fotografie

Fotografische content wordt in een interface dikwijls ingeframed, met een vaste plaats in de interface. Alhoewel dit de boodschap verrijkt in combinatie met tekst, geeft dit de foto een arbitrair karakter. Alsof er evengoed een andere foto had kunnen staan die ook bij het verhaal past. Bovendien zorgt het kader voor een afscheiding tussen tekst, beeld en de rest van de interface en verliest een foto al snel zijn impact. Een oplossing hiervoor is de interface in de foto plaatsen. Door het grotere formaat de sfeer, impact en weergave van de echte wereld in waarde hersteld. Wanneer hierbij rekening gehouden wordt in de keuze of het schieten van de foto kan deze er ook voor zorgen dat de verschillende elementen van de interface meer samengebracht worden.

2. Artwork

Het gebruik van handgemaakte visuals om een site aan te kleden zorgt voor een contrast met functionele, op code gebaseerde elementen. De tactiliteit zit hierbij in het spontane van de hand van de grafische ontwerper. Een mooi voorbeeld hiervan is hoe Wired omgaat met deze 2 tegenpolen. Textuele content gaat samen met grafisch artwork die de vaak technische artikelen menselijk maken. Een andere manier is om handgeschreven tekst te verkiezen boven kant-en-klare scriptfonts, zoals dit voorbeeld van Fantasy Interactive voor Google.

3. Gestyleerde real-life referenties

Tactiele elementen kunnen ook toegepast worden in aspecten van de interface zelf. Waarom voelt de krul rechtsonder in iOS Maps als ouderwets aan, terwijl het bladzijden omslaan in Flipboard wel fris oogt? Het eerste is een imitatie, het tweede is een adaptatie. Flipboard heeft iets genomen wat we allemaal kennen en er een digitale vertaling van gemaakt.

Conclusie

Natuurlijk heeft alles zijn prijs en zal gedetailleerd en innovatief maatwerk altijd duurder zijn dan off-the-shelf-oplossingen. Bovendien is er tijd en ervaring nodig om zich in de doelgroep te kunnen verplaatsen, om er achter te komen hoe en onder welke condities die met een interface aan de slag gaat. Aan de andere kant levert het handhaven van een visuele authenticiteit meer sympathie op, wat dan weer de conversie ten goede komt.

Omdat interageren met aanraakschermen ondertussen min of meer ingeburgerd is en web enabled devices steeds meer tot in elk aspect van ons leven doordringen, zal de nadruk meer zal komen te liggen op het samenspel tussen tastbare hardware en functionele software. Hierdoor zal ook het digitaal naboosten van reallife elementen overbodig worden.