Deze post is gearchiveerd.
31 augustus 2016 - Story
De basis van een goed werkende knop zit in een doordacht gebruik van kleur, contrast en hiërarchie.
Contrast is belangrijk om de koopknop duidelijk te maken en te zorgen dat die eruit springt. Kies daarom voor een volle knop in plaats van de populaire ghost-button.Een holle knop is wel een goed idee voor ondersteunende acties zoals bijvoorbeeld een ‘wishlist’. Vraag je daarnaast ook af:
Een koopknop vraagt om actie. Net daarom is de kleur belangrijk. Enkele tips:
Om een goede hiërarchie op te bouwen, is het belangrijk te zorgen voor een logisch en constistent kleurgebruik. Evalueer je buttons door te werken met een interface inventory van je online aanwezigheid. Dat kan dan bijvoorbeeld dit opleveren:
Bron: Deze interessante blogpost van Brad Frost
Dit is overigens een voorbeeld van hoe het niet moet. Er zijn te veel verschillende stijlen en kleuren en geen consistent design om hiërarchie te brengen.
Wat de grootte van de knop betreft, is de richtlijn eenvoudig: maak je knop zo groot mogelijk. Je knop moet minimum 9 mm groot zijn en 2mm ver van de dichtstbijzijnde knop of link staan. Zeker voor het touchscreen van bijvoorbeeld iPad of Smartphone is dat heel belangrijk. Onze vingertoppen zijn gemiddeld tussen de 10 en 14 mm groot en kunnen op die manier vlot ‘klikken’ zonder dat je per ongeluk andere knoppen aanklikt. We gebruiken hier bewust een uitdrukking in mm omdat de grootte van een pixel verschilt van toestel tot toestel, zeker bij retinaschermen.
De plaatsing van de knop is uiterst belangrijk, naast kleur en opmaak. Enkele tips:
Uiteraard is het van belang wat de knop precies zegt. Zinvolle tips voor de copywriting op je knop:
Micro-interactions zijn kleine animaties waarmee je je klant feedback kan geven als hij op een knop geklikt heeft. Een micro-interactie heeft twee functies:
Feedback voor je klant als iets lukt of niet lukt: bijvoorbeeld een +1-animatie als iets wordt toegevoegd.
Een kans om je merk wat meer kleur en stem te geven. Een micro-interactie kan speels of zakelijk zijn, snel of elegant... Hiermee maak je dus dat het plezieriger shoppen wordt op je website, en die positieve perceptie komt je merk ten goede.
Tot slot nog dit: uit user tests blijkt dat zo’n 10% van de testpersonen (meestal 50-plussers) dubbelklikt op een knop. Dat kan voor frustratie zorgen bij een aankoopknop, omdat de bezoeker bijvoorbeeld telkens twee items toevoegt. De oplossing is simpel: voeg na elke klik een korte time-out toe met een micro-interaction. Zo voorkom je 2 keer snel klikken en geef je positieve feedback.