Vi pratar om detaljer mycket i design. Det är bra skäl. Att uppmärksamma även de minsta detaljerna kan göra eller bryta en design.
Idag ska vi dyka djupare in i en av dessa detaljer och titta på sätt att utforma knappar som användare vill klicka (eller knacka på). Även om knappar kan vara en av de minsta elementen i din design, är de en av de viktigaste. Hur annars skulle du kommunicera handlingar till en användare? Hur annars skulle de ge information i den feedbackslingan?
Tänk tillbaka ett ögonblick till en av de stora klagomålen om plattform i de tidiga stadierna: Användarna visste inte vad som var och vad som inte var interaktivt i designen. Därför vikten av en bra knappdesign.
Det ska se ut
Användare bör se en knapp i designen och tänka att de behöver - om, vill - nå ut och röra den. Medan nästan alla storlekar kan klickas på en skärm, är storleken och vadderingen kring en knapp på en pekdon avgörande.
Den genomsnittliga användaren har en fingertoppstorlek som ligger mellan 8 och 10 millimeter över. Med det i åtanke är ett mål på 10 till 10 millimeter en utmärkt startmålstorlek för knappar på pekdon. (Det är lite mindre än standardnycklarna på ditt tangentbord.)
Det finns några design saker du kan göra för att göra ett element blick berörbar också.
- En subtil skugga kan? Lyfta? elementet från bakgrunden för att få det att känna sig lite närmare användaren.
- Ökad polstring runt knapparna gör att de verkar lättare att klicka och hjälper till att styra användaren till elementet.
- Färgade svep eller växelverkan kan visa användarna vad de gör i realtid och beteckna åtgärder.
Färgämnen
Knappfärg måste vara speciell i hela webbdesignen. Det här är ett bra ställe att använda en viss accentfärg och använda den endast för knappåtgärder.
Knappfärgen ska vara ljus och engagerande. Det finns en anledning att så många mönster innehåller gula, blåa eller gröna knappar. De är lätta att se och sticka ut från resten av designen. För en knapp som verkligen sticker ut, välj en färg som är ett komplementärt par till huvudfärgen i designen (motsatser på färghjulet).
Den andra färgproblemet är varumärke. Du vill välja en knappfärg som fungerar med färgpalett och varumärkesidentitet. Oavsett hur mycket du vill ha en knappfärg att sticka ut i designen, ska den fungera med - inte emot - ditt primära färgschema.
Storleksfrågor ännu mer
Gör det stort!
Knapparna behöver lite häft så att användarna dras omedelbart till dem på skärmen. Spökningsknappens trend - skisserar ingen distinkt knappfärg - fokuserad på stora knappar när det gäller pixelräkning men saknar synvikt. När det gäller storlek måste en knapp vara stor i båda avseenden. (Det här är en orsak till att trenden har gått ur mode.)
Det finns en knepig plats men när en knapp går från att vara perfekt storlek till pinsamt överdimensionerad. Exakt när detta händer beror på omfattningen av andra designelement, men du vet säkert när det händer. Om knappen är allt du ser i designen är chansen att den är för stor.
Placering är nyckel
Var i designen ska knappen gå? Finns det en plats som hjälper till att generera klick mer än andra?
I de flesta fall bör knapparna följa innehållet de är utformade för att komplettera.
- I slutet av en blankett
- Till höger om ett meddelande till handlingsmeddelande
- Längst ned på sidan eller skärmen
- Centrerad under ett meddelande
Varför dessa placeringar? Eftersom det följer den naturliga vägen och hur användarna läser och interagerar med webbplatser.
Fokusera på kontrast
Med alla designelement är kontrast ett viktigt övervägande. Detta gäller för de tekniker som används inom själva elementet men också förhållandet mellan elementet och dess placering i konstruktionen och omgivningen.
Kom ihåg att tänka på följande tekniker i denna dubbla miljö:
- Färg
- Typ vikt och storlek
- Storlek på element
- Form som det hänför sig till bakgrunden
- Genomskinlighet eller animering
- Skuggor eller gravar
- Whitespace och vaddering
Använd standardformer
När det gäller knappar finns det bara två former som du bör överväga:
- Cirklar. Den cirkulära knappen har blivit populär tack vare Material Design och Material Lite-koncept. Med någon liknande estetik fungerar en rund knapp med designen och passar användarmönstret.
- Rektanglar. Denna standardform ska vara din go-to för alla knappar om du inte använder en cirkel i förekomsten ovan. Det är vad användarna vet och är vana vid. De flesta knapprektanglar tenderar att vara minst dubbelt så breda som långa (ibland tre eller fyra gånger så breda). Användare ser denna form och vet omedelbart vad de ska göra. Medan vissa kan argumentera för fördelarna med avrundade hörn mot 90 graders vinklar, är det lika lämpligt baserat på din designstil.
Berätta för användare att göra
Varje knapp ska innehålla en textinstruktion som berättar användarna exakt vad knappen ska göra. Du vill behålla språket kort och enkelt och det ska matcha tonen i resten av webbdesignen.
Sedan leverera på det löftet. Nästa sak som dyker upp ska berätta för användaren att de har kommit fram till den förväntade destinationen. Oavsett om det skickar in ett formulär, gör ett köp eller bara flyttar till en annan länk, borde användaren få det önskade resultatet från att interagera med knappen. (Om inte, se till att det finns ett fel som anges i återkopplingsslingan så att du vet vilka korrigeringar som behöver hända i webbdesignen.)
Exempel på knappmeddelanden inkluderar:
- Klicka här
- Skapa ett konto nu
- Prova det gratis
- Lägg till i kundvagn
- Läs mer
Ge Knappar Hög visuell betydelse
De flesta mönster är fyllda med små UI-element.En fälla som händer är att designen för dessa element blir skjutna tills projektet är nära färdigt. Och sedan väljer du en design för alla UI-element, med några små skillnader.
Fasta inte fast i denna farliga situation.
I designen ska knapparna se ut bara knappar! Inget annat i designen ska ha samma form, färg och visuell vikt som en knapp. De måste vara olika. Tänk på att skapa en stil för knappar som är större än något annat liknande element i designen, eller använd en accentfärg som endast är för knappar. Dessa tekniker kan hjälpa till att göra en knapp ser speciell ut och betona dess användning.
Slutsats
Börjar du ompröva några av dina knappdesignalternativ? Tror du att du kan skapa något som bättre kan uppmuntra klick?
Prova några av dessa tips samtidigt som du tittar på din webbplatsanalys för att se exakt vilken designändring din användarbas svarar på. Använd den informationen för att hjälpa dig skapa ännu fler klickbara knappar för framtida projekt.