Webdesigners, ontwerp buttons die er uitzien als buttons
Buttons of knoppen zijn belangrijke onderdelen van een website, zij hebben meestal de zware taak om mensen tot de gewenste actie aan te zetten. Knoppen staan vaak helemaal in het begin of op het einde van het conversieproces van je website. Denk maar aan “in winkelwagentje” en “bestel nu” buttons of “verzenden” en “betaal veilig” knoppen. Waar kan je als webdesigner het best rekening mee houden tijdens het ontwerpen van knoppen of buttons?

Laat knoppen op knoppen lijken!
Sommige uiterst creatieve geesten durven wel eens zondigen tegen deze basisregel. Het heeft geen zin om een nieuw soort button uit te vinden, doe de website eigenaar een plezier en ontwerp knoppen zoals mensen ze verwachten: rechthoekig, afgeronde hoeken en als het nog even kan met een bescheiden 3D effectje.
Groter is beter
Buttons zijn belangrijk, laat dat ook merken aan de grootte. Niets is zo frustrerend als een knop die te klein is en waar je de nodige moeite mee hebt om hem aan te kunnen klikken. Denk ook aan mensen die niet zo precies kunnen werken met de muis, geef ze de ruimte om te klikken op een comfortabele grote button.
Houd het simpel
Bij het ontwerpen van knoppen is het niet het moment om al je toeters en bellen uit je designkast te halen. Houd het simpel en maak het vooral niet te moeilijk voor je bezoekers. Bezoekers moeten zonder nadenken in staat zijn een knop te identificeren als knop en begrijpen wat die knop zal doen als er op geklikt wordt.
Gebruik de juiste call to action
Een goede button bevat altijd tekst, de inhoud van deze tekst is van zeer groot belang. Wik en weeg je woorden goed. Woorden zoals “klik”, “go” en “verder” zijn meestal niet duidelijk genoeg voor de potentiële klikker. Probeer het doel van de knop kort aan te geven. “word lid”, “voeg toe aan winkelwagentje” of “registreer je hier” geven direct aan welke actie je kan starten als je op de knop klikt.
Gun je knoppen een opvallend kleurtje
Het klikken op een knop is vaak een van de belangrijkste acties die we van een bezoeker verlangen. Of het nu een online sale is of het invullen van een contactformulier, de button speelt een cruciale rol in dit proces, zonder klik geen actie. Het is dan ook aangeraden om knoppen een opvallende kleur te geven zodat ze voldoende opvallen. Ideaal is een kleur die goed contrasteert met de hoofdkleur van je design.
“Meet BOB”
“Have you tested a Big Orange Button? We call him BOB. He works hard.” Is een van de beste quotes die ik de laatste tijd gelezen heb. Misschien heeft jouw design ook nood aan een hardwerkende BOB. Grote oranje knoppen blijken heel vaak het beste uit verschillende tests te komen. Zeker het proberen waard dus!
Plaats buttons op de juiste plaats
Je kan de beste button ontwerpen maar als deze slecht gepositioneerd wordt in de totale website gaat een groot deel van de inspanningen verloren. Plaats de knop op de juiste plaats waar bezoekers van de website de knop intuïtief verwachten. Bij een formulier staat een button bijvoorbeeld best rechts beneden terwijl op een productenpagina de “koop nu” knop meestal naast de productfoto verwacht wordt.
Testen, testen en nog eens testen
Ieder doelpubliek is anders en kan anders reageren op het ontwerp van buttons, buttons zijn daarom de moeite waard om te testen. De belangrijkste zaken die je kan testen bij knoppen:
- Grootte
- Kleur
- Call to action
- Positionering
Conclusie:
Knoppen zijn belangrijke items in een website of webapplicatie en verdienen de nodige aandacht tijdens de designfase van een project.
De ideale knop:
- Is groot genoeg
- Heeft vette en duidelijk leesbare tekst
- Heeft een duidelijke call to action
- Heeft het liefst een 3D look
- Is kleurrijk



7 reacties tot nu toe
Christof zei 2 jaar geleden:
Alleen kan die "Reageer" knop hier beneden wel wat beter he ;-)
Jente zei 2 jaar geleden:
Kevin Vanhove zei 2 jaar geleden:
Misschien is het ook interessant om aan te geven onder welke omstandigheden jullie een tekstloze button gebruiken? In een desktop applicatie zijn icon buttons eerder de regel, waarom is dit niet zo in online websites?
Tom Hermans zei 2 jaar geleden:
Nicky zei 2 jaar geleden:
Edwin Waelbers zei 2 jaar geleden:
Omdat sommige desktop applicaties een andere gebruikersfrequentie hebben dan websites.
Veel desktop applicaties gebruik je veel, door het veel te gebruiken leer je de applicatie kennen. Enkel iconen gebruiken kan dan wel. Wanneer die desktop applicatie maar één keer per jaar wordt opgestart dan kan het niet. Je bent dan immers vergeten waarvoor dit of dat icoon stond.
Websites gebruik je dikwijls maar één keer in je leven, andere frequenteer je heel onregelmatig. Een icon-only navigatie heeft dan ook geen zin, een gebruiker van websites wil absoluut geen tijd in training van je website steken. Die moet, zonder nadenken, met je website kunnen werken.
Wat niet wil zeggen dat iconen in websites geen zin hebben: mits goed gebruikt, ondersteunen ze het aanleren van. We onthouden nu eenmaal tekeningen ed. 3x beter dan tekst. Door zowel iconen als tekst aan te bieden, spreek je verschillende cognitieve bronnen aan (er is enig bewijs dat tekeningen en tekst in verschillende geheugentypes worden opgeslagen), waardoor het leerproces wordt versnelt.
fox zei 2 jaar geleden: