Button ontwerp: 7 basis regels om toe te passen

Buttons zijn een cruciaal element voor een interactief ontwerp. Deze buttons hebben een grote rol in de conversatie 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 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 dat 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 interactief is of niet? 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 als een button. Visuele aanduidingen bevatten essentiële informatie. Deze helpen om structuur aan te brengen aan de user interface.

Helaas zijn bij veel ontwerpen de aanduidingen dat een button interactief is 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.

Mobiele gebruikers

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.

Ga er niet vanuit dat een element in de UI duidelijk is

In vele gevallen identificeren ontwerpers met opzet niet een button als interactief element, omdat ze er vanuit gaan dat dit duidelijk zou moeten zijn. 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. Als ontwerper weet je namelijk wat elk element in jouw ontwerp hoort te doet.

Maak gebruik van bekende ontwerpen

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.

Vergeet de witte ruimte niet

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 wordt

Buttons moeten geplaatst worden waar een gebruiker deze makkelijk kan vinden of verwacht. 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.

Maak zoveel mogelijk gebruik van 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 algemene of misleidende 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 elke button label precies moeten aangeven wat deze doet.

Gebruikers moeten precies weten wat er gebeurt wanneer zij op een button klikken. Laten we dit aan de hand van een voorbeeld bekijken. 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 uitziet dat 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 gedachte

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

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 visuele of audio feedback

Wanneer een gebruiker op een button klikt verwacht de gebruiker dat deze reageert met een aannemelijke feedback. Afhankelijk van de actie kan dit visuele of audio feedback zijn. 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. Dit kan dus bijvoorbeeld audio of visuele feedback zijn, zolang we maar een confirmatie hebben 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.

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 User Experience (UI) ontwerp moet altijd gaan om erkenning en duidelijkheid.

---