Tips voor het ontwerpen van knoppen: eenvoudig, klein en van vitaal belang
We praten veel over details in design. Het is niet voor niets. Aandacht besteden aan zelfs de kleinste details kan een ontwerp maken of breken.
Vandaag gaan we dieper in op een van die details en kijken we naar manieren om knoppen te ontwerpen waarop gebruikers willen klikken (of tikken). Hoewel knoppen misschien wel een van de kleinste elementen in uw ontwerp zijn, zijn ze een van de belangrijkste. Hoe zou u anders acties aan een gebruiker communiceren? Hoe zouden ze anders informatie kunnen geven in die feedbacklus?
Denk even terug aan een van de grote klachten over plat ontwerp in de beginfase: gebruikers wisten niet wat wel en niet interactief was in het ontwerp. Vandaar het belang van een geweldig ontwerp van de knoppen.
Ontdek ontwerpbronnen
Het moet tastbaar lijken
Gebruikers moeten een knop in het ontwerp zien en denken dat ze - um, willen - contact moeten zoeken en deze moeten aanraken. Hoewel bijna elke maatknop op een scherm kan worden geklikt, is de grootte en opvulling rond een knop op een aanraakapparaat van vitaal belang.
De gemiddelde gebruiker heeft een vingertopmaat van 8 tot 10 millimeter breed. Met dat in gedachten is een doelwit van 10 bij 10 millimeter een geweldige startdoelgrootte voor knoppen op aanraakapparaten. (Dat is iets kleiner dan de standaardtoetsen op je toetsenbord.)
Er zijn een paar ontwerp-dingen die u kunt doen om een element ook tastbaar te maken.
- Een subtiele schaduw kan het element van de achtergrond "tillen" om het een beetje dichter bij de gebruiker te laten voelen.
- Door de verhoogde opvulling rond knoppen lijken ze gemakkelijker te klikken en wordt de gebruiker naar het element geleid.
- Gekleurde zweef- of schakelacties kunnen gebruikers in realtime laten zien wat ze doen en actie aangeven.
Kleur is belangrijk
De kleur van de knoppen moet tijdens het ontwerp van de website speciaal zijn. Dit is een goede plek om een bepaalde accentkleur te gebruiken en deze alleen te gebruiken voor knopacties.
De knopkleur moet helder en aantrekkelijk zijn. Er is een reden waarom zoveel ontwerpen gele, blauwe of groene knoppen bevatten. Ze zijn gemakkelijk te zien en onderscheiden zich van de rest van het ontwerp. Voor een knop die echt opvalt, selecteert u een kleur die complementair is aan de hoofdkleur in het ontwerp (tegenpolen op het kleurenwiel).
Het andere kleurprobleem is merk. U wilt een knopkleur selecteren die past bij uw kleurenpalet en merkidentiteit. Het maakt niet uit hoeveel u wilt dat een knopkleur opvalt in het ontwerp, het zou moeten werken met - niet tegen - uw primaire kleurenschema.
Grootte is nog belangrijker
Maak het groot!
Knoppen hebben wat kracht nodig, zodat gebruikers er onmiddellijk op het scherm naar toe worden getrokken. De trend van de spookknop - contouren zonder duidelijke knopkleur - was gericht op grote knoppen wat betreft aantal pixels, maar miste het visuele gewicht. Qua grootte moet een knop in beide opzichten groot zijn. (Dit is een reden waarom de trend uit de mode is geraakt.)
Er is echter een lastige plek wanneer een knop van perfect formaat naar beschamend oversized gaat. Precies wanneer dit gebeurt, hangt af van de schaal van andere ontwerpelementen, maar u weet zeker wanneer het gebeurt. Als de knop alles is wat u in het ontwerp ziet, is de kans groot dat deze te groot is.
Plaatsing is de sleutel
Waar in het ontwerp moet de knop gaan? Is er een locatie die meer zal helpen klikken dan andere?
In de meeste gevallen moeten knoppen de inhoud volgen waarvoor ze zijn ontworpen.
- Aan het einde van een formulier
- Rechts van een call-to-action-bericht
- Onderaan de pagina of het scherm
- Gecentreerd onder een bericht
Waarom deze plaatsingen? Omdat het het natuurlijke pad van actie volgt en de manier waarop gebruikers websites lezen en ermee omgaan.
Focus op contrast
Bij alle designelementen is contrast een belangrijke overweging. Dit geldt voor de technieken die binnen het element zelf worden gebruikt, maar ook voor de relatie tussen het element en zijn plaatsing in het ontwerp en die omgeving.
Denk aan de volgende technieken in deze dubbele omgeving:
- Kleur
- Typ gewicht en maat
- Grootte van elementen
- Vorm zoals het betrekking heeft op de achtergrond
- Transparantie of animatie
- Schaduwen of graden
- Witruimte en opvulling
Gebruik standaardvormen
Als het op knoppen aankomt, zijn er maar twee vormen waar u rekening mee moet houden:
- Cirkels. De ronde knop is populair geworden dankzij Material Design en Material Lite-concepten. Bij elke vergelijkbare esthetiek werkt een ronde knop met het ontwerp en past deze in het gebruikerspatroon.
- Rechthoeken. Deze standaardvorm zou je go-to moeten zijn voor alle knoppen, tenzij je een cirkel gebruikt in de bovenstaande instantie. Het is wat gebruikers weten en gewend zijn. De meeste rechthoeken met knoppen zijn meestal minstens twee keer zo groot als hoog (soms drie of vier keer zo breed). Gebruikers zien deze vorm en weten meteen wat ze moeten doen. Sommigen beweren misschien de verdiensten van afgeronde hoeken versus hoeken van 90 graden, maar beide zijn even geschikt op basis van uw ontwerpstijl.
Vertel gebruikers wat ze moeten doen
Elke knop moet een tekstinstructie bevatten die gebruikers precies vertelt wat de knop zal doen. U wilt de taal kort en eenvoudig houden en deze moet passen bij de toon van de rest van het websiteontwerp.
Maak die belofte dan waar. Het volgende dat opduikt, zou de gebruiker moeten vertellen dat ze op de verwachte bestemming zijn aangekomen. Of het nu gaat om het indienen van een formulier, het doen van een aankoop of gewoon doorgaan naar een andere link, de gebruiker zou het gewenste resultaat moeten krijgen door interactie met de knop. (Zo niet, zorg er dan voor dat er een fout is aangegeven in de feedbacklus, zodat je weet welke correcties er moeten gebeuren in het websiteontwerp.)
Voorbeelden van knopberichten zijn:
- Klik hier
- Maak nu een account aan
- Probeer het gratis
- Voeg toe aan winkelkar
- Lees verder
Geef knoppen een hoog visueel belang
De meeste ontwerpen zijn gevuld met kleine UI-elementen. Een valkuil die optreedt, is dat het ontwerp voor deze elementen wordt gepusht totdat het project bijna is voltooid. En dan kies je één ontwerp voor alle UI-elementen, met een paar kleine verschillen.
Loop niet vast in deze gevaarlijke situatie.
In het ontwerp moeten knoppen eruit zien als alleen knoppen! Niets anders in het ontwerp mag dezelfde vorm, kleur en visueel gewicht hebben als een knop. Ze moeten anders zijn. Denk erover na om een stijl voor knoppen te maken die groter is dan elk ander vergelijkbaar element in het ontwerp, of gebruik een accentkleur die alleen voor knoppen is. Deze technieken kunnen ertoe bijdragen dat een knop er bijzonder uitziet en het gebruik ervan benadrukken.
Gevolgtrekking
Begin je een aantal van je ontwerpkeuzes opnieuw te bekijken? Denk je dat je iets kunt maken dat klikken beter stimuleert?
Probeer enkele van deze tips terwijl u de analyse van uw website in de gaten houdt om precies te zien op welk ontwerp uw gebruikersbestand reageert. Gebruik die informatie om u te helpen nog meer aanklikbare knoppen te maken voor toekomstige projecten.
