Uw browser is sterk verouderd. Upgrade je browser voor een betere gebruikers ervaring en veiligheid.

Artikels

Webdesigners, ontwerp buttons die er uitzien als buttons

Geschreven door

buttons en knoppen

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