Min läslista

Din läslista är tom.

Sök på capdesign.se

Vetenskaplig uppmärksamhet

TEXT Anders Lundberg

Så får du betraktaren att titta dit du vill. Hur vi människor ser är inte slumpmässigt och designers kan tjäna mycket på att lära sig mer om hur hjärnan fungerar.

Annons

Den här artikeln publicerades först i CAP&Design #4 2018

Att reklamblad dimper ner i brevinkastet och det första du lägger märke till är en stor bild på en espressomaskin. Du googlar efter ”bästa kastrullen” och fastnar för en Youtube-video bland sökresultaten. Du slår upp tidningen och dras till en artikel om privatekonomi med flera diagram och annan grafik.

En eyetrackingstudie i labbmiljö på City University London.

Andreas Olssons bästa tips

1. Var noga med förståelsen av knappar och budskap. Vi har sett fall där man tror att personer inte har sett en knapp, eftersom de inte klickar på den. Men när man har gjort en studie har man kunnat visa att de visst ser den, fast innebörden var svår att förstå. Därför kan oklara etiketter hindra interaktion, även om användaren har sett knappen.

2. Håll dig till standarder och konventioner inom design. Vart vi tittar i en design beror på vad vi ska göra. Och ofta letar vi där vi förväntar att vi ska hitta saker. Därför är det bra att inte utmana användarna alltför mycket i sin iver att vara kreativ.

3. Underlätta läsandet genom att ha den viktigaste infon tidigt i textstycket, men också genom tydliga rubriker, markering av länkar och nyckelord. Använd gärna listor när du behöver rada upp saker, och så vidare.

Våra hjärnor utvecklades under hundratusentals år för en verklighet utan reklam, internet och text. Hur vi ser och vad som drar vår uppmärksamhet till sig är något vi inte kan förändra i första taget. De senaste  årtiondena har forskare både inom akademin använt eyetracking-teknik för att studera hur vi egentligen tar in omvärlden via synen. Att studera ögonrörelser är dock inget nytt. Redan på 1800-talet upptäckte franska ögonläkaren Louis Émile Javal fenomenet saccader, det vill säga de små skutt våra ögon tar när vi tittar på text och annat. Tidigare hade forskare tagit för givet att våra ögon rörde sig i jämna, kontinuerliga rörelser.

Modern eyetracking går ut på att mycket exakt följa försökspersoners blick när de tittar på olika saker. Det kan handla om allt från texten på en tidningssida till ett reklamblad eller en webbplats. I praktiken används ofta kameror monterade intill en skärm för att följa personens blick, men det finns också varianter som använder glasögon eller headset.

Eyetracking mäter exakt var betraktaren tittar och hur ögonen rör sig.

Genom att testa en design med eyetracking kan du som designer få viktig och inte alltid intuitiva insikter i vad som lockar betraktarnas uppmärksamhet, hur designen kan bli effektivare på att föra ut ditt budskap, och vad som inte fungerar så bra.

Andreas Olsson.

Andreas Olsson är UX Lead på Tobii, ett företag som jobbar med eyetracking framför allt inom marknadsföring. Han säger att intresset för tekniken ökar inom den digitala världen.

— Jag tror det är resultatet av att vi lever i en attention economy och att vår uppmärksamhet har blivit en vara. Men det är samhället som har förändrats, inte vi. Vi är fortfarande bara människor och dygnet har fortfarande bara 24 timmar. Uppmärksamhet är en tillgång och vi har bara så mycket av den. Vi är många som vill ha en del av den uppmärksamheten, förstå vad den gör med vårt beteende och inte minst mäta den.

Han menar att de enklare och billigare lösningarna som nu har börjat dyka upp gör att fler företag kan göra egna eyetrackingstudier utan att behöva bli experter.

Finns ett mänskligt ansikte i designen? Då är sannolikheten hög att det är dit betraktarens ögon dras allra först.
Jason McMillion

Jason McMillion, vd på Need Insights, ett svenskt företag som jobbar med både eyetracking och platsdataanalys, pekar också på betydelsen av artificiell intelligens.

— Med AI och bildigenkänning kan stora mängder data analyseras snabbt och kunderna få insikter både betydligt snabbare och till en helt annan prisnivå än tidigare.

Men även om du inte själv har möjlighet att utföra eyetrackingstudier på dina designer finns det lärdomar att hämta från de många studier som redan har gjorts.

Både Andreas Olsson och Jason McMillion säger att det kan vara riskabelt att förlita sig enbart på tidigare studier. Med så många variabler och än så länge grundläggande förståelse för varför vi tittar som vi gör kan något som fungerade bra i en studie visa sig mindre optimalt i ett annat sammanhang.

Det kända F-mönstret som ibland visar sig när personer läser på webben.

Fem heta tips från Jason McMillion

1. Sammanhang är det som styr hur vi uppfattar en viss kommunikation. Därför är bakgrunden avgörande för hur budskapen kommer att uppfattas.

2. Testa inte bara ert egna material utan kolla av era konkurrenter. Finns mycket man kan lära sig!

3. Se till att lyfta fram er som avsändare i era annonser – de flesta konsumenter missar den nämligen. Speciellt viktigt om ni jobbar i en konkurrensutsatt bransch, missar man er som avsändare så riskerar ni att betala dyra annonspengar för att bygga upp era konkurrenter.

4. Med endast 15–20 personer, vet vi exakt hur människor reagerar på en viss design. Ingen skillnad om vi gör samma test med 1 500 personer. Det säger något om hur lika vi reagerar på visuella intryck!

5. Sist men inte minst, att veta är inte samma sak som att göra.

Ett exempel som ofta nämns i eyetrackingsammanhang är det så kallade F-mönstret. Det kom ursprungligen från en studie gjord av Nielsen Norman Group 1999 och visade ett tydligt mönster i hur försökspersonerna läste, i en F-liknande form som alltid utgår från det övre vänstra hörnet.

— Men man ska komma ihåg att det man studerade var avgränsade områden med innehåll, som exempelvis textstycken. Inte hela webbplatser. Ibland hör man folk tala om F-mönstret på en hel sajt och hur det betyder att man alltid ska ha en meny i toppen och en i vänsterkolumnen. Detta är en feltolkning av studien, säger Andreas Olsson.

Need Insights egna undersökningar har också visat att F-mönstret mer eller mindre har försvunnit mellan 2005 och 2018 bland användare som söker på Google. Trots det finns ändå ett antal grundläggande slutsatser som återkommer i många studier:

Människor. Finns ett mänskligt ansikte i designen? Då är sannolikheten hög att det är dit betraktarens ögon dras allra först.

Siffror och diagram. Ett annat återkommande resultat är att vi dras till stora siffror och grafik som diagram innan vi tittar på text.

Få saccader är bättre. En ”vägg av text” innebär att betraktaren måste röra ögonen hundratals gånger för att ta till sig budskapet. En enkel design med en central rubrik och två knappar med tydliga funktioner kan tas in i sin helhet med bara några få saccader.

Uppdelning och rubricering. Två webbplatser med mycket information kan uppvisa helt olika gensvar från läsare beroende på hur informationen är presenterad. Fler korta stycken, mellanrubriker och gruppering efter ämne är exempel på hur läsaren kan ledas rätt till det hen är intresserad av.

Resultatet av en eyetrackingundersökning på dator är oftast en heatmap i stil med denna.

Fler tips för design med eyetracking:

Ha en tydlig frågeställning.

Det händer ganska ofta att folk gör misstaget att göra en inspelning med eyetracking, utan något särskilt mål. Problemet då är att att det blir väldigt svårt att göra en bra analys av detta eftersom man inte riktigt vet vad testpersonen är ute efter att göra. Och våra ögonrörelser varierar helt beroende på vad vi letar efter.

Engagera med eyetracking.

Andreas tycker att när man får se eyetrackinginspelningar, där verkliga personer brottas med verkliga användarproblem, så har dessa en förmåga att väcka empati. Det kan vara väldigt effektivt när du behöver övertala andra om designförbättringar som måste göras.

Testa ofta och begränsat.

En bra designprocess bygger alltid på att man testar och förbättrar sin design. När man gör kvalitativa tester där en testperson får klicka igenom exempelvis en prototyp kan man plocka in enkla och effektiva verktyg som Tobii Pro Sprint.

Knep kan fungera. Ett foto på en människa som tittar in i kameran drar uppmärksamheten till sig, men leder den inte vidare till något annat. Ett foto där personen istället tittar på ett textstycke intill får betraktaren att först titta på personen och sedan följa blicken till texten. Jason McMillion ger ett annat exempel:

— Ett annat exempel än den som du lyfter fram är att rama in objekt. Inramade objekt eller med samma eller olika färgade bakgrunder har en enorm påverkan på hur vi uppfattar kommunikationen. Vi har fall där man dubblat sin respons och konvertering bara genom att rama in två objekt.

Utnyttja fynden. Jason McMillion påpekar att det är viktigt att tänka på vilken målgrupp du har för en design. När vi ser en annons reagerar vi undermedvetet på den och fattar beslut om vi ska läsa mer eller avfärda den utifrån otroligt lite information. När vi redan är intresserade av något är vi däremot villiga att lägga ner mycket mer tid.

Ett exempel på det kan vara en bruksanvisning för en produkt, jämfört med dess förpackning. Den senare ska försöka fånga din flackande blick där du står i butiken, medan den tidigare ska vara så lättförstådd som möjligt med målet att du ska bli nöjd med produkten.

Eyetracking går lika bra att använda för att studera fysiska miljöer som butikshyllor, som på skärm.

Andreas Olsson säger att det är viktigt att tänka på vad budskapet är och vad det är du faktiskt vill dra uppmärksamheten till:

— Man kan få användares uppmärksamhet genom en vedervärdigt designad blinkande banner på en sajt som, i övrigt, är stilren. Men uppmärksamhet är enbart det första steget. Vilka associationer får en sådan banner hos användaren, vad väljer hen att göra sen?

Need Insights undersökningar har inte kunnat uppvisa någon skillnad i hur vi uppmärksammar design vi tar till oss som en reaktion på att se det (annonser, tidningsomslag och så vidare) beroende på medium. Men för sådant vi själva har sökt upp av intresse finns däremot stora skillnader.

— Att läsa en artikel på webben är inte detsamma som att läsa den i ett magasin, både upplevelse och beteende skiljer sig, säger Jason McMillion.

Annons
Annons
Annons

Magasinet

magimage
magimage
2019
No2

Interaktiva affischer med Pangpangpang | Visual Arts resa | The Emotional Art Gallery | Galleri: The Pavilion | De formger för Times Square | Personporträtt: Åsa Kax Ideberg | TBWA moderniserar

Prenumerera
magimage
magimage
2019
No1

Fotorealistisk 3D hos Foam Studio | Offentlig konst i 3D | Galleri med Sven Prim | Ines Alpha sminkar med 3D | The Reprap Story | Omvärldsspaning | Framtiden för 3D | Vinetiketter för världen från Karlstad

Prenumerera
magimage
magimage
2018
No4

Personporträtt med fotografen Weroncka Gȩsicka | Illustrera med papper | Flat design | Att välja bild | Konflikt och Kreativitet | Platt formagivning tar steget in i framtiden | Så når du betraktaren | Analys av Ericssons nya logotyp

Prenumerera
magimage
magimage
2018
No3

Så jobbar Tele2 Inhouse | Lean design för formgivare | Effektiv utomhusreklam | Galleri: Björn Persson | Inhouse: Stockholms stadsbibliotek | Anti-copying in design | Inhouse: MoMA | Intervju: Christina Knight

Prenumerera
magimage
magimage
2018
No2

Sthlm signs handmålar | Nordblicks nya profil | Semiotik i grafiken | Galleri: Simon Hjortek | Löwengrips redesign | Designa effektiva logotyper | Att redesigna eller ej | Nystartade studion Ulmaja Wilsson | Vi testar Loupedeck

Prenumerera
magimage
magimage
2018
No1

Passionsfyllt foundry | Typografiska omslag | Jämställt inom typografin | Historisk inspiration | Rörlig typografi | Att nå ut med snitten | Webbverktygen för typo | Byråer efter koncept

Prenumerera
magimage
magimage
2017
No5

Framtiden för reklam | Inkludering för tillväxt | Formgivarens roll i en globaliserad värld | Norm Form | Aardman Studios | Färg på rätt sätt | En kräsen generation

Prenumerera
magimage
magimage
2017
No4

Klarnas nya form | Från A till Zlatan | Vikten av design hos Sveriges digitala jättar | Curious ställer frågan först | Starka identiteter för stora varumärken | Converse tar steget fram med blicken bakåt | Nordiskt fokus på flygplansmat

Prenumerera
magimage
magimage
2017
No3

Psykedelisk design | Koncept för krögare | Gedigna kreatörer | Identitet med stil | Matigt fotografi | Alectas historia | Läskig analys

Prenumerera
magimage
magimage
2017
No2

VR till folket | Karaktärsdesign | Robert Sundelin | Johanna Hanno | En byrå över gränser | Framtidens filmstudio | Wacoms nya plattor | Juventus rebrand

Prenumerera
magimage
magimage
2017
No1

Fantastiska världar – Alexander Jansson & Mina Lima | Jakob Trollbäck | Rysk revolution | Magasindesign | Ny form för public service |

Prenumerera
magimage
magimage
2016
No4

Starta egen byrå? – Möjligheterna, utmaningarna och fallgroparna | SJ byter spår | På besök hos Bold | Få effekt utomhus | Typsnittens psykologi | Pionjärer inom VR | Pinterests planer

Prenumerera
magimage
magimage
2016
No3

Tonsäkra omslag – från vinyl till ikon | I huvudet på Jesper Waldersten | En bråkig 40-åring | Där data dominerar | Stjärnskottet Rachel Gogel

Prenumerera
magimage
magimage
2016
No2

Att formge bortom skärmen | Jonathan Barnbrook | Sätt översättningarna | Så funkar Adobe XD | Aktuellt | Portfolio

Prenumerera
magimage
magimage
2016
No1

Design <3 kod I Färglära från Way Out West I Hon formar nyheterna I Så arbetar du med virtuell verklighet

Prenumerera
magimage
magimage
2015
No8

Henrik Nygren | Formgivarpanelen trendspanar | Appar utan kod | Årets stora formhändelser

Prenumerera
magimage
magimage
2015
No7

Tema: Typografi | Tobias Frere-Jones | En eklektisk typ | Slitstark form | Från Lady Gaga till Hamilton

Prenumerera
magimage
magimage
2015
No6

Tema: Karriär | Framtidens kompetens | Björn Kusoffsky | Maxa frilansverksamheten | Nyheterna i Adobe Creative Cloud

Prenumerera
magimage
magimage
2015
No5

Tema: Hantverk | En responsiv pionjär | Lotta Kühlhorn | Färgglad ölform | Guide: Kalligrafi

Prenumerera
magimage
magimage
2015
No4

Tema: Grafisk identitet | Tre identiteter | Acne Advertising | Alla finalister i #omSLAGET | Emojins intåg

Prenumerera
magimage
magimage
2015
No3

Bärbar design | Filmisk form | Jane Bark | Högupplösta skärmar | Uppe i molnet

Prenumerera
magimage
magimage
2015
No2

Wyatt Mitchell | Grafitti i storformat | Iskalla typer | Ett tungt frågetecken | Guide: Välj rätt papper

Prenumerera
magimage
magimage
2015
No1

Bildens kraft | Microsofts designchef om framtiden | Lasse Skarbövik | Spel som gör skillnad | Guide: Nyheterna i Camera Raw

Prenumerera