4 trucs om laadtijden te maken voelen sneller
Ongeacht hoe goed uw gebruikersinterface is ontworpen, op een of ander moment zullen mensen die het gebruiken, moeten wachten tot er iets is geladen.
De laadtijd kan de algehele ervaring schaden. Als gebruikers te lang wachten voordat uw app wordt geladen, kunnen gebruikers ongeduldig worden. Als gebruikers dat gevoel krijgen, zullen ze uw site verlaten en ergens anders heen gaan. Gelukkig zijn er een paar dingen die u kunt doen om het gevoel voor tijd van uw gebruikers te versnellen en ze het gevoel te geven dat uw inhoud sneller wordt geladen dan dat het geval is.
1. Laat gebruikers nooit wachten zonder hen feedback te geven
Als de verbinding van de gebruiker traag is, kan het een tijdje duren voordat een site inhoud op het scherm vult. De wachttijd van een gebruiker begint op het moment dat ze een actie starten en in het ergste geval is er geen indicator dat de site deze heeft ontvangen.
Wanneer uw site geen melding geeft aan gebruikers dat het enige tijd nodig heeft om een actie uit te voeren, denken gebruikers vaak dat het verzoek niet is ontvangen en proberen ze het opnieuw. Veel extra tikken zijn het gevolg van een gebrek aan feedback. Om mensen gelukkig te maken, moeten we een indicatie geven dat er iets gebeurt, visuele feedback bieden.
2. Vermijd statische voortgangsindicatoren
Statische voortgangsindicatoren zijn degenen met een onbeweeglijke afbeelding of tekst, zoals "Bezig met laden ..." of "Even geduld aub ..." om aan te geven dat de aanvraag is ontvangen. Hoewel elke feedback beter is dan geen, zijn statische indicatoren slechte UX. Gebruikers hebben geen indicator dat inhoud wordt geladen, dus ze weten niet zeker of het proces daadwerkelijk vastloopt.
3. Gebruik geanimeerde laadindicatoren
Psychologische onderzoeken naar wachttijden tonen aan dat de focus van de gebruiker begint te verschuiven na een seconde wachten zonder feedback. Om de onzekerheid van een gebruiker te verminderen, gebruikt u een voortgangsindicator voor acties die langer duren. (Opmerking: het gebruik van animatie wordt afgeraden voor alles dat minder dan een seconde nodig heeft om te laden, omdat gebruikers zich angstig kunnen voelen over wat er gewoon op en van het scherm flitst).
Oneindige laadspinners voor redelijk snelle bewerkingen
De eenvoudigste vorm van geanimeerde indicatoren is een laadspinner. Dit soort visuele feedback verklaart alleen dat de gebruiker moet wachten, maar zegt niet hoe lang ze moeten wachten. Over het algemeen moet u dit type voortgangsindicator gebruiken voor snelle acties (2-10 seconden).
Een spinner van grijze lijnen die vanuit een centraal punt uitsteken, is een standaardbenadering.
Het laden van spinners wordt vaak gebruikt in combinatie met pull-to-refresh-bewegingen. Het fungeert als tussenpersoon tussen twee staten van de gebruikersinterface en helpt gebruikers te begrijpen wat er gebeurt als het scherm verandert.
Apple Mail-app voor iOS
Percentage afgemaakte animatie voor langdurige bewerkingen
Het plaatsen van spinners is niet de juiste manier om langdurige belasting aan te geven. Het is veel draaglijker om ergens op te wachten als we weten wanneer het zal gebeuren. Daarom moet u uw gebruikers voor langdurige bewerkingen een duidelijke indicatie geven van hoe lang ze moeten wachten. Als algemene vuistregel, zou u een percentage-uitgevoerde animatie moeten gebruiken voor langere processen die 10 of meer seconden duren.
Afbeelding credit: Behance
Als alternatief kunt u een algemene schatting van de tijd geven voor de operatie. Probeer niet exact te zijn, een simpele: "Dit kan een minuutje duren" kan genoeg zijn om de gebruiker te informeren en hen aan te moedigen om het uit te stellen.
Software-update installeren in Mac OS X
4. De perceptie van tijd van de gebruiker aanpassen
Hoe snel uw inhoud wordt geladen, is in de geest van de gebruiker. Wanneer u probeert een snellere gebruikerservaring te creëren, kunt u de waargenomen tijd verkorten in plaats van de werkelijke tijd. Om dit te doen, kunt u wachttijden vullen met inhoud, animaties of acties die de gebruiker kan uitvoeren.
Voortgangsbalken
Een voortgangsbalk laat gebruikers een verwachting ontwikkelen voor hoe snel de actie wordt verwerkt. De manier waarop uw voortgangsbalk beweegt, is van invloed op hoe zij de laadtijd waarnemen. Als u een voortgangsbalk sneller wilt laten gebruikers, kunt u de volgende eenvoudige technieken gebruiken:
- De voortgangsbalk zou nooit moeten stoppen, anders zullen gebruikers denken dat de site bevroor. Het ergst mogelijke geval is dat de voortgangsbalk bijna 99% nadert en plotseling stopt. De meeste gebruikers zullen gefrustreerd raken door dit gedrag.
- Je kunt kleine vertragingen verbergen in je voortgangsbalk door deze direct en stabiel te verplaatsen.
- Verplaats de voortgangsbalk langzaam in het begin en versnelt deze naar het einde om gebruikers een snel gevoel van voltooiingstijd te geven.
Afbeelding credit: Dribbble
Skelet schermen
Wachttijd is een goed moment voor skelet-schermen (ook wel tijdelijke informatiecontainers genoemd). Een skelet-scherm is in wezen een lege versie van een pagina waarin informatie geleidelijk wordt geladen. Het biedt een alternatief voor de traditionele geanimeerde indicatoren. In plaats van een abstracte widget te tonen, creëren skeletonschermen anticipatie op wat komen gaat en maakt de gebruiker zich op vooruitgang in plaats van wachttijden vast.
Skeletafbeeldingen laden snel, omdat het een kleine afbeelding is die vaak uit eenvoudige vormen bestaat. Deze technieken kunnen nog verder worden toegepast in mobiele apps omdat de skeletsjabloon lokaal kan worden opgeslagen samen met de gegevens van de app. De Facebook-app voor iOS toont gebruikers grijze blokken en lijnen om afbeeldingen en tekst weer te geven terwijl de app wordt geladen. Als het laden is voltooid, verschijnen de afbeeldingen en tekst in plaats van de tijdelijke containers. Dit is niet sneller dan een laadscherm met een draaifunctie, maar in de geest van de gebruiker voelt het alsof het is.
Achtergrond operaties
Een andere snelheidstruc die u kunt gebruiken, is achtergrondbewerking. Acties die zijn ingepakt in achtergrondbewerkingen hebben twee voordelen: ze zijn onzichtbaar voor de gebruiker en gebeuren voordat de gebruiker er daadwerkelijk om vraagt. Geef gebruikers andere dingen om op te focussen, omdat er op de achtergrond een proces gaande is. Een goed voorbeeld hiervan is het uploaden van foto's op Instagram. Zodra de gebruiker een afbeelding kiest om te delen, begint het te uploaden. De app nodigt gebruikers uit om een titel en tags toe te voegen terwijl de foto op de achtergrond wordt geüpload. Tegen de tijd dat gebruikers klaar zijn om op een knop 'Delen' te drukken, wordt het uploaden voltooid en is het mogelijk om hun foto onmiddellijk te delen.
Progressieve afbeelding wordt geladen
Aangezien moderne apps en sites steeds meer afbeeldingen laden, is het goed om te denken aan het laadproces, omdat dit invloed heeft op de prestaties en gebruikerservaring. Met een vervagingseffect kunt u een progressief laden van afbeeldingen maken.
Een goed voorbeeld is Medium, waarbij de post-beeldafdekking en afbeeldingen in de inhoud van de post worden vervaagd totdat de afbeelding volledig is geladen. Eerst laadt het een klein wazig beeld (miniatuur) en maakt dan een overgang naar het grote beeld. De miniaturen zijn erg klein (slechts enkele kilobytes), wat in combinatie met het wazige effect zorgt voor een betere placeholder dan een effen kleur, zonder in te boeten op de payload.
Gemiddeld gebruikt vervaging om een progressief laadeffect voor afbeeldingen te creëren
Visuele afleiding
Probeer altijd het wachten aangenamer te maken als u de lijn niet kunt verkorten. Om ervoor te zorgen dat mensen zich niet vervelen tijdens het wachten op iets dat gebeurt, biedt u hen wat afleiding. Fijne animaties kunnen uw bezoekers afleiden en negeren lange laadtijden.
Geanimeerd startscherm. Afbeelding credit: Ramotion (dribbelen)
Afbeelding credit: Vimeo