Få styr på det visuelle hierarki og øg din konverteringsrate

Vi går meget op i æstetik og det visuelle udtryk af en hjemmeside som mennesker, især her i Skandinavien. Æstetik og design forblænder os af og til, og ofte tænker designerne slet ikke på den kommercielle hensigt, når de udarbejder designet til webshops.

Jeg kan allerede afsløre for dig nu, at du bør fokusere mere på konverteringsfokuseret design frem for æstetik og design, hvis dit mål er at sælge mere på din webshop.

Hvad er det visuelle hierarki?

Det visuelle hierarki...
•   er vægten af de forskellige elementer på siden
•   beskriver hvad brugeren opfatter først
•   påvirker hvad brugeren husker fra en side

Analysering af det visuelle hierarki

Når du kigger på din webshop, bør du analysere og tænke over det visuelle hierarki på hver side - især siderne som brugerne rammer i deres købsflow.

Et optimeret visuelt hierarki er med til at prioritere de vigtigste elementer og understøtte budskaber på bedste vis. Ved at optimere det visuelle hierarki kan du altså lede brugeren let og elegant gennem købsflowet på din webshop uden der opstår tvivl og hindringer, som får brugeren til at forlade din webshop - uden at foretage et køb.

Tag et nærmere kig på din webshop og stil så dig selv spørgsmålene:

•   Er min CTA knap (Call to action/vigtigste knap) mest iøjnefaldende - ledes øjet naturligt hen på den først (fx “Læg i kurv” på produktsiden)?

•   Er der nogle elementer, som stjæler opmærksomhed på siden - og stjæler de fokus fra min CTA knap?

•   Er siden brugervenlig og nemt at finde rundt i? Viser prioriteringen af elementer hvad der er det vigtigste indhold på siden?

Sådan får du styr på det visuelle hierarki din produktside

Lad os prøve at tage udgangspunkt i dine produktsider, så du kan øve dig i at optimere og prioritere indholdet for at forbedre det visuelle hierarki.

Målet er at sørge for, at der er et helt klart visuelt hierarki på siden.

Skab blikfang på CTA

Den primære CTA knap, som i de fleste tilfælde på en produktside er “Læg i kurv”, bør have en klar kontrast farve, så den tiltrækker sig opmærksomheden. Det menneskelige øje vil automatisk skelne denne knap fra resten af siden, hvis den tiltrækker sig opmærksomheden, både i form af størrelse, farve m.m.

Har du flere knapper på siden, bør de sekundære knapper have en anden farve, så de ikke snupper al opmærksomheden fra den primære knap.

Psst… Er din knap ikke en farve, der springer direkte i øjnene, så opsæt en splittest og test om det gør en reel forskel, hvis du ændrer farven på knappen.

Fokus på prioritering af indhold

Læg fokus på at prioritere indholdet. Vigtig information bør placeres øverst på siden - produktets navn, pris og generel information er fx vigtig information på en produktside.

Ligeledes er “Læg i kurv” knappen også vigtig at placere højt på siden, da denne konvertering er formålet på en produktside.

Eksempler på webshops med et optimeret visuelt hierarki

Her nedenfor har vi samlet et par eksempler på webshops, som har optimeret det visuelle hierarki på produktsiden, herunder bl.a. i form af at deres primære knap har fået det fulde fokus.

Zalandos produktside

Sømods Bolchers produktside

Imercos produktside

Skab et bedre købsflow med et optimeret visuelt hierarki

Genkendelighed og en rød tråd gennem din webshop hjælper både brugeren - men også dig til at øge konverteringsraten.

Brugeren kommer ind på din webshop, og brugeren vælger et produkt som de ønsker at købe.

Brugeren skal nu blot klikke på “Læg i kurv”, og dernæst gå til Indkøbskurven og til sidst checkout, hvor de afslutningsvis skal indtaste deres oplysninger og trykke “Gennemfør bestilling”.

Men vidste du godt, at du kan holde brugeren i hånden og hjælpe dem på vej mod “Gennemfør bestilling” med et optimeret visuelt hierarki?

Sørg for at det visuelle hierarki på tværs af disse sider er brugervenligt. Dette indebærer bl.a., at du først og fremmest skal sørge for at have styr på det visuelle hierarki på de individuelle sider, og dernæst så tjek efter om den primære knap (CTA) på hver side har samme farve og form.

Ved at holde “Læg i kurv”, “Gå til bestilling” og “Gennemfør bestilling” i samme farve og størrelse, så bliver der skabt en sammenhæng og en rød tråd, som gør at brugeren sænker deres kognitive load, og at det visuelle hierarki automatisk leder dem gennem købsflowet uden problemer.

Dobbelttjek gerne både indkøbskurv og checkout siden, og sørg for at kun den primære knap har kontrastfarven, og at de andre sekundære knapper får en anden farve, så den primære knap får al fokus.