Jag använder ibland Feng Gui – en tjänst som visar var en människas uppmärksamhet faller på en sida – och bestämde mig för att göra en jämförelse mellan startsidorna hos de stora drakarna i min favoritbransch på webben: bankerna. Jag tittar på så kallade auto-genererade heat maps men också på sidornas storlek (kB), sidladdning och antal länkar. Skillnaderna mellan bankernas startsidor är större än jag anade.
Jag valde storbankerna Handelsbanken, SEB, Nordea och Swedbank, samt förstås en utmanare: Skandiabanken.
Kort om Feng Gui
Tjänsten Feng Gui är kontroversiell i branschen (frågan är om en dator verkligen kan räkna ut hur en människa tittar) men det ger absolut ett första underlag för diskussion som du sedan bör ta vidare i fortsatta tester. För mig är Feng Gui ett effektivt verktyg för att sparka igång en givande dialog: så fort människan har en bild framför sig så är det lättare att skapa berättelser och problemformuleringar kring artefaktet.
Det du måste komma ihåg är att bilderna från Feng Gui antyder vad som händer under de första 15 sekundrarna5 sekundrarna (uppdatering: jag fick en rättelse från Feng-Gui, det är de första 5 sekundrarna som gäller och INTE 15) som en människa tittar på dem, och då en människa som inte utsatts för bilden tidigare. Feng Gui själva menar att deras tjänst ger ett resultat som är till 80% i paritet med tester som utförs med riktig eyetracking-utrustning. Om det är ett genomsnitt så kan vi tänka oss att det ibland är närmare och ibland längre ifrån likvärdighet.
Och vad visar bilderna då? Jo, för varje bank har jag 4 bilder:
- Bild 1 är originalbilden som är en skärmdump av bankens startsida från slutet av februari
- Bild 2 (fläckar med grön/orange/rött) är en heat map där de färgade ytorna visar vad som drar fokus till sig. Ju rödare/större ytan är desto större sannolikhet att blicken vilar där lite längre.
- Bild 3 (punkter med streck) är en gaze plot som visar i vilken ordning komponenterna drar uppmärksamhet till sig. Siffran 1 indikerar alltså att det är det första man tittar på, och så vidare.
- Bild 4 (svart bild) är en opacity map, vilket i princip är en inverterad heat map och är ett pedagogiskt verktyg som illusterar vad man faktiskt ser på sidan.
Vi ska som sagt vara försiktiga med att dra alltför stora växlar och slutsatser utifrån dessa bilder. Det vi ska fokusera på är tendenser till ett visst beteende, mönster i bilderna och enkla jämförelser.
I bilderna ser vi till exempel:
- Ansikten drar uppmärksamhet till sig (syns hos Handelsbanken, Nordea och Skandiabanken)
- Starka färger drar uppmärksamhet till sig (syns hos SEB och Swedbank)
- Innehållsblock som är tydligt differentierade från varandra (rubrik kontra länklista kontra reklampuff) gör det lättare att snabbt scanna av sidan (syns tydligast hos Handelsbanken och Swedbank)
Handelsbanken
[slickr-flickr tag="hmapbanks,handelsbanken" tagmode="all" flickr_link="on"]
Kommentar: En minimalistisk layout som lyckas bra med att lyfta fram de fyra menyalternativen.
SEB
[slickr-flickr tag="hmapbanks,SEB" tagmode="all"]
Kommentar: En överväldigande meny som gör det svårt att hitta rätt med blicken. Orange annons och bilden får för mycket fokus och underlättar inte navigeringen.
Nordea
[slickr-flickr tag="hmapbanks,nordea" tagmode="all"]
Kommentar: Sidan är förvisso indelad i block men de ser likadana ut allihop. Det är svårt att förstå var Nordea vill att man ska titta… överallt samtidigt? Flikarna funkar dock bra ur ett navigeringsperspektiv.
Swedbank
[slickr-flickr tag="hmapbanks,swedbank" tagmode="all"]
Kommentar: Lite mer luft och tydliga innehållsblock gör att besökaren hittar rätt med blicken och kan scanna av. Men vänstermenyn är tung och inte särskilt tilldragande.
Skandiabanken
[slickr-flickr tag="hmapbanks,skandiabanken" tagmode="all"]
Kommentar: Många tunga färgstarka block som alla signalerar ”se på mig!” fungerar sämre än väntat. Ansikten får första blicken och menyerna hamnar då också i skymundan.
Optimering av bankernas startsidor
En startsida ska förstås ladda snabbt och skapa så lite förvirring som möjligt. För att se hur bankerna står sig mot varandra, och för att få fler datapunkter, valde jag också ut några jämförbara värden som lätt uppmäts med hjälp av Web Developer Toolbar för Firefox/Chrome samt Googles Page Speed Online. resultatet ser du i följande tabell:
| Handelsbanken | SEB | Nordea | Swedbank | Skandiabanken | |
|---|---|---|---|---|---|
| Antal dokument | 1 (12KB) |
5 (59KB) |
1 (32KB) |
1 (8 KB) |
1 (24KB) |
| Antal bilder | 7 (19KB) |
14 (101KB) |
14 (77KB) |
16 (88 KB) |
10 (19KB) |
| Antal skript | 5 (54KB) |
7 (122KB) |
7 (117KB) |
12 (380 KB) |
5 (103KB) |
| Antal CSS | 2 (24KB) |
1 (29KB) |
2 (7KB) |
4 (103KB) |
3 (168KB) |
| Total vikt (KB) | 109 KB | 341 KB | 233 KB | 579 KB | 385 KB |
| Antal länkar (varav JS) |
12 (2) |
53 (5) |
60 (1) |
63 (13) |
39 (4) |
| Page Speed Score | 55/100 | 44/100 | 71/100 | 30/100 | 38/100 |
Slutsatser om bankernas startsidor
Swedbank är tung och trögladdad
Swedbank utmärker sig genom att kräva 5 gånger mer KB för att ladda klart än Handelsbanken. De har också flest bilder, flest skript och flest länkar, varav hela 12 länkar är JavaScript-länkar(!), vilket i sig indikerar en onödig krånglighet i deras upplägg.
Ironiskt nog är Swedbank en av de få som komprimerar, men de komprimerar bara sina dokument, vilket är anledningen till att deras dokument är så mycket mindre än de andra. Det är faktiskt bara Nordea som komprimerar CSS och skript ordentligt.
Det finns massor att göra hos Swedbank för att få ner laddningstiden, samtidigt som de designmässigt lyckas ganska bra med att skapa en tydlig startsida. De behöver jobba med att stycka upp sin vänstermeny i mer lättlästa block.
Obestämda signaler skapar brus och förvirring
Bankernas hemsidor lider av samma sak som de flesta hemsidor. Istället för att leda besökaren rätt så slåss man om besökarens uppmärksamhet. Som om hon inte hade nog med budskap att traggla sig igenom. Handelsbanken ger ett föredömligt exempel i jämförelsen, och låter besökare först känna sig trygg med att hitta rätt och håller antalet synliga länkar till ett minimum.
Åtgärder för bankernas startsidor
Några av åtgärderna hos Swedbank (och även de övriga bankerna) bör vara:
- Komprimera mera. Alla skript, bilder och CSS-filer bör komprimeras och även sammanfogas. Det är osannolikt att Swedbank ska behöva så många filer som de kräver att besökarens webbläsare ska hämta. Använd till exempel Minify.
Sammanfoga bilder. Ja det går. Det kallas för att skapa CSS sprites. Istället för att varje ikon är en egen bild så kan alla ikoner bli en enda bild och sedan används CSS för att styra vilken del av bilden som visas. Det gör att den enda bilden laddas bara en gång (trots att den utgörs av många mindre bilder) och även blir mindre i storlek. Till höger har jag till exempel gjort en bild av 9 ikoner som idag laddas separat. Läs mer om CSS Sprites.- Utöka browser-cachning. Genom att ange att vissa komponenter (ikoner, CSS) har en livslängd på ca en vecka, så sparas dessa i webbläsarens cache och laddas mycket snabbare. Det kan göras med betydligt fler komponenter än man gör idag. Läs mer om cachning.
Liten inte resurssnålast, visar Skandiabanken
Det förvånar mig lite att Skandiabanken klarar sig så dåligt i jämförelsen. De kräver mer nedladdningar än 3 av storbankerna och är näst sämst när vi kollar hur bra de är på att optimera för Page Speed. De komprimerar inte och slarvar med cachning. När det gäller resultatet som visas i heat map är Skandiabankens dock den jag verkligen skulle vilja testa med riktig eyetracking-utrustning; jag hade förväntat mig tydligare fokusområden.
Sammanfattningsvis
När vi hanterar budskap via webb så är det mycket som ska klaffa. Designen måste skapa ytor som jag lätt förstår att jag ska läsa. Men vi måste också leda besökaren till rätt yta, så att det inte bara blir ett minfält av budskap att ta sig igenom för att hitta rätt. Ge mig rätt verktyg på rätt plats, och på startsidan bör det vara: (1) Information om vad jag kan göra nu och (2) En förståelse för hur jag går vidare och gör det.
Till detta kommer att vi måste bygga sajten på ett sätt som inte förstör upplevelsen trots snygg design. Om det tar lång tid att ladda och om vi är överösta med länkar så riskerar vi att sätta krokben för webbsatsningen. Det gäller att ha koll på alla objekt: CSS, bilder och skript för att det inte ska bli en gryta som kokar över av kodglädje och skrämmer bort de hungriga kunderna.
Det finns enkla, kostnadsfria och lättåtkomliga verktyg för att snabbt utvärdera hur väl du ligger till. Börja mäta och utvärdera för att säkerställa att du inte gör misstag som lätt rättas till och genast bidrar till en bättre användarupplevelse.
När du vårdar din webbplats märker besökarna hur trevligt ditt innehåll är och hur omtänksamt det presenteras. Det är då de kommer tillbaka och vill träffa webbplatsen igen. Tänk om alla banker tänkte så.
Intressant. På flera sätt.
Jag använder SEB, Swedbank och Skandiabanken parallellt just nu (snart bara Swedbank pga bäst bolåneränta, reklam reklam).
Av de tre så uppfattar jag subjektivt Swedbank som mest snabbladdad. Särskilt vid dålig bandbredd. Kanske kan vara en kombination av datamängder, hur sidan renderas och mina attityder/förväntningar.
När det gäller att snabbt ladda/rita upp sidor så har aftonbladet.se gjort mycket för att jobba med snabbheten i samband med t.ex. javascript som ska laddas: http://www.youtube.com/watch?v=M4FwTFUOLY8
När det gäller låtsasheatmaps med Feng-gui så ställer jag mig långt långt bort på skalan av skeptiker. Varför:
1) Feng-gui har vad jag vet inte någon språkuppfattning. Och även om sidstruktur, färg, bilder, ansikten, ögon drar till sig blicken så har jag svårt att tro att texter särskilt vid primärfunktioner inte spelar roll. Tänk dig en bild på en attraktiv person med något enstaka ord vid. Visst spelar det roll om du förstår ordet, om det är något du uppfattar som positivt eller ointressant? 15 sekunder är en lång tid. Så lång tid att man har hunnit läsa en hel del.
2) Jag har testat några skärmdumpar på en sajt under utveckling i Feng-gui. Heatmappen är helt osannolik. En stor porträttbild av kvinna som tittar in i kameran. Heatmappen toppar på brädvägg bakom, vid sidan om hennes öron. Små bilder av personer som tittar rakt in i kameran. Ingen heatmap alls.
Min magkänsla är att beraktaren borde möta blicken både på stora bilden och de små. Min gissning är att den stora bilden är för stor för att Feng-gui:s algoritm ska känna igen att det är ett ansikte, och att de små är för små för att kännas igen.
Tyvärr använder jag bilder som jag inte har rätt att dela med mig av, annars hade jag postat exemplet.
Nej, jag tror att Feng-gui gör mer skada än nytta. Även bara som start för en diskussion.
Det är ungefär som att på ett utvecklingssamtal i skolan få höra: ”Ditt barn är bråkigt, skriker och kastar sand på de andra.” Du frågar ”Vad? Har du sett det?”. Läraren svarar ”Nej, det har jag inte sett, men det vet man ju hur barn i den åldern är. Men okej, nu går vi vidare till hur det går med matten…” Hur bra start fick det samtalet?
Om de har 80% korrelation så tror jag att det är på ett mycket snävt urval av sajter med ett snävt urval av referenspersoner.
Hehe, utvecklingssamtalet som parallell vänder jag mig mot, den kärleken har jag inte till min webb, och jag uttrycker mig inte på det sättet
– men jag har fullständig förståelse för din skepsis till verktyget.
Allt handlar förstås om hur man presenterar underlaget och hur man väljer att prata om det: OM man är öppen med att det är ett diskussionsunderlag och att det finns en stor felmarginal så kan man istället t ex prata kring:
* finns det anledning att tro att annonsens orangea färg tar för mycket fokus från övrigt innehåll
* finns det för många element på sidan för att man ska hitta rätt
… och det ger i sin tur input till frågor man vill ha svar på i en användningstest.
Generellt sett så uppfattar jag att människor som får se sin webbplats i bilder på detta sätt får en förnyad förmåga att se detaljer som de inte tidigare lagt märke till. Och det är positivt för mig. Och då kan det nästan vara egalt om man man ens försöker dra några slutsatser alls från de färgade fälten i bilderna.
Allt det här kan man prata om utan Feng Gui-bilder men det händer något med människor när de ser sådana här bilder, de blir lite trollbundna och engagerade. Jag tar gärna den lite kontroversiella fajten för att få upp intresset för att gå vidare med andra tester. I sig är det så billigt och snabbt att ta fram dylika bilder, och de genererar ofta intresse för att genomföra mer regelrätta användningstester.
Jag har också sett eyetracking-resultat som visar helt annat än Feng Gui men jag är övertygad om att det går att få helt olika eyetracking-resultat i samma tjänst beroende på vilka frågor man ställer. Även eyetracking är alltid en startpunkt men aldrig en enskild och avgränsad källa till åtgärder eller slutsatser – den måste alltid kompletteras med samtal och intervjuer. En datakälla är ingen datakälla, flera datakällor kan indikera ett mönster.
Det andra som du tar upp Stefan är förstås också jätteintressant: det här med att man kan uppleva att en sajt är mer snabbladdad trots att den kanske inte på papperet är det. Har för mig att Jakob Nielsen påpekade detta tidigt. Alltså: inte ens faktiska värden räcker egentligen för att utvärdera upplevelser, utan man måste göra tester med människor…
Sedan finns det ju möjligheter att ladda element i en viss ordning vilket kan bidra till att den synliga delen av sajter faktiskt laddar snabbare trots att de är ”tyngre”. Men att inte utnyttja möjligheter till komprimering är förstås ändå alltid en miss i helhetsperpektivet.
Kollade snabbt: Jakob uppdaterade sin artikel om response times från 1993 under 2010 med lite eyetracking-bilder
http://www.useit.com/alertbox/response-times.html
Om det där med upplevd nedladdningstid… En del dags/kvällstidningars sidor kan ju ta uppåt en minut innan de är färdigladdade. Men de är oftast användbara redan efter några sekunder.
Där finns ju konkurrensen mellan att ge användaren en tillräckligt bra sida tillräckligt snabbt för att stanna kvar samtidigt som annonsnätverkens banners med prestandamässiga vidriga iframes och javascript ska visas för att dra in pengar.
[...] Läs mer: 5 bankers startsidor i jämförelse | axbom [...]
Om Feng-gui: Nej. Skit är skit även om man får en rapport som ser snygg ut.
Att ta en diskussion med en sajtägare utgående från ett verktyg som jag tror har så lite korrelation med verklig upplevelse * är kvacksalveri.
Då lägger jag hellre ett smörpapper över skärmen och säger ”ser du vad mycket organge det är på din sajt, man ser inte ert fina erbjudande där till höger, bara att det är ett ansikte bredvid.”
*) Och vad är det som Feng-gui försöker efterlikna? En mätning av någon sorts upplevelse? Av vad? Att man tittar på en skärmsida i 15 sekunder för att lösa en uppgift? I så fall vilken uppgift? För att berätta vad man tycker om sidan?
Jag har svårt att se någon korrelation med något nyttigt som vi vill mäta – eller ha som utgångspunkt för en diskussion.
Då målar jag hellre heatmaps på skärmdumpar själv baserat på mina egna gissningar.
En modell som jag inte tror på, och inte hittar något stöd för med en snygg rapport.
Jag ser ingen koppling mellan att jobba användarcentrerat och använda feng-gui. Tvärtom. Det är ett stort steg bort från användaren.
Mycket snack. Ok, sammanfattat:
1. Jag vet inte vad feng-gui mäter.
2. Jag hittar inget som får mig att tro att korrelationen är större än felmarginalen vid ditt bankexempel och mitt testskott.
3. Modeller som är sämre än slumpen har vi ingen nytta av.
Jag är inte lika mycket övertygad om att Feng Gui är sämre än slumpen men du har övertygat mig om att grotta mer i Feng Gui =)
Interesting stuff, but I’m guessing that Feng Gui doesn’t simulate any particular user task… and people don’t normally come to a site just to look at it. Particularly on something like a bank site then their task will have a huge impact on how they look at a page. I have to concur with Stefan…
Heed my word, I will be writing a follow-up post on Feng Gui specifically
I’ve also contacted them and hope to do an interview with them that can be published along with the next episode of UX Podcast.
Also note that the observations in this article are not based on conclusions drawn solely from the Feng Gui images, which are primarily used to illustrate how differently the various start pages can be perceived, As of yet I still feel that the imagery can be useful if used correctly along with other data points and with the right approach (not actually mistaking them for eyetracking alternatives) although I realise that they themselves actually do reference eyetracking results.
The main faults of Feng Gui are of course the ones you have mentioned:
1) Not task-oriented, hence not searching for anything specific
2) No text-interpretation, and hence not triggered by words
This article, by Aga Bojko (@agabojko), referred to me by James Royal-Lawson (@beantin) is a good read on the subject. The comments make it the best source of insights I’ve seen on this: http://www.rosenfeldmedia.com/books/eye-tracking/blog/participant-free_eye_tracking/
[...] 5 bankers startsidor i jämförelse [...]