Forskjellen på UI og UX

Før vi dykker ned i salgspsykologien, må vi oppklare den vanligste misforståelsen i webbransjen: Forskjellen på UI og UX.

  • UI (User Interface / Brukergrensesnitt): Dette er hvordan siden ser ut. Det er den visuelle overflaten: Fargepaletten, skrifttypen (typografien), hvor tykke rammene rundt knappene er, og bildene. UI appellerer til øynene.
  • UX (User Experience / Brukeropplevelse): Dette er hvordan siden føles å bruke. Det er logikken bak. Hvor lett var det å finne kontaktinformasjonen? Forsto brukeren umiddelbart hva du selger? UX appellerer til hjernen.

Du kan ha verdens vakreste UI (nydelige farger og animasjoner), men hvis kunden ikke finner frem til "Kjøp"-knappen, er UX-designet elendig, og du taper penger.

Kognitiv belastning: Hovedfienden din

Kjernen i alt UX-design er å redusere kognitiv belastning. Dette er mengden mental energi en bruker må bruke for å forstå nettsiden din.

Hvis kunden må lese en lang, akademisk avhandling for å skjønne hva programvaren din gjør, har du for høy kognitiv belastning. Hvis de må fylle ut 14 felt i et skjema bare for å få et tilbud på vask av huset, har du for høy kognitiv belastning.

⚠️ Don't Make Me Think: Boken med dette navnet (av Steve Krug) er UX-designernes bibel. Hovedregelen er: Hvis kunden må stoppe opp og tenke på hvordan de skal bruke nettsiden din, har du feilet.

3 UX-prinsipper som øker konverteringsraten

1. Hick's Law: For mange valg dreper salget

Hicks lov sier: Tiden det tar for en person å ta en beslutning, øker med antall valgalternativer.

Tenk deg at du går inn på en restaurant og får en meny med 300 retter. Du blir handlingslammet. Slik er det på nettsider også. Hvis forsiden din har 10 forskjellige Call-to-Actions ("Les mer", "Se priser", "Abonner", "Kjøp nå", "Følg oss", "Les blogg"), ender brukeren ofte opp med å ikke klikke på noen av dem.

Løsningen: Kutt ned. Hver side bør ha ett tydelig hovedmål. Gjør den primære knappen (f.eks "Be om tilbud") stor og fargerik. Hvis du må ha en sekundær knapp (f.eks "Les mer"), gjør den diskret (kanskje bare en tekstlenke eller ghost-button).

2. F-Mønsteret (Slik leser vi på nett)

Heatmap-analyser (som sporer hvor brukerne ser på skjermen) viser at vi ikke leser nettsider som en bok (fra ord til ord). Vi skanner dem i et F-mønster:

  • Først leser vi horisontalt over toppen (derfor er logoen oppe til venstre, og menyen til høyre).
  • Så flytter vi øynene litt ned, og skanner horisontalt igjen, men ikke like langt (overskriften).
  • Deretter skanner vi raskt nedover venstre side av skjermen (etter bullet points eller nøkkelord).

Løsningen: Plasser ditt viktigste verdiforslag (hva du tilbyr og hvorfor de skal bry seg) i toppen til venstre. Bruk kulepunkter (som disse!) i stedet for lange avsnitt.

3. Fitts' Law: Knappens størrelse og plassering

Fitts lov (opprinnelig fra ergonomi) sier at tiden det tar å flytte musepekeren (eller tommelen på mobil) til et mål, er avhengig av avstanden til målet og størrelsen på det.

Dette høres kanskje åpenbart ut, men utallige bedrifter glemmer det, spesielt på mobil.

Løsningen: Kjøpsknapper må være massive. Spesielt på mobil (hvor vi designer for det vi kaller "The Thumb Zone" – tommelsonen) må viktige handlinger plasseres nederst på skjermen, i umiddelbar rekkevidde for tommelen.

📊 Statistikken bak UX: Ifølge Forrester Research kan et veldesignet brukergrensesnitt (UI) øke konverteringsraten med 200%, mens strategisk UX-design kan øke den med hele 400%. UX er ikke en kostnad, det er den beste investeringen du kan gjøre i bedriften.

Slik implementerer vi UX hos WebPlug

Vi starter aldri med å tegne et pent bilde. Før vi skriver en eneste linje med kode, gjør vi følgende:

  1. Vi kartlegger "User Journeys" (brukerreiser) for å forstå akkurat hvilken vei kunden må gå fra de lander på siden, til de kjøper.
  2. Vi identifiserer friksjonspunkter: Kan vi fjerne to felt fra kontaktskjemaet? Er teksten for tung?
  3. Vi designer "Mobile-First", for vi vet at 80% av kundene dine sannsynligvis besøker deg fra sofakroken med mobilen i hånden.