5 bankers startsidor i jämförelse

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:

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å.