Stor forskel på tablets og smartphones

De seneste måneder har jeg talt på flere konferencer og seminarer om min nye bog. Jeg har lagt mærke til, at mange benytter udtrykket “Mobile” som en fællesnævner for tablets og smartphones, når der tales om responsive design. Dette er dog en farlig generalisering, når det kommer til e-handel.

Hvad er “Mobile”?
Udtrykket mobile dækker primært over tablets, phablets og smartphones. Disse enheder har alle det tilfælles, at du kan benytte dem til at gå på nettet, samt at de har en trykfølsom skærm.

E-handel har sine egne spilleregler 
Indenfor e-handel er der dog en meget stor forskel på, hvordan du designer en løsning til en tablet og en smartphone. Flere og flere rådgiver om, at dette løses ved at udarbejde én responsive løsning der går på tværs af computere, tablets, phablets og smartphones.

Som nævnt i et af mine tidligere indlæg vil du dog måske kunne huske, at dette ikke er en løsningsmodel jeg anbefaler, da de interaktionsmæssige forskelle fra en tablet til en smartphone er meget store. Dette skyldes primært at skærmen på en smartphone er markant mindre end skærmen på en tablet, der næsten har karakter af at være en computer.

Elgiganten gør det forkert 
Lad mig forklare helt konkret hvorfor, med udgangspunkt i Elgigantens hjemmeside (jeg skal med det samme nævne, at jeg har valgt denne hjemmeside idet den er repræsentativ for, hvor det går galt på mange hjemmesider og ikke fordi, at Elgigantens hjemmeside er værre end andre).

Her er deres forside set på en iPad:

elgiganten.ipad

 

Via hjemmesidens menu, kan jeg relativt simpelt navigere mig frem til en oversigt med Fladskærms TV, hvor jeg kan tilpasse (filtrere) udvalget i venstre side af skærmen:

elgiganten.fladskærm

 

Således kan kunden nemt og enkelt eksempelvis vælge kun at se “LED TV”:

led.tv

 

Elgiganten har valgt at lancere en “responsive” hjemmeside, således at indholdet tilpasser sig til smartphones, men de har ikke optimeret brugergrænsenfladen til smartphones.

Derfor er det også en helt anden og noget mere besværlig brugeroplevelse der møder kunden på en smartphone – især, hvis hun ønsker at tilpasse udvalget. Lad mig vise dig hvorfor.

Her går kunden ind på forsiden, hvor over halvdelen af siden omhandler cookies:

elgiganten.smartphone.1

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Efter flere forgæves forsøg, så prøver hun at fjerne cookie teksterne, men det lykkedes ikke, så hun må kæmpe med at finde menupunktet for “TV og Radio” og vælger derfor at gå direkte til “Fladskærms TV”:

elgiganten.smartphone.2

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

På denne side er over halvdelen af skærmen optaget af megen tekst og hun kan ikke se, hvordan hun kan sortere og tilpasse produkterne (som hun forventer er længere nede i siden):

Elgiganten.smartphone.3

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Kunden scroller forsigtigt ned i siden og finder efter en del søgen en “Filtrer” knap der relativt umotiveret er placeret midt imellem produkter, mv.:

elgiganten.smartphone.4

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Hun trykker på denne “Filtrer” knap, hvorefter en meget lang menu (venstremenuen på iPad’en) åbner sig. Den er svær at overskue, da den åbnes midt imellem produkter, mv. i stedet for på en særskilt underside:

elgiganten.smartphone.5

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Efter lidt overvejelse trykker hun på “LED TV” og kommer så tilbage til denne side, hvor hun ikke kan se, hvilke filtre hun har valgt:

Elgiganten.smartphone.6

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

50% lavere konverteringsrate
Som eksemplet ovenfor ret tydeligt viser, så er der en stor forskel på hvordan man navigerer og filtrerer på en tablet og en smartphone. Derfor kan du ikke – som i Elgigantens tilfælde – vælge at lancere én løsning der tilpasser sig begge enheder, hvis du ønsker at opretholde en god omsætning på smartphones.

Generelt set så er konverteringsraten på smartphones da også kun ca. 50% af konverteringsraten på en tablet, hvilket eksemplet ovenfor blot giver en af mange forklaringer på.

Lav en smartphone optimeret løsning
I min nye bog om mobil e-handel lærer du af de bedste sites i verden, hvordan du bygger en best case løsning til smartphones, således at du ikke falder i “responsive fælden”.

>> Skriv dig op til bogen her

NB: kommenter meget gerne og del dine erfaringer med responsive design og e-handel.

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

3 Comments

  1. Pingback: Denne responsive løsning anbefaler jeg - Benjamin Gundgaard

  2. Jeg har lige i den sidste uge siddet og arbejdet med nettop, brugerfladen på mobil. Jeg sad med samme problem som Elgiganten og tekstbloken mm.

    Men nogle få simple tiltag, ser det ud til at gøre en stor forskel for bruger oplevelsen.

    • Hej Thomas. Mange tak for dine input. Jeg er glad for at høre, at du tænker på denne problemstiling overfor dine kunder (brugere). Rigtig god arbejdslyst!

Skriv et svar

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