De illusie, ons gevoel, van snelheid is dé snelheid

We zijn allemaal geobsedeerd door snelheid. Bij de lancering van nieuwe software of hardware zoals de iPhone raken we niet uitgepraat over de performance. Snelheid van user interfaces is dan ook één van de belangrijkste factoren voor gebruiks­vriendelijk­heid en de daarbij behorende conversie. Één seconde extra vertraging op je website kan je 7% conversiedaling kosten.

Een groot probleem van webapplicaties op onze smartphones is nou juist die snelheid. Javascript is zo'n 5 keer langzamer dan native code. Het verschil tussen de laatste MacBook en een iPhone is een factor 10. Een webapplicatie op een iPhone is dus zo'n 50 keer langzamer dan de native versie ervan op je MacBook. Niet onbelangrijk, dat getal, als we steeds meer taken op het web met onze smartphones uitvoeren en steeds minder doen achter ons bureau.

Ook het soms slechte netwerkbereik met smartphones laat webapplicaties nog langzamer werken. Technisch gezien is het wel mogelijk om webapplicaties offline in de webbrowser te draaien, maar helaas is dat momenteel nog niet zo gemakkelijk.

Voor adaptieve webapplicaties is het dus extreem belangrijk om bij het ontwerp scherp oog te houden op snelheid. En dit is precies de reden waarom vakgenoten steeds meer schrijven over de illusie van snelheid. De illusie van snelheid geeft de gebruiker het idee dat een user interface snel reageert en snel taken uitvoert, terwijl in werkelijkheid het systeem helemaal niet zo snel is.

Toch levert deze 'illusie' uiteindelijk echte en waardevolle snel­heids­winst op voor de gebruiker. Hoe werkt die snel­heids­winst? En hoe kan je die snel­heids­winst zelf behalen?

User interfaces vanuit drie benaderingen versnellen: techniek, ergonomie, en cognitie

Bij de ontwikkeling van nieuwe techniek kijken bedrijven onder andere naar: snellere CPU's, meer geheugen, krachtige grafische kaarten, en snellere netwerken. Ontwikkelaars van websites zijn continue bezig om de hoeveelheid informatie over netwerken te minimaliseren, bijvoorbeeld door iconen in fonts te plaatsen, responsive images in te zetten, websites auto­matisch gecomprimeerd te laten versturen, en nog veel meer.

Bij user interface design kijken we hoe we user interfaces sneller kunnen maken door de ergonomie te verbeteren. Dit doen we bijvoorbeeld door: knoppen dichter bij elkaar te zetten zodat je minder ver met je muis of hand hoeft te bewegen; knoppen groter te maken; of de knoppen op plaatsen te zetten waar je er gemakkelijk met je hand bij kunt.

De laatste schakel vergeten ontwerpers vaak: de cognitie met onder andere die 'illusie van snelheid'. Op het vakgebied van cognitie kan je op verschillende manieren voor snel­heids­winst zorgen, zoals: verminderen van keuzes; gebruik van mentale voorbereidingstijd van de gebruiker; gebruiker niet laten wachten op het systeem; met animaties de gebruiker leiden; met een statusweergave geruststellen; spinners juist wel of niet inzetten; en afleiding verminderen.

Verminder keuzes

Het verminderen van keuzes krijgt tegenwoordig veel aandacht en zetten ontwerpers steeds beter in: Welke keuzes brengen de gebruiker dichter bij zijn doel? en Welke keuzes kunnen we verwijderen? Om meteen een voorbeeld te geven: de eerste vier cijfers van je creditcard geven het type creditcard aan, waardoor je het soort creditcard niet hoeft uit te vragen. Niet alleen zorgt dit voor minder cognitieve last, het heeft ook direct gevolgen voor de ergonomie: de gebruiker hoeft minder te doen. Met GOMS kan je de tijdwinst uitrekenen en zien dat het de tijd om een creditcard-nummer in te voeren halveert.

Pas op met het verminderen van keuzes. Als dit tot gevolg heeft dat je deze keuzes later in het proces alsnog moet aanbieden of de gebruiker hier naar op zoek moet, is het soms beter om het aantal keuzes niet te verminderen.

Fewer buttons and simpler-looking controls are not always better. The lesson applies to screen design as wel as to instruments and appliances.

Jef Raskin, 2004, The Humane Interface, p.54.

Gebruik de tijd die gebruikers nodig hebben om zich mentaal voor te bereiden

Voor elke actie heeft een gebruiker zo'n 1,35 seconden nodig om zich mentaal voor te bereiden (Jef Raskin, 2004, The Humane Interface). Deze tijd kan je goed gebruiken.

Apple's OS X, iOS en Safari, Google's Chrome en andere applicaties tonen eerst een schijn afbeelding van het scherm als je tussen applicaties of schermen wisselt, zodat het lijkt of de applicatie direct de user interface laat zien. Het programma vervangt deze afbeelding binnen een seconde met een bruikbare user interface. Door die seconde heb je je mentaal kunnen voorbereiden en kan je direct aan de slag met de echte user interface. Dit noemt men een 'illusie van snelheid', wat het eigenlijk niet is want je voert taken daadwerkelijk sneller uit omdat je eerder je gedachtes kan richten. En dat is net zo belangrijk als een sneller systeem.

Laat gebruikers doorgaan als het systeem nog niet klaar is

Een andere illusie is het alvast tonen van werk dat je hebt uitgevoerd zonder dat het systeem het volledig heeft verwerkt. Een voorbeeld. Je schrijft een review en stuurt deze in. In plaats van wachten tot de server een nieuwe web­pagina opstuurt met jouw geschreven review, gebeurt in de tussentijd het volgende: (1) de webbrowser stuurt de review door naar de server; (2) de server geeft enkel door dat het ontvangen is; en (3) de webbrowser toont direct (client-side) de review op de website zonder dat deze door de server is verwerkt tot een nieuwe web­pagina. Het is nog niet zichtbaar voor anderen.

Deze illusie zorgt ervoor dat je als gebruiker niet gaat zitten wachten tot het systeem de review heeft verwerkt en de pagina opnieuw opstuurt. Als gebruiker ga je verder met je volgende taak. Wat er voor zorgt dat je daadwerkelijk meer taken zal uitvoeren binnen een bepaalde tijd; een hogere snelheid dus.

De startup Minbox richt zich op deze illusie als unique selling point om met Dropbox te kunnen concurreren. En dat lukt ze tot nu toe aardig goed.

Leidt de ogen met geanimeerde verschijning van nieuwe elementen

Zodra de actie van een gebruiker een verandering op een web­pagina veroorzaakt, is het verstandig deze verandering geanimeerd tevoorschijn te laten komen. Met de juiste animaties van 1 à 2 seconden leidt de web­pagina op een fijne manier de aandacht naar de juiste locatie. Het is voor de gebruiker nu duidelijk wat er gaat veranderen. Tijdens de animatie kan de website alvast nieuwe content, zoals afbeeldingen, inladen. Voor het systeem is nu extra tijd beschikbaar met een betere ergonomie doordat de gebruiker weet waar hij moet kijken. Dat is pure tijdswinst.

Wees hier wel voorzichtig mee. Soms werkt een animatie van 1 à 2 seconden averechts. Als de gebruiker precies weet wat er vervolgens gaat gebeuren en zich al voorbereid heeft op de volgende actie, werkt een 'lange' animatie juist storend, bijvoorbeeld bij het openen van menu's. Het animeren hiervan werkt storend omdat de gebruiker in zijn onbewuste de volgende actie al heeft gepland en bij het zien van de 'lange' animatie zal hij zijn vervolgactie bewust stop moeten zetten. In dit soort gevallen is een reactie van minder dan 0,1 seconde veel verstandiger.

Stel gebruikers gerust met geanimeerde status­weergave

De manier waarop je feedback geeft aan de gebruiker beïnvloedt de cognitieve last en kan het gevoel van snelheid versterken. Het animeren van een loader of statusbalk, ook als er geen voort­gang is, is belangrijk. De gebruiker zal zich daardoor niet gaan afvragen of het systeem is vastgelopen.

Visuele illusies kan je gebruiken om de animaties te verbeteren en daarmee een echte illusie van snelheid te creëren. Apple gebruikt een naar links bewegend golf-effect om het gevoel van snelheid mee te geven. Chris Harrison heeft zelfs dit effect weten te verbeteren.

Apple uses left-moving ripples that travel at a constant velocity for progress bars in Mac OS X. However, many of the volunteers in Harrison's study said that this type of animation appeared slower than one in which the left-moving ripples slowed down as the download neared completion.

Zodra een taak niet continue aandacht nodig heeft, bijvoorbeeld bij het downloaden van nieuwe software, is het zelfs beter om deze status achter een klik te verbergen. Dan leid je de gebruiker minder af tijdens het uitvoeren van andere taken. De gebruiker 'vergeet' namelijk parallelle taken en kan zich zo op andere taken concentreren totdat de parallelle taak klaar is en het programma hem erop attendeert.

Zet spinners juist wel of niet in

Geanimeerde statusweergave zoals spinners en loaders helpen de gebruiker te begrijpen dat er wat gebeurt. Maar het kan ook averechts werken. Vooral bij user interface elementen waarop je niet heel lang hoeft te wachten en eigenlijk niet had verwacht dat je erop moest wachten.

Luke Wroblewski told me that they rebuilt the menu system in the Polar app using WebViews so that they could instantly make changes and test new things without waiting through the app approval process from Apple. Because they were now loading some parts of the app from an external server, they added some spinning loading indicators to give users feedback that things were in progress. Even though the actual performance of the app was not much slower, they got many comments from early testers that, the app seemed slower and less responsive. So they removed or played down the spinners and the user’s perception of speed improved.

In dat soort gevallen leidt een spinner af. En dat is ook goed te merken als je op de website van Ziggo rondkijkt.

Verminder afleiding

Een carrousel die auto­matisch afspeelt, leidt de aandacht van de gebruiker af en haalt hem uit zijn concentratie. Het interfereert met zijn gedachtes waardoor hij meer tijd nodig heeft om zijn doel te bereiken. Dit geldt ook voor objecten die inladen met veel flikkering en herpositionering. Dit leidt af van taken die op dat moment belangrijk zijn. Verberg het inladen hiervan en zet het auto­matisch afspelen van een carrousel niet aan.

Voorspel interactie

Je kunt zelfs nog een stap verder gaan door te voorspellen wat de gebruiker gaat doen. In die tijd kan een applicatie alvast de content en user interface inladen voordat de gebruiker een actie uitvoert. Aan de hand van een aantal voorbeelden kan ik dit het best illustreren.

Een formulier vraagt je eerst om een document te selecteren en daarna pas om de overige gegevens in te typen. De gebruiker kan het geselecteerde document nog wijzigen, maar je kunt er vanuit gaan dat de kans groot is dat de gebruiker dit niet zal doen. De tijd die de gebruiker nodig heeft om zijn overige gegevens in te voeren kan de applicatie gebruiken om in de achtergrond het document te uploaden.

Een web­pagina heeft in veel gevallen een logische vervolgstap. In een bestelproces is de kans groot dat de gebruiker naar die vervolgstap gaat. Deze vervolgpagina of delen daarvan kan je alvast in laten laden.

Je zou zelfs zover kunnen gaan om de beweging van de muis te analyseren en te zien wanneer er vertraging in de beweging ontstaat. Met die verandering in snelheid kan je voorspellen waar de gebruiker met de muis ongeveer eindigt voordat hij daadwerkelijk klikt. Met die kennis kan je de onderliggende informatie in de achtergrond inladen.

Op het web is dit nu nog niet goed mogelijk. Toch wil ik het benoemen omdat het goed illustreert hoe we user interfaces sneller kunnen maken.

Soms is het beter om een user interface langzamer te maken

Pas op met het inzetten van al deze technieken. Als een taak te snel gaat kan het ongeloofwaardig overkomen en gaan gebruikers zich afvragen of daadwerkelijk wel iets is door­gevoerd, met als gevolg onnodige mentale belasting.

Adobe Typekit founder Jeff Veen recounts how when he worked on Blogger it was so fast to set up a blog that users doubted their new blog could really be ready. So they artificially slowed the process down and users were more accepting.

De illusie van snelheid is geen illusie

Door de tijd te gebruiken, die de gebruiker nodig heeft om te denken, kan je veel snel­heids­winst behalen. Je manipuleert de gebruiker niet met illusies, je neemt hem serieus doordat je minder cognitieve belasting eist en hem sneller naar zijn doel leidt; als het ware met hem meedenkt.

Uiteindelijk gaat het er meer om dat een user interface zich aanpast aan het gedachteproces van de gebruiker en mentale belastingen vermindert en niet hoe snel de techniek is.

In user interfaces van native applicaties zetten we deze kennis al geruime tijd in. Het is nu tijd om deze technieken ook op het web beter te gebruiken, pas dan worden user interfaces op het web volwassen.

Bart van de Biezen

Bart van de Biezen

Als cognitief ergonoom bij Aan Zee Communicatie, onderzoek, ontwerp, spreek en schrijf ik over user interfaces en usability. M'n achtergrond: Industrieel Ontwerpen en daarna Psychologie aan de Universiteit Twente, afgestudeerd bij Philips op midair pointing voor een nieuwe generatie TV's, Apple Design Award voor CSSEdit, usability onderzoeker bij MetrixLab en blogger.