UX checklist: hoe gebruiksvriendelijk is jouw applicatie of website?

De gebruiksvriendelijkheid experts van de Nielsen Norman Group hebben tien criteria opgesteld waarmee een applicatie op gebruiksvriendelijkheid getoetst kan worden. In deze blog leg ik uit wat de criteria inhouden met tips waarop je een applicatie kan toetsen.
Robert Roose
Door Robert Roose

UX checklist: hoe gebruiksvriendelijk is jouw applicatie of website?

De tien UX criteria zoals opgesteld door de Nielsen Norman Group:

1 Zichtbaarheid van de status van het systeem

“The design should always keep users informed about what is going on, through appropriate feedback within a reasonable amount of time.”

Een gebruiker moet snel kunnen zien in welke staat de applicatie zich bevindt. Als een applicatie bijvoorbeeld data moet inladen kun je dit zichtbaar maken door een progressiebalk te tonen die langzaam gevuld wordt naarmate er meer data is gedownload. Of wanneer een gebruiker bepaalde filters heeft geselecteerd kun je deze visueel anders weergeven zodat duidelijk is welk filter facetten actief zijn.

Het is belangrijk om een gebruiker zo snel mogelijk zo veel mogelijk relevante informatie te geven. Het constant communiceren via een feedback loop geeft de gebruiker het gevoel dat het systeem vertrouwd kan worden. 

Hoe controleer je op de zichtbaarheid van de status van het systeem?

  • Het systeem geeft duidelijke foutmeldingen als er iets mis gaat
  • Het is zichtbaar dat het systeem aan het laden is wanneer een gebruiker een actie heeft uitgevoerd en moet wachten op een respons van het systeem
  • De progressie van het uploaden van data (zoals een PDF bestand) is duidelijk zichtbaar doordat er een percentage getoond wordt

2 Match tussen het systeem en de echte wereld

“The design should speak the users' language. Use words, phrases, and concepts familiar to the user, rather than internal jargon. Follow real-world conventions, making information appear in a natural and logical order.”

De applicatie gebruikt begrijpelijke taal en is niet doorspekt met vakjargon die voor de gebruiker onduidelijk is. Daarnaast moet de applicatie conventies uit de echte wereld overnemen en ervoor zorgen dat informatie op een natuurlijke en logische volgorde wordt getoond.

Gebruik geen trendy termen maar hou het simpel en duidelijk. Gebruikers moeten een benaming kunnen herkennen zonder het op te hoeven zoeken.

Hoe controleer je of er een match is tussen de applicatie en de echte wereld?

  • Er wordt geen vakjargon gebruikt
  • Benamingen van velden en componenten zijn duidelijk voor de gebruiker
  • Informatie staat in een logische volgorde. Een algemene informatie melding (bijvoorbeeld over werkzaamheden aan de website) wordt niet middenin een registratieproces getoond

3 Controle en vrijheid van de gebruiker

"Users often perform actions by mistake. They need a clearly marked "emergency exit" to leave the unwanted action without having to go through an extended process.”

Gebruikers maken fouten of veranderen van gedachten tijdens een proces. Zorg ervoor dat fouten hersteld kunnen worden en dat het altijd mogelijk is een bepaalde flow te verlaten.

Het moet mogelijk zijn om een applicatie in dezelfde staat te herstellen voorafgaand aan de actie van de gebruiker. Dit kan gedaan worden met:

  • Een Terug link waarmee de gebruiker naar het voorgaande scherm navigeert
  • Een Annuleren link of knop die het proces beëindigt
  • Een Sluiten knop waarmee een nieuw venster gesloten kan worden
  • Een Undo knop (en corresponderende Redo knop) om gebruikers een fout te laten herstellen

Hoe controleer je op de vrijheid van de gebruiker?

  • Een gebruiker kan door middel van een terug knop een stap terug doen in een proces
  • Het is voor de gebruiker altijd mogelijk om een bepaalde proces direct te beëindigen door middel van een duidelijk gemarkeerde exit 
  • De applicatie ondersteunt undo en redo

4 Consistentie en standaarden

“Users should not have to wonder whether different words, situations, or actions mean the
same thing. Follow platform and industry conventions.”

De wet van Jakob zegt dat gebruikers meer tijd doorbrengen op andere sites dan op die van jou. Het is daarom belangrijk om conventies en standaarden te volgen zoals deze binnen het vakgebied gehanteerd worden. 

Neem bijvoorbeeld een icoon van een huisje. Op de meeste websites linkt deze naar de homepage. Het is tegen de standaard in om deze te verwijzen naar de contactpagina.  

Daarnaast is het belangrijk dat er consistentie is over de platformen heen. Hiervoor kan een Design System gebruikt worden.

Hoe controleer je op consistentie en standaarden?

  • De applicatie heeft geen patronen die duidelijk afwijken van de standaard zoals deze gehanteerd wordt door andere websites of applicaties. Bijvoorbeeld een home icoon dat naar een contactpagina verwijst
  • Visuele elementen zijn over alle schermen consistent. Bijvoorbeeld dat de kleur van een knop niet verandert wanneer de gebruiker een volgende stap in het proces neemt

5 Voorkomen van fouten

“Good error messages are important, but the best designs carefully prevent problems from
occuring in the first place. Either eliminate error-prone conditions, or check for them and present users with a confirmation option before they commit to the action.”

Voorkomen is beter dan genezen. Hoe goed je foutmeldingen ook zijn, het is beter om het systeem zo in te richten dat de gebruiker geen fout hoeft te maken. 

Zorg ervoor dat een gebruiker geen grove fouten kan maken, zoals het ongedaan maken van gemaakte inhoud zonder dit expliciet te bevestigen (‘Weet u zeker dat u dit wil verwijderen?’). 

Maak gebruik van duidelijke helpteksten bij het invullen van een formulier zodat de gebruiker precies weet wat er voor een input verwacht wordt.

Hoe controleer je op het voorkomen van fouten?

  • Formuliervelden hebben duidelijke helpteksten
  • De gebruiker heeft veel vrijheid in bij het invoeren van input. Zoals een postcode waar er geen rigide input wordt afgedwongen (mag geen spatie bevatten en alleen hoofdletters)
  • Wanneer er een destructieve actie plaatsvindt, zoals het verwijderen van een ingevuld formulier, wordt er altijd een bevestiging van de gebruiker gevraagd

6 Herkennen in plaats van herinneren

“Minimize the user's memory load by making elements, actions, and options visible. The user should not have to remember information from one part of the interface to another. Information required to use the design should be visible or easily retrievable when needed.”

Mensen hebben een beperkt korte termijn geheugen. Een applicatie moet de hoeveelheid informatie die onthouden moet worden zoveel mogelijk reduceren. Laat gebruikers in plaats daarvan informatie herkennen zodat ze deze niet actief hoeven te herinneren.

Hoe controleer je op herkennen in plaats van herinneren?

  • De applicatie heeft geen uitgebreide uitleg nodig om gebruikt te kunnen worden
  • Vooraf ingegeven informatie, zoals een zoekopdracht, is zichtbaar wanneer de contextuele inhoud, zoals zoekresultaten, wordt getoond
  • Iconen hebben duidelijke labels zodat de gebruiker niet de functie van elk icoon uit het hoofd hoeft te leren

7 Flexibiliteit en efficiënt gebruik

“Shortcuts — hidden from novice users — may speed up the interaction for the expert user such that the design can cater to both inexperienced and experienced users. Allow users to
tailor frequent actions.”

Door bepaalde functionaliteit aan te bieden, die verborgen voor is beginners, maak je de applicatie makkelijker en sneller te gebruiken voor gevorderde gebruikers. Denk bijvoorbeeld aan toetsenbord sneltoetsen.

Daarnaast kan je de gebruiker de mogelijkheid geven om bepaalde schermen aan te laten passen aan zijn persoonlijke voorkeuren. De gebruiker kan dan informatie op een manier inrichten die voor hem/haar sneller of beter werkt.

Ook het aanbieden van gepersonaliseerde content en functionaliteit kan het werken met een applicatie voor de gebruiker versnellen.

Hoe controleer je op flexibiliteit en efficiëntie? 

  • De applicatie biedt toetsenbord sneltoetsen aan
  • Het is voor de gebruiker mogelijk om zelf schermen aan te passen door aan te geven welke informatie er wel of niet getoond wordt
  • De applicatie biedt gepersonaliseerde functionaliteit of content aan

8 Esthetiek en minimalistisch design

“Interfaces should not contain information that is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility.”

Zorg ervoor dat de applicatie geen onnodige informatie laat zien. De applicatie heeft geen visuele elementen die afleiden van de belangrijkste informatie of taken. Prioriteer de belangrijkste content en onderdelen van de applicatie die het primaire doel van de gebruiker ondersteunen.

Hoe controleer je op esthetiek en minimalistisch design?

  • Het visuele design zit de taken van de gebruiker niet in de weg
  • Er wordt geen onnodige informatie getoond
  • De belangrijkste content en taken zijn geprioriteerd en vallen duidelijk op

9 Help gebruikers om fouten te herkennen, diagnosticeren en te herstellen

“Error messages should be expressed in plain language (no error codes), precisely indicate the problem, and constructively suggest a solution.”

Foutmeldingen moeten duidelijke en simpele taal bevatten. De foutmelding moet aangeven wat er precies is fout gegaan en een suggestie doen voor een oplossing.

Maak gebruik van een visuele stijl die gehanteerd wordt bij traditionele foutmeldingen zoals dikgedrukte tekst en de signaalkleur rood. Geef aan wat er mis ging in de taal van de gebruiker en biedt een oplossing zoals een snelkoppeling waarmee de gebruiker het probleem meteen kan oplossen.

Hoe controleer je op goede foutmeldingen?

  • De visuele stijl van een foutmelding maakt gebruik van de kleur rood
  • De foutmeldingen zijn in duidelijke en simpele taal geschreven en bevatten geen foutcodes
  • In de foutmelding is te lezen wat er precies mis is gegaan en wordt een suggestie gedaan hoe dit te herstellen

10 Help en documentatie

“It’s best if the system doesn’t need any additional explanation. However, it may be necessary to provide documentation to help users understand how to complete their tasks.”

Het is beter als een applicatie geen extra documentatie nodig heeft. Als dit echter onvermijdelijk is zorg er dan voor dat de documentatie doorzoekbaar is. 

Indien mogelijk laat dan de documentatie in de juiste context op het juiste moment zien wanneer de gebruiker het nodig heeft. 

Maak van de documentatie een lijst met concrete stappen die uitgevoerd kunnen worden.

Hoe controleer je op goede help functionaliteit en documentatie?

  • Het beste is als de applicatie geen documentatie nodig heeft
  • De documentatie is doorzoekbaar
  • Documentatie wordt alleen getoond op de momenten dat de gebruiker het nodig heeft
  • De documentatie bestaat uit een concrete lijst met te nemen stappen

Maak jouw applicatie gebruiksvriendelijker

Door een applicatie te controleren op deze tien criteria en de adviezen op te volgen zorg je ervoor dat deze gebruiksvriendelijker wordt en draag je bij aan een betere klantbeleving.

Heb je vragen over het bovenstaande? Laat dan hieronder een reactie achter.

De inhoud van dit veld is privé en zal niet openbaar worden gemaakt.

Beperkte HTML

  • Toegelaten HTML-tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Regels en alinea's worden automatisch gesplitst.