7 basisprincipes voor button ontwerp (UI-design)

Buttons zijn een cruciaal element voor de User Interface (UI). Deze buttons hebben een grote rol in de interactie tussen de gebruiker en het systeem. In dit artikel zullen we naar zeven basisprincipes kijken die je moet weten om effectieve buttons te kunnen creëren.

1. Buttons moeten eruit zien als buttons
2. Plaats buttons waar deze verwacht worden
3. Duid aan wat een button doet
4. Gebruik een goed formaat voor buttons
5. Houd de volgorde in de gaten
6. Gebruik niet teveel buttons
7. Maak gebruik van feedback

1. Buttons moeten er uitzien als buttons

Wanneer het aankomt op interactie met de user interface (UI) is het belangrijk dat gebruikers direct weten waar zij wel of niet op kunnen klikken. Elk item in het ontwerp vergt moeite van de gebruiker om deze te kunnen begrijpen. In het algemeen geldt: Hoe meer tijd nodig is voor de gebruiker om de user interface goed te kunnen begrijpen, hoe minder bruikbaar het voor de gebruiker wordt.

Hoe begrijpen gebruikers of een bepaald element statisch of interactief is? Dit wordt gebaseerd op voorgaande ervaringen en visuele aanduidingen om het doel van het user interface object te begrijpen. Het is daarom erg belangrijk om gepaste visuele aanduidingen (kleur, vorm, grootte etc) te gebruiken waardoor het element aanvoelt en eruit ziet als een button.

Helaas zijn bij veel ontwerpen de aanduidingen van een interactieve button zwak. Hierdoor is er moeite vereist van de gebruiker, waardoor de effectiviteit van de button wordt verminderd.

Als gebruikers moeite hebben om te begrijpen waar ze wel of niet op kunnen klikken maakt het niet uit hoe mooi het ontwerp eruit ziet. Wanneer de user interface lastig te gebruiken is, zal dit tot frustratie leiden bij de gebruiker en is de button niet effectief.

Desktop vs mobiele telefoon

Zwakke aanduidingen zijn zelfs een groter probleem voor mobiele gebruikers. In een poging om te begrijpen of een element interactief is kunnen desktop gebruikers gebruik maken van een cursor. Als het element verandert van status zal het waarschijnlijk gaan om een button. Mobiele gebruikers kunnen hier geen gebruik van maken. Om te begrijpen of een element interactief is moeten gebruikers ergens op klikken. Een andere manier om te checken of een element interactief is, is er niet op mobiel.

Visie van ontwerper vs visie van gebruiker

In veel gevallen gaan ontwerpers er vanuit dat de aanduiding van een button duidelijk is, omdat zij zelf immers weet dat een element een statische of interactieve button is. Echter betekent dit niet dat de gebruiker dit ook snapt. Wanneer je een user interface ontwerpt moet je altijd de volgende regel in gedachten houden: De bekwaamheid van een ontwerper om een aanduiding van een interactief element te identificeren is niet hetzelfde als die van een gebruiker.

Maak gebruik van bekende (herkenbare) ontwerpen

Er zijn een aantal ontwerpen van buttons die vaak terugkomen in verschillende apps. Deze zijn hierdoor door de gebruikers sneller te herkennen. Hier volgen een aantal voorbeelden van buttons die bekend zijn voor de meeste gebruikers:

• Gevulde button met vierkante randen
• Een gevulde button met ronde randen
• Een button gevuld met schaduw
• Ghost button

Uit alle vier de voorbeelden is het “Gevulde button met schaduw” ontwerp het duidelijkst voor jouw gebruikers. Wanneer een gebruiker deze dimensie van de button ziet, zal deze onmiddellijk begrijpen dat op dit element gedrukt kan worden.

Witte ruimte

Niet alleen hoe de button er visueel uitziet is belangrijk. De hoeveelheid witte ruimte kan bepalen of het makkelijker of lastiger is om te begrijpen of het om een interactief element gaat.

2. Plaats buttons waar deze verwacht worden

Buttons moeten geplaatst worden waar een gebruiker deze verwacht of makkelijk kan vinden. Laat gebruikers niet een zoektocht starten om een button te vinden. Als gebruikers de button niet kunnen vinden is het aannemelijk dat de gebruiker simpelweg niet weet dat er een button bestaat.

Traditionele lay-outs en standaard UI patronen

Gebruikelijke plaatsing van jouw buttons zal helpen om deze te vinden. Met een standaard lay-out zullen gebruikers makkelijk begrijpen wat het doel is van elk element. Dit geldt zelfs voor een button zonder sterke aanduidingen. Door een standaard lay-out te combineren met een duidelijk visueel ontwerp en voldoende witte ruimte zal de lay-out begrijpelijk worden.

Tip: Test jouw ontwerp op vindbaarheid. Wanneer een gebruiker voor het eerst door een pagina navigeert die buttons bevatten die gebruikt moeten worden, moeten deze makkelijk vindbaar zijn.

3. Duid aan wat een button doet

Buttons met een algemeen of misleidend label kunnen tot veel frustratie leiden bij de gebruiker. Als je een button label schrijft, duidt dan duidelijk aan wat elke button doet. In het meest ideale geval zou elk button label precies moeten aangeven wat deze doet.

Gebruikers moeten precies weten wat er gebeurt wanneer zij op een button (zouden) klikken.

Voorbeeld

Stel voor dat je per ongeluk iets hebt aangeklikt waardoor alles wordt verwijderd en je krijgt vervolgens een error te zien. Deze error vraagt of je de volgende items wilt verwijderen met de buttons “OK” en “Cancel”. Het is niet duidelijk wat “OK” of “Cancel” in dit geval representeert. Veel gebruikers zullen zichzelf afvragen wat er gebeurd als ze op “Cancel” drukken?

In plaats van “OK” te gebruiken is het beter om “Verwijderen” te gebruiken. Dit geeft duidelijk aan wat deze button doet. Om nog duidelijker aan te geven dat dit een potentieel gevaarlijke actie is, kan je een rode kleur gebruiken om dit aan te geven.

4. Gebruik een goed formaat voor buttons

Het formaat van een button moet reflecteren hoe belangrijk dit element is op het scherm. Een grote button betekent hierbij dat de actie belangrijk is.

Prioriteer bepaalde buttons

Laat de belangrijkste button er daadwerkelijk uitzien alsof deze het belangrijkst is. Probeer altijd te zorgen dat de primaire actie button er prominent uit ziet. Dit kan door het formaat te veranderen en gebruik te maken van een andere kleur. Hierdoor zul je de aandacht van de gebruiker krijgen.

Zorg dat buttons vinger-vriendelijk zijn voor mobiel

Bij veel mobiele apps zijn de buttons te klein. Dit leidt vaak tot de situatie waarbij een gebruiker de verkeerde knop aanklikt. Een studie van MIT Touch Lab heeft gevonden dat een goede minimaal aanraak grote 10mm x 10mm is.

5. Houd de volgorde in gedachten

De volgorde van buttons zou de natuurlijk interactie tussen de gebruiker en het systeem moeten reflecteren. Vraag jezelf af welke volgorde gebruikers verwachten op een scherm en pas het ontwerp hierop aan.

Voorbeeld

Neem als voorbeeld hoe je “Vorige/Volgende” buttons gebruikt om door pagina’s te scrollen. Het is logisch dat de button vooruit aan de rechterkant moet zitten en de knop achteruit aan de linkerkant.

6. Gebruik niet teveel buttons

Dit is een veel voorkomend probleem voor vele apps en website. Wanneer je te veel opties aanbiedt, leidt dit ertoe dat gebruikers niks doen. Wanneer je een app of pagina ontwerpt denk dan na over wat de belangrijkste acties zijn die je jouw gebruikers uit wil laten voeren.

7. Maak gebruik van feedback

Wanneer een gebruiker op een button klikt verwacht de gebruiker dat deze reageert met een aannemelijke feedback. Afhankelijk van de actie, kan de feedback plaatsvinden in verschillende vormen, namelijk:

• Visueel
• Autditief
• Tactiel

Als er geen feedback ontvangen wordt kan de gebruiker denken dat het systeem hun actie niet goed heeft uitgevoerd. Hierdoor zullen ze nogmaals dezelfde actie uitvoeren. Dit gedrag leidt vaak tot onnodige acties.

Waarom gebeurt dit? Als mensen verwachten we feedback wanneer er interactie is met een bepaald object. We verlangen naar een confirmatie dat de actie is geregistreerd.

Voor sommige acties, zoals downloaden, is het waardevol om de voortgang van het proces aan te tonen. Op deze manier heeft de gebruiker feedback ontvangen dat de download bezig is.

Feedback is een belangrijk onderdeel van micro interaties. Lees hier meer over in onze blog ‘micro interacties: het geheim voor een geweldig app ontwerp‘.

Conclusie

Ondanks dat buttons gebruikelijke elementen zijn van het interactie ontwerp is het belangrijk om hier veel aandacht aan te besteden. Probeer elk button element zo goed mogelijk te ontwerpen. Button ontwerp moet altijd gaan om erkenning en duidelijkheid.

---