Interaction Design: Wat we kunnen leren van deurklinken

14 april 2016 Inzichten / Interaction Design Wat we kunnen leren van deurklinken

Deurklinken zijn een evidentie. Ze zijn geniaal in hun eenvoud en zelfs de allerkleinsten weten meteen hoe ze werken. Ze zijn onze ‘holy grail’ als user experience architecten omdat ze zo fantastisch goed scoren op interaction design.

Interaction design belichaamt het ontwerp van interactieve, digitale producten. Het is een brede term, maar het is eigenlijk een discipline binnen het UX Design-spectrum dat zich concentreert op het leukste aan websites: interactie. Volgens Wikipedia hou je daarbij vooral rekening met het gedrag, gekoppeld aan een gezonde interesse voor de vorm. Websites zijn immers al een tijdje niet meer ‘read-only’. Bezoekers klikken graag en veel. Daarom nemen we even de tijd om stil te staan bij interactiedesign.

Een website met deurklinken

Mocht je bij Wijs geen website maar een deurklink kopen, dan zouden we waarschijnlijk op zoek gaan naar antwoorden op de volgende vragen:

  • Op welke deur moet de klink passen? Waarvoor dient de deur? Moet er een label op? Waar bevindt de deur zich? Zijn er andere deuren? Welke ruimtes moet ze verbinden? (informatiearchitectuur)

  • Welke stappen ondernemen gebruikers typisch voor en na het gebruiken van de deurklink? (gebruikersflow)

  • Waarom openen gebruikers de deur? Wat levert het op? (conversie)

  • Waar staat de deurklink, links of rechts? Hoe moet ze draaien? Moet je duwen of trekken? (interactieontwerp)


Bij deurklinken klinkt dat allemaal nogal banaal, maar als het over websites gaat wordt het plots een hele relevante vragenlijst. Als jouw deur ook 3 miljoen keer per uur wordt geopend, dan zou je de deurklink wellicht graag van dichtbij willen bekijken.

Zo beginnen we in de prototype-fase met te bepalen welke acties een gebruiker allemaal moet kunnen en daarbij vooral welke acties het belangrijkst zijn omdat ze tot conversies kunnen leiden.

5 dimensies

Deurklinken op het web worden bepaald door de volgende vijf dimensies (door Smith en Silver).

1. Woorden

In de echte wereld worden interacties vaak aangeduid door labels of etiketten. ‘Duwen’, ‘trekken’, ‘opgelet: automatische deur’, et cetera. Op het web krijgen die vaak de vorm van links of scrollgedrag (op mobile). Dan zien we dingen als ‘swipe om de volgende foto te zien’, ‘sluiten’, ‘verversen’, ‘inloggen’, …

Het is dus van groot belang om de precieze bewoording van die labels en hulpteksten onder de loep te nemen. Een gebruikerstest kan daarbij helpen. Bij de calculator van Bikeform bijvoorbeeld gebruikten we standaardwaarden als het veld leeg bleef. Dat zorgde voor verwarring. Daarom voegden we een klein label met hulptekst toe om het te verhelderen.

2. Visuele representatie

Hoe een deurklink eruit ziet is niet te onderschatten. Een deurklink nodigt uit, omwille van zijn vorm, om ofwel gedraaid (deurknop), geduwd (een buis), of gekanteld (een klassieke klink) te worden. Stijl en vorm hebben dus een directe impact op het gebruik van de deur. In extremis zien we nooddeuren waarbij het ontwerp zo in elkaar zit dat ze opengaan van zodra iemand ertegen loopt, al dan niet in paniek - briljant interactieontwerp.

Een interessante term uit de psychologie is ‘affordance’. Kort gezegd is dat de mate waarin een gebruikersvoorwerp toelaat om gebruikt te worden door een reeks stimuli. The design of everyday things (D. Norman) is een fantastische pageturner als je daar meer over wilt weten.

Trekken we de metafoor door, dan gaan we op het web ook met de vormgeving aan de slag om het gewenste gedrag uit te lokken. We doen dat door interacties prominenter te maken. De mogelijkheden zijn eindeloos: vorm, positie, kleur zijn evident maar ook de typografie, balans, iconen en fotografie dragen allemaal bij tot de interactie. Het is niet toevallig dat bij de checkout-procedure van Coolblue alle afleidende taken, zoals de hoofdnavigatie, wegvallen.

Dat voorbeeld borduurt verder op een vraag die we vaak krijgen: waarom kunnen we niet élke actie wat aandacht geven op de homepagina? Welnu, omdat te veel affordance leidt tot ‘deferral of choice’. Je hangt toch ook geen vijf klinken aan dezelfde kant van een deur?
Kortom, een (visuele) prioriteit geven aan je interacties is een fantastische oefening die de doeltreffendheid van je site enorm kan vooruithelpen.


3. Fysieke objecten en ruimte

Bij het ontwerp van een responsive site is het geen goed idee om zware menu’s linksboven te zetten. Waarom? Omdat het leeuwendeel van de mensen de telefoon met de rechterhand bedient en de duim op grote schermen - en bij kleine handen - moeite heeft om het scherm linksboven aan te raken. Het is iets waar we als de ontwerpers van interacties steeds vaker rekening mee moeten houden. Het helpt natuurlijk ook niet dat er dagelijks nieuwe apparaten bijkomen die aan het internet zijn verbonden: smartwatches, smart tv’s, boordcomputers in de auto... Erg boeiende materie, je leert er meer over in het boek ‘designing for touch’ door Josh Clark. De samenvatting vind je hier.


4. Tijd

De inhoud van een interactie kan wijzigen door de tijd. Een voorbeeld hiervan is video. Nog interessanter zijn de recente evoluties op vlak van animatie in interactiedesign: motion design.

Animaties kunnen interacties fantastisch ondersteunen. Het beste voorbeeld is eeuwenoud maar toch enorm sterk: de laadbalk. Het is veel krachtiger dan een tekstueel percentage en je ziet in een oogopslag hoelang je nog moet wachten op je resultaat. De integratie met de submit-knop die je hieronder ziet werkt heel vlot en de gebruiker krijgt meteen feedback over de status van de actie. (bron: https://dribbble.com/shots/1426764-Submit-Button)

Motion design zal niet veel effect hebben als de andere vier dimensies niet gerespecteerd worden. En vooral: gebruik animaties in interacties met mate. Ze mogen absoluut niet in de weg staan en ze zijn er louter ter ondersteuning. Waarom je website geen Disneyfilm is kan je hier lezen.

5. Gedrag

Gedrag en interactie zijn sterk verweven. Soms kan een typisch gedrag integraal ingevuld worden door een mooi ontworpen interactie. Een leuk voorbeeld is de klink van een Tesla Model S, die zich aandient als je in de buurt komt met een sleutel op zak (wie had gedacht dat je nog kon innoveren op deurklinken). Het gaat over het in acht nemen van de context waarin de interactie plaatsvindt. Een ander mooi voorbeeld is de site van delijn.be op mobile. Die zet de routeplanner in het centrum van de aandacht. Heel interessant als je onderweg bent en je wil snel en efficiënt je route opvragen, zonder al te veel poespas.

Conclusie & actie

Bovenstaande dimensies geven een mooi overzicht van interactieontwerp. Je kan voor je eigen website even nagaan of je elke dimensie wel voldoende aandacht geeft.

Niet helemaal zeker dat de 5 dimensies goed zitten? Praat eens met onze UX experts, zij helpen je vast en zeker uit de nood.

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!