Check marks och bockar – Därför konverterar de

Andreas Nordin

Du påverkas. I alla fall baserat på tester gjorda med bockar och tillhörande USP:ar. Bockar och check marks konverterar, men frågan är varför. Och hur mycket?

Bockar a.k.a check marks är mer en regel än ett undantag på hemsidor, speciellt om vi kollar på e-handelssidor. Det är ingen slump.

Denna artikel fokuserar på att förklara varför bockar fungerar och hur du kan använda dem på din hemsida.

Vad är en bock?

En symbol för check. Check!

check_mark_greenGröna bockar. Bockar överallt.

En check mark, bock eller tick (✓ ✔ ☑ √) änvänds för begreppet Ja (verifierat, godkänt, inklusive etc.)

Många använder bockar

Signa upp idag. Detta ingår. Missa inte. Det bästa för dig. Sista chansen.
Check marks exampel ehandel

Flitiga användare av check marks: Spana in Aftonbladets check mark-hysteri.
Antalet bockar på aftonbladetHur många ser du i denna post? Fniss…

Varför fungerar check marks?

Som rött och grönt, start och stopp. Vi förknippar omedvetet olika symboler och färger med känslor och även handling, ofta utan att vi funderar vidare kring det. I all sin enkelhet. Men det är inte hela sanningen.

Positiv validering

Vi är införstådda med vad en bock/tick innebär och den ger en positiv bekräftelse. En klapp på axeln. Interflora ökade sin formulärkonvertering med 13% genom positiv validering bl.a. Eller såsom detta försäkringsbolag:

Skadeförsäkring

Bockar representerar i många fall något som är avklarat vilket våra hjärnor instinktivt belönar med dopamin. Återigen: En klapp på axeln. Samma sak gäller progress bars eller fler-stegs-checkout där du omedvetet belönar dig själv för slutförd uppgift. Du är på rätt väg!

Ger en snabb översikt

Bra typografi gör att du snabbt förstår var du hamnat och vad du kan göra på sidan, vad som ingår i ett erbjudande osv. Besökaren avgör huruvida din sajt är relevant att stanna på eller ej, inom ca 3 sekunder. Förenkling är guld.

Lättöverskådligt med checkmarks

79% av besökare skannar en ny sida de besöker och endast 16% läser faktiskt innehållet. Nielsen Norman Group, publicerad 1977 (med dagens informationssamhälle antar vi att andel som skannar är större).

Visual cue – Lyft det viktigaste innehållet

Fånga uppmärksamhet, led in ögat, lyft det viktigaste innehållet. Enkelt.
Det hjälper besökaren.

Mer typografi: Lättöverskådliga listor och Typografi som konverterar.

Hjälper rationellt beteende

Vi vill gärna tro att vi tar rationella beslut, även om vi inte gör det. Check marks hjälper oss att lura oss själva. Kan man säga. Och det här är intressant! Låt oss skriva ett helt stycke om just denna punkt.

Rationellt beteende. Check?

When making a (buying) decision, your customer (a Homo Sapiens) always uses its 600 million years optimized subconscious, emotional, instinctive brain processes (system 1). Your customer can also use her/his evolutionary recently and uniquely developed conscious, rational, cognitive processes (system 2, the little voice in everyone’s head called ’I’). But although ’I’ can overrule the emotional, instinctive responses, ’I’ cannot function without them.

In other words: your customer is not able to decide only based on logical, rational arguments. She/he needs ’emotional markers’ to give ’weight’ to those arguments. Our hypothesis at Online Dialogue is thus that green checkmarks and other positive associations add the required positive emotions to the rational arguments they’re preceding.
Bart Schutz, Chief Psychology Officer, Online Dialogue

Vad säger vår erfarenhet?

Baserat på användningstester och analyser vi gjort kan vi se att bockar tillför mer än det självklara som bockar faktiskt står för.

En hypotes är att bockar ger oss känslan av att vi tar rationella beslut även när vi inte kopplar på vårt rationella och logiska tänkande. Utan framförallt noterar att de finns där och System 1 fortsätter att vara den beslutsfattande delen av hjärnan.

Vi är inte rationella, vi är bra på att rationalisera.
Robert A. Heinlein

Kundcase med bockar

Gröna checkmarks är inte din silver bullet. Det finns tester som gett resultat åt båda håll. Därför: testa!

1. Vi gjorde ett test för en dejtingsida där det visade sig att bockar ovan fold ökade konverteringsgraden gentemot de andra variationerna som istället visade omdömen eller förtroendegivande loggor på samma placering.

gröna bockar i checkout

Variation B (ovan) med en lista av funktioner och bockar var klar vinnare med +53% uplift i A/B/C/D-testet.

Vi tycker att det mest intressanta med det här testet var att bockarna inte var i fokus eller prioriterade i designen. De var nätt och jämt synliga ovan fold. Och antagligen läste de allra flesta inget eller väldigt lite av vad som stod där.

Men eftersom de syntes lite grann i periferiseendet kunde den omedvetna, emotionella delen av hjärnan uppfatta dem svagt och liksom checka av dem: – ”Ok, det finns tydligen rationella argument för varför jag gör det här. Skönt då kan jag bara köra på.”

2. Ett annat case där bockar spelade stor roll var i projektet med Skandia Barnförsäkring.

Den nya sajten innehåller bockar som en del i ett flöde. De användes för att tydliggöra värde och ge bra översikt.

gröna bockar exempel

Har vi A/B-testat det? Nej tyvärr, möjligheten fanns inte. Resultatet var dock +222% uplift gentemot samma period föregående år.

A/B-test där bockar misslyckats

Att förstå varför vi påverkas av bockar är en del till att använda dem korrekt på din sajt.
Det finns fall där check marks inte gett uplift i A/B-tester ↓

Använd check marks så här:

Best practicies fungerar generellt, men för dig som vill veta för din specifika kontext ger vi nedan några förslag på potentiella testkandidater.

Observera att den generella regeln för A/B-testning även gäller här; Testa smått och förvänta små skillnader, testa stort och du kan förvänta stora skillnader.

Alltså, har du lite trafik kan dessa testkandidater vara för små för att du ska kunna se något resultat alls.

1. Färger

Vi har tidigare berört att gröna (positiva) check marks indikerar validering, något ingår eller är avklarat. I vårt arbete har vi sett fall där det inte behöver vara färgen som gör skillnad.

Men, best practice: green check mark

2. Antalet bockar (i lista)

Beroende på syftet med dina bockar, kommer antalet variera. Du bör testa dig fram till vad som är rätt för din kontext. Vissa tillfällen kan 1 bock räcka medan andra tilfällen tillåter 10 bockar.

Men, best practice: 3* check marks

*Subitizing: vår förmåga att direkt avgöra antal (utan att aktivt räkna). Enligt studier är 3-4 det maximala antalet vi direkt kan ”se” (Starkey och Cooper, 1995).

3. Testa placering

Addera bockar för att förtydliga värde eller addressera eventuella rädslor, och förstå vart besökaren tar ett konverterande beslut.

Placera därför bockar och USP:ar i en kontext där du har konverteringsmål. Du önskar ge en positiv uppmuntran och ett värde som uppmuntrar ett val.

Check marks example29% fler prenumeranter efter ny design gjord åt Di.

Best pratice:

    Första bocken bör innehålla ditt starkaste säljargument. Speciellt viktigt för den otåliga besökaren som inte aktivt läser de andra.
    Mitten läses främst av den metodiske besökaren, lägg din svagaste USP här.
    Sista bocken bör innehålla ditt näst bästa värdeerbjudande.

4. Utseende och laddtid

Det finns flera sätt att lägga in bockar på. De olika sätten har sina fördelar och nackdelar. Vad fungerar bäst för er?

Font Awesome – lättanpassat

Genom att länka in Font Awesome har du redan där en uppsättning bockar att välja mellan, och extremt enkla att styla. Följ instruktionerna för hur du implementerar deras css-länkning och sedan kan du skriva in förbestämda anrop i din HTML.

Font Awesome har en stor bildbank med över 500 anpassningsbara ikoner. Ett bra val.

Kopiera in denna sträng mellan <HEAD></HEAD> på din webbsida:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

och hämta sedan den styling du vill ha via HTML, tex:

Så här ser exemplet ovan ut:




HTML5 – no coding skills

Alla ikoner syns inte i alla webbläsare, buggigt i IE och svårare att styla.
Du kan kopiera in tecknen direkt, använda decimal (dec)- eller hexadecimal (hex)-referens.

Så här ser exemplet ovan ut (decimal-referens):

    ✅ check
    ✓ mark
    ✔ bock

Laddtiden för koden kommer inte att vara märkbar.

PNG, SVG, JPG – bra för SEO

Desto fler bilder desto tyngre sajt, lång laddtid är kostsam på flera sätt.
Men, det ger dig friheten att välja precis vilket utförande du vill, och med alt-taggar matar du Google med indexering.

Använd Svg-filer hellre än pixelbilder. Om ni inte är händiga med SVG, och inte vill bli, jobba med CSS-sprites.

    Check mark

Gör egna ikoner – tidskrävande

Lite mer avancerat, men du kan sätta upp en egen ikonfont av de ikoner du vill använda. Kolla in Fontello etc.

Summering

Bockar förknippas generellt med något ifyllt / avklarat och ger oss en positiv känsla. Det finns både tester som visar på hur bra bockar kan vara men även de som visar negativ effekt. Därför är det viktigt att förstå var du bör ha bockar, och var du inte bör ha bockar. Allt beroende på kontext, placering och antal. Om du har trafik, lev inte i ovisshet och tilltro till best practices utan testa dig fram vilken kombination och var checkmarks bör finnas.

Har du testat checkmarks? Lämna en kommentar nedan.
Tack och bock ✓

Fler typografi-tips?

Woho! Det finns. Spana in dessa:
Så skapar du lättöverskådliga listor
7 tips för typografi som konverterar

Läs även

Conversionista is open for business in The Netherlands.
Conversionista is open for business in The Netherlands. Read more.