Gør ikke som Amazon på mobilen

Amazon.com har i mange år været best practise på nettet indenfor e-handel, men dette gælder ikke på mobilen. Lad mig forklare hvorfor:

Den bedste måde at forklare dette på, er ved at give dig et konkret eksempel fra min nye bog.

Eksemplet er baseret på en repræsentativ tænke-højt brugertest af hjemmesiden, som er foretaget i samarbejde med danske Usertribe.

Kunden vil købe jeans 
Lad os antage, at en pige gerne vil købe et par nye jeans. Hun går ind på forsiden af Amazon.com og trykker på “Shop by Department”:

Amazon1

Det starter fint, da hun herefter får en overskuelig oversigt, hvor hun nemt og enkelt kan trykke på “Clothing, Shoes & Jewelry”:

Amazon2

Men så går det galt. Menuen der kommer frem er meget lille og hun har svært ved at ramme “Women” med sin finger. Dette kaldes populært for “Fat Finger Syndrome”, hvilket er et udtryk for en hjemmeside, hvor det er svært at ramme menupunkter, knapper, mv. med sin “fede finger”, hvilket er et problem flere steder på Amazons mobile hjemmeside:

Amazon3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Efter en ihærdig indsats rammer hun “Women” menupunktet og kommer nu ind på en side, hvor der ikke er nogen tydelig overskrift og hun skal scrolle 3 sider ned i bunden af siden, for at finde frem til hjemmesidens navigation, hvor hun trykker på “Clothing” menupunktet:

Amazon4
Dette fører hende ind på en tilsvarende uoverskuelig side, hvor hun skal scrolle hele 4 sider for at komme ned i bunden af siden til menuen, hvor hun trykker på “Jeans”. På dette tidspunkt i testen begyndte flere kunder helt forståeligt at blive frustrerede over, at de skulle scrolle så meget blot for at navigere:

Amazon5

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Men, det bliver desværre værre endnu. Pigen ønsker et par jeans i sin egen størrelse og vil derfor tilpasse produktudvalget. For at kunne gøre dette, skal hun igen scrolle fire sider for at se en oversigt over alle jeans, hvor hun trykker på “Filter” knappen:

Amazon6
Dette tager hende ind på en underside, hvor et menupunkt der hedder “Special Sizes” er den eneste mulighed hun har for at vælge størrelser:

Amazon7

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Da hun trykker på “Special sizes” kommer hun ind på en underside, hvor hun kun kan vælge imellem “Petite” (meget små) eller “Plus Size” (meget store) størrelser. Hun har altså ikke mulighed for at vælge nogle jeans i sin størrelse og giver derfor op med at finde frem til dem på Amazons hjemmeside.

Her vil jeg ikke gengive ordret, hvad nogle deltagerne i brugertesten rent faktisk sagde, men jeg vil gerne røbe, at det var ganske upæne ord – her i en censureret udgave:

Amazon8

Hvad er det der går galt for Amazon.com? Kort forklaret er deres problem, at de har udarbejdet en kombination af en responsive og en adaptive mobilløsning, hvor de har placeret indholdet fra hjemmesiden til tablet og computere hen over navigationen på mobiltelefonen:

Amazon9.1
Det betyder, at kunden skal scrolle hver gang hun ønsker at vælge et menupunkt eller at tilpasse en produktoversigt, hvilket naturligvis er en ganske frustrerende købeoplevelse.

Hvad skulle Amazon gøre anderledes?
Amazon burde implementere en navigationsstruktur der passer til måden kunderne navigerer på deres mobiltelefon, i stedet for at vælge en teknisk løsning der er nemmest for dem at implementere.

Dette kan de enten gøre ved at placere navigationen øverst i siden og så indholdet nedenunder, eller vente med at vise indhold før kunden har navigeret tilpas langt ned i menustrukturen.

Min nye bog giver dig løsningen
Hvis du er interesseret i at lære, hvordan du selv bygger en navigation til din virksomheds mobilsite, så:

>> Skriv dig op til min nye bog (det er uforpligtende) 

Bogen giver dig en komplet metode, der side-for-side viser dig, hvordan du bygger en best practise navigation du kan implementere direkte på din egen hjemmeside.

Kommentér gerne indlægget! 

Posted in Mobil e-handel, mobile, Responsive design.

Skriv et svar

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