1. Er is maar éen primaire actie

Op elke pagina van een website of applicatie kan er maar één primaire actie. Het kan niet zo zijn dat alle acties op de pagina even belangrijk zijn. Dit is verwarrend voor de gebruiker want wat wordt er nu van haar verwacht? Zorg er daarom voor dat er een button is die er visueel uit springt. Dit is de 'call to action' (CTA). Het is overigens wel mogelijk om deze CTA meerdere keren op eenzelfde pagina te herhalen zolang deze maar naar dezelfde actie leidt.

Weet je niet wat de belangrijkste actie is? En heb je hier ellenlange discussies over met de stakeholders? Laat de gebruiker of bezoeker dan bepalen wat het belangrijkst is. Hou interviews met klanten of gebruikers om zo te ontdekken waarvoor zij jouw applicatie of website gebruiken.

2. Groepeer elementen met voldoende witruimte

Zorg ervoor dat elementen die bij elkaar horen ook bij elkaar gegroepeerd staan. Voorkom verwarring door bijvoorbeeld te weinig ruimte te laten tussen formulierelementen. Als de gebruiker twijfelt bij welk label bij welk tekstveld hoort doe je iets verkeerd. Dit is simpel op te lossen door alle ruimtes tussen alle elementen te verdubbelen. Probeer het eens. Voelt het gek? Dan kun je altijd nog de ruimtes verkleinen, maar in de praktijk zul je achter komen dat die dubbele ruimtes beter werken. Voor jou en voor je gebruikers.

3. Voorkom lange regels

Je bent het zelf vast ook weleens tegen gekomen: website met tekst waar de regels bijna het hele scherm vullen. Dan heb je al meteen geen zin meer om te lezen. Je bent niet de enige. Volgens een onderzoek van het Baymard Institute ervaren gebruikers lange regels met tekst als moeizaam:

"Indeed, during testing we’ve observed users immediately go back to a previous page when arriving at a page that includes long lines of text, as they simply didn’t want to bother trying to “get through” the information."

Kader teksten daarom af zodat de regels niet te lang worden. Hoeveel tekens mogen er dan op een regel staan? Maximaal 80 tekens. Dit leest het fijnst en is zelfs een verplichting als je wil dat jouw website voldoet aan de toegankelijkheidsrichtlijnen van de WCAG.

4. Toon nooit een icoon zonder label

Iconen kunnen handig zijn omdat gebruikers hierdoor bepaalde acties of onderdelen sneller herkennen, zoals een huisje wanneer iets naar de home verwijst of een prullenbakje voor weggooien. Alleen niet alle iconen zijn voor elke gebruiker even duidelijk. Je mag daarom nooit een icoon plaatsen zonder een bijbehorend tekstlabel. Je kan er namelijk niet vanuit gaan dat alle gebruikers de iconen direct begrijpen.

Een mooi voorbeeld is het zogenaamde 'hamburger' menu icoon. Dit zijn drie verticale streepjes die je meestal ziet op mobiele websites. Door op dit icoon te klikken verschijnt de navigatie. Vaak zie je dat dit icoon zonder tekstlabel getoond wordt.  Maar het is niet voor iedereen direct duidelijk dat er achter dit icoon een menu verstopt zit. Op sommige websites wordt het icoon namelijk gebruikt om een lijst aan te duiden. Als je dus een hamburger menu gebruikt zorg er dan voor dat naast het icoontje altijd 'Menu' komt te staan. Dan is het voor iedereen direct duidelijk.

5. Label boven inputveld

Een veelgehoord sentiment is dat gebruikers niet willen scrollen en dat ze niet van lange pagina's houden. Een gevolg daarvan is dat ontwerpers en ontwikkelaars zoveel mogelijk op een klein oppervlak willen tonen. Vooral formulieren moet het liefst zo compact mogelijk weergegeven worden.

Daardoor zie je vaak dat de labels naast de inputvelden geplaatst worden in plaats van er boven. Uit onderzoek blijkt echter dat gebruikers het lastig vinden om formulieren te scannen, en in te vullen, als de labels niet boven de inputvelden staan.

Een simpele fix is daarom om de labels altijd boven de inputvelden te zetten het formulier ook niet te breed te maken (maximaal 600 pixels). Hierdoor is het formulier optimaal te scannen en makkelijker in te vullen door je bezoekers.

6. Contrast checken

Het contrast tussen de kleur van de voorgrond (bijvoorbeeld tekst) en de achtergrond wordt vaak gezien als iets wat te maken heeft met toegankelijkheid. Als je wil dat jouw website of applicatie voldoet aan de WCAG richtlijnen, en dus toegankelijk is voor iedereen, dan moet je ervoor zorgen dat het contrast tussen de twee kleuren voldoende is.

Het is echter ook een gebruiksvriendelijkheid issue. Een laag contrast, zoals witte letters op een gele achtergrond, zorgt voor een minder bruikbare website of applicatie omdat deze slecht te lezen is. Het checken van contrast is eenvoudig te doen met online tools zoals deze van WebAIM.

7 Leesbaar lettertype

Wat ik ook nog te vaak zie is dat er gebruik gemaakt wordt van een vrijwel onleesbaar lettertype. Het is een tijdje 'in' geweest om gebruik te maken van een dun lettertype. Hoewel dit er misschien cool uitziet komt het niet ten goede van de leesbaarheid. Kies daarom altijd een lettertype dat goed leesbaar is.

Weet je niet welk lettertype je moet kiezen? Kijk op Google Fonts en sorteer op 'Most populair'. Let er bij Google Fonts wel op dat je deze Fonts lokaal host (lees hoe je dat doet met Drupal).

Heb je zelf ook simpele UI/UX fixes?

Deel ze door hieronder een reactie achter te laten.