Progress indicator

Aanleiding tot het onderzoek

Het online TweeKracht spel is opnieuw ontworpen. Bij de nieuwe design is er veel aandacht
besteed aan de look & feel en de ervaring. Tijdens de usertests zijn er een grote problemen
ontdekt, namelijk de spelkaarten zijn te groot en het scherm is te druk.

Het doel van het onderzoek

De progress indicator wordt niet optimaal benut, het geeft de gebruiker niet genoeg informatie
betreft het proces. Er wordt een onderzoek gedaan naar de mogelijkheden om de progress
indicator te optimaliseren, daarnaast worden de prototypes gedurende dit onderzoek getest
aan de hand van een testplan.

Hoofdvraag
Wat is een progress indicator en hoe kan hier optimaal gebruik van worden gemaakt?

Deelvragen
- Belang van een progress indicator UX bezien?

- Inspiratie progress indicator.

- TweeKracht progress indicator

Belang van een progress indicator UX bezien?

Progress indicators geven de gebruikers aan in welk proces zij zich bevinden. Hiermee kan de
gebruiker de resterende stappen/processen en de voltooide stappen/processen zien.
Daarnaast kunnen de gebruikers de huidige stap zien waarin zij zich bevinden.

Progress indicators geven een duidelijke en een concrete pad weer die bewandeld moet
worden. Nick Babich, auteur bij www.uxplanet.org, (Babich, 2016) heeft over Progress Trackers
het volgende geschreven

“Progress trackers create a clear path to completion. Studies show that offering users a
clear idea of how many steps it takes to get to the final target can significantly reduce
abandonment. From the psychological point of view, this makes a lot of sense.”

Progress indicators zijn belangrijk voor zowel gebruikers als developers/designers. De

gebruikers blijven op de hoogte van het proces en de developers/designers kunnen door
middel van de progress indicator een duidelijke userflow ontwerpen. Zonder de progress
indicator zien de gebruikers niet waar zij zich bevinden in het proces.

Volgens Nick Babich is de status van het proces een van de belangrijkste principes van de user
interface design. Een goede design geeft de gebruiker een feedback. Normaliter zijn snellere
reacties van de applicatie gewenst. Wanneer dit niet mogelijk is door bijvoorbeeld een trage
internet verbinding of een actie dat veel tijd inneemt (installatie of update), kan de gespannen
gebruikerservaring worden geminimaliseerd door de gebruikers gerust te stellen dat de
applicatie werkend is. Daarnaast is het ook van belang om de gebruikers op de hoogte te
houden van de resterende tijd om het proces te voltooien (Babich, 2016).

Het is belangrijk dat er ten alle tijden een vorm van een feedback word gegeven aan de
gebruiker. De wachttijd van de gebruikers beginnen wanneer zij een actie uitvoeren. In het
slechtste geval krijgen zij niet te zien dat het systeem de actie doorvoert. Indien de applicatie/
systeem/website faalt in het op de hoogte te houden van het proces resulteert dit op een hoop
extra klikken wegens de verwarring die de gebruiker ervaart.

Acties zoals een klik op een knop, zouden onmiddellijke reacties hebben. Het is essentieel om
visuele feedback te geven zodra een actie word aangevraagd. Hierdoor weet de gebruiker dat
het proces van start is gegaan.

Nielsen Norman Group (NN/g) is een bekend bureau op het gebied van web usability. De tien
heuristieken voor web usability (Nielsen, 1995) is ontwikkeld door dit bureau. NN/g heeft de
progress indicator vanuit UX behandeld en kwam met de volgende bevindingen:

“Het doel is om de gebruikers te voorzien van feedback betreft de status en de handelingen

van het systeem of interface en binnen de redelijke tijd.

Een van de meest gebruikelijke vorm van feedback op websites en applicaties zijn de
wacht-animatie progress indicator. Deze design element visualiseert het “laad” proces van
de website. Door een geschikte feedback te geven op de gebruikers handelingen, geeft het
systeem de gebruiker een geruststelling dat het systeem de handelingen heeft ontvangen.

Progress indicators vertellen de gebruikers dat het systeem meer tijd nodig heeft om de
laatste actie uit te voeren en geeft een indicatie betreft de nodige tijd om deze actie uit te
voeren. Zij bieden vier voordelen:

1. Zij stellen de gebruiker gerust dat het systeem werkt en verminderd de onzekerheden
van de gebruikers
2. Zij geven de gebruiker iets om tijdens het wachten te bekijken, dit maakt de wacht
periode makkelijker te tolereren. Een voorbeeld is de on-hold muziek dat wordt
afgespeeld bij een telefonisch gesprek.
3. Zij bieden een reden om te wachten op het systeem. De gebruiker weet dat er iets gaat
gebeuren en dat zij moeten wachten en hoe lang het nog zal duren.
4. Ze kunnen de perceptie van tijd door gebruikers verminderen: gebruikers besteden een
aantal cognitieve bronnen aan de feedback zelf en ze besteden minder aandacht aan het
wachten zelf.

Uit onderzoeken blijkt dat de ouderwetse on-hold muziek en begeleidende berichten bij
telefoongesprekken zelfde verzachtende effect hebben als de visuele vorm van een progress
indicator. Hiermee wordt de aandacht van de gebruiker op de website en het gesprek
verlengt. De onderzoekers uit Universiteit van Nebraska-Lincoln hebben dit onderwerp
onderzocht. Het onderzoek werd uitgevoerd in twee teams. Een team kreeg een progress
indicator en de andere niet. Het team met de progress indicator hebben drie keer langer
gewacht dan het team zonder de progress indicator.”
Inspiratie
Hou de gebruikers op de hoogte
De gebruikers zijn vaker geduldiger als zij weten waarop zij wachten.

Tijd indicatie
Het is moeilijk om een precieze tijd aan te geven betreft de resterende tijd. Door gebruikers
een indicatie te geven zal zij gerust worden gesteld.

Laat de voltooide taken zien

Door de running progress feedback te geven kan de gebruiker zelf ook een idee krijgen
over de nodige tijd voor het proces.

Stop/pauzeer geen progress indicator

Gebruikers raken gefrustreerd wanneer de progress indicator stopt. Dit merken zij snel op
en interpreteren het als een proces dat stilstaat.

Skeleton screen
Wanneer een actie tijd neemt dient dit gecommuniceerd te worden met de gebruikers. Dit
wordt gedaan door middel van een progress indicator. Echter kan een progress indicators
die hierboven zijn gepresenteerd resulteren in een slechte user experience. Luke
Wroblewski heeft in zijn artikel de volgende gezegd:

“Progress indicators trekken de aandacht van de gebruiker met het bericht dat zij
moeten wachten. Het is te vergelijken met een tikkende klok - naarmate je er naar staart
krijg je het gevoel dat het langzamer tikt dan normaal”

Skeleton screen is een alternatief op de progress indicator. Deze techniek geeft de

gebruikers een prettige ervaring tijdens het wachten. Skeleton screens, ook bekend als
temporaal information containers, zijn lege versies van de pagina waarin informatie wordt
geladen. In plaats van een loading indicator geeft de Skeleton screen een werkelijke
progress weer en geeft een verwachting van wat er komt. De gebruikers krijgen het idee
dat de website onmiddellijke acties onderneemt en dat er stapsgewijs de informatie wordt
weergegeven terwijl zij wachten. Daarnaast raakt de gebruiker bekend met de inhoud van
de website terwijl zij wachten.

Conclusie van het belang van een progress indicator UX

bezien?
Ongeacht dat de applicaties en websites sneller worden, er zal altijd een proces zijn dat tijd zal
nemen. Een wacht animatie, zoals een loading spinners en een percent-done indicator,
verminderen de onzekerheden door de gebruiker te informeren betreft het proces. Het is voor
de gebruikers prettiger wanneer er skeleton screens worden gebruikt voor snellere processen
die tussen tween en tien seconde duren en percent-done indicator voor handelingen die langer
duren dan tien seconde.

Huidige progress indicator:

Aan de hand van de usertests kwam ik tot de conclusie dat de progress indicator helder is
maar niet genoeg informatie geeft betreft het proces. De gebruikers zien de stappen en weten
wat zij kunnen verwachten, in aantal stappen, maar niet wat er in die stappen hen te wachten
staat. Dit is een aandachtspuntje dat geoptimaliseerd kan worden. 

Usertest progress indicator conclusies:
Wegens tijdsnood en soms de grootte van de aanpassingen is er niet voor elke aanpassing een
testplan geschreven. Voor grotere aanpassingen zijn er wel testplannen geschreven. Buiten
deze usertests zijn de kleine aanpassingen dagelijkse voorzien van feedback door mijn mede-
studenten en wekelijks door de opdrachtgevers (TweeKracht).

Prototype 1:
Aan de hand van de usertests kan ik concluderen dat de mockups geen duidelijke userflow

hebben. De testers hebben moeite bij de keuzes. Tijdens de testen viel het mij op dat de

testers niet door hadden dat zij door middel van de progress indicator hun status in het spel

konden zien. Zij wisten wel dat ze in het spel verder gingen na het klikken op de kaarten maar

ze er werd verder geen aandacht besteed aan de progress indicator. Dit betekent dat de

plaatsing van de progress indicator het doel niet bereikt. Daarnaast moet er duidelijke

aanwijzingen komen om de gebruiker te leiden in het spel. Dit is door de tester ook als

vervelend ervaren. Het liefst zien de testers een korte tekstuele uitleg.

Prototype 2:
De testers hebben de progress indicator niet eens gezien. De actie gebeurd bij de kaarten, dus
onderaan het scherm. De progress indicator is te ver van de kaarten waardoor de focus te veel
dwaalt op het scherm. Daarnaast is de persoonlijke van het offline spel niet te zien bij de online
variant.

Prototype 3:
Deze versie is door zowel de testers als de opdrachtgever als het meest prettige ervaren. Deze
versie wordt doorgestuurd voor de MVP.

Prototype 4



Conclusie
De progress indicator is in evenzeer diepte als breedte onderzocht. Het is belangrijk om de
gebruiker altijd mee te nemen in het proces en hen op de hoogte te houden. Daarmee kan de
website/applicatie zelfs loyaliteit kweken. De gebruikers willen voortdurend weten wat er met
de ondergekomen acties gebeurt. Door middel van een geoptimaliseerde progress indicator
krijgen de gebruikers de nodige informatie en feedback.

De usertests hebben de progress indicator van het Tweekracht spel geoptimaliseerd voor de
eerste go-live. Echter is er veel werk aan de winkel. De informatie bij elke stap wordt nu nog
niet vermeld. Het spel is hierdoor alleen in de interaction met kaarten en visualisering van het
spel geoptimaliseerd, op het gebied van progress indicator dient er nog veel getest en
ontworpen te worden. Met de nieuwe inzichten die ik heb verkregen door middel van dit
onderzoek zal ik de nieuwe progress indicator vanuit UX optimaliseren.

Literatuurlijst

Babich, N. (2016, 26 april). Progress Trackers in UX Design [Blogpost].

Geraadpleegd van https://uxplanet.org/progress-trackers-in-ux-
design-4319cef1c600
Vaisman, S. (2015, January 21). What the heck is User Experience? – Stas
Vaisman – Medium. Retrieved from https://medium.com/@stasvaisman/
theoretical-perspective-on-the-underlying-high-level-psychology-of-the-
user-experience-concept-93ae89f47352

Best Practices For Animated Progress Indicators. (2016, December 07).

Retrieved from https://www.smashingmagazine.com/2016/12/best-
practices-for-animated-progress-indicators/