Hero image

Vad är en hero image?

Hero image är en term inom webbdesign som beskriver den fullskärmsomfattande videon, fotot, illustrationen eller bannern som välkomnar besökare på en webbsida. Bilden har alltid en framträdande plats nära toppen av en webbsida och sträcker sig ibland över hela skärmens bredd. 

Även känd som hero header eller hero section, fungerar den inte bara som användarens första intryck av ditt företag, utan också som en viktig del av användarupplevelsen på din webbplats.

Den ideala hero imagen kommer att:

• Fånga användarens uppmärksamhet
• Visuellt demonstrera ditt värdeerbjudande
• Hjälpa användaren att navigera till exakt rätt information

Källa: Optimizely

Utöver en högupplöst grafik kan och bör en hero image innehålla företagets unika säljargument (USP). Du kan också koppla den till ett konverteringsmål, till exempel ett registreringsformulär eller en CTA-knapp. 

Fördjupa dig i «vad», «varför» och «hur» kring hero images nedan, inklusive: 

• Varför webbdesign bör prioritera hero images

• De olika typerna av hero images

• 3 (viktiga) saker att komma ihåg när du skapar hero images

• Fantastiska exempel på hero images

• Hur du testar olika hero images med A/B-testning 

• Idéer för hero image-testning

Varför bör hero images prioriteras inom webbdesign?

Människor är starkt visuella av naturen, så när det finns en högkvalitativ fullskärmsbild längst upp på sidan kan den skapa ett positivt första intryck. 

Att välja rätt hero image – oavsett om det är ett högkvalitetsfoto, en video eller en illustration – låter dina besökare omedelbart veta att de är på rätt plats. Hero images på mediasajter och bloggar kan också användas för att fånga besökarnas uppmärksamhet och locka dem att läsa artiklarna på sidan. 

Förutom att vara ett måste för en engagerande användarupplevelse (UX), ger en hero image också värde genom att leda användare mot en önskad länk eller  call to action eller presentera ditt företags  värdeerbjudande längst upp på webbsidan.

Vad är de olika typerna av hero images?

Dina hero images hjälper ditt värdeerbjudande att sticka ut för din målgrupp så snart de landar på sidan. 

Bläddra igenom dina favoritwebbplatser och du kommer att se dessa typer av hero images: 

1. Produktfotografering: För många direktförsäljningsmärken och e-handelsföretag är produktfotografering eller en karusell rätt val eftersom det omedelbart visar dina besökare vad som finns tillgängligt på din webbplats. 
2. Sizzle reels: För nya produkter eller företag som levererar tjänster är en fullskärmsvideo känd som sizzle reel rätt val. Sizzle reels är det perfekta tillägget till en landningssida eftersom de förmedlar både information och känsla med mycket lite utrymme på sidan. 
3. Produktfördel- och emotionella bilder: När du säljer en fördel eller känsla kopplad till din produkt eller tjänst kan din hero image vara emotionell: den kan innehålla människor, platser, 
4. Informationsdrivna bilder: Hero images och karuseller är också ett utmärkt sätt att dela information om nya produkter och funktioner, tidsbegränsade erbjudanden och reor. Typografi-only hero images kan också användas för att dela viktig statistik om din produkt, kunder eller bransch. 

3 saker att komma ihåg när du använder hero images 

Med tanke på deras betydelse vill du att dina hero images ska jobba hårt för dig. Men det finns ett par saker du måste jobba hårt med först. 

1) Se till att bilderna har rätt storlek

Om bilderna inte har rätt storlek i din hero-sektion kommer det ärligt talat att se dåligt ut. Med de flesta skärmstorlekar på marknaden idag bör en fullskärms hero image vara 1280px gånger 720 pixlar med ett bildformat på 16:9 för att säkerställa att de inte skadar laddningstiden. Du bör också se till att de är hostade på ett snabbt CDN. När du väljer mobiloptimerade bilder bör du sikta på 800 x 1 200 pixlar.

Men det handlar inte bara om hur det ser ut på sidan. Laddningstiden, både för mobil och desktop, är också extremt viktig för användarupplevelsen. Baserat på forskning gjord av Google har det bevisats att ökad sidladdningshastighet från 0,4 till 0,9 sekunder kan minska trafiken med 20 %. All kraft i din hero image går förlorad om den i slutändan driver bort trafik innan den ens har laddats.

Överväg att låta ditt designteam skapa hero image-mallar, där du kan «färglägga mellan linjerna» på vilken bild som helst. 

2) Välj visuella element som ger kunden värde

Oavsett om du väljer produktbilder, en sizzle reel-video eller ett stockfoto bör din bild förmedla det budskap du mest vill att dina kunder ska ta emot. Försök att undvika irrelevanta eller tvetydiga bilder.

Om du någonsin är osäker eller i ett dödläge med dina kollegor är det bästa sättet att avgöra om du har valt rätt produktbilder att testa dem. Vi tar upp det om ett ögonblick.

3) Få din hero image att sticka ut

Din hero image bör tillföra visuellt intresse på en sida. Det ska få människorna som ser den att känna något. Oavsett vilket medium du väljer bör dina bilder sticka ut på sidan och differentiera din webbplats från dina konkurrenter.

Ett enkelt sätt att göra detta är att se till att du använder överlägg, gradienter och typografi för att förhindra att en bild ligger «platt» på sidan. Men det finns alltid utrymme att gå den extra milen, oavsett din budget.

Kom ihåg att en mycket hög budget inte är en förutsättning för en högkvalitativ hero image. Även om du vill undvika stockbilder där det är möjligt, diskvalificerar inte användningen av dem din webbplats från att attrahera kunder. Du kan till och med använda Adobe Photoshop för att ge en kreativ touch till även de mest grundläggande stockbilderna. Även något så enkelt som att lägga till filter på de stockfoton du väljer ger ett mer sammanhållet utseende på hela din webbplats än att använda dessa bilder som de är – och du kan till och med göra detta i ett enkelt verktyg som Canva. 

5 fantastiska exempel på hero images

Om du är utan inspiration har vi valt ut några fantastiska exempel på hero images för att visa hur andra företag gör det. Kolla in dem!

Target 

Känd för rent design inom alla områden är det ingen överraskning att Targets hero images på sin webbplats uppfyller alla krav för starkt design och tydlig kommunikation. 

Vi älskar den här hero imagen eftersom den är balanserad, fantasifull och tydligt varumärkeskonsekvent. Genom att presentera möjligheterna med riktiga leksaker som ingår i erbjudandena med en tydlig call to action i mitten, väcker den uppmärksamhet och konverterar utan tvekan. 

Faktum är att den här bilden fångar betraktarens uppmärksamhet så väl att Targets webbdesignteam lade till en sponsrad rad från Starbucks precis nedanför. Designen kompletterar till och med hero imagen och är enligt vår mening ännu kraftfullare. 

Chase 

Traditionella banker är inte kända för enastående UX-design eller särskilt kreativ webbdesign, men ibland är funktionalitet allt. I den bemärkelsen uppfyller hero imagen på Chases hemsida alla krav, även om det innebär att man lämnar bakom sig vissa övertygande designtrender. 

Värdeerbjudandet är tydligt; bilden är ren. Det är också ett bra exempel på ett överlägg genom att hålla inloggningen för befintliga kunder synlig. Även om detta är en förväntad funktion (vem vill scrolla för att logga in?), är det också en bra idé att efterlikna för konverteringar. Till exempel kan befintliga mono-linje-kunder se värdet av det här erbjudandet och flytta sitt bankkonto till Chase. 

Detta är också ett bra exempel att efterlikna om du arbetar med begränsade bilder eller videor och stockfoton helt enkelt inte räcker. 

Delta 

Deltas hemsidas hero image avviker också från de senaste designtrenderna men följer en liknande väg som Chase. 

Värdeerbjudandet här är tydligt: Delta har uppgraderat sin produkt och vill konvertera kunder och få tillbaka kunder som kanske tidigare bestämde att det inte fanns tillräckligt med värde i produkten. 

Även om bilden drar blicken bort från den skrivna texten är det inte nödvändigtvis något negativt eftersom det riktar om din uppmärksamhet direkt mot allt det där benutrymmet – en sällsynthet utanför businessklass. Din uppmärksamhetsresa rör sig från benutrymmet till bilden och är emotionell, även om bilden inte är öppet manipulativ. Det får dig att tänka tillbaka på din senaste flygresa och ta en paus för att överväga att prova igen. CTA-knappen «Boka nu» är nästan ett knep eftersom det är knappen som används för att boka vilken flygresa som helst, men du är redan i stämning för att ge det nya premiumerbjudandet en chans. 

Roxy 

Med vår sista bild tittar vi på ett mindre men fokuserat varumärke: Roxy. För dem som inte är bekanta: Roxy är en del av Boardriders Group, ett globalt handelsdynasti bestående av sju varumärken med distinkta identiteter. 

Den hero image vi valde är en kraftfull bild som stämmer överens med den trend vi beskrev tidigare: fokus ligger på mitten av sidan. Vid första anblicken verkar den rörig, men bildens kanter drar blicken tillbaka mot mitten för att fokusera på en kraftfull produktbild med en tydlig call to action som bjuder in webbplatsbesökare att shoppa kollektionen. 

Det är ett djärvt val för en bild, och det kommer säkert att dela designere, men det är mer intressant och emotionellt än en typisk produktbild och ibland kan den här typen av sårbarhet vinna dagen. 

Atlassian 

Vårt sista hero image-exempel kommer från B2B SaaS-innovatören och Optimizely-kunden Atlassian. 

Atlassians hero image är faktiskt en marknadsföringsvideo. Atlassian valde den emotionella, produktfördel-orienterade inriktningen för att positionera varumärket som platsen för teamsamarbete. Det är en imponerande video som täcker Atlassians hela portfölj och varumärkets värdeerbjudande. 

Är den engagerande? Det kan den vara! Men det enda sättet att vara säker är att testa den med A/B-testning.

Hur du testar olika hero images med A/B-testning 

Hur vet du om dina hero images har en inverkan på din webbplats? Kort svar: Du testar dem. 

Resultaten av dessa tester är bland de rikaste data du kan få från din webbplats på grund av deras framträdande placering. Därför rekommenderar vi att använda A/B-testning för att bestämma styrkan hos en given hero image. 

A/B-testning är en metod för att testa webbplatser där 50 % av din trafik visas originalversionen av din sida, och 50 % visas den nya varianten. Genom att visa ett slumpmässigt urval av dina besökare olika versioner av din sida kan du använda data för att avgöra vilken version av din sida som konverterar bättre. 

Om en utmanarsida inte överstiger en originalsida kan du alltid testa nya hypoteser, med variationer i bilder, text och call to action. Du kan också personalisera dina upplevelser genom att visa olika segment av dina besökare olika hero images. 

Genom att kontinuerligt testa olika bilder kan du förbättra dina konverteringsgrader och webbplatsupplevelse över tid. 

Idéer för hero image-testning 

Är du redo att komma igång? Några idéer för att optimera hero images inkluderar: 

• Stillbild vs. rörlig bild: Det kan vara värdefullt att ta reda på om användare finner dina visuella element engagerande, estetiskt tilltalande eller informativa, eller om de finner dem distraherande. Att testa en statisk grafik mot en rörlig grafik, till exempel ett .gif eller HTML5-visuellt element, kan ge insikter i dina användares preferenser. 
• Interaktiv play-video vs. autoplay-video: Det blir allt vanligare online att höra inbäddad audio som spelas utan att behöva aktivera den. Det är användbart för webbplatser som använder videomeddelanden för att mäta vikten av videoinnehåll genom att testa om användare klickar för att aktivera innehållet, eller om automatisk uppspelning av video är rätt väg att gå. 

• Värdeerbjudande: Skapar olika bilder olika känslor hos dina användare och får dem att bete sig annorlunda på din webbplats? Du kan bli förvånad över svaret. E-återförsäljaren Missguided använde experimenterande för att se om en bild skulle få kunder att «shoppa looken», se 360-gradersvyer, eller hovra över bilder. Deras data hjälpte dem att generera en betydande ökning av konverteringar.

• Objektfokus: Skapar huvudmotivet i din bild en positiv känsla hos användare som genererar handlingar som bidrar till det slutliga affärsmålet för konvertering? Eller är det avskräckande? Varför inte testa det! Det här är ett bra experiment att köra på bilder som Roxy-exemplet ovan. 

Tips: Kom ihåg att du också kan testa olika versioner av dina valda hero images på sociala medier för att tillföra ännu mer djup till ett redan rikt datasett.