Top 10 usability-anbefalinger for mobil e-handel

Som forløber til et oplæg, jeg skal holde i FDIH-regi, er her de vigtigste usability-anbefalinger som du skal tænke på, når du designer e-handel til mobile enheder. Guidelines og entydige anbefalinger skal man altid passe på – for ingen digitale butikker er ens, og det samme gælder kunderne. Men måske kan denne liste virke som inspiration eller som huskeliste for dig, når du giver din e-handels-løsning et eftersyn.

1. Bevar alt indhold
Når e-handelsløsningen går fra “desktop-site” til “mobilsite” er det ofte fristende også at begrænse indholdssider, beskrivelser og sågar varekataloget. Der er jo mindre plads på de mobile skærme, og til tider er det teknisk krævende at etablere den eksisterende løsnings indhold i 1:1-udgave på en ny platform.

Men det er vigtigt at have som ideal, at alt indhold kan findes på den mobile platform: Hvis du begrænser varekataloget tror de mobile brugere pludselig, at du faktisk tilbyder et begrænset varesortiment. Det samme gælder produktbeskrivelserne: At brugeren sidder med sin mobiltelefons lille skærm ændrer ikke på, at han stadig er interesseret i detaljerede oplysninger om varen, inden han køber.

2. Tilpas formen
I og med, at du overfører alt det eksisterende indhold, er det tvingende nødvendigt at du arbejder med struktur og layout, så det mobile site bliver let at navigere i og overskue. Så først og fremmest skal du have konverteret dit “desktop-site” til en visning som understøtter, at det nu er “tykke fingre” og ikke en præcis musepil, som kunden navigerer med. De lange produktbeskrivelsessider kan f.eks. gøres mere overskuelige ved at opdele dem i relevante blokke der kan foldes ind og ud.

Silvan e-handel
En finger fylder meget på en mobil skærm. Derfor skal nethandlens layout tilpasses til den mobile platform.

3. Prioritér funktioner
Funktioner eller features fra desktop-sitet bør prioriteres nøje – det er ikke sikkert at de skal med på mobilsitet, selvom det dog er sandsynligt. Amazon.com er f.eks. kendt for “andre der købte denne bog, købte også”. Denne feature er så kendt og forbundet med købeoplevelsen på Amazon, at den selvfølgelig skal med – på trods af at pladsen er sparsom på mobilsitet.

Det kan være, at du tænker at et element som “opret ny bruger” kan “spares væk” på mobilsitet. Men det er farligt – flere og flere brugere gør mere og mere udelukkende på mobiltelefonen. Så selvom en brugeroprettelse på forhånd kan synes besværlig på mobiltelefonen, så er det ikke et argument for at udelade muligheden. Du risikerer at miste en kunde.

Superbest
Du kan også tilføje features på mobiludgaven. Det er f.eks. oplagt at indføre “find nærmeste butik”, når nu telefonen har en GPS indbygget.

4. Husk konventionerne
Du må aldrig tro, at du kan lave “skabelondesign”, dvs. kopiere et andet design 1:1 når du udarbejder din mobile netbutik. Men der er god grund til at se på de konventioner, som allerede er skabt af alle de andre mobile netbutikker – det er nemlig langt hen ad vejen her brugernes forventninger skabes. Der kan være særlige grunde til at netop din netbutik kan og bør bryde en konvention – men du skylder dig selv og din omsætning at kunne argumentere for hvorfor.

UX-konventioner i mobil e-handel

Lad dig f.eks. inspirere – men ikke diktere – af disse efterhånden etablerede konventioner i mobil e-handel:

  • Folde-ud-menuen med de tre streger (nogle kaleder den burger-menuen)
  • Logoet øverst
  • Kurv øverst, evt. til højre
  • Prominent søgefelt
  • Hvis du har et banner der roterer mellem forskellige billeder, så lad det aldrig være animeret, men lad det være brugerstyret (swipe-bart)
  • Hav synlige produkthovedkategorier på forsiden
  • Hav tydelig adgang til kundeservice nederst på sitet
  • Giv adgang til desktop-sitet nederst på sitet

5. Lav en god søgning
Søgning er om muligt endnu vigtigere på mobilsitet end på “desktopsitet”, fordi brugerne har endnu mere lyst til at søge. Den begrænsede plads får søgefunktionen til at virke endnu mere attraktiv for de målrettede brugere, da den skyder genvej igennem websitets navigationsstruktur. Af samme grund er det også endnu vigtigere at søgefunktionen virker rigtigt godt.

Mobil søgning

En god søgemaskine skal f.eks. kunne kende til varernes popularitet, så en søgning i f.eks. en netboghandel prioriterer “Harry Potter” højere end “Pottery Barn,” når en bruger søger på “potter”. Hvis søgningen virker rigtigt godt er der større sandsynlighed for, at du får en betalende kunde – han bliver nemlig bragt direkte til det, han leder efter. Herefter er der kun et check-out-flow tilbage at gennemføre.

6. Læg op til handling (call to action)
Tidens tendens til at prioritere “fladt design” må ikke forveksles med at købe-knappen træder utvetydigt frem som den mest markante. Desuden skal den gerne være synlig højt oppe på produktsiden, og hvis du har lange produktsider, er det en god ide at dublere den ned i bunden. Undersøgelser viser, at visuelt svage  købe- eller læg-i-kurv-knapper reducerer antallet af køb i netbutikkerne – og på mobiludgaven skal du være ekstra skarp med dette arbejde, fordi der er stor sandsynlighed for, at produktbilleder og produktbeskrivelser skubber knappen ud af det for brugeren synlige område.

Call to action
Der er ingen tvivl om, hvor “Læg i kurv” findes her – eller hvad der er den vigtigste funktion. Det er “call to action” i praksis.

7. Gør det let og tilgivende
Mobil e-handel er nødvendigvis forbundet med en vis mængde indtastning – f.eks. login, indtastning af navn og adresse, angivelse af leveringsdato, etc. Allerede på forhånd virker dette som en byrde for brugeren, og det er måske denne del, der stadigvæk afholder mange fra at shoppe på mobilen. Det giver dig til gengæld chancen for at give den overraskende gode oplevelse, når du gør check-out-processen og dens indtastninger så smidig som muligt. Du skal lave “clever defaults”, dvs. f.eks. autoudfylde med det land, du kan se brugeren befinder sig i, og du kan auto-indsætte byens navn, når postnummeret bliver tastet ind. Det kan virke som selvfølger, men det er det faktisk ikke på de mange mobile nethandler, der findes. Husk også at slå auto-correct fra på felter som oplagt ikke vil have gavn af at mobiltelefonens ordbog tager over (f.eks. adressefeltet).

Udfyld med tlf.nr.
Mange netbutikker (også de mobile) gør det let for brugeren at afgive adresseoplysninger via deres telefonnummer.

Driver du en blomsterbutik på nettet og bestiller brugeren en “mors dags-buket” kan du netop her lave imødekommende design ved at auto-udfylde netop mors dag som leveringsdag. Afhængigt af hvilken nethandel du driver vil der være adskillige af denne slags optimeringsmuligheder som kan gøre købsoplevelsen bedre.

Virker back-knappen under dit check-out-flow? Det bør den gøre – men ikke alene skal den virke, du skal også sørge for at brugerindtastninger bevares når brugeren hopper frem og tilbage mellem siderne. Ellers er der virkelig stor risiko for at genere så meget, at brugeren forsvinder inden handlen er gennemført.

8. Check-out skal være en tunnel
Når brugeren begiver sig i gang med check-out, skal du lave “tunnel-design” hvor der er så få forstyrrende elementer som muligt. Du kan f.eks. fjerne header-navigation og store footere på check-outsiderne. Modsat de mange fristelser ved kassen i det fysiske supermarked, gælder det nu om at distrahere så lidt som muligt – ellers er der risiko for at miste kunden, der jo nu i bogstaveligste forstand har dankortet oppe af lommen.

9. Billeder er (stadigvæk) vigtige
En afledt og ofte utilsigtet sideeffekt af mobiltilpassede sites er ofte, at man ikke kan zoome ind på billederne. Men det bør man kunne gøre på de fleste mobile netbutikker – for også her er brugerne interesserede i at se produkterne nøje efter i sømmene. Brugerne vil faktisk ofte se på produkterne i en overraskende detaljegrad. Man kan se det som en kompensation for, at brugerne ikke har det fysiske produkt i hånden.

10. Forstå kunderne
Ingen, der driver en netbutik vil sige, at de ikke kender deres kunder. Men det er vigtigt at holde sig ajour med, hvordan de faktisk benytter netbutikken. Er der også en fysisk butik, kan det være givtigt at dybdeinterviewe brugere herfra for at finde ud af, hvad deres behov faktisk er. Selvom man har kunderne tæt på til hverdag, er det ikke altid ensbetydende med at man ved, hvad de forventer af netbutikken. Gode metoder til at komme tættere på brugerne er f.eks. feltstudier/brugerobservation, dybdeinterviews og ikke mindst tænke-højt-tests.

Kom med dit input!
Har du andre bud på, hvad der er vigtigst at tænke på, når man skal designe den ideelle mobile e-handel? Har du evt. gode eksempler som kan inspirere andre? Så brug gerne kommentarfeltet!

Kategorier: Design, E-handel, Forretning, Mobil

2 Comments »

  1. I really like your blog.. very nice colors & theme.

    Did you design this website yourself or did
    you hire someone to do it for you? Plz respond
    as I’m looking to create my own blog and would like to
    know where u got this from. many thanks

Skriv et svar

Udfyld dine oplysninger nedenfor eller klik på et ikon for at logge ind:

WordPress.com Logo

Du kommenterer med din WordPress.com konto. Log Out / Skift )

Twitter picture

Du kommenterer med din Twitter konto. Log Out / Skift )

Facebook photo

Du kommenterer med din Facebook konto. Log Out / Skift )

Google+ photo

Du kommenterer med din Google+ konto. Log Out / Skift )

Connecting to %s