Aug.
29
2014

Case: Font og White Space giver millioner på bundlinien

En korrekt brug af font og white space kan give millioner på bundlinien. Hos Bon'A Parte fik jeg muligheden for at teste dette af på deres produktside, her er case story'en på det.

Problemerne med originalen

Den originale produktside

Herover ser du et eksempel på den originale produktside hos Bon'A Parte. Den har flere designmæssige udfordringer:

  • Fonten er alt, alt for lille. Målgruppen er 40+ år gammel, og her begynder stort set alle at have problemer med synet. Den lille font gør, at det kan direkte være smertefuldt at læse tekst af den størrelse.
      
  • For at signalere en "klassisk stil", er der valgt en Serif-font - en font med fødder. Men problemet er, at når fontstørrelsen er så lille, så har en Serif-font nemt ved at blive pixelleret. Og det går kraftigt ud over læsbarheden. 
      
  • Der er brugt mangle forskellige font-størrelser og -effekter (fed, kursiv, farve osv.). Når noget skiller sig ud fra alt det andet, så beder det om brugerens opmærksomhed. Men hvis alt forsøger at skille sig ud, så står det hele og råber på opmærksomhed, og så er der ingen af elementerne, der stikker ud. Synscenteret i hjernen har svært ved at vurdere, hvad der er vigtigt og hvad der ikke er, og det er noget skidt. 
      
  • Der er et ikke-ensartet brug af white space (luft) omkring de forskellige elementer. Hvilket gør det svært for synscenteret at gruppere informationerne på siden.
      
  • En regel inden for Gestalt-lovene inden for perceptionspsykologi (læren om, hvordan vi opfatter vores omgivelser) siger, at informationer, der hører sammen, bør stå sammen. Da der f.eks. er brugt den samme white space imellem produktteksten og farve/størrelse dropdown boksene, har hjernen svært ved at gruppere disse informationer. Og det virker derfor som om, at de er selvstændige informationsklumper. 
      
  • Samtidigt står f.eks. farve/størrelse-teksten rigtigt langt fra selve dropdown boksene, hvilket rent visuelt indikerer, at de ikke hører sammen. Men det gør de altså!

Så spørgsmålet er: Hvilken effekt vil man kunne opnå, ved et bedre font-valg, ved ikke at bruge så mange font-effekter, og ved at være en pixel-pusher, når det kommer til white space?

Make the font bigger!

Første skridt var, at rydde lidt op i font-kaoset. 

Produktside, font-valg

En bedre font blev valgt, Droid Serif. Godt nok stadig en Serif-font, men med "hårdere" fødder. Hvilket betyder, at den ikke har så nemt ved at blive pixelleret, men stadig signallerer det "klassiske".

Den samme størrelse er også brugt over det hele, på nær ved produktets navn og pris. Og nåeh ja, Bon'A Parte's målgruppe er ikke jagerpiloter, så font-størrelsen fik også et par hak opad.

Desuden er der skåret kraftigt ned på effekterne. Kun der, hvor teksten er interaktiv (dvs. man kan klikke på den), er der valgt en understregning. Ellers er farver o.lign. det samme. Ingen kursiv tekst længere, og kun der, hvor teksten rent faktisk har brug for at bede om brugerens opmærksomhed (ved overskrift og pris), er der brugt fed tekst.

Bedre gruppering af informationer

Næste skridt var, at lege pixel pusher, og at gruppere informationerne bedre.

Produktside, White Space

Læg mærke til i ovenstående, hvordan informationerne er delt op i 4 klumper, adskilt af en større mængde white space. Samtidigt er white space størrelsen på de enkelte elementer inden i "klumperne" blevet reduceret og ensartet, hvilket giver en illusion af, at de "hører sammen".

Så vidt muligt er det forsøgt, kun at bruge to forskellige størrelser vertikal white space. Hvilket giver meget mere ro i designet, og gør at synscenteret har meget nemmere ved at finde frem til de informationer, som hjernen leder efter.

Den redesignede side

Så ved at "pille" lidt i siden, uden at kaste sig over det helt store redesign, kom jeg frem til denne udgave.

Produktside, resultat
(klik for stor udgave)
(klik for gammel/ny sammenligning

En meget mere rolig udgave af siden, der ikke direkte giver brugeren ondt i øjnene at bruge tid på. Og derved gerne skulle gøre hele shoppen til en lidt mere behagelig oplevelse, og resultere i bedre conversion rates og måske endda bedre basket value.

Der er mange andre detaljer, jeg godt kunne tænke mig at justere på. Men på et tidspunkt bliver man bare nød til at stoppe og komme videre i programmet :-)

Fancy design-snak, men hvad med bundlinien?

Alt den snak om Gestalt-love, white space og serif'er er nok meget god. Men er det nu også noget, der virker?

Ved hjælp af Visual Website Optimizer lavede jeg to udgaver af siden. Den originale, og mit "redesign" ved hjælp af en bunke CSS-hacks og DOM scripting. 50% af brugerne så den originale (A-udgaven), 50% af brugerne så den nye (B-udgaven). Og ved at måle på det hele både i VWO, men også i Analytics, kunne jeg holde øje med, hvordan de to udgaver påvirker conversion rate, bounce rate, antal sidevisninger og gennemsnitlig ordreværdi. Altså alle de hårde facts, de vigtige KPI'er med indflydelse direkte på bundlinien.

Resultat: B-udgaven havde en conversion rate, der var 0,8%-point højere, end A-udgaven.

Hvilket i en forretning af Bon'A Parte's størrelse giver en forøgelse i årlig omsætning i den tocifrede millionstørrelse.

Den lader vi lige stå lidt.

Desuden var der også klare forbedringer i både Pageviews per Session og Average Session Duration. En klar indikation på, at shoppen simpelthen var blevet mere behagelig at befinde sig på.

Designændringen er pt. ikke implementeret endnu. Dels er der tale om et "hack", hvor jeg går ind vha. VWO og overstyrer dele af det eksisterende stylesheet. Det vil blive noget kodemæssigt rod, bare at tage og smide det på.

Hvad jeg gjorde istedet var, at undervise designerne i hvad jeg gjorde, og hvorfor det virker. De tager så mine findings, og implementerer dem i forbindelse med et redesign, der er undervejs.

UPDATE 10.09.2014: Bon'A Parte har nu fået opdateret deres design en smule. Det er da et skridt i den rigtige retning, men synes ikke de har fået implementeret alle mine findings ordentligt. Men sådan er det jo ofte, når man er ekstern konsulent. Du kan nok lede hesten til vandet, men du kan ikke tvinge den til at drikke ;-)

Kunne du lide denne blog post?
 
Så giv mig mægtigt gerne en +1, så jeg ved at jeg skal skrive mere af denne slags. Eller læg en kommentar herunder, så jeg ved om det jeg skriver er godt / skidt.
17 kommentarer
 På falderebet til weekend tog du lige denne uges mest værdifulde læste blog indlæg!
Hvis jeg fremover har svært ved at overbevise mine kunder om de skal teste og analysere, vil dette indlæg indgå i undervisning.

ps. Apropo font størrelse. Hvillen bruger du selv her på bloggen? Syntes den er en anelse lille - men jeg er så også et skridt fra 40+ gruppen...
Flemming , den 29. august 2014 12:50:20
.
 @Flemming: Wauv, kæmpe tak :-D

Hehe, noteret. Dengang jeg designede og byggede bloggen, var der ikke noget der hed "mobile" eller "responsive". Og font-størrelsen var faktisk et pænt skridt opad i forhold til "normalen".

Nogen burde tage sig sammen, og lave et opdateret, tidsvarende redesign... ;-)
Søren Sprogø , den 29. august 2014 12:57:55
.
 Rigtig spændende Søren og super input.

Men hvor ville dog være godt hvis man kunne klikke og se store udgaver af alle eksemplerne.
Og ekstra godt hvis man kunne se before and after ved siden af hinanden i stor udgave.
Claus Larsen , den 29. august 2014 13:40:34
.
 Hold da op - kan kun tilslutte mig de andre, der har kommenteret, og give dig en virtuel highfive! Super fedt indlæg, som virkelig giver stof til eftertanke! Som Flemming siger, er dette indlæg perfekt til at overbevise kunder og samarbejdspartnere!

Lige her til sidst vil jeg også give Claus ret - hvis du får sat billederne op ved siden af hinanden (før/efter) samt muligheden for at gøre (alle) billederne større, så er det simpelthen perfekt!

Kristian , den 29. august 2014 16:32:36
.
 Så skulle der være kommet et lidt bedre gammel/ny screenshot, hvor man kan se de to udgaver direkte sammenlignet.
Søren Sprogø , den 8. september 2014 13:16:26
.
 Super indlæg Søren - det er yderst dejlig og brugbar læsning :-) Flot resultat du har tilført Bon A Parte med disse tilretninger.
Rune Hansen , den 8. september 2014 13:31:17
.
 Hej. Interessant. Fra et helt traditionelt usability-perspektiv kunne jeg også tilføje at der, på trods af større skrifttyper og whitespace, stadig bruges skrifttyper der er svære at læse. Fx er italic slet ikke lavet til skærmbrug og den times-lignende skrifttype der er valgt til brødteksten har samme problem. Hvis man googler usability og font, vil det fremgå at man skal undgå serif. Så hvis argumentet er læsbarhed, så kunne man med fordel teste de dele også - men her kan jeg se at designet vægter højere, hvilket kunne være en misforståelse i relation til konvertering (for er det testet eller valgt for udtrykkets skyld - ved man om det konverterer mere at signalere klassisk stil?).
/Ole
Ole Gregersen , den 8. september 2014 13:50:52
.
 @Ole: Gode observationer.

Man kunne sagtens gå split-test-amok, og teste alle del-elementerne. Men det er også en klassisk fejl ved splittesting. Det giver mere værdi at teste en hel tese ("Øget læsbarhed øger konvertering") end individuelle elementer (f.eks. den klassiske rød knap/grøn knap).

I gamle dage (læs: for 4-5 år siden) var Serif-fonte en klar no-no, når det kom til webdesign. Men den højere opløsning, udbredningen af retina skærme samt især, at sites i dag kører med langt større font-størrelse, har gjort at Serif'en faktisk er begyndt at virke igen! Men man skal vide hvad man gør / hvorfor, før man vælger en Serif font. Kender man ikke til de forskellige faldgrupper og fontes signalværdier, så er det bedre at gå den sikre vej, og vælge en Sans Serif font.

Læs evt. nogle af de artikler, som jeg linker til i posten. Der er faktisk guldkorn i dem, som overraskede mig meget, da jeg researchede på emnet.

Jeg har desuden en blog post på tegnebrædtet om fontes signalværdier, men kan dog ikke love om jeg nogensinde får den færdig ;-)
Søren Sprogø , den 8. september 2014 14:00:02
.
 Spændende læsning og stof til eftertanke - well done!
Kasper , den 8. september 2014 15:51:19
.
 Spændende læsning. Jeg havde dog forventet en højere forskel end 0,8%, men de økonomiske resultater taler sig eget sporg og viser at selv små forskelle kan have stor betydning.

Bent Andersen , den 8. september 2014 19:27:30
.
 Hej
Fedt, at du blogger igen med så relevante indlæg og håber, at du finder nye projekter selvom, det så sikkert giver færre indlæg :-)
Havde nok også forventet en større effekt med så "mange" ændringer især font og mere ro i tekstbilledet, men må så konstatere, at der vist er noget mere trafik hos dem end i min webshop www.magic4eyes.dk, hvor en ændring på 0,8 ikke ville betyde behov for ændringer :-)når jeg splittester på den skal, der godt nok større procenter til, men har da fundet ændringer på + 35% ved at tilføje en ekstra sætning.
God vind med at finde nyt projekt og ses ved lejlighed
Mvh
Henrik
Henrik , den 11. september 2014 17:51:47
.
 @Henrik og @Bent: Enig. På alle mulige andre shops, der ville det højst sandsynligt have en langt større effekt.

Men min holdning har altid været, at Conversion Rates IKKE kan sammenlignes på tværs af shops. For den afhænger usandsynligt meget af, hvor shoppen får sin trafik fra. En biks som Bon'A Parte f.eks., har jo eksisteret i 100 (internet)år, og har derfor opbygget en fast kundeskare (læs: email database). Folk, der har shoppet hos dig før, er lidt sværere at påvirke med denne slags optimeringer, end folk der ikke kender dig.

Jeg har ikke lige nogle data på dette i den konkrete case, desværre.
Søren Sprogø , den 15. september 2014 11:45:57
.
 
Hvad er der i vejen med Ctrl + scroll ?
Peter Andersen , den 17. september 2014 10:55:08
.
 @Peter: Det giver en mere positiv oplevelse, hvis det slet ikke er nødvendigt for brugeren at skulle lave den slags tricks.

Når brugeren laver en Ctrl + Scroll (eller Ctrl + Plus), så betyder det at han/hun allerede har nået at blive irriteret over den lille font. Designet har allerede været en tur forbi den tænkende del af hjernen (pandelapperne), og når folk først er begyndt at tænke over tingene, så er det som regel at det går galt ;-)

Læs mægtigt gerne Don't Make Me Think af Steve Krug. Det er faktisk required reading for folk, der gerne vil arbejde med InterWebbet :-P
Søren Sprogø , den 30. september 2014 09:58:20
.
 Hvor mange besøg bygger konklusionen med forbedret 0.8% konverteringsrate på?
Stephan Ryer , den 29. januar 2015 12:47:52
.
 @stephan det er naturligvis ikke noget jeg kan afsløre, da der er tale om fortrolige data. Men "mere end nok" er ikke en overdrivelse, når det kommer til en forretningen af den størrelse ;-)
Søren Sprogø , den 16. februar 2015 20:52:02
.
 Faldt over artiklen igen - kan huske jeg læste om den for længe længe siden. Har i lavet flere cases som denne? Synes det er utroligt interessant at læse om.
Kristian K. , den 8. marts 2017 15:14:33
.
Læg en kommentar
.
Navn
E-mail
Website
To plus syv?
Kommentar
Bemærk: Dit website link i kommentarer har NOFOLLOW. Det betyder det ikke har nogen SEO-mæssig værdi, så du kan lige så godt angive dit rigtige navn og et relevant link. Kommentarer, der bryder med dette, vil blive slettet øjeblikkeligt.
 
Det du indtaster som navn, e-mail og website vil desuden blive gemt i en cookie i din browser, så det er nemmere for dig næste gang du vil skrive en kommentar. Det er desværre ikke muligt at frabede sig dette.
 
Om mig
Jeg er en pragmatisk midtjyde med mere end 20 års erfaring i IT-branchen, de sidste 10 med alt inden for eCommerce.
Se hvad jeg kan gøre for dig
Eller se min referenceliste
 
Nyhedsbrev
Få besked per mail, når der er nye posts her på bloggen
 
Tilmeld nyhedsbrev
 
Samtidigt får du en mail med de bedste indlæg, så du ikke behøver at vente på guldkorn.
 
Få det som RSS feed     RSS feed
Få også kommentarer, sitemap
Kategorier
 
Søg
Jeg anbefaler
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
Rapporten over alle rapporter anno 2012, vinder af SEMaward 2012
 
GA tricks: Skaffer mine kampagner nye eller gamle kunder? vinder af SEMaward 2011
 
Google Analytics rapporten over alle rapporter, vinder af SEMaward 2010
Afdeling 18 Søren Sprogø E-commerce Guru work Grønnegade 3, st. tv. 8600 Silkeborg Danmark work 26727404 56.165787 9.537120 Søren Sprogø Cookies