Art of Website UI Button Design: 10 trender og tips
Flott knappdesign er noe de fleste nettstedbrukere aldri tenker på… fordi når det fungerer bra, er det nesten usynlig. De beste knappene er enkle å klikke eller peke på, har en åpenbar funksjon og hjelper brukere å samhandle med designet uten å tenke på.
Det er en ganske enkel formel, men det kan være vanskelig å designe hvis du lar det være en ettertanke.
I dag ser vi på trender innen knappdesign, pluss noen tips for å hjelpe deg med å designe en brukergrensesnittknapp som folk klikker igjen og igjen. Gi knappenes design et løft med disse tipsene, trendene og ideene for å vekke inspirasjon.
Utforsk designressurser
1. Hold det enkelt
Det hele kommer tilbake til denne klassiske frasen i designteori: Keep It Simple, Stupid (eller Silly, hvis du foretrekker det).
Nettstedets knappdesign er ikke annerledes. En knappdesign trenger ikke å være for komplisert. Det skal være opplagt og funksjonelt. Noen ganger kan andre designtrender komme i veien for dette, og det kan påvirke konverteringer på nettstedet ditt.
Så når det kommer til knappdesign, tenk slik - og ikke tenk over det. En knapp skal se ut som en knapp. Så enkelt er det.
2. Sørg for mye kontrast
Nesten like viktig som å ha en identifiserbar knapp er å sørge for at den er lett å se.
Årsaken til at spøkelsesknappstiler på toppen av bilder trender og bleknet raskt, er fordi knappene ikke hadde nok kontrast til å være lett å se. Brukere kunne ikke finne dem med en gang.
Ikke skjul knapper med dårlig kontrast. Få dem til å skille seg ut og rope med mye farge og plassskontrast, slik at de skiller seg fra andre elementer på skjermen. Legg igjen mye polstring rundt knappene slik at de kan puste.
Dette gjør knappene lettere for brukere å finne og identifisere som klikkbare elementer, samt gjør dem fysisk lettere å klikke uten å få feil element ved en feiltakelse.
3. Bruk farge
Har du noen gang lagt merke til hvor mange knapper som er røde eller oransje? Det er fordi lyse farger trekker blikket mot disse elementene og oppmuntrer til handling.
Å bruke farge er også en ganske trendy designteknikk. Fra lyse farger til knapper med enkle graderinger, kan fargen være en av de enkleste måtene å hjelpe folk til å samhandle med designet.
4. Skriv mikrokopi som skaper forventning
Ikke gjør denne feilen: En knapp med ordene "Klikk her" på den. (Hvor spammy er det?)
Mikrokopien i en knappdesign skal skape en klar forventning om hva som vil skje med et klikk. Fortell brukerne hva de får neste gang. Dette kan være så enkelt som "Send inn" for å legge inn data, eller klikke på en kobling til "Lær mer" eller se på en video. Uansett hva handlingen er, fortell brukere i mikrokopien.
Denne informasjonen kan bidra til å skape tillit hos brukerne og øke konverteringer med handlinger / interaksjoner som brukerne synes er ønskelig.
5. Gå sammen med subtil animasjon
Det er en trend innen knappdesign der nettsteder bruker to knapper side om side. Den ene er fylt, den ene er et spøkelsesstil. Begge inkluderer en sveveanimasjon som ytterligere fremhever to klikkbare valg.
Animasjon kan bidra til å få oppmerksomhet til knapper og til og med oppfordrer til klikk. Det har blitt et vanlig akseptert brukermønster for å inkludere en sveveanimasjon på knapper og gir en enkel signal til brukere at de skal engasjere seg.
Bare ikke gå over bord. Virvlende, spinnende, blinkende knapper er mer irriterende enn nyttig.
6. Gjør det stort nok å tappe
Knappene skal inneholde et klikkbart (tappbart) område som er minst 10 millimeter i diameter, og større er alltid OK. Dette rådet kommer fra en studie av MIT Touch Lab som så ut en fingerputestørrelse i forhold til berøringsenheter.
La oss sette det i perspektiv. Den typiske tasten på et fysisk datamaskintastatur er 15 millimeter med 15 millimeter. Det er et godt mål. (Bare glem ikke å redegjøre for forskjellige skjermstørrelser slik at knappen ikke går tapt på små skjermer.)
Hvis du trenger å bruke mindre knapper, kan du vurdere å legge til en bred klikkeradius til den. På den måten hvis brukeren savner knappene selv, er det nok plass rundt det slik at ønsket handling fremdeles skjer. (Besøkende på nettstedet vil takke deg.)
7. Bruk en kjent stil
Det er noen få generelle knappestiler som alle er kjent med. Bruk en av dem.
- En rektangulær fylt knapp med firkantede kanter og tekst inni
- En rektangulær fylt knapp med avrundede kanter og tekst inni
- En rektangulær fylt knapp med en synlig fallskygge (over)
- En rektangulær spøkelsesknapp
- Enkle sirkelknapper, ofte brukt i nederste høyre hjørne for å betegne støtte, hjelp eller chat
8. Sett på et forventet sted
Ikke bare trenger knappene å vises og fungere forventet, de må også være plassert et sted som brukerne vil se etter dem.
- For hjemmesider inkluderer dette knappplassering under en hovedoverskrift eller tekstblokk. Knappene er vanligvis venstre på linje med teksten eller i midten av skjermen.
- For skjemaer vises knappene etter innganger. Noen enkeltinputformer justerer knappen på den samme raden til høyre for inngangen.
- Generelle CTA-knapper vises rett under innholdet de refererer til.
- Knapper for å spille av eller starte en video eller et spill er ofte i midten av forhåndsvisningsskjermen.
- Handlekurv eller e-handel knapper er vanligvis i øverste høyre hjørne.
9. Ikke glem tilbakemelding
Reagerer knappen på samhandling? Forsikre deg om at det er en åpenbar tilbakemeldingssløyfe som er inkludert i knappen for grensesnittdesign.
Gi en visuell eller instruksjonsvisning om at knappen har gjort jobben sin. Noen knapper vil kreve mer arbeid enn andre. Knapper som lenker til en annen side eller nettsted, for eksempel, gir tilbakemelding om at knappen har fungert hvis den nye siden lastes inn. En skjemainnleveringsknapp kan gi en "takkemelding" på skjermen hvis informasjonen sendes riktig.
10. Bruk knapper med vilje
For mange knapper skaper kaos.
Bruk knapper der de gir mening. Ikke overbelast design med knapper overalt. Brukere vil ikke ha en klar ide om hvor og hva som er viktigst å klikke.
Lagre knapper for bruk med mål på nettstedet. De skal få besøkende til elementene som er viktigst i det generelle designet.
Konklusjon
En webside-knapp er et element som konverterer din oppfordring til handling til et resultat. Ta deg tid til å tenke på dette designet, fra farge til funksjon til mikrokopi. Testknappdesign for å sikre at du har den mest funksjonelle versjonen i grensesnittet.
Hvis du har en knapp som fungerer, ikke fall i fellen av trender og endre design. Når det gjelder knapper, bør funksjonen være førsteprioritet.
