The Art of Website UI Button Design: 10 Trends & Tips
Een goed knopontwerp is iets waar de meeste websitegebruikers nooit aan denken ... want als het goed werkt, is het bijna onzichtbaar. De beste knoppen zijn gemakkelijk te klikken of te tikken, hebben een duidelijke functie en helpen gebruikers zonder nadenken met het ontwerp te communiceren.
Het is een vrij eenvoudige formule, maar het kan moeilijk zijn om te ontwerpen als je het als een bijzaak laat.
Vandaag kijken we naar trends in het ontwerpen van knoppen, plus enkele tips om u te helpen bij het ontwerpen van een gebruikersinterface-knop waarop mensen keer op keer klikken. Geef je knopontwerp een boost met deze tips, trends en ideeën om inspiratie op te doen.
Ontdek ontwerpbronnen
1. Houd het simpel
Het komt allemaal terug op deze klassieke uitdrukking in de ontwerptheorie: Keep It Simple, Stupid (of Silly, als je dat liever hebt).
Website knopontwerp is niet anders. Een knopontwerp hoeft niet overdreven complex te zijn. Het moet duidelijk en functioneel zijn. Soms kunnen andere designtrends dit in de weg zitten en dat kan van invloed zijn op conversies op uw website.
Dus, als het gaat om het ontwerpen van knoppen, denk dan zo - en denk er niet over na. Een knop moet eruit zien als een knop. Het is zo simpel.
2. Zorg voor voldoende contrast
Bijna net zo belangrijk als het hebben van een identificeerbare knop, is ervoor zorgen dat deze gemakkelijk te zien is.
De reden waarom spookknopstijlen bovenop afbeeldingen snel populair en vervaagd zijn, is omdat de knoppen niet genoeg contrast hadden om gemakkelijk waarneembaar te zijn. Gebruikers konden ze niet meteen vinden.
Verberg geen knoppen met een slecht contrast. Laat ze opvallen en schreeuwen met veel kleur en ruimtelijk contrast, zodat ze zich onderscheiden van andere elementen op het scherm. Laat voldoende vulling rond de knopen zodat ze kunnen ademen.
Dit maakt het voor gebruikers gemakkelijker om knoppen te vinden en te identificeren als aanklikbare elementen, en ze zijn fysiek gemakkelijker om te klikken zonder per ongeluk het verkeerde element te krijgen.
3. Gebruik kleur
Is het je ooit opgevallen hoeveel knoppen rood of oranje zijn? Het is omdat felle kleuren de aandacht trekken naar deze elementen en actie aanmoedigen.
Het gebruik van kleur is ook een behoorlijk trendy ontwerptechniek. Van felle kleuren tot knoppen met eenvoudige verlopen, de kleur is misschien een van de gemakkelijkere manieren om mensen te helpen bij het ontwerp.
4. Schrijf Microcopy dat verwachting creëert
Maak deze fout niet: een knop met de woorden "Klik hier" erop. (Hoe spamachtig is dat?)
De microcopie binnen een knopontwerp moet een duidelijke verwachting scheppen van wat er met een klik zal gebeuren. Vertel gebruikers wat ze hierna zullen krijgen. Dit kan zo simpel zijn als 'Verzenden' om gegevens in te voeren, of op een link voor 'Meer informatie' te klikken of een video te bekijken. Ongeacht wat de actie is, vertel het gebruikers in de microcopy.
Deze informatie kan helpen om vertrouwen bij gebruikers te creëren en de conversies te verhogen met acties / interacties die gebruikers wenselijk vinden.
5. Houd u bezig met subtiele animatie
Er is een trend in het ontwerpen van knoppen waarbij websites twee knoppen naast elkaar gebruiken. De ene is gevuld, de andere is een spookstijl. Beide bevatten een zweefanimatie die twee klikbare keuzes benadrukt.
Animatie kan de aandacht op knoppen vestigen en zelfs klikken stimuleren. Het is een algemeen geaccepteerd gebruikerspatroon geworden om een zweefanimatie op knoppen op te nemen en biedt gebruikers een eenvoudige aanwijzing die ze moeten gebruiken.
Ga gewoon niet overboord. Wervelende, draaiende, knipperende knoppen zijn vervelender dan nuttig.
6. Maak het groot genoeg om te tikken
Knoppen moeten een klikbaar (tappable) gebied bevatten met een diameter van minimaal 10 millimeter en groter is altijd OK. Dit advies komt uit een onderzoek van het MIT Touch Lab dat de afmetingen van een vingerkussentje zag in relatie tot aanraakapparaten.
Laten we dat in perspectief plaatsen. De typische toets op een fysiek computertoetsenbord is 15 millimeter bij 15 millimeter. Dat is een goed doel. (Vergeet alleen niet rekening te houden met verschillende schermformaten, zodat je knop niet verdwaalt op kleine schermen.)
Als u kleinere knoppen nodig heeft, overweeg dan om er een brede klikradius aan toe te voegen. Op die manier als de gebruiker de knoppen zelf mist, is er genoeg ruimte omheen zodat de gewenste actie nog steeds plaatsvindt. (De bezoekers van uw website zullen u bedanken.)
7. Gebruik een vertrouwde stijl
Er zijn een paar algemene knopstijlen die iedereen kent. Gebruik een van hen.
- Een rechthoekige knop met vierkante randen en tekst erin
- Een rechthoekig gevulde knoop met afgeronde randen en tekst binnenin
- Een rechthoekig gevulde knop met een zichtbare slagschaduw (hierboven)
- Een rechthoekige spookknop
- Eenvoudige cirkelknoppen, meestal gebruikt in de rechterbenedenhoek om ondersteuning, hulp of chat aan te geven
8. Zet op een verwachte locatie
Knoppen moeten niet alleen naar verwachting verschijnen en functioneren, ze moeten ook op een plek staan waar gebruikers ernaar zullen zoeken.
- Voor homepages omvat dit het plaatsen van knoppen onder een hoofdkop of een tekstblok. Knoppen worden over het algemeen links uitgelijnd met de tekst of in het midden van het scherm.
- Voor formulieren verschijnen knoppen na invoer. Sommige enkele invoerformulieren brengen de knop op dezelfde rij rechts van de invoer in lijn.
- Algemene CTA-knoppen verschijnen direct onder de inhoud waarnaar ze verwijzen.
- Knoppen om een video of game te spelen of te starten, staan vaak in het midden van het voorbeeldscherm.
- De knoppen voor winkelwagentje of e-commerce staan over het algemeen in de rechterbovenhoek.
9. Vergeet geen feedback
Reageert de knop op interactie? Zorg ervoor dat er een duidelijke feedbacklus is opgenomen in het ontwerp van de knopinterface.
Geef een visuele of instructieve aanwijzing dat de knop zijn werk heeft gedaan. Sommige knoppen hebben meer werk nodig dan andere. Knoppen die bijvoorbeeld naar een andere pagina of website linken, geven feedback dat de knop heeft gewerkt als de nieuwe pagina wordt geladen. Een formulierinzendingsknop kan een "dank u" -bericht op het scherm weergeven als de informatie correct is ingediend.
10. Gebruik knoppen opzettelijk
Te veel knoppen zorgen voor chaos.
Gebruik knoppen waar ze logisch zijn. Overlaad het ontwerp niet met overal knoppen. Gebruikers hebben geen duidelijk idee waar en wat het belangrijkst is om op te klikken.
Bewaar knoppen voor gebruik met websitedoelen. Ze moeten bezoekers naar de elementen leiden die het belangrijkst zijn in uw algehele ontwerp.
Gevolgtrekking
Een websiteknop is een element dat uw call-to-action omzet in een resultaat. Neem de tijd om na te denken over dit ontwerp, van kleur tot functie tot microcopy. Test knopontwerpen om er zeker van te zijn dat u de meest functionele versie in uw interface heeft.
Als je een knop hebt die werkt, val dan niet in de val van trends en verander het ontwerp niet. Als het op knoppen aankomt, moet de functie de hoogste prioriteit hebben.
