Innovatie

Benut de illusie van snelheid: 7 tips voor gebruiksvriendelijke webapps

0

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 gebruiksvriendelijkheid en de daarbij behorende conversie. 1 seconde extra vertraging op je website kan je 7% conversiedaling kosten.

Gebruiksvriendelijke webapplicaties

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 het systeem in werkelijkheid helemaal niet zo snel is. Toch levert deze ‘illusie’ uiteindelijk echte en waardevolle snelheidswinst op voor de gebruiker. Hoe werkt die snelheidswinst? En hoe kan je die snelheidswinst zelf behalen?

3 x user interfaces versnellen: techniek, ergonomie & cognitie

Hypnotic Clock

Foto met dank aan Fotolia

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 automatisch 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 snelheidswinst zorgen, zoals:

  1. verminderen van keuzes;
  2. gebruik van mentale voorbereidingstijd van de gebruiker;
  3. gebruiker niet laten wachten op het systeem;
  4. met animaties de gebruiker leiden;
  5. met een statusweergave geruststellen;
  6. spinners juist wel of niet inzetten;
  7. afleiding verminderen.

1. Verminder keuzes

Het verminderen van keuzes krijgt tegenwoordig veel aandacht en ontwerpers zetten het steeds beter in. Welke keuzes brengen de gebruiker dichter bij zijn doel? 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 (Goals, Operators, Methods, and Selection rules) kan je de tijdwinst uitrekenen en zien dat het de tijd om een creditcardnummer 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.

2. Gebruik de mentale voorbereidingstijd

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 kun je goed gebruiken. Apple’s OS X, iOS en Safari, Google’s Chrome en andere applicaties tonen eerst een schijnafbeelding 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 kun je direct aan de slag met de echte user interface. Dit noemt men een ‘illusie van snelheid’. Eigenlijk is het geen illusie, want je voert taken daadwerkelijk sneller uit, omdat je eerder je gedachtes kan richten. En dat is net zo belangrijk als een sneller systeem.

3. 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 webpagina 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 verwerkt is tot een nieuwe webpagina. Het is echter 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.

Accepteer cookies

4. Leid de ogen met geanimeerde verschijning van nieuwe elementen

Zodra de actie van een gebruiker een verandering op een webpagina veroorzaakt, is het verstandig deze verandering geanimeerd tevoorschijn te laten komen. Met de juiste animaties van 1 à 2 seconden leidt de webpagina 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 er nu extra tijd -met een betere ergonomie doordat de gebruiker weet waar hij moet kijken – beschikbaar. 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 de volgende actie in zijn onderbewuste al heeft gepland en bij het zien van de ‘lange’ animatie zijn vervolgactie bewust stop moet zetten. In dit soort gevallen is een reactie van minder dan 0,1 seconde veel verstandiger.

5. 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 voortgang is, is belangrijk. De gebruiker zal zich daardoor niet gaan afvragen of het systeem is vastgelopen.

Visuele illusies kun 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.” Colin Barras, 2010, Visual tricks can make downloads seem quicker

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.

6. Zet spinners juist wel of niet in

Preloading (II)

Foto met dank aan Fotolia

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. In dat soort gevallen leidt een spinner af. En dat is ook goed te merken als je op de website van Ziggo rondkijkt.

” 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.” Steve Souders, 2013, The Illusion of Speed

7. Verminder afleiding

Een carrousel die automatisch 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 automatisch 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.

Voorbeeld: document uploaden via formulier

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 webpagina 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, kun 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 kun 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 doorgevoerd, 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.” Steve Souders, 2013, The Illusion of Speed

De illusie van snelheid is geen illusie

Door de tijd te gebruiken die de gebruiker nodig heeft om te denken, kun je veel snelheidswinst behalen. Je manipuleert de gebruiker niet met illusies. Je neemt hem serieus doordat je minder cognitieve belasting eist, hem sneller naar zijn doel leidt en 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 om 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.

Foto intro met dank aan Fotolia