Tips om knappdesign: Enkelt, lite og veldig viktig
Vi snakker mye om detaljer innen design. Det er med god grunn. Hvis du tar hensyn til selv de minste detaljene, kan du lage eller ødelegge et design.
I dag skal vi dykke dypere i en av disse detaljene og se på måter å designe knapper som brukerne ønsker å klikke på (eller trykke på). Selv om knapper kanskje er et av de minste elementene i designen din, er de en av de viktigste. Hvordan ellers vil du kommunisere handlinger til en bruker? Hvordan ellers ville de gitt informasjon i den tilbakemeldingssløyfen?
Tenk et øyeblikk tilbake på en av de store klagene om flat design i de tidlige stadiene: Brukere visste ikke hva som var og hva som ikke var interaktivt i designet. Derfor viktigheten av flott knappdesign.
Utforsk designressurser
Det skal se berørbart ut
Brukere bør se en knapp i designet og tenke at de trenger å, um, ønsker å nå ut og berøre den. Mens du kan klikke på nesten hvilken som helst størrelse på en skjerm, er størrelsen og polstringen rundt en knapp på en berøringsenhet viktig.
Den gjennomsnittlige brukeren har en fingertuppstørrelse på mellom 8 og 10 millimeter. Med det i bakhodet er et mål på 10 x 10 millimeter en flott startmålstørrelse for knapper på berøringsenheter. (Det er litt mindre enn standardtastene på tastaturet.)
Det er noen få design ting du kan gjøre for å få et element til å se på.
- En subtil skygge kan "løfte" elementet fra bakgrunnen slik at det føles litt nærmere brukeren.
- Økt polstring rundt knapper gjør at de virker lettere å klikke på og hjelper deg med å guide brukeren til elementet.
- Fargede sveve- eller vekslehandlinger kan vise brukerne hva de gjør i sanntid og bety handling.
Fargesaker
Knappens farge må være spesiell i hele design av nettstedet. Dette er et bra sted å bruke en bestemt aksentfarge og bare bruke den til knapphandlinger.
Knappens farge skal være lys og engasjerende. Det er en grunn til at så mange design inkluderer gule, blå eller grønne knapper. De er enkle å se og skiller seg ut fra resten av designet. For en knapp som virkelig skiller seg ut, velg en farge som er et komplementært par til hovedfargen i designet (motsetningene på fargehjulet).
Den andre fargen bekymring er merkevare. Du vil velge en knappefarge som fungerer med fargepaletten din og merkeidentiteten. Uansett hvor mye du vil at en knappefarge skal skille seg ut i designet, skal den fungere med - ikke mot - ditt primære fargeskjema.
Størrelse er enda mer
Gjør det stort!
Knapper trenger litt heft, slik at brukerne trekkes umiddelbart til dem på skjermen. Spøkelsesknapptrenden - konturer uten distinkt knappefarge - fokusert på store knapper når det gjelder antall piksler, men manglet visuell vekt. Når det gjelder størrelse, trenger en knapp å være stor i begge forhold. (Dette er en av grunnene til at trenden har falt ut av moten.)
Det er imidlertid et vanskelig sted når en knapp går fra å være perfekt størrelse til pinlig stor størrelse. Nøyaktig når dette skjer avhenger av omfanget av andre designelementer, men du vet med sikkerhet når det skjer. Hvis knappen er alt du ser i designet, er sjansen stor for at den er for stor.
Plassering er nøkkelen
Hvor i designet skal knappen gå? Er det et sted som vil bidra til å generere klikk mer enn andre?
I de fleste tilfeller bør knappene følge innholdet de er designet for å utfylle.
- På slutten av en form
- Til høyre for en oppfordring til handling-melding
- Nederst på siden eller skjermen
- Sentrert under en melding
Hvorfor disse plasseringene? Fordi det følger den naturlige handlingsveien og måten brukerne leser og samhandler med nettsteder.
Fokuser på kontrast
Med alle designelementer er kontrast en viktig vurdering. Dette gjelder teknikkene som brukes i selve elementet, men også forholdet mellom elementet og dets plassering i designet og omgivelsene.
Husk å tenke på følgende teknikker i dette doble miljøet:
- Farge
- Type vekt og størrelse
- Størrelse på elementer
- Form når det gjelder bakgrunnen
- Åpenhet eller animasjon
- Skygger eller gressere
- Whitespace og polstring
Bruk standardformer
Når det gjelder knapper er det bare to former du bør tenke på:
- Sirkler. Den runde knappen er blitt populær takket være Material Design og Material Lite konsepter. Med en hvilken som helst lignende estetikk fungerer en rund knapp med designet og passer til brukermønsteret.
- Rektangler. Denne standardformen bør brukes til alle knapper, med mindre du bruker en sirkel i eksemplet over. Det er det brukerne vet og er vant til. De fleste knapperektangler har en tendens til å være minst dobbelt så brede som høye (noen ganger tre eller fire ganger så brede). Brukere ser denne formen og vet umiddelbart hva de skal gjøre. Selv om noen kan argumentere for fordelene med avrundede hjørner kontra 90-graders vinkler, er begge deler like passende basert på designstilen din.
Fortell brukerne hva de skal gjøre
Hver knapp skal inneholde en tekstinstruksjon som forteller brukerne nøyaktig hva de skal gjøre. Du vil holde språket kort og enkelt, og det skal samsvare med tonen i resten av nettsteddesignen.
Deretter leverer du det løftet. Den neste tingen som dukker opp, bør fortelle brukeren at de har kommet til det forventede reisemålet. Enten det er å sende inn et skjema, foreta et kjøp eller bare gå videre til en annen lenke, bør brukeren få ønsket resultat fra å samhandle med knappen. (Hvis ikke, må du sørge for at det er en feil indikert i tilbakemeldingssløyfen for deg, slik at du vet hvilke rettelser som må skje i nettsteddesignen.)
Eksempler på knappemeldinger inkluderer:
- Klikk her
- Opprett en konto nå
- Prøv det gratis
- Legg i handlekurv
- Les mer
Gi knapper høy visuell betydning
De fleste designene er fylt med små brukergrensesnittelementer. En felle som skjer er at designen til disse elementene blir dyttet til prosjektet er nær ferdig. Og så velger du ett design for alle UI-elementene, med noen få små forskjeller.
Ikke bli fast i denne farlige situasjonen.
I designen skal knapper se ut som bare knapper! Ingenting annet i designet skal ha samme form, farge og visuell vekt som en knapp. De trenger å være forskjellige. Tenk på å lage en stil for knapper som er større enn noe annet lignende element i designen, eller bruk en aksentfarge som bare er for knapper. Disse teknikkene kan bidra til at en knapp ser spesiell ut og understreker bruken.
Konklusjon
Begynner du å revurdere noen av valgene dine for knappdesign? Tror du at du kan lage noe som bedre vil oppmuntre til klikk?
Prøv noen av disse tipsene mens du følger med på nettstedanalysen din for å se nøyaktig hvilken designendringer brukerbasen din reagerer på. Bruk den informasjonen til å hjelpe deg med å lage enda flere klikkbare knapper for fremtidige prosjekter.
