Responsive design og e-handel

Et af de spørgsmål jeg bliver mødt mest af for tiden lyder: “Hvad med responsive design – hvad gør vi for at optimere på tværs af nettet, tablets og mobile?”. Det er et rigtigt godt spørgsmål, som jeg vil kaste lidt lys over i dette indlæg.

Det simple svar
Det mest korrekte og simple svar lyder: “Du skal bygge en løsning, der er optimeret til hvert enkelt platform”. Da de fleste virksomheder dog har begrænsede budgetter, er dette sjældent den løsning der bliver valgt.

Responsive design er tillokkende
På papiret er der mange fordele med responsive design: man kan operere med én platform, der tilpasser sig www, tablet og mobile afhængig af, hvilken platform / device man tilgår en hjemmeside fra. Dette kan samtidigt begrænse omkostningerne til design og især programmering, hvilket bestemt er tillokkende.

E-handel har en forøget kompleksitet
Når man bygger indholdsbaserede hjemmesider, såsom corporate websites, nyhedssites, eller lignende, så har responsive design mange fordele, da det udfra brugerens synsvinkel i høj grad handler om at kunne navigere og søge efter informationer.

E-handel har dog sine egne spilleregler, da der her i højere grad er tale om, at en kunde skal kunne gennemføre en række transaktioner – såsom et købeflow – hvilket stiller større krav til interaktionsdesignet.

Stor forskel på Nettet / tablets og mobile
Rent interaktionsmæssigt er der nemlig store forskelle på en hjemmeside / en tablet, samt en smartphone. Den primære forskel er den lille skærmstørrelse på mobilen, hvilket basalt set stiller større krav til interaktionsdesignet. Det er med andre ord mere kompliceret, at gennemføre en bestilling på sin mobiltelefon, end det er på en hjemmeside eller en tablet.

50% lavere konverteringsrate
Den direkte konsekvens af dette er, at konverteringsraten i gennemsnit er ca. 50% lavere på en smartphone end på en hjemmeside. Typisk er konverteringsraten på en tablet lidt lavere end en hjemmeside. Årsagen til dette er i høj grad, at man har forsøgt at designe én responsive design løsning, der kan fungere på tværs af alle platforme.

Dette er dog ikke den optimale løsning, da eksempelvis et bestillingsflow på en smartphone stiller større krav til måden hvorpå informationer, knapper og især funktionelle flows er opbygget. Her er det min erfaring, at det er en fordel at bygge en særskilt e-handelsløsning til smartphones, hvor man simplificerer og begrænser informationsmængden i de primære flows kunderne skal gennemføre. Således er disse oplysninger og handlinger tilgængelige i det man kan kalde “funktionelle loops”. Dette er “loops”, hvor kunden vælger størrelser til sine jeans på en særskilt side, læser om prisdetaljer på en særskilt side, etc.

En god løsningsmodel
Hvis du er ansvarlig for en e-handelsløsning, kan du bygge én platform der tager udgangspunkt i responsive design til nettet og de særskilte funktioner og muligheder der findes på tablets. Hernæst kan du tilpasse denne løsning særskilt til mobile, hvor du optimerer navigationen, søgningen, købeflowet, etc. til et mindre interface og andre smartphone-specifikke funktioner.

Kommenter gerne
Jeg håber, at du kan bruge dette indlæg som en del af jeres interne diskussioner i.f.t. brugen af responsive design?

Posted in mobile, Responsive design.

26 Comments

  1. Enig – jeg synes det er en god idé at bygge en responsive løsning, og derefter optimere de vigtigste sider direkte til mobile. Det har jeg set gjort, og det virker rigtig godt.

    • Hej Lasse.

      Tak for input.

      Min pointe med indlægget er bl.a., at man især bør optimere navigation, søgning og købeflow til mobile, da det er så markant anderledes end tablet / www p.g.a. det lille interface.

      Ha en super dag!

      Dbh,

      Benjamin

  2. Tak for indlægget Benjamin

    Jeg er enig. Vi eksperimentere pt. med responsivt layout hos os. Og jeg tror det er den retning vi kommer til at gå. Men ja det er super vigtigt at få optimeret på de her områder med navigation, søgning og flow.

    Vi eksperimentere med at have en markant forskellig navigation fra mobile til desktop. Hvor mobile er en off-canvas løsning der kan gå i niveauer. Lidt som man ser i gmail og facebook appen på iPhone. Hvor du har navigation der er gemt væk i siden. Det synes jeg fungere rigtig godt. Jeg synes http://www.currys.co.uk/gbuk/index.html har lavet en rimelig elegant responsiv løsning.

    • Hej Mads.

      Godt at høre fra dig – det lyder som nogle spændende “eksperimenter” I kører.

      Jeg har bygget / optimeret 5-6 mobilløsninger i år baseret på den metode jeg anbefaler og det virker rent kommercielt. Flere steder har vi dog valgt at udarbejde en helt særskilt mobil løsning til smartphones.

      Den største forståelsesmæssige udfordring lige nu synes jeg består i, at mange taler om “mobile”, hvor man slår tablets og smartphones over én kam. Det er min holdning, at dette er en fundamentalt forkert, idet der er meget store forskellige på tablets og smartphones.

      Måske der kommer en bog om dette fra min side i det nye år? 🙂

      Dbh,

      Benjamin

      • Jeg kunne ikke være mere enig. Jeg ved ikke hvor mange foredrag jeg nu har hørt om mobile. Og de slår ALTID mobile og tablet sammen. Det er helt forkert, da det er 2 meget forskellige platforme som har meget forskellige interaktionsmæssige udfordringer.

        En ny bog ville ikke være dårligt om dette område 😀

        • Hej Mads.

          Jeg har helt samme oplevelse og opfattelse.

          Det skyldes nok, at det trods alt fortsat er et relativt nyt territorium, hvor man først opnår denne “indsigt”, når man begynder at arbejde med detaljerne.

          På trods af dette, er det dog lidt tankevækkende, at man blander tablet og smartphones sammen, når nu forskellen er så stor.

          Ha en rigtig god weekend 🙂

          (Mon ikke der kommer en bog om emnet).

          Dbh,

          Benjamin

          • Jeg synes det er en interessant diskusion omkring forskellen mellem mobile og tablet. Funktionerne i browsen er jo de samme og input er via fingeren på begge dele.
            Hvor går grænsen mellem de to, efterhånden som de forskellige skærmstørrelser nærmer sig hinanden, med større telefoner og mindre tablets? Det er vel næppe blot et spørgsmål om du kan ringe fra den eller ej?

          • Hej Morten – prøv at læse mit seneste indlæg, hvor jeg giver et konkret eksempel på dette:

  3. Super godt indlæg. Jeg har erfaret noget af det samme med de kunder jeg har der har responsive vs. mobiloptimerede webshops.

    Det er også noget jeg selv oplever som netbruger, når jeg besøger en webshop via en iPad og den så har et responsive design. Mange gange ødelægger det brugeroplevelse, hvor desktop versionen måske ville have været bedre at vise for mig.

    • Hej Jacob.

      Mange tak for din kommentar 🙂

      Det er interessant at høre andres erfaringer, når det kommer til mobile og tallene taler jo oftest sit eget tydelig sprog.

      Dbh,

      Benjamin

  4. Jeg må være meget enig i, at man skal passe på. Jeg synes trenden er, at mange synes responsive designs er det nye sort og bare kaster sig ud et eller andet standard design og så læner sig tilbage og tænker “Nu er det jo responsivt, så er jeg på sikker grund.”

    Tak for en god artikel om emnet.

  5. Hej Benjamin,

    Tak for endnu et godt indlæg.

    Hvad er din erfaring med at hjemmesider er responsive på en laptop/desktop, når brugeren ændre størrelsen af browservinduet?

    Elementerne bliver jo flyttet rundt på og nogen forsvinder måske og andre kommer frem. Så det kan virke rodet.

    Syntes du helt man skal slå det responsive fra på andet end f.eks. iPhone og iPad?

    Hilsen
    Peter Lauge

  6. Godt indlæg. Og efterhånden et fact vi ikke kan tillade os at ignorere – det skal bare spille på alle skærmbredder og formater 🙂 above fold hedder ikke 800px længere heller. Tak for fint indspark! Nyder at følge med.

  7. Hej Benjamin

    Har brugt dit indlæg som inspiration. Men det er en svær problematik. Personligt vil jeg på tablet helst se den almindelige side, altså en side jeg kan genkende. Så er der kun nogle udfordringer med knapstørrelser osv.

    @Morten du har ret med above fold, men scroll er væsentligt mere intuitivt på tablet, så jeg er ikke så bange for at indhold længere nede bliver glemt.

    Er helt enig i at mobil kræver en anden navigation, da vi efterhånden har vænnet os til “best practice” i apps.

    Benjamin du tweetede at du brygger på noget stort. Hvornår løftes sløret for dette?

    • Hej Niels.

      Mange tak for input – jeg er snart klar til at røbe mine nye planer, efter et godt stykke tid med tavshed 😉

      God vind herfra 🙂

  8. Jeg har et par hjemmesider i tøj branchen hvor jeg ikke har implementeret responsive design endnu men jeg overvejer det. Det jeg kan se i mine GA tal er at bounce raten er meget højere på mobil end på tablet.

    Ud fra egne erfaringer og det som Jacob siger tænker jeg at det bedste måske ville være at koncentrere sig om en responsive mobil version også lade tablet brugere få en desktop version.

    @Mads Tak for sidst 🙂 Jeres topmenu er blevet meget mere overskuelig end den var før så thumps up!

  9. Hej Benjamin.

    Godt indlæg.

    Har du et eksemplet på et mobiloptimeret website, hvor de har delt valg af størrelse, prisdetaljer osv. op på flere sider? Vil gerne se det i action 🙂

    Mvh.
    Kenneth Hedegaard

  10. Hej Benjamin

    Tak for god artikel.

    Jeg savner dog lidt fokus på det jeg kalder “adaptive design”, hvor templaten renderes ud fra device detection. Jeg har endnu ikke set et rent tablet design som er lykkedes godt. Og jeg tænker også, at brugeren i langt de fleste tilfælde kan bruge desktop versionen på en ipad.

    Ser man på shops i udlandet, så har langt de fleste valgt at bruge desktop version på ipad og så have en seperat template til mobilen (ikke m.domæne.com!).

    Hvad er dine tanker omkring den løsning?

    MVH
    Thue Nielsen, Unoliving.com

  11. Du skriver at mobilkonvertering normalt er 50% lavere end via desktop er det det benchmark man kun skal forvente også med en mobil venlig side? Eller er kunderne ved at være så “mobile” at man skal forvente at adfærden kan nærme sig desktop brugerne? pt har vi ikke en særlig mobilvenlig side og her har vi allerede en konvertering er er “halvt så god” som desktop brugernes når vi kigger på tablet og mobil.

  12. Pingback: Stor forskel på tablets og smartphones - Benjamin Gundgaard

  13. Pingback: Er din webshop klar til Googles mobile first? - Benjamin Gundgaard

Skriv et svar

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