loader

Guidelines til at designe knapper til web

Guidelines til at designe knapper til web

Skrevet af: Erik Holflod Jeppesen | 12. juli 2018 | 10 min. læsning

Knapper på hjemmesider og User Interfaces spiller en afgørende rolle for brugeroplevelsen og konverteringsraten. Ved webshops er en “læg i kurv”-knap ofte det primære “call to action”-element og har derfor en stor betydning. I dette blogindlæg vil jeg belyse nogle principper, som er gode at følge, hvis du skal designe interaktive knapper.

1) Brugerne må ikke være i tvivl om, at de kan klikke på knappen

Desto længere tid en bruger skal anvende på at aflæse et design, og hvordan han skal interagere med det, desto ringere er designet – kort sagt.

I et user interface og på et webdesign må brugerne ikke være i tvivl om, hvad der kan klikkes på, og hvad der ikke kan. Det første punkt i dette indlæg  er derfor ret logisk: Dine knapper skal også ligne knapper.

Vi anvender vores tidligere erfaringer og logiske sans for visuel kommunikation til at afkode, hvordan et element i et user interface eller et webdesign skal anvendes. Der er nogle hyppige faktorer, som har en betydning for, om en knap ligner en knap:

  • Størrelse
  • Form
  • Farve
  • Skygge
  • Placering
  • Hover-effekt (når musen holdes over objektet)

Desværre er det ofte, at mange designere og hjemmesider ikke formår at få førnævnte punkter til at gå op i en højere enhed, og det resulterer i, at de besøgende bruger (for) lang tid på at afkode webdesignet – og skal altså forsøge sig frem for at finde ud af, hvilke elementer der er klikbare.

Så uanset hvor flot et design du laver, så er det ligegyldigt, hvis brugerne ender med en følelse af frustration, fordi designet både er besværligt at aflæse og interagere med.

Knapper til computer versus mobil

På computeren har brugerne mulighed for at “undersøge”, om et element er klikbart eller ej. Det gør de ved at holde musemarkøren over f.eks. en knap og ser om der kommer en hover-effekt, hvilket kan være:

  • Ændring af objektets form
  • Farveskift
  • Skygge-effekt
  • En tekst bliver fed eller får en anden farve

Brugerne på mobil har ikke samme mulighed. Det er derfor ofte sværere at afkode et mobilt design. Samtidigt er det vigtigt, at man som designer og udvikler bruger ekstra energi på et user interface eller webdesign til mobilen. På mobilen skal brugerne nemlig “tappe” på et element for at finde ud af, om det er interaktivt og om det kan føre dem videre i købsrejsen.

Som designer må du aldrig tro, at et element i dit UI-design er åbenlyst for brugerne; De sidder ikke med samme baggrundsviden og erfaring.

Gør brug af de mest gængse former for knapper

Knapper kan designes på mange forskellige måder, men der er selvfølgelig nogle, som er mere almindelige end andre. Her er de mest klassiske og brugte knapper, som uden tvivl vil falde i god smag hos brugerne:

  • Fyldt knap med firkantede hjørner
  • Fyldt knap med runde hjørner
  • Fyldt knap med skygger
  • “Ghost”-knappen (Tynde kanter og transparent baggrund)

Blandt disse eksempler, så vil brugerne med det samme vide, at de i hvert fald kan klikke på den knappen med skygge. Når et objekt har skygge, så skaber det en effekt af dimensionalitet, og når brugerne ser det, så ved de med det samme, at de kan klikke på objektet.

2) Placering af knapper

Knapper bør være placeret der hvor brugerne nemt kan finde dem – og hvor de regner med at de skal være. Ved webshops er knappen tit den primære “call to action” og du skal derfor ikke gemme den af vejen, men placere den et logisk sted.

Sørg for at knappen differentierer sig fra det resterende layout: Her er det en god idé at anvende en farve, som ikke er brugt så mange andre steder på webdesignet.

Ved en produktside på en webshop bør knappen også være synlig over folden, dvs. før man scroller ned.

1) Placeret over folden

2) Grøn = skiller sig ud

3) Teksten beskriver handlingen

3) Teksten på knapperne

Hvis teksten på dine knapper blot er generiske, kan de være misvisende, hvilket resulterer i frustration hos dine brugere. Du skal derfor sørge for, at teksten på knappen beskriver den handling, der sker, når man klikker på knappen. 

Den dårlige tekst: Teksten “OK” beskriver ikke helt, hvad der sker, hvis man klikker på knappen. Og hvad sker der, hvis man klikker på knappen “fortryd”?

Den gode tekst: Så i stedet for at bruge en tekst som “OK” for at slette en fil, så er det bedre at bruge teksten “slet fil” på knappen.

For at sætte knappen mere i fokus, kunne man give den en grøn farve, såfremt det at slette en fil skulle være en “normal” handling i situationen. Hvis handlingen er mere “risky”, så kunne knappen få en rød farve.

4) Den rette størrelse

Desto større knappen er, desto mere vigtig bør den være, i og med den bliver mere fremtrædende.

Hvis du har to knapper ved siden af hinanden, men du rent faktisk ønsker at dine besøgende helt skal klikke en bestemt én af de to knapper, så kan du differentiere knapperne ved hjælp af farve og størrelse.

Eksempel: Sleeknote har to knapper ved siden af hinanden, hvor “Start a 7-Day Free Trial”-knappen skiller sig ud, da målet er at få de besøgende til at starte en gratis prøveperiode.

Tilpas dine knapper til mobile brugere

Ofte ved mange apps eller mobile webdesigns, så er knapperne alt for små, hvilket ender med at brugerne klikker på det forkerte element.

Til venstre: Den rette størrelse. Til højre: Knapperne er alt for små.

5) Undgå at give brugerne for mange muligheder

For mange knapper og muligheder er et velkendt problem på mange hjemmesider. Når du tilbyder brugerne alt for mange muligheder, så er det svært for dem at tage en beslutning. Sørg altid for at skære ind til benet, når det kommer til designet på en hjemmeside, et user interface eller en app og fremhæver den vigtigste knap; Altså den vigtigste handling, som du ønsker, at dine besøgende skal tage.

For mange knapper, er lig for mange muligheder, hvilket betyder, at det er svært at tage et valg.

Konklusion

Selvom knapper er et helt standard objekt på en hjemmeside, så spiller de en stor rolle for ens konverteringsrate og hele brugeroplevelsen. Det er værd at lægge mange tanker bag designet af sine knapper og hvordan de skal opstiles.

Et af de vigtigste punkter er, at dine besøgende ved, at en knap er en knap og at den kan klikkes på.

Comments

Tilføj kommentar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *