En besökare som landar på din hemsida bestämmer sig nästan direkt för om hon ska stanna eller klicka vidare. Hon hinner inte läsa dina texter, se dina priser eller förstå hur bra din tjänst är – hon reagerar på helheten. Därför är design inte bara en fråga om att det ska se snyggt ut, utan om att fånga uppmärksamheten och leda besökaren vidare. Här går vi igenom de viktigaste sätten att göra det, med en svensk e-handlare som exempel på hur bilder kan bära ett helt första intryck.
Första intrycket avgörs på bråkdelen av en sekund
Rubriken säger fem sekunder, men i själva verket går det ännu fortare. En kanadensisk studie ledd av Gitte Lindgaard visade 2006 att människor bildar sig en uppfattning om en webbsida på omkring 50 millisekunder – och att den uppfattningen i stort sett höll i sig även när de fick titta längre.
Google följde upp med en egen studie 2012. Där bedömde deltagarna webbsidor som visades i bara 17–50 millisekunder. Två saker avgjorde om sidan uppfattades som tilltalande: låg visuell komplexitet och hög prototypikalitet – det vill säga att sidan såg ut som man förväntar sig att en sida av det slaget ska se ut.
Slutsatsen för den som bygger en hemsida är enkel: besökaren läser inte först – hon ser. Färger, bilder, luft och ordning avgör om hon ger sidan en chans.
Bilder bär intrycket – exemplet OneVape
Bilder är det snabbaste sättet att säga vad en sida handlar om. Ett bra exempel är den svenska e-handeln OneVape, som säljer vape-produkter till vuxna. Där görs nästan allt arbete med det första intrycket av bilderna.
Det fungerar bra
- Stora bannrar högst upp. Startsidan öppnar med ett bildspel i full bredd: produkter i starka färger, ett tydligt budskap och ett pris i stor stil. Besökaren förstår direkt vad butiken säljer och vad som är nytt.
- Kategorier som bilder. Under bannern visas kategorierna som runda bildikoner – engångsvape, podsystem, e-juice och så vidare. I stället för att läsa en lista ser besökaren produkterna och väljer.
- Produkten i fokus. Produktbilderna är frilagda mot ljus bakgrund i lika stora kort. Det gör att sidan ser ordnad ut trots att den innehåller många produkter, och att det är lätt att jämföra.
- Bild och fakta tillsammans. Under varje bild står de viktigaste uppgifterna – smak, styrka och pris – med en tydlig köpknapp. Bilden väcker intresset, texten bekräftar.
- Tillgängligt. Bilderna på startsidan har alternativtexter, vilket hjälper både synskadade besökare och sökmotorer.
Det går att lära av – också det som kan bli bättre
Exemplet OneVape visar också baksidan av en bildtung sida. Startsidan är mycket lång, och kategorierna visas på flera ställen: i menyn, som bildikoner och i produktkaruseller. Bannrarna kommer från olika varumärken med olika stilar, vilket gör att helhetsintrycket kan kännas splittrat. Och när produktbilder laddas in efter hand syns grå platshållare en stund, vilket kan se ut som ett fel – särskilt i mobilen.
Dessutom möts den nya besökaren av både en ålderskontroll och en cookieruta innan butiken syns. Det är nödvändigt för en butik med åldersgräns, men visar hur lätt det är att något annat än bilderna blir det första intrycket.
Lärdomar om bilder
- Låt en bild säga en sak. Bannern ska ha ett budskap, inte fem.
- Håll ihop bildstilen. Samma ljus, bakgrund och format gör sidan lugn och professionell.
- Visa produkten eller tjänsten i bruk när det går – det hjälper besökaren att se sig själv som kund.
- Optimera för mobilen. Bilden måste fungera även på en smal skärm, och laddas snabbt.
- Glöm inte alt-texten. Den är både tillgänglighet och sökmotoroptimering.
- Tänk på målgruppen. Färger och motiv säger något om vem sidan vänder sig till – det är extra viktigt för produkter med åldersgräns.
Fler sätt att fånga besökaren
1. En rubrik som svarar på frågan ”är jag rätt här?”
Besökaren vill direkt veta vad du erbjuder och för vem. En kort, konkret rubrik högst upp – gärna med ett löfte – slår en snygg men intetsägande slogan. Vi bygger hemsidor åt småföretag i Västsverige säger mer än Vi skapar digitala upplevelser.
2. En tydlig nästa handling
Varje sida behöver en huvudknapp: Boka tid, Se sortimentet, Begär offert. Ge den en färg som sticker ut och placera den där ögat landar. Flera konkurrerande knappar gör att besökaren inte väljer någon.
3. Luft och ordning
Googles forskning visar att enkla sidor uppfattas som mer tilltalande. Ge innehållet utrymme, använd få typsnitt och en begränsad färgpalett. Det som inte behövs på startsidan kan ligga en klick bort.
4. Bekant struktur
Besökare förväntar sig logotypen uppe till vänster, menyn högst upp, varukorgen uppe till höger och kontaktuppgifterna längst ner. Att vara annorlunda i innehållet är bra – att vara annorlunda i strukturen gör sidan svårare att använda.
5. Förtroende tidigt
Kundomdömen, betyg från Trustpilot eller Google, kända betalsätt, tydliga leveransvillkor och riktiga bilder på människorna bakom företaget minskar osäkerheten. OneVape visar till exempel sitt Trustpilot-betyg och sina betalsätt tidigt på startsidan.
6. Snabbhet
En sida som tar lång tid att ladda förlorar besökare innan de ens sett den. Komprimera bilder, använd moderna bildformat och testa sidan i mobilen över ett vanligt mobilnät.
7. Mobilen först
För många företag kommer de flesta besök från mobilen. Knappar ska vara stora nog för fingrar, texten läsbar utan att zooma och menyn lätt att hitta.
8. Rörelse – med måtta
En kort video eller en subtil animation kan väcka uppmärksamhet, men automatiska bildspel som byter för snabbt eller popup-fönster direkt vid första besöket stör mer än de hjälper.
9. Personlighet
En tydlig ton i texterna, egna bilder i stället för bildbanksbilder och en färg som är din gör att besökaren minns dig. Det är skillnaden mellan en sida som fungerar och en som syns.
10. Sök och filter för den som vet vad den vill ha
För e-handlare med stort sortiment är en synlig sökruta och bra filter lika viktiga som bilderna. OneVape låter till exempel besökaren filtrera på smak, styrka och varumärke direkt i kategorin.
Vanliga misstag
- För mycket på en gång. Fem budskap i bannern, tio knappar och en lång startsida där allt får samma tyngd.
- Popup-fönster före innehållet. Nyhetsbrev, chatt och cookies som tävlar om uppmärksamheten innan besökaren hunnit se något.
- Bildbanksbilder som inte säger något. Leende människor i ett kontor som kunde vara vilket som helst.
- Inkonsekvent stil. Bilder, typsnitt och färger som inte hänger ihop.
- Glömd mobilvy. Sidan testas på datorn men besöks i telefonen.
Checklista: fångar din startsida besökaren?
- Förstår en ny besökare inom några sekunder vad du erbjuder?
- Finns det en tydlig huvudknapp ovanför vecket?
- Säger huvudbilden samma sak som rubriken?
- Har bilderna en gemensam stil?
- Visas förtroendesignaler tidigt?
- Laddar sidan snabbt i mobilen?
- Är knappar och länkar lätta att träffa med fingret?
- Möts besökaren av högst en ruta innan innehållet syns?
- Har bilderna alt-texter?
- Känns sidan som just ert företag?
