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
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.
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.
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.
(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. |
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...
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... ;-)
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.
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!
/Ole
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 ;-)
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
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.
Hvad er der i vejen med Ctrl + scroll ?
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
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.