Skrevet af den

Brug en load indicator når det går langsomt – eller for hurtigt

I takt med at websites bliver mere og mere funktionelle og samtidig fungerer asynkront – altså uden at en side skal genloade – er load indicators absolut uundværlige. De øger brugerens tålmodighed ved at forsikre om, at alt er i orden, og at det vil tage lidt tid. Og så kan de endda også benyttes i det modsatte tilfælde – hvis noget reagerer så hurtigt, at det for brugeren virker for godt til at være sandt, for hurtigt til at alt er gået godt.

En load indicator er en lille grafik, der midlertidigt er synlig for brugeren, mens det bagvedliggende system tænker eller henter indhold. Ofte består en load indicator af en cirkel med en snurrende effekt eller af en statusbar, der fyldes op med farve.

Load indicator

Ovenfor ses et eksempel på en load indicator. Du kan se mange flere og generere dine egne på ajaxload.info. Selvom du måske ikke tænker over det, møder du dem hver dag. De er på din smartphone, når nyt indhold skal hentes, under afsendelse af formularer, eller når du vil se et billede i fuld størrelse.

Forøg brugerens tålmodighed

Da online funktionalitet i stigende grad bygges til at kunne benyttes asynkront – altså uden der er behov for reload af siden – er indikatorerne guld værd til at vise, at systemet rent faktisk er i gang med at behandle en forespørgsel, og at det vil tage lidt tid. Intet er gået i stykker eller frosset fast. Alt er godt.

Det er den største og mest åbenlyse fordel ved at benytte load indicators: De øger brugerens ellers uhyre begrænsede tålmodighed. Jacob Nielsen beskriver det meget godt i sin blogpost om tid på nettet fra 2009: Går der meget mere end ét sekund efter en interaktion, føler man, at systemet modarbejder en. Går der op imod 10 sekunder, afbrydes arbejdsflowet, og der er høj risiko for, at brugeren forlader websitet. I sådanne situationer er det især nyttigt at benytte en load indicator, der viser hvor langt i processen, systemet er.

Når “direkte manipulation” er for hurtigt

Når elementer på skærmen reagerer hurtigere end 0,1 sekund efter interaktionen, så vil brugeren opleve det som om, at deres handlinger har direkte indflydelse på det, som sker på skærmen. Det kaldes for direkte manipulation, og du oplever det hele tiden – f.eks. når du klikker i en checkbox eller flytter dit browservindue. Det er i mange tilfælde denne følelse, udviklere efterstræber i alle typer af brugergrænseflader, også online.

Men nogle gange vil direkte manipulation faktisk være for hurtigt til, at brugeren føler, at opgavens omfang og reaktionstiden stemmer overens – også her er load indicatoren din ven.

Tag f.eks. vores kontaktformular, som du kan folde ud ved at klikke her. Her afsendes beskeden asynkront og øjeblikkeligt, så snart der bliver klikket på knappen “Send”. Derudover har vi placeret formularens feedback (som en god formular altid indeholder) inde i selve knappen i form af overgangen fra “SEND” til “TAK”. Dog opstod der et brugsmæssigt problem ved denne løsning, da vi kunne konstatere, at det kun tog et splitsekund for formularen at blive sendt. Det ville derfor mest af alt virke for godt til at være sandt – for hurtigt til, at systemet faktisk havde modtaget, behandlet og sendt beskeden videre. Brugeren ville måske stille sig selv spørgsmålet: Er noget i stykker her?

Løsning

Løsningen var enkel og effektiv. Vi indsatte en falsk loadtid på 1000 ms og viste i den periode en load indicator inde i knappen. Formålet er netop at indikere, at systemet har modtaget, bearbejdet og afsendt beskeden som mail. Intet er gået i stykker. Alt er godt.

Herunder kan du selv afprøve vores “Send”-knap, for se løsningen in action. Du afsender ikke noget (og vil du prøve mere end én gang, skal du refreshe siden).

SEND

Det var vores eksempel på en sammenhæng, hvor falsk loadtid kombineret med en load indicator optimerer brugsoplevelsen. Sidder du med et andet, så del det gerne i form af en kommentar og et link.