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

Rie Larsen
Af Rie Larsen · 26 Apr 2020 · Læsetid: 6 min.

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.


Indholdsfortegnelse

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.

Zalando produktside visuelt hierarki

Zalandos produktside


Sømods Bolcher - produktside visuelt hierarki

Sømods Bolchers produktside


Imercos produktside visuelt hierarki

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.


Rie Larsen
Rie Larsen

Om artiklens forfatter - Rie Larsen
Rie Larsen har en bachelor i Web Development fra Cphbusiness, endvidere har hun de seneste 3 år arbejdet, først som studentermedhjælper og efterfølgende fuldtid, i online marketing og Magento bureauer. Hun har derfor en stor ekspertise indenfor online marketing og hvordan teknikker indenfor online marketing integreres med webshop løsninger bygget i Magento.

Rie Larsen er certificeret i Google Analytics.

Vidensdeling er ikke noget vi siger
Det er noget vi gør

13 Jan 2020

Hvad er en god konverteringsrate for webshops? (Den er højere end du tror!)

Mange webshopejere er begyndt at fokusere på konverteringsoptimering (CRO). Ét af de primære KPI’er for CRO er makro-konverteringsraten. Konverteringsraten siger helt konkret noget om, hvor god din webshop er til at konvertere besøgende til betalende kunder. Men hvad er en god konverteringsrate for netop din branche i...

Julian F. Christmas

Skrevet af Julian F. Christmas
Direktør @ Intelligo Denmark ApS

4 Jun 2019

Sådan optimerer du din mobile konverteringsrate [Guide 2019]

I dag kommer op til 80% af din trafik fra mobile enheder, men hvordan er konverteringsraten på mobiler set i forhold til desktop? Hvis du gør som mange andre, så er den ikke god. En mobiloptimering af din webshop handler ikke kun om, at den skal være responsiv. Det handler om at give brugeren en god oplevelse.

Rie Larsen

Skrevet af Rie Larsen
Webudvikler @ Intelligo Denmark ApS

20 Sep 2018

7 simple måder at skrive produktbeskrivelser der sælger

Det er en let fejl at begå. Selv professionelle tekstforfattere laver den; at skrive produktbeskrivelser, der blot beskriver dit produkt. Hvorfor er det forkert?   Fordi produktbeskrivelsen skal sælge dit produkt.I denne artikel vil vi sammen kigge nærmere på 7 simple måder, som du kan skrive produktbeskrivelser d...

Julian F. Christmas

Skrevet af Julian F. Christmas
Direktør @ Intelligo Denmark ApS