Hero image

Hva er et hero image?

Hero image er et begrep fra webdesign som beskriver den fullskjermstore videoen, fotografiet, illustrasjonen eller banneret som ønsker besøkende velkommen på en nettside. Bildet har alltid en fremtredende plass nær toppen av en nettside, og strekker seg noen ganger over hele bredden av skjermen. 

Også kjent som hero header eller hero section, fungerer det ikke bare som brukerens første inntrykk av selskapet ditt, men også som en viktig del av brukeropplevelsen på nettstedet ditt.

Det ideelle hero image vil:

• Fange brukerens oppmerksomhet
• Visuelt demonstrere verdiforslaget ditt
• Hjelpe brukeren med å navigere til akkurat riktig informasjon

Kilde: Optimizely

I tillegg til en høyoppløselig grafikk kan og bør et hero image inneholde selskapets unike salgsargument (USP). Du kan også knytte det til et konverteringsmål, for eksempel et påmeldingsskjema eller en CTA-knapp. 

Gå dypere inn i «hva», «hvorfor» og «hvordan» med hero images nedenfor, inkludert: 

• Hvorfor webdesign bør prioritere hero images

• De ulike typene hero images

• 3 (viktige) ting å huske på når du lager hero images

• Gode eksempler på hero images

• Hvordan teste ulike hero images med A/B-testing 

• Ideer for hero image-testing

Hvorfor bør hero images prioriteres i webdesign?

Mennesker er svært visuelle av natur, og et høykvalitets fullskjermbilde øverst på siden kan skape et positivt førsteinntrykk. 

Å velge riktig hero image – enten det er et høykvalitetsfoto, en video eller en illustrasjon – gir besøkende umiddelbar bekreftelse på at de er på rett sted. Hero images på mediesider og blogger kan også brukes til å fange besøkendes oppmerksomhet og lokke dem til å lese artiklene på siden. 

I tillegg til å være et must for en engasjerende brukeropplevelse (UX), gir et hero image også verdi ved å lede brukere mot en ønsket lenke eller  oppfordring til handling eller presentere virksomhetens  verdiforslag øverst på nettsiden.

Hva er de ulike typene hero images?

Hero images hjelper verdiforslaget ditt med å skille seg ut for målgruppen din så snart de lander på siden. 

Bla gjennom favorittsidene dine, og du vil se disse typene hero images: 

1. Produktfotografi: For mange direkte-til-forbruker-merker og e-handelsbedrifter er produktfotografi eller en karusell det riktige valget, fordi det umiddelbart viser besøkende hva som er tilgjengelig på nettstedet ditt. 
2. Sizzle reels: For nye produkter eller virksomheter som leverer tjenester, er en fullskjermvideo kjent som sizzle reel det riktige valget. Sizzle reels er det perfekte tilskuddet til en landingsside fordi de formidler både informasjon og følelser med svært lite plass på siden. 
3. Produktfordel- og emosjonelle bilder: Når du selger en fordel eller en følelse knyttet til produktet eller tjenesten din, kan hero image være emosjonelt: det kan inneholde mennesker, steder, 
4. Informasjonsdrevne bilder: Hero images og karuseller er også en god måte å dele informasjon om nye produkter og funksjoner, tidsbegrensede tilbud og salg. Typografi-only hero images kan også brukes til å dele viktig statistikk om produktet, kundene eller bransjen din. 

3 ting å huske på når du bruker hero images 

Gitt deres betydning vil du at hero images skal jobbe hardt for deg. Men det er et par ting du må jobbe hardt med først. 

1) Sørg for at bildene har riktig størrelse

Hvis bildene ikke har riktig størrelse i hero-seksjonen din, vil det ærlig talt se dårlig ut. Gitt de fleste skjermstørrelsene på markedet i dag, bør et fullskjerm hero image være 1280px ganger 720 piksler med et sideforhold på 16:9 for å sikre at det ikke skader lastetiden. Du bør også sørge for at de er hostet på et raskt CDN. Når du velger mobiloptimerte bilder, bør du sikte på 800 x 1 200 piksler.

Men det handler ikke bare om hvordan det ser ut på siden. Lastetiden, både for mobil og desktop, er også svært viktig for brukeropplevelsen. Basert på forskning utført av Google er det bevist at økning av sideinnlastingshastigheten fra 0,4 til 0,9 sekunder kan redusere trafikken med 20 %. All kraften i hero image går tapt hvis det til syvende og sist driver trafikk bort før det engang har lastet inn.

Vurder å la designteamet ditt lage hero image-maler, der du kan «fargelegge mellom linjene» på ethvert bilde. 

2) Velg visuelle elementer som gir kundene verdi

Enten du velger produktbilder, en sizzle reel-video eller et stockfoto, bør bildet formidle den meldingen du mest ønsker at kundene dine skal motta. Prøv å unngå irrelevante eller tvetydige bilder.

Hvis du noen gang er usikker eller i en fastlåst situasjon med kollegene dine, er den beste måten å avgjøre om du har valgt de riktige produktbildene å teste dem. Vi kommer tilbake til det om litt.

3) La hero image skille seg ut

Hero image bør tilføre visuell interesse på en side. Det skal få menneskene som ser det til å føle noe. Uansett hvilket medium du velger, bør bildene skille seg ut på siden og differensiere nettstedet ditt fra konkurrentene.

En enkel måte å gjøre dette på er å sørge for at du bruker overlegg, gradienter og typografi for å hindre at et bilde ligger «flatt» på siden. Men det er alltid rom for å gå den ekstra milen, uansett budsjettet ditt.

Husk at et svært høyt budsjett ikke er en forutsetning for et høykvalitets hero image. Selv om du vil unngå stockbilder der du kan, diskvalifiserer ikke bruken av dem nettstedet ditt fra å appellere til kunder. Du kan til og med bruke Adobe Photoshop til å tilføre et kreativt preg på selv de mest grunnleggende stockbildene. Selv noe så enkelt som å legge til filtre på stockbildene du velger, vil gi et mer helhetlig utseende på hele nettstedet enn om du bruker bildene som de er – og du kan til og med gjøre dette i et enkelt verktøy som Canva. 

5 gode eksempler på hero images

Hvis du er uten inspirasjon, har vi valgt ut noen gode eksempler på hero images for å vise deg hvordan andre selskaper gjør det. Ta en titt!

Target 

Kjent for rent design på alle områder, er det ingen overraskelse at Targets hero images på nettstedet oppfyller alle kravene for sterkt design og tydelig kommunikasjon. 

Vi elsker dette hero image fordi det er balansert, fantasifullt og tydelig merkevarekonformt. Ved å presentere mulighetene med ekte leker som er inkludert i tilbudene med en tydelig oppfordring til handling i midten, vekker det oppmerksomhet og konverterer utvilsomt. 

Faktisk fanger dette bildet seernes oppmerksomhet så godt at Target sitt webdesign-team plasserte en sponset stolpe fra Starbucks rett nedenfor. Designet utfyller til og med hero image og er etter vår mening enda kraftigere. 

Chase 

Tradisjonelle banker er ikke kjent for fremragende UX-design eller særlig kreativt webdesign, men noen ganger er funksjonalitet alt. I denne forstand oppfyller hero image på Chases hjemmeside alle kravene, selv om det betyr å legge igjen noen overbevisende designtrender. 

Verdiforslaget er tydelig; bildet er rent. Det er også et godt eksempel på et overlegg ved å beholde innloggingen for eksisterende kunder synlig. Selv om dette er en forventet funksjon (hvem vil scrolle for å logge inn?), er det også en god idé å etterligne for konverteringer. For eksempel kan eksisterende mono-linje-kunder se verdien av dette tilbudet og flytte brukskontoen sin til Chase. 

Dette er også et godt eksempel å etterligne hvis du jobber med begrensede bilder eller videoer og stockbilder rett og slett ikke strekker til. 

Delta 

Deltas hjemmeside-hero image avviker også fra de nyeste designtrendene, men følger en lignende vei som Chase. 

Verdiforslaget her er tydelig: Delta har oppgradert produktet sitt og ønsker å konvertere kunder og ta tilbake kunder som kanskje i fortiden bestemte at produktet ikke hadde nok verdi. 

Selv om bildet trekker blikket bort fra den skrevne teksten, er det ikke nødvendigvis noe negativt, ettersom det refokuserer oppmerksomheten din direkte på all den beinplassen – en sjeldenhet utenfor businessklasse. Oppmerksomhetsreisen din beveger seg fra beinplassen til bildet og er emosjonell, selv om bildet ikke er åpenlyst manipulerende. Det får deg til å tenke tilbake på den siste flyreisen din og ta en pause for å vurdere å prøve det igjen. CTA-knappen «Book nå» er nesten lur, ettersom det er knappen som brukes til å booke enhver flyreise, men du er allerede i stemning til å gi det nye premiumtilbudet en sjanse. 

Roxy 

Med vårt siste bilde ser vi på et mindre, men fokusert merke: Roxy. For de som ikke er kjent med det: Roxy er en del av Boardriders Group, et globalt handelsdynasti bestående av syv merker med distinkte identiteter. 

Hero image vi valgte er et kraftfullt bilde som samsvarer med trenden vi beskrev tidligere: fokuset er på midten av siden. Ved første øyekast virker det travelt, men kantene av bildet bringer blikket tilbake til midten for å fokusere på et kraftfullt produktbilde med en tydelig oppfordring til handling som inviterer nettstedsbesøkende til å handle kolleksjonen. 

Det er et dristig valg for et bilde, og det vil helt sikkert dele designere, men det er mer interessant og emosjonelt enn et typisk produktbilde, og noen ganger kan denne typen sårbarhet vinne dagen. 

Atlassian 

Vårt siste hero image-eksempel kommer fra B2B SaaS-innovatøren og Optimizely-kunden Atlassian. 

Atlassians hero image er faktisk en markedsføringsvideo. Atlassian valgte den emosjonelle, produktfordel-orienterte tilnærmingen for å posisjonere merkevaren som stedet for teamsamarbeid. Det er en imponerende video som dekker Atlassians hele portefølje og merkevarens verdiforslag. 

Er den engasjerende? Det kan den være! Men den eneste måten å være sikker på er å teste den med A/B-testing.

Hvordan teste ulike hero images med A/B-testing 

Hvordan vet du om hero images påvirker nettstedet ditt? Kort svar: Du tester dem. 

Resultatene av disse testene er noe av de rikeste dataene du kan få fra nettstedet ditt på grunn av den fremtredende plasseringen. Derfor anbefaler vi å bruke A/B-testing for å bestemme styrken til et gitt hero image. 

A/B-testing er en metode for å teste nettsteder der 50 % av trafikken din vises den originale versjonen av siden din, og 50 % vises den nye varianten. Ved å vise en tilfeldig prøve av besøkende ulike versjoner av siden din, kan du bruke data til å avgjøre hvilken versjon av siden din som konverterer bedre. 

Hvis en utfordrerside ikke overgår en originalside, kan du alltid teste nye hypoteser, med variasjoner i bilder, tekst og oppfordring til handling. Du kan også tilpasse opplevelsene ved å vise ulike segmenter av besøkende forskjellige hero images. 

Ved å kontinuerlig teste ulike bilder kan du forbedre konverteringsratene og nettstedsopplevelsen over tid. 

Ideer for hero image-testing 

Er du klar til å komme i gang? Noen ideer for optimalisering av hero images inkluderer: 

• Stillbilde vs. bevegelig bilde: Det kan være verdifullt å oppdage om brukere finner visuelle elementer engasjerende, estetisk tiltalende eller informative, eller om de finner dem distraherende. Testing av en statisk grafikk mot en bevegelig grafikk, for eksempel et .gif eller HTML5-visuelt element, kan gi innsikt i brukernes preferanser. 
• Interaktiv play-video vs. autoplay-video: Det blir mer og mer vanlig på nett å høre innebygd lyd som spilles uten å måtte aktivere det. Det er nyttig for nettsteder som bruker videomeldinger for å måle viktigheten av videoinnhold ved å teste om brukere klikker for å aktivere innholdet, eller om automatisk avspilling av video er veien å gå. 

• Verdiforslag: Skaper ulike bilder ulike følelser hos brukerne dine og får dem til å oppføre seg annerledes på nettstedet ditt? Du kan bli overrasket over svaret. E-forhandleren Missguided brukte eksperimentering for å se om et bilde ville få kunder til å «shoppe looken», se 360-graders visninger, eller holde musepekeren over bilder. Dataene deres hjalp dem med å generere en betydelig økning i konverteringer.

• Objekt-fokus: Skaper hovedmotivet i bildet ditt en positiv følelse hos brukerne som genererer handlinger som bidrar til det endelige forretningsmålet for konvertering? Eller er det frastøtende? Hvorfor ikke teste det! Dette er et flott eksperiment å kjøre på bilder som Roxy-eksemplet ovenfor. 

Tips: Husk at du også kan teste ulike versjoner av de valgte hero images på sosiale medier for å legge til enda mer dybde til et allerede rikt datasett.