Development

Dit is een bijdrage van Mendix
Klantinteractie
veelvoorkomende UX fouten

Veelvoorkomende UX-fouten die door ontwikkelaars gemaakt worden

8 veelvoorkomende UX-fouten en 10 eenvoudige regels om deze te voorkomen. 

12 maart 2019
Door: Mendix, partner

8 veelvoorkomende UX-fouten en 10 eenvoudige regels om deze te voorkomen. 

Met de mogelijkheden die low-code platformen bieden zijn er legio zelforganiserende teams die geweldige interne applicaties maken. Een uitdaging hierbij is echter om de ervaring voor degene die de app gaat gebruiken zo optimaal mogelijk te maken. Hier worden dikwijls creatieve oplossingen voor bedacht. Echter sommige oplossingen die heel logisch lijken, zijn soms toch een slecht idee. In dit artikel vind je 8 veelvoorkomende UX-fouten en worden 10 eenvoudige regels gegeven om deze te voorkomen. 

1. Alles moet op één enkel scherm

Dit is het meest voorkomende voorbeeld van slechte user experience. App-ontwerp start (meestal) met een strakke interface, maar gaandeweg worden er functies toegevoegd en voordat je het weet, heb je een scherm vol knoppen. Herkenbaar? Argumenten om alles op één scherm te plaatsen zijn er wel: het vereist minder klikken, gebruikers kunnen alles in een overzicht zien wat fijn is, want niemand houdt van scrollen.  

Deze interface-oplossing doet denken aan een Zwitsers zakmes waarvan alle gereedschappen uitgevouwen zijn. En de enige die wordt gebruikt, is de flesopener. Zichtbaarheid van alle opties lijkt duidelijkheid te creëren, maar het probleem is dat je hersenen slechts maximaal negen opties kunnen begrijpen. En waarschijnlijk gebruikt de gebruiker 95% van de buttons maar nauwelijks.

Bovendien zouden knoppen dichtbij de gegevens die ze beïnvloeden moeten staan. Als je meer knoppen hebt, verlies je de visuele nabijheid. Het argument "gebruikers haten scrollen" is vaak een excuus voor het niet op het juiste moment de juiste context bieden. Om die context te creëren wordt dus maar zoveel mogelijk informatie in een enkel scherm gepropt.

Een veelgehoord argument: "Maar onze analyses zien we dat slechts 10 procent van de gebruikers naar de onderkant van onze bestemmingspagina scrolt."

Dit lijkt een veilige gok om te concluderen dat 90 procent van je gebruikers een hekel heeft aan scrollen. Het probleem is echter niet het scrollen, maar de hoeveelheid informatie. Meer informatie hoger op de pagina betekent niet automatisch dat gebruikers die informatie zullen opnemen. Het betekent dat ze sneller ‘vol’ zitten en de pagina verlaten.

2. Disbalans in drop downs

Heb je - enthousiast geworden door bovenstaande tekst - je scherm opgeschoond en alle knoppen in drop downs gezet? Vervolgkeuzeknoppen zouden immers meer focus en minder rommel creëren, zodat je gebruiker gemakkelijker kan vinden wat deze zoekt. Toch moet  hier een kanttekening bij geplaatst worden.

Bij het aanmaken van drop downs is balans de sleutel. Denk aan je interface als een fysieke ruimte. Stel je voor dat je een pagina in een ladekast verbergt, en je elke lade moet openen totdat je vindt wat je zoekt.

Dit is hetzelfde voor digitale gebruikersinterface. Als de laden logisch zijn en op de juiste plek zitten, werkt dit goed. Tuinartikelen bewaren in een lade in de schuur klinkt logisch. Maar moeten je BBQ-benodigdheden daar ook in gaan? Of bewaar je die in de keuken? Of op beide plekken?

Een goede balans vinden is niet eenvoudig. Hoe vaak de BBQ gebruikt wordt, bepaalt of de benodigdheden in de schuur of de keuken bewaard moeten worden. Als je maar vijf knoppen hebt, hoeven ze misschien niet in een drop-down menu te gaan. Bij zes knoppen kan de beslissing echter zomaar anders zijn.

3. “Waar ben ik? Alle pagina's zien er hetzelfde uit.”

Je hebt een consistente merkstijl en bijbehorend website-ontwerp. Een consequente visuele stijl is immers het doel. Dat alle pagina’s er hetzelfde uitzien is bovendien vaak debet aan het gebruikte ontwerpsysteem.

Een gebruiker kan echter al snel het gevoel krijgen dat deze door een woud van pagina's loopt. Niet wetend of hij deze pagina eerder heeft gezien of dat dit een andere pagina is met vergelijkbare inhoud. Ontwerp elke pagina daarom met de volgende situatie in het achterhoofd:

Het is vrijdagmiddag, je schakelt tussen sociale media, collega's, enkele privéberichten en probeert je werk te doen. Het laatste waar je je op wilt focussen, is bedenken op welke koppeling je zojuist hebt geklikt en waar je je bevindt in de stroom of het proces.

Enkele aanbevelingen om deze UX-fout te voorkomen:

- Geef pagina's duidelijke koppen of paginanamen

- Maak gebruik van een kruimelpad als de navigatiestructuur meer dan één niveau diep gaat

- Laat zien waar de bezoeker zich bevindt in een stroom (bijvoorbeeld ‘stap 2 van 4’)

4. Lange zinnen en kleine tekst

Dit is een voorbeeld van het maximale uit een scherm willen halen. De argumenten voor lange zinnen en kleine tekst zijn dat gebruikers een hekel hebben aan scrollen en dat het een efficiënter gebruik van ruimte is.

Lezen van een scherm is echter anders dan lezen van papier. Lange zinnen zijn moeilijker leesbaar vanaf een scherm. Om die reden is de vuistregel voor webtypografie om regels niet langer dan 9 woorden te maken.

"Maar kijk eens naar alle ruimte die we verspillen!" Raad eens? Je kunt dat ‘verspillen’ ook zien als een manier om je bezoeker door een tekst héén te trekken. Als je het je kunt veroorloven om zoveel witruimte te gebruiken, betekent dit dat de tekst super belangrijk moet zijn.

Is dat niet zo, delete het dan.

5. Pop-up in een pop-up

Om ruimte te besparen of extra aandacht te vragen maken webdesigners gebruik van een knop met een melding. Soms is er in die pop-up een button die naar een andere pop-up leidt. Het argument voor pop-ups in pop-ups is dat ze meer contextbewust zijn.

Echter, het probleem hiermee is dat gebruikers niet meer weten waar ze zich in het proces bevinden. Als ze klaar zijn met de tweede pop-up, komt dan de oorspronkelijke pop-up weer tevoorschijn of gaan ze terug naar het originele scherm? De eerste pop-up zou een scherm moeten zijn, of de tweede pop-up moet een inline-foutmelding zijn.

6. Verwarring in visuele hiërarchie

Het gebruik van ‘cards’ is trending in webdesign, dus wat is er beter dan een enkele card? Wat dacht je van een card op een andere card!

UX-ontwerpers praten vaak over visuele hiërarchie. Dit is de manier waarop elementen worden georganiseerd op een scherm zodat hun verschil in belang duidelijk wordt voor de gebruiker. Cards zijn bedacht om deze ​​visuele hiërarchie te creëren.

Vergelijk het met een traditioneel kaartspel. Hierin zijn kaarten allemaal even groot. Kaarten worden geplaatst op, onder of naast andere kaarten om bepaalde staten of relaties te communiceren.

Wanneer een kaart echter over een andere kaart op de webpagina gelegd wordt, ontstaat verwarring. De gebruiker begint onbewust de relaties van andere objecten in de interface te ondervragen. Het resultaat? Alle logica is weg.

Gelukkig is de oplossing eenvoudig. Probeer geen cards op een andere card te leggen, maar plaats ze dicht bij elkaar, naast elkaar of binnen een kader (zoals je kaarten op een casinotafel neerlegt).

7. Issues met formuliervelden

Ook formulieren vormen een uitdaging. Ga je een lange lijst met velden maken, of opdelen in meerdere stappen? Of drie kolommen met formuliervelden, zodat het allemaal op één scherm past?

Het grootste probleem is niet het aantal pagina's of het aantal velden, maar het aantal velden dat op één moment zichtbaar is op het scherm. Net als met buttons moet dit worden teruggebracht tot het minimale aantal dat nog context en gebruiksgemak biedt.

De beste methode is om invoervelden altijd in één kolom te plaatsen. De gebruikers kunnen deze stroom gemakkelijk volgen en elke sectie afvinken. Gaan invoervelden over de reis die de gebruiker gaat ondernemen (onboarding) of hebben ze belangrijke gevolgen (zoals bij belastingformulieren)? Deel velden dan op in meerdere pagina's. Zo creëer je lucht en ruimte om aan de gebruiker uit te leggen wat ze doen en waarom het geweldig of belangrijk is.

Als er slechts één tot vijf items zijn om uit te kiezen, zet ze dan niet in een drop-down. Het ziet er misschien elegant uit, maar het is de moeite van de gebruiker gewoon niet waard. Het plaatsen van keuzerondjes is een vriendelijkere oplossing.

8. “Wat doet deze knop?"

Sommige elementen op een pagina helpen je te bepalen op welke pagina je je bevindt, andere elementen moeten zo consistent en zo duidelijk mogelijk zijn. Denk hierbij aan buttons.

De vuistregel is dat wanneer de gebruiker vooruitgaat in de stroom, die knop groen is, aan de rechterkant staat en een tekst heeft die uitlegt wat de button doet, zoals “Accepteren", "Doorgaan" of "Bestellen".

Let op, dit werkt verwarrend bij "destructieve taken”. Denk bijvoorbeeld aan het opzeggen van een abonnement via een groene button met de tekst “Annuleren”.

Snelle vuistregels om de UX-fouten te voorkomen

Dit zijn tien snelle regels om de bovenstaande meest voorkomende UX-fouten te voorkomen.

  1. Plaats niet meer dan negen verschillende buttons op één scherm

  2. Gebruik alleen vervolgkeuzemenu's als laatste redmiddel

  3. Geef elke pagina een koptekst om voor onderscheid te zorgen

  4. Werk met een kruimelpad

  5. Zijn er meerdere stappen, geef dit dan aan

  6. Niet meer dan negen woorden per regel

  7. Gebruik nooit pop-ups in een pop-up

  8. Plaats geen cards op cards

  9. Houd formuliervelden in één kolom

  10. Geef buttons een beschrijvende tekst

Auteur: Jason Teunissen, Appronto

Reactie toevoegen