Hvordan ser den gode eCommerce-header ud?

Hvad består en moderne eCommerce-header af i 2020? Med afsæt i 28 af danskernes foretrukne eHandelssider, har jeg undersøgt de hyppigst forekommende elementer i hjemmesidernes headere. Siderne i denne undersøgelse er bl.a. fundet i FDIH’s e-handelsanalyse fra 2019.

FDIH’s årlige e-handelsrapport har i 2019 vist, at der er godt gang i de danske dankort, når det kommer til online handel. I 2019 blev der således handlet for 142 mia. kr., hvilket er en stigning på godt 13 mia. kr. i forhold til året før, hvor det samlede salg var på 129 mia. kr.

De 142 mia. kr. blev brugt på 222 millioner handler, hvilket giver en gennemsnits-kurv-størrelse på godt 1163 kroner.

Headeren – det første brugeren møder

Headeren er et interessant element, da det typisk er det første element, som brugeren møder. I dag er det populært at benytte store Hero-billeder, sliders og andre CTA’er, der placeres højt i det visuelle hierarki, men headeren følger typisk med, når brugeren bevæger sig rundt på siden, og er derfor særligt interessant.

Som Steve Krug – en helt i UX-sfæren – også påpeger, er god navigation uhyre vigtigt for den gode brugeroplevelse. Kan brugeren ikke finde det, som denne kommer på siden efter, mister man en potentiel kunde.

Mini-undersøgelsens fokus

I denne korte opgørelse, er der kigget på gængse elementer som fx:

  • formen på menuen/navigationen (vertikal, horisontal, hamburger, mega menu etc.)
  • er der en top bar?
  • hvor mange kategorier/valg præsenteres brugeren for (i hhv. primær-menuen og i top baren)?
  • hvilke e-handelselementer (kurv, konto mm) befinder sig i headeren?
  • fremtrædende CTA’er, søgefelter, fragt-informationer og lign.

Som webdesigner har det været interessant for mig at undersøge, hvad det er for nogle elementer, som brugeren med rette kan forvente at finde på en moderne webshop.

Igen er det værd at huske på Steve Krugs begreb om “konventioner”, der beskriver, hvordan vi alle har forventninger om, hvilke elementer vi kan finde på en hjemmeside (fx en menu), samt fx hvor denne er placeret på siden. Den gode brugeroplevelse kan således underbygges ved at give brugeren en tryg struktur og et genkendeligt layout.

Resultater

Mini-undersøgelsen fokuserer på i alt 24 sider:

Side Branche
Zalando.dk Mode
Just-eat.dk Fødevarer
Nemlig.com Fødevarer
hogm.dk Mode
Matas.dk Personlig pleje
Coop.dk Retail
Amazon.com Retail
DSB.dk Rejse
Danskespil.dk Sport og spil
Apple.dk Elektronik
Elgiganten.dk Elektronik
Ebay.com Retail
Saxo.dk Bøger
Boozt.dk Mode
Ticketmaster.dk Billetter
Zooplus.dk Bøger
Cdon.com Markedsplads
Coolshop.dk Markedsplads
Bilka.dk (old) Retail
Bilka.dk (new) Retail
Power.dk Elektronik
Wupti.com Retail
Asos.co.uk Mode
Salling.dk Retail
Magasin.dk Retail

Siderne er undersøgt i ved 1980×1080, hvilket er relevant i forhold til identifikation af fx hamburger-menuer, der ikke er standard-inventar på desktop-sider.

De undersøgte elementer

På de udvalgte sider, er følgende elementer blevet talt:

  • en”top bar”: 18
  • en hamburger-menu som primær-menu: 5
  • en “normal” navigations-linje: 20
  • en sidebar-menu: 2
  • mega-menuer: 14
  • gns. antal menupunkter: 7,6
  • gns. antal punkter i top-bar: 6,09
  • en kurv-funktion: 21
  • en konto/log-ind-funktion: 20
  • en ønskeliste/wishlist-funktion: 10
  • et søgefelt: 24
  • beskrivelse af fragt (tid): 7
  • beskriveles af fragt (pris): 8

Hyppigst forekommende element: Søgefelt (24 ud af 24)

24 ud af 24 af de undersøgte sider tilbyder brugeren et søgefelt direkte i menu-linjen. De fleste af disse søgefelter var input-felter (i modsætning til pop-ud søgefelter repræsenteret af fx et lup-ikon). En af mine personlige favoritter er Boozt, der har en effektiv, enkel og elegant menu.

Mindst hyppige element: Sidebar-menuen (2 ud af 24)

Sidebar-menuen er sjælden, og ses kun fuldt anvendt hos Elgiganten. Zooplus har en sidebar-menu, men anvender også en konventionel menu i headeren. Elgigantens header-menu er ikke-eksisterende, da headeren kun indeholder et søgefelt samt en top-bar.

De fleste af de undersøgte sider anvender sidebar-menuer på deres kategori-visninger, men overlader den overordnede navigation på siden til primær-menuen i headeren.

Mega-menuen – en populær navigationsform (14 ud af 24 sider)

Hele 14 ud af 24 sider anvender mega-menuer. Flere af disse indeholder CTA’er med billeder og anden grafik, mens andre (som fx Matas.dk) anvender et mere simpelt setup.

Hvis konventioner er kongen

Er man Steve Krug-fanatiker, og mener man dermed, at konventioner er nøglen til succes, er følgende elementer repræsenteret i mere end 75% af de headere, der her er undersøgt:

  • Top bar
  • En normal, vertikal navigationsmenu
  • Kurv
  • Konto/log-ind
  • Søgefelt

Elementer, der ikke når over 75% repræsentationer dermed:

  • Mega menuer (58%)
  • Ønskelister (42%)
  • Fragt-beskrivelse (29% og 33%)