Å ha en nettside som er brukervennlig og optimalisert for konvertering, er avgjørende for å maksimere salgspotensialet ditt. Du kan lære mer om konverteringsoptimalisering her.
Hva er en hero-seksjon?
Du finner hero-seksjonen på forsiden til en nettside, men den kan også brukes på andre sider. Landingssider og produktsider kan for eksempel ha en hero-seksjon for å gjøre et sterkt visuelt inntrykk og fremheve nøkkelinnhold eller funksjoner. Om man bør ha hero-seksjon på en side avhenger av sidens formål, samt design og merkevarebygging av nettsiden.
Blant alle delene og komponentene på en nettside er hero-seksjonen det første en besøkende ser, og dermed den viktigste. En godt designet hero-seksjon vil tiltrekke seg en større andel besøkende som faktisk er interessert i produktet eller tjenesten som tilbys, og det vil føre til at de blir på nettsiden lenger. Å holde på disse besøkende er avgjørende for å øke sjansen for at de konverterer og utfører ønsket handling.
Det er derfor viktig at hero-seksjonen ikke bare ser bra ut, men også er brukervennlig og gir verdi til besøkende.
En godt designet hero-seksjon vil ikke bare tiltrekke seg besøkende som allerede er interessert i produktet eller tjenesten, men også øke sjansen for at besøkende som ikke trenger produktet eller tjenesten deres nå, legger merke til verdibudskapet og returnerer senere hvis det oppstår et behov.
Synliggjør verdi for potensielle kunder
Når noen kommer til nettsiden din, er det viktig at de umiddelbart kan forstå hva slags side de har landet på og hva som tilbys der. For eksempel, hvis du har en nettbutikk som selger klær, bør det være tydelig fra toppen av siden at det er klær man kan kjøpe her. Hvis det er en hotellside, bør besøkende umiddelbart forstå at de kan bestille hotellopphold gjennom nettsiden din.
Det er også viktig at det er tydelig hvem nettsiden tilhører og hva som tilbys, og hvis dette er to ulike ting er dette også viktig å få frem. For eksempel, hvis nettsiden din er en bookingside for ulike hoteller, bør det være tydelig kommunisert i hero-seksjonen at dette er en nettside som tilbyr bestillinger av hotellrom og ikke en nettside som tilhører et spesifikt hotell.
Ved å gi klar og enkel informasjon, kan besøkende bygge tillit til nettsiden og være mer villige til å bruke den for å finne det de leter etter.
For å få dette tydelig frem for den besøkende, er det viktig å tenke på flere elementer:
- Teksten i banneren
- Bildebruk
- Den generelle strukturen på nettsiden.
Det er viktig å ha en helhetlig tilnærming til nettsidedesign og sørge for at alle elementene fungerer sammen for å skape den mest brukervennlige og konverteringsoptimaliserte nettsiden. Første steget i denne prosessen er og optimalisere hero-seksjonen.
Hva inneholder en god hero-seksjon?
En hero-seksjon skal være visuelt tiltalende, informativ og engasjerende. Dette oppnås ved å inkludere følgende elementer:
- Klar og konsis informasjon: En tydelig overskrift som er med på å formidle hovedbudskapet til nettsiden eller produktet/tjenesten som tilbys. Meldingen skal være kortfattet, lett å forstå og fremheve produktet eller tjenestens unike verdiforslag.
- Visuelle bilder av høy kvalitet: Et relevant bilde, eller alternativt en video av høy kvalitet som fanger oppmerksomheten til de besøkende og skaper en følelsesmessig forbindelse til produktet/tjenesten som tilbys.
- “Call to action” (CTA): En visuelt fremtredende CTA som inviterer besøkende til å gjøre en handling, for eksempel å registrere seg, abonnere eller foreta et kjøp er viktig. CTA-knappen skal skille seg ut visuelt og plasseres på et fremtredende sted.
I tillegg til disse tre elementene, er det også viktig å sørge for at hero-seksjonen er laget med tanke på:
- Responsivt design: Optimalisert for alle skjermstørrelser inkludert PC, nettbrett og mobile enheter. Designet bør være responsivt og tilpasse seg ulike skjermstørrelser for å sikre at budskapet og det visuelle vises riktig.
- Retningslinjer for tilgjengelighet på nettsider (Universell utforming): Dette handler om tilgjengelig for alle besøkende, inkludert funksjonshemmede. Når man setter opp en hero seksjon må man i koden legge inn alternativ tekst for å sikre brukervennlighet for for eksempel skjermlesere eller om bildet ikke lastes.
Slik lager man en optimalisert hero-seksjon
I denne delen vil vi se på hvordan vi kan bruke elementene vi har gått gjennom, for å optimalisere en hero-seksjon.
Bildet ovenfor viser hero-seksjonen på forsiden til en nettside som selger regnjakker. Selv om den i utgangspunktet inneholder alle elementene den trenger, kan vi ytterligere optimalisere ved å ta for oss elementene vi har gått gjennom.
1: Klar og konsis informasjon
Hovedbudskapet til nettsiden kommer i utgangspunktet tydelig frem her, men verdiene er uklare og lite tilpasset det konkrete tilbudet.
Med tanke på at både bilde og “call to actions”- knappene er med på å formidle hovedbudskapet trenger ikke overskriften også å gjøre det (Eksempel 1). Da kan den heller fokuseres på å tillegge enda et verdibudskap for enten merkevaren eller produktet, gjerne en USP. I eksempelet nedenfor (Eksempel 2) er overskriften mer indirekte og tillegger tilbudet en verdi i popularitet.
Rask levering og fri frakt er også omformulert i Eksempel 2. Den nye teksten er mer konkret, som vil gi tydeligere informasjon. Dette bygger også tillit, da det gir besøkende enda klarere forventninger.
2: Visuelle bilder av høy kvalitet
Bildet i det første eksempelet er delvis relevant og fanger oppmerksomhet, men det ser ikke ut til å være så mye regn i luften. I eksempel 2 er det byttet til et lignende bilde, men hvor det er dårligere vær, noe som kan skape en sterkere følelsesmessig forbindelse mellom den besøkende og produktet, samt tilføre ytterligere relevans.
3: En sterk “Call to action” (CTA)
CTAene i eksempel 1 er i utgangspunktet to fine “call to actions”, men hvorfor skal besøkende velge å klikke på de?
I eksempel 2 spiller de to CTAene sammen med resten av informasjonen, noe som og gjør de mer fremtredende. I tillegg gir budskapet den besøkende en større motivasjon for å klikke seg videre.
4: Ikke prøv for hardt
En nettside burde ikke skryte på seg noe som ikke er sant eller noe som bør følges opp av et bevis, slik som her med “regnjakkene alle elsker”. Besøkende vil kunne gjennomskue det, som kan føre til at nettsiden mister kredibilitet.
Å bruke store ord eller noe som kan virke som et kundeutsagn, uten å sette det i kontekst, er heller ikke heldig. Det kan fremstå som skryt og gir heller ikke den besøkende noen reell verdi. Man kan selvfølgelig flagge enkelte produkter med “vår anbefaling” eller lignende, men da burde det anbefalte produktet ha fordeler som kommer tydelig frem på for eksempel en produktside.
5: Husk å tilpasse budskapet til målgruppen
Om en nettside ikke kan bruke “rask levering”, “fri frakt” eller produkter som er “bedre” enn konkurrerende produkter, finnes det andre løsninger for å sette sammen en god tekst til hero-seksjonen din.
- Hva er din primære målgruppe og hva er viktig for den? Tilpass hero-seksjonen til å appellere til disse og tenk over hva som er unikt med produktet eller tjenesten din.
- Bruk en godt formulert frase, men ikke overdriv. Sørg for at den i tillegg til å klinge bra er tydelig og informativ.
- Fang oppmerksomhet ved å for eksempel gi “call to actions” økt kontrast.
- Skap en sterkere følelsesmessig forbindelse mellom produktet og den besøkende ved bruk av bilde eller video. I dette eksempelet vil du få de besøkende til å føle på regnværet.
I eksempel 4 er det formulert en tekst tilpasset en spesifikk målgruppe som er ute etter regnjakker til bruk for friluftsliv eller andre aktiviteter utendørs.
Tekst og CTAene er flyttet til siden for å gjøre bildet mer fremtredende, slik at det med større sannsynlighet kan skape en følelsesmessig forbindelse for den besøkende. I dette tilfellet ønsker vi å gi den besøkende en følelse av å bruke jakken i regn og vind.
Operativt optimaliseringsarbeid
Det er forskjell på å ha en presentabel hero-seksjon og en konverteringsoptimalisert hero-seksjon. Frem til nå har vi basert tipsene våre på best practice, som tar utgangspunkt i basisprinsipper for godt nettside-design. Vi har sørget for at hero-seksjonen inneholder det den bør og er fremstilt slik den bør ihht minimumskrav. For å kunne videre optimalisere en hero seksjon må man se på den faktiske trafikken og kjøpsreisen på din nettside. Da må man sette opp strukturert testing og eksperimentering på siden. Her kan man enten bruke kvalitative metoder som bruker-tester og brukerundersøkelser, eller en kvantitativ metode som for eksempel A/B-testing.
Ønsker du hjelp med å optimalisere hero-seksjonen på nettsiden din? Ta kontakt!
.webp)
