Användaren kom inte för att titta på din sida
Det här är en av de viktigaste sakerna man kan glömma när man utformar en webbplats.
Företaget ser sin sida som en helhet. Det ser logotypen, rubriken, bilderna, erbjudandet, säljargumenten, knapparna, referenserna, formuläret, menyn och all information som noggrant har tagits fram.
Användaren ser något helt annat.
När hen ser sidan tänker hen oftast inte: ”Intressant, hur har företaget utformat sin informationsstruktur?”. Hen analyserar inte heller medvetet hela layouten.
Hen har ett konkret mål.
Hen vill hitta priset. Kontrollera om företaget erbjuder en viss tjänst. Ta reda på om leverantören går att lita på. Hitta ett telefonnummer. Jämföra lösningar. Se om produkten passar hens behov.
Och just därför betraktar användaren inte sidan på samma sätt som dess skapare gör.
Hens uppmärksamhet är selektiv. Hen letar efter information som kan hjälpa till att nå målet, och övriga element hoppas ofta över. Användbarhetsstudier har i åratal visat att användare kan ignorera element som bokstavligen finns på skärmen om de inte passar det aktuella målet eller ser ut som reklam.
Det leder till en mycket viktig slutsats: Det räcker inte att placera information på sidan. Man måste också utforma de förhållanden under vilka användaren lägger märke till den, förstår den och uppfattar den som relevant.
Varför klickar vi över huvud taget på något?
Ett klick är slutet på en kort beslutsprocess.
Användaren måste först lägga märke till elementet, sedan förstå vad som kan hända när det används, bedöma om det är värt att utföra handlingen och avgöra att kostnaden för handlingen är acceptabel.
Man kan därför förenkla processen: uppmärksamhet → tolkning → bedömning → beslut → handling
Det betyder inte att varje användare medvetet genomgår fem på varandra följande steg. Många beslut är mycket snabba och automatiska. Just därför är gränssnittsdesign så starkt kopplad till psykologi kring perception och beslutsfattande.
Knappen ”Köp nu” kan vara perfekt synlig, men om användaren inte vet exakt vad som köps, klickar hen inte.
Knappen ”Skicka” kan fungera tekniskt utan anmärkning, men om användaren inte vet vad som händer efter att formuläret skickats, kan hen stanna upp.
Länken ”Läs mer” kan vara estetisk, men om man inte vet vad användaren får veta mer om, är dess värde mycket mindre.
Därför handlar bra UX inte om att tvinga användaren att klicka.
Det handlar om att på rätt sätt utforma vägen från behov till handling.
Uppmärksamhet är en begränsad resurs
Designers beter sig ofta som om användaren hade en obegränsad uppmärksamhetsbudget...
- Varje element verkar viktigt.
- Rubriken är viktig.
- Erbjudandet är viktigt.
- Certifikaten är viktiga.
- Kundomdömena är viktiga.
- Bilden är viktig.
- Fallstudien är viktig.
- Nyhetsbrevet är viktigt.
- Kampanjen är viktig.
- Kontakten är viktig.
Problemet är att om allt ska vara viktigast, får användaren ingen information om vad som är viktigast just nu.
Selektiv uppmärksamhet är en naturlig mekanism för att begränsa mängden intryck. Användaren fokuserar på den del av informationen som är kopplad till det aktuella uppdraget och kan ignorera resten. I användbarhetsstudier har man observerat situationer där användare inte lade märke till viktiga gränssnittselement just därför att deras uppmärksamhet var riktad någon annanstans.
Det är därför en sida kan vara full av information och ändå ge intrycket att det inte finns någonting där.
Inte för att användaren är ouppmärksam.
Utan för att hens uppmärksamhet är selektiv.
”Men den där knappen är ju enorm”
Det här är ett av de vanligaste designargumenten.
”Men CTA:n är stor”.
”Den är i en stark färg”.
”Vi har lagt den allra högst upp”.
”Det går inte att missa den”.
Fast ”det går inte att missa den” ur designers perspektiv betyder inte ”användaren kommer att uppfatta den som viktig”.
Man kan öka ett elements visuella exponering, men man kan inte tvinga användaren att betrakta det som viktigt.
Om användaren letar efter priset, och sidan främst lyfter fram en enorm marknadsföringsfras, kan hen föra blicken förbi CTA:n eftersom uppmärksamheten är riktad mot att lösa ett konkret problem.
Om hen letar efter teknisk information kan hen ignorera bilden.
Om hen vill kontakta företaget kan hen hoppa över den långa beskrivningen av företagets historia.
Om hen vill köpa produkten kan hen hoppa över halva texten och direkt leta efter pris, varianter och leveransvillkor.
Synlighet är inte samma sak som betydelse.
Varför ignorerar vi sådant som ser ut som reklam?
Internet har lärt användarna vissa mönster.
Om något ser ut som en banner, finns på en typisk reklamplats, är överdrivet animerat eller har en typisk kampanjstil, kan användaren automatiskt minska den uppmärksamhet som ägnas åt just det elementet.
Detta fenomen kallas banner blindness, alltså bannersynlighetens blindhet.
Det viktiga är att det inte bara gäller reklam.
Ett element kan innehålla verkligt värdefull information, men om det visuellt påminner om reklam kan användaren behandla det som reklam och hoppa över det.
Eyetracking-studier från Nielsen Norman Group bekräftade denna mekanism i olika typer av gränssnitt. Användare har lärt sig att ignorera områden och element som förknippas med reklam, även om de i det enskilda fallet innehöll användbart innehåll.
Det här är en viktig läxa för marknadsföring.
Mer färg, större typsnitt och starkare framhävning betyder inte alltid mer uppmärksamhet.
Ibland börjar ett element just på grund av överdriven exponering att se ut som något man ska hoppa över.
Användaren läser inte sidan. Hen skannar den oftast
En webbplats läses mycket sällan från början till slut på samma sätt som en bok.
Användaren skannar först:
- Letar efter rubriker.
- Framhävda uppgifter.
- Priser.
- Produktnamn.
- Knappar.
- Navigationselement.
- Ord som är kopplade till hens problem.
Först när något svarar mot hens behov kan hen ägna det mer uppmärksamhet.
Det betyder att innehållsdesign inte enbart bör handla om att skriva en bra text. Man måste också skapa en informationshierarki.
Om alla textfragment har liknande storlek, liknande visuella tyngd och liknande rytm måste användaren själv göra arbetet med att avgöra vad som är viktigt.
Ju mer av det arbetet hon eller han måste göra, desto större är risken att personen ger upp.
Därför svarar ett bra gränssnitt användaren på frågan: ”Vad borde jag rikta min uppmärksamhet mot just nu?”
Inte genom instruktionen ”titta här”, utan genom en lämplig informationsstruktur.
Första intrycket verkar snabbare än du tror
Innan användaren läser erbjudandets detaljer bedömer hen sidan som helhet:
- Ser den professionell ut?
- Verkar den aktuell?
- Påminner den om en sida för ett företag man kan lita på?
- Går det att förstå vad företaget sysslar med?
- Ser den säker ut?
- Går det att förstå var man ska klicka?
Det betyder att sidans visuella lager inte bara är dekoration.
Det är en del av budskapet.
En modern design kan signalera teknisk kompetens. Typografi med tydlig struktur kan antyda precision. Bra bilder kan stärka trovärdigheten. En konsekvent branding kan öka igenkänningen.
Men det fungerar också åt andra hållet.
Föråldrad information, slumpmässig typografi, inkonsekventa knappar, stockbilder som inte passar branschen eller språkliga fel kan underminera trovärdigheten innan användaren ens hunnit bekanta sig med det egentliga erbjudandet.
Därför bör UX och branding inte behandlas som två helt separata områden.
Användaren skiljer inte på dem som ”design” och ”marknadsföring”.
Hen uppfattar dem som en enda signal: ”Kan jag lita på det här företaget?”
Förtroende påverkar viljan att agera
Ett klick behöver inte innebära ett köp.
Det kan betyda att gå vidare till erbjudandet, öppna formuläret, ladda ner dokumentet, börja konfigurera produkten eller gå till nästa steg.
I varje fall tar användaren en viss risk:
- Kommer jag efter klicket att föras dit jag förväntar mig?
- Kommer jag att förlora data?
- Kommer formuläret att vara långt?
- Kommer någon att börja ringa mig?
- Kommer priset att vara dolt?
- Kommer köpet att starta efter klicket?
- Kommer sidan inte att omdirigera mig till någon okänd plats?
Det är just därför mikrocopy spelar roll.
”Skicka” säger inte mycket.
”Begär en kostnadsfri offert” säger betydligt mer.
”Kontrollera tillgänglighet” har en annan betydelse än ”Köp”.
”Starta en gratis testperiod” minskar andra farhågor än ”Skapa konto”.
Bra text vid handlingen minskar osäkerhet.
Varför ökar enkelhet ofta chansen till handling?
Användaren vill inte fatta onödiga beslut.
Om hen måste välja mellan tre alternativ kan det gå snabbt.
Om hen måste välja ett av elva behöver hen lägga mer uppmärksamhet på jämförelsen.
Om varje alternativ dessutom har olika villkor, begränsningar och konsekvenser ökar den kognitiva kostnaden för hela processen.
Därför betyder förenkling av gränssnittet inte bara ”färre element”.
Det betyder också färre onödiga beslut.
Inom beteendedesign hänvisar man ofta till BJ Foggs modell, enligt vilken ett beteende uppstår när motivation, möjlighet att utföra handlingen och rätt trigger finns samtidigt. I praktiken betyder det bland annat att även ett mycket attraktivt budskap inte räcker om själva handlingen är för svår.
Om användaren vill köpa en produkt, men måste:
- skapa ett konto,
- bekräfta e-post,
- ange ett dussin uppgifter,
- välja en extra tjänst,
- läsa flera meddelanden,
- gå igenom tre skärmar,
- och först därefter se priset,
då kanske problemet inte är brist på motivation.
Problemet kan vara för hög kostnad för att utföra handlingen.
Ett klick betyder inte alltid framgång
Det är en mycket viktig distinktion.
Vi kan ha en utmärkt klickfrekvens och samtidigt ett svagt affärsresultat.
Användaren klickar på annonsen men går direkt tillbaka.
Hen klickar på knappen ”Se erbjudandet”, men hittar inte det hen söker.
Hen öppnar formuläret men vill inte lämna sitt telefonnummer.
Hen går till kundvagnen men litar inte på betalningsmetoden.
Klicket är alltså bara ett av stegen i resan.
Därför bör man inte optimera sidan enbart för antalet klick.
Bättre frågor är:
- Utförde användaren den handling hen behövde?
- Kom hen till rätt plats?
- Förstod hen erbjudandet?
- Gick hen vidare?
- Nådde hen sitt mål och uppfyllde samtidigt sajtens affärsmål?
Detta är särskilt viktigt för CTA:er som utformas enbart för att öka CTR. Man kan skapa en knapp som drar enorm uppmärksamhet, men om löftet i CTA:n inte stämmer överens med vad användaren får efter klicket kan den kortsiktiga ökningen av klick försämra upplevelsen och förtroendet.
Varför scrollar användaren ibland trots att den viktigaste informationen finns högst upp?
”Allt måste vara above the fold” är en av de förenklade myterna inom webbdesign.
Användare scrollar.
Problemet är alltså inte i sig att placera information längre ner på sidan. Problemet är avsaknaden av en anledning att gå dit.
Om den första delen av sidan tydligt kommunicerar:
- vad produkten är,
- vem den är avsedd för,
- vilket problem den löser,
- vad användaren kan göra härnäst,
kan de fortsatta sektionerna naturligt utveckla berättelsen.
Användaren kanske vill se funktioner, bevis på trovärdighet, exempel på implementationer, svar på frågor eller tekniska detaljer.
Men om den första delen av sidan är oklar hjälper det inte att scrolla.
Användaren vet inte om det är värt att leta vidare.
Forskning om uppmärksamhet och scrollning visar att användare ägnar mer uppmärksamhet åt information i det initialt synliga området, men det betyder inte att allt värdefullt innehåll måste ligga före första scrollningen. Det avgörande är att skapa en lämplig hierarki och motivation för att fortsätta ta del av innehållet.
Varför ignorerar vi ibland något som just förändrats?
Det är ännu en intressant mekanism.
Designern vet att ett fönster just dök upp.
Hen vet att knappen bytte färg.
Hen vet att ett meddelande visades på skärmen.
Hen vet att formuläret uppdaterades.
Användaren kanske inte märker det.
Detta fenomen hänger bland annat samman med change blindness, alltså förändringsblindhet. Om en förändring sker utanför användarens aktuella uppmärksamhetsområde eller inte kommuniceras på rätt sätt, kan den förbli obemärkt.
Detta är särskilt viktigt i applikationer.
Om ett litet meddelande visas i hörnet av skärmen efter att en åtgärd har utförts, kanske användaren inte ser det.
Om formulärets tillstånd ändras, men ändringen är subtil, kan användaren tro att ingenting har hänt.
Om systemet har utfört en viktig åtgärd, men återkopplingen är för svag, kan användaren klicka igen.
Som följd uppstår fel, dubbla åtgärder och frustration.
Gränssnittet måste kommunicera förändring där användaren förväntar sig den och på ett tillräckligt tydligt sätt, så att hen inte behöver leta efter den själv.
Användaren ska inte behöva "lära sig" webbplatsen
Ett bra gränssnitt använder befintliga konventioner:
- Logotypen leder vanligtvis till startsidan.
- Menyn ser ut som en meny.
- En länk ser ut som en länk.
- En knapp ser ut som ett interaktivt element.
- Varukorgen påminner om en varukorg.
- Sökrutan ser ut som en sökruta.
Det är ingen slump.
Användaren kommer med erfarenhet från andra webbplatser och andra appar. Om gränssnittet beter sig enligt förväntningarna kan användaren använda den kunskapen.
Om designern försöker vara "originell" till varje pris kan hen tvinga mottagaren att lära sig ett nytt sätt att använda produkten.
Och varje extra sak som måste läras in ökar den kognitiva belastningen.
Originalitet är meningsfull när den stödjer upplevelsen.
Inte när den försvårar grundläggande uppgifter.
Vad är det egentligen som får någon att klicka?
Det finns inget enda universellt "magiskt" element som får varje användare att klicka.
Ett klick är resultatet av en kombination av faktorer.
Relevans
Användaren måste ha en anledning att intressera sig för elementet.
"Se våra lösningar" kan vara korrekt, men är ganska otydligt.
"Upptäck lösningen för webbutiker" är mer kopplat till ett specifikt behov.
Förståelighet
Användaren bör veta vad som händer efter klicket.
Ju större osäkerhet, desto större barriär.
Synlighet
Elementet måste gå att hitta, men det betyder inte att det måste skrika med färg och animation.
Kontext
Samma knapp kan fungera utmärkt på ett ställe och dåligt på ett annat.
"Kontakta oss" längst ner på sidan kan vara ett naturligt nästa steg.
Samma knapp utan någon kontext på första skärmen kan vara för tidig.
Förtroende
Användaren måste ha tillräcklig trygghet i att klicket inte leder till en oönskad konsekvens.
Handlingskostnad
Ju mer ansträngning nästa steg kräver, desto viktigare blir motivationen och värdet som erbjuds användaren.
Tidpunkt
Även en bra CTA kan visas för tidigt.
Om användaren just har fått veta vad produkten är kan ett omedelbart "Köp nu" vara mindre effektivt än "Se hur det fungerar".
Det största misstaget: att designa för sig själv
Detta är ett av de vanligaste problemen i digitala projekt.
- Teamet känner till produkten.
- Känner till alla funktioner.
- Känner till tumreglerna.
- Vet var en viss information finns.
- Vet varför företaget valde en viss lösning.
- Vet vad varje uttryck betyder.
Användaren vet inte detta.
Därför kan den som designar sidan tycka att ett visst element är självklart, medan mottagaren inte ens lägger märke till det.
Det är just därför användbarhetstester är så viktiga.
Det räcker inte att fråga teamet: "Vet man här vad man ska klicka på?".
Teamet vet svaret.
Det är bättre att observera en person som inte känner till designen och se vad hen faktiskt gör.
Inom UX finns en enkel men mycket värdefull princip: användarens beteende är mer värdefullt än hens egna påståenden om vad hen skulle göra eller vilja göra.
Hur designar man utifrån användarens faktiska beteende?
1. Börja med användarens mål
Inte med sidan.
Inte med menyn.
Inte med varumärkesguiden.
Svara först på frågan: varför kom användaren hit?
Ett annat gränssnitt behövs för någon som vill köpa en produkt, ett annat för någon som söker dokumentation, och ännu ett för en kund som bara vill hitta ett telefonnummer.
2. Definiera huvudåtgärden entydigt
Inte varje sida måste ha fem likvärdiga CTA:er.
Fundera på vilken handling som är viktigast i det aktuella skedet.
3. Designa hierarki, inte dekoration
Storlek, kontrast, utrymme, typografi, placering och elementens ordning ska kommunicera betydelse.
4. Försök inte lyfta fram allt
Om allt är rött, är ingenting rött.
Om allt är fetstilt, har ingenting särskild tyngd.
Om varje element är animerat vet användaren inte vad hen ska fokusera på.
5. Minska osäkerheten
Informera användaren om vad som händer efter klicket.
Om åtgärden leder till ett formulär kan det kommuniceras tydligt.
Om den inleder en kostnadsfri process är det också värt att säga det.
6. Testa i stället för att gissa
Be en person som inte känner till designen att utföra en specifik uppgift.
Fråga inte bara: "Gillar du sidan?".
Kontrollera:
- var hen tittar,
- vad hen letar efter,
- vad hen klickar på,
- vad hen ignorerar,
- var hen stannar upp,
- vad hen tolkar annorlunda än designerna tänkt.
7. Mät beteende
Analytics, sessionsinspelningar, trattar, A/B-experiment och feldata kan säga mer än åsikterna från några personer i teamet.
Men även här behövs kontext. Data visar vad som hände. Kvalitativa studier hjälper till att förstå varför.
Indikationer och kontraindikationer - när har UX-psykologi störst betydelse?
Digital psykologi är särskilt användbar där användaren måste fatta ett beslut:
- webbutik,
- kontaktformulär,
- landningssida,
- SaaS-applikation,
- B2B-system,
- registreringsflöde,
- onboarding,
- mobilapp,
- betalningssystem,
- produktkonfigurator,
- tjänst som kräver sökning efter specifik information.
Det är särskilt värt att analysera användarbeteenden när webbplatsen har mycket trafik men låg konvertering, användare överger formulär, inte använder viktiga funktioner eller regelbundet frågar om information som i teorin redan finns på webbplatsen.
När bör man inte överdriva?
UX-psykologi är inte en uppsättning trick för att manipulera användaren.
Den ska inte användas till att:
- dölja viktig information,
- försvåra avbokning,
- designa vilseledande CTA:er,
- tvinga fram samtycken,
- dölja kostnader,
- att skapa en falsk känsla av brådska,
- att utforma dark patterns.
Om användaren klickar för att hen har blivit vilseledd är det inte bra UX.
Det är bara en väloptimerad fälla.
Bra design hjälper användaren att utföra en handling som är begriplig för hen och i linje med hens intention.
Digital psykologi handlar inte om att manipulera människor
Det är en viktig distinktion.
Man kan använda kunskap om mänskligt beteende för att utforma ett enklare formulär.
Man kan använda den för att hjälpa användaren att snabbare hitta information.
Man kan förbättra sidans hierarki så att hen inte behöver leta efter det viktigaste elementet.
Man kan begränsa antalet onödiga beslut.
Man kan utforma bättre felmeddelanden.
Man kan se till att användaren vet vad som händer efter klicket.
Allt detta är användning av psykologi i design.
Manipulation börjar när designen använder användarens begränsningar mot hen.
Gränsen är viktig också ur affärssynpunkt.
Ett företag kan öka antalet klick med en aggressiv CTA, men om användaren efter några sådana upplevelser börjar uppfatta varumärket som påträngande eller opålitligt kan den kortsiktiga konverteringen komma att köpas till priset av en långsiktig förlust av förtroende.
Den viktigaste frågan är inte ”Kommer användaren att klicka?”
En bättre fråga är: ”Varför skulle hen klicka just här, just nu?”
Om svaret är: ”För att knappen är stor”, har vi ett problem.
Om svaret är: ”För att användaren just fick informationen hen behövde, förstår nästa fördel, vet vad som händer efter klicket och kostnaden för att utföra handlingen är acceptabel för hen”, då börjar vi tala om design av en upplevelse.
Ett klick är inte en slumpmässig rörelse med markören.
Det är resultatet av hur användaren tolkar information, hur hen bedömer situationen och vilket värde hen ser i att ta nästa steg.
Därför kämpar bra UX inte om användarens uppmärksamhet.
Bra UX hjälper användaren att rikta uppmärksamheten dit den faktiskt behövs.
Och om sidan kan göra det utan att skrika, utan manipulation och utan fem blinkande ”KÖP NU”-knappar, är det då den verkligen börjar fungera bra.
Begreppslexikon
UX (User Experience) - hela användarens upplevelse kopplad till användningen av en produkt, tjänst eller ett system.
UI (User Interface) - gränssnittslagret som användaren kommunicerar direkt med.
CTA (Call to Action) - ett element som uppmuntrar användaren att utföra en specifik handling, t.ex. köpa, kontakta eller starta en process.
Selektiv uppmärksamhet - mekanismen att rikta begränsad uppmärksamhet mot utvalda stimuli samtidigt som andra ignoreras.
Banner blindness - en tendens hos användare att ignorera element som liknar annonser eller är placerade på platser förknippade med annonser.
Change blindness - fenomenet att inte märka förändringar som sker utanför det aktuella uppmärksamhetsområdet.
Mikrocopy - korta meddelanden som stödjer användaren i gränssnittet, t.ex. knapptexter, formulär, felmeddelanden och instruktioner.
Informationshierarki - sättet att ordna element efter deras betydelse och den ordning i vilken användaren bör uppfatta dem.
Dark patterns - designmönster som utnyttjar användarens beteende och begränsningar på ett sätt som driver hen till handlingar som strider mot hens ursprungliga avsikt eller försvårar ett medvetet val.
Friction / friktion - den kognitiva eller operativa ansträngning som krävs för att utföra en handling.
Till sist
En webbplats är inte ett företagspresentation.
Det är en miljö där människan fattar beslut.
Därför bör designen börja inte med frågan: ”Vad vill vi visa?”
utan med frågan: ”Vad försöker användaren göra här och vad behöver hen för att göra det utan onödig ansträngning?”
Först ur detta perspektiv kan man på ett meningsfullt sätt designa layout, innehåll, CTA, navigation, formulär, meddelanden, branding och hela användarflödet.
För användaren klickar inte därför att företaget tycker att hen borde klicka.
Hen klickar när hen ser meningen med handlingen, förstår dess konsekvenser och bedömer att det är värt att ta nästa steg.
