Hero-sektion

En hero-sektion er det store indholdsfelt, som typisk møder besøgende øverst på en webside. Den indeholder ofte en overskrift, en kort forklaring, et billede eller en video og en tydelig handling. Heroen ligger som regel above the fold, men det er ikke et krav, at hele sektionen kan ses uden at rulle.

Hero-sektionen skal hurtigt svare på tre ting: Hvem er siden til, hvad tilbyder virksomheden, og hvad kan den besøgende gøre nu? Den arbejder derfor tæt sammen med sidens CTA og den brugerrejse, der fortsætter længere nede.

En hero er ikke bare et stort billede. Hvis teksten er vag, billedet tungt og knappen uklar, har sektionen mest taget plads. Et flot motiv kan støtte budskabet, men det kan ikke erstatte det.

Start med overskriften. Den skal beskrive den vigtigste værdi eller ydelse på siden, ikke blot virksomhedens navn. "Elektriker i Aalborg til private og erhverv" er mere oplysende end "Velkommen til Jensen El".

Tilføj derefter en kort tekst, der afgrænser tilbuddet. To eller tre linjer er ofte nok. Den primære knap bør føre til den handling, de fleste relevante besøgende skal tage: få et tilbud, se priser, booke en tid eller se produkter. En sekundær handling kan bruges, hvis den reelt hjælper, men fem lige stærke knapper skaber ikke flere valg. De skaber tøven.

Visuelt skal tekst og baggrund have tilstrækkelig kontrast. Overskriften skal være en rigtig HTML-overskrift, og knappen skal kunne bruges med tastatur. Det hænger sammen med både webtilgængelighed og almindelig UX.

Når vi bygger en hjemmeside, bliver heroen tilpasset den konkrete side frem for kopieret ukritisk. På casesider kan den for eksempel fremhæve resultat og kunde, mens en ydelsesside bør forklare tilbuddet og næste skridt.

En frisørsalon har en hero med en stor stemningsvideo, logo, tre slogans, åbningstider, telefonnummer og fire knapper. Videoen fylder 18 MB. På mobil tager det flere sekunder, før teksten står roligt, og bookingknappen ligger uden for den første skærm.

Den nye version bruger et komprimeret billede, overskriften "Frisør i Aalborg med online booking", en kort linje om dame-, herre- og børneklip og én knap: "Book en tid". Billedet er 220 kB, og teksten kan læses uden at vente på en video.

Ud af 1.000 besøgende klikker 140 på bookingknappen mod 75 før ændringen. Klikraten stiger fra 7,5 % til 14 %. Det beviser ikke, at alle ændringer virker ens på andre sider, men det viser, hvorfor én tydelig opgave kan være stærkere end et visuelt cirkus.

Flere principper findes i guiden om en brugervenlig hjemmeside, der skaber flere henvendelser.

Den typiske fejl er at ville fortælle alt på én gang. Heroen bliver en miniatureudgave af hele hjemmesiden med badges, lange punktopstillinger, trustpilot, cases, priser og flere målgrupper. Besøgende kan ikke se, hvad der er vigtigst.

En anden fejl er tekst oven på et uroligt billede. Kontrasten kan se acceptabel ud på designerens skærm, men forsvinde på en lille telefon eller et andet udsnit. Læg ikke afgørende tekst ind i selve billedfilen. Den bliver dårligere for tilgængelighed, søgning og responsivt layout.

Tunge hero-videoer kan også ramme sidens Core Web Vitals, især målingen af det største synlige element. Video kan være den rigtige løsning, men den skal have en grund, et passende format og et stille fallback-billede.

Hero-sektion er et designudtryk, ikke et bestemt HTML-element. Teknisk kan den bygges med en header eller en almindelig sektion, så længe sidens struktur og overskrifter er korrekte.

Heroen behøver ikke være høj. På en informationsside kan en kompakt indledning være bedre. På en landingsside kan den være mere målrettet, fordi trafikken kommer fra én kampagne med ét løfte.

Test heroen med rigtig tekst og på en rigtig mobil. En wireframe kan vise placeringen, men først det færdige indhold afslører, om overskriften fylder fire linjer, og om knappen drukner.

Heroens dele bør støtte det samme budskab. Hvis overskriften handler om erhvervsrengøring, billedet viser et privat køkken, og knappen siger "Læs mere", bliver helheden uklar. Et relevant foto af medarbejdere eller den type lokaler, virksomheden arbejder i, skaber en mere troværdig forbindelse.

Overskriften behøver ikke være smart. Den skal være konkret. Underteksten kan forklare geografi, målgruppe eller den vigtigste forskel. Undgå at bruge den til en hel firmabiografi. Historie, værdier og proces kan komme længere nede, når brugeren først har forstået tilbuddet.

Knapteksten skal beskrive handlingen. "Få et tilbud", "Book en tid" eller "Se ledige boliger" er tydelige. "Kom i gang" kan fungere for et kendt produkt, men er ofte uklart på en lokal virksomheds side.

Heroen skal også passe til trafikken. En person fra en Google-annonce om "MC-hjelm tilbud" forventer at se tilbuddet med det samme. En generel hero om virksomhedens 18 års erfaring skaber afstand mellem annoncen og destinationen.

Vis siden til en person, der ikke har været med i projektet, i fem sekunder. Luk den og spørg: Hvad tilbyder virksomheden? Hvem er det til? Hvad kunne du gøre bagefter? Hvis svarene er uklare, hjælper flere animationer næppe.

Test på en lille telefon, en stor skærm og med langsom forbindelse. Kontrollér om overskriften bryder grimt, om ansigter bliver beskåret, og om knappen stadig er synlig. En hero, der kun fungerer i designerens præcise skærmbredde, er ikke færdig.

Mål relevante handlinger, men skift ikke design efter små udsving. Hvis siden har 40 besøg, kan to ekstra klik ændre procenten voldsomt. Saml nok data, og ændr én væsentlig ting ad gangen, så du kan forstå resultatet.

Kvalitative tegn tæller også. Spørger kunder stadig om noget, heroen burde have forklaret? Ringer de med den forkerte forventning? Landingssiden skal ikke bare skabe klik, men de rigtige klik.

En stærk hero føles enkel, fordi mange beslutninger er taget på forhånd. Det er ikke tomhed. Det er prioritering.

En brugbar hero kan ofte bygges af fire dele: en kort overlinje, en præcis overskrift, et forklarende afsnit og én primær handling. Overlinjen placerer tilbuddet i en kategori, overskriften lover et konkret resultat, og brødteksten forklarer for hvem og hvordan. Knappen viser næste skridt.

Overskriften bør kunne stå alene uden reklamesprog. “Ny hjemmeside til mindre virksomheder” er tydeligere end “Vi skaber digitale oplevelser”. Den første fortæller, hvad siden handler om; den anden kræver fortolkning. Brugeren skal ikke løse en gåde, før resten af siden bliver relevant.

Den primære CTA skal matche brugerens parathed. På en enkel ydelsesside kan “Få et tilbud” være passende. Ved en dyr eller kompleks løsning kan “Se løsningen” eller “Book en gennemgang” være et mindre forpligtende næste skridt. Flere lige stærke knapper skaber ofte tvivl, så en sekundær handling bør visuelt fylde mindre.

Hero-billedet skal understøtte budskabet, ikke blot fylde plads. Et relevant produkt, et konkret resultat eller en situation fra kundens hverdag giver mere information end et tilfældigt stockfoto. Ved grafiske baggrunde skal motivet have ro omkring teksten, så ord og knapper ikke kæmper mod detaljer.

Tekst oven på billeder kræver tilstrækkelig kontrast i alle skærmstørrelser. Et mørkt overlay kan hjælpe, men det bør ikke gøre motivet mudret. Test også beskæringen på mobil. Et ansigt eller produkt, der står rigtigt på en bred skærm, kan forsvinde, når billedet bliver højt og smalt.

Store videoer kan gøre første indlæsning tung og påvirke Core Web Vitals. Brug video, når bevægelsen forklarer noget, og sørg for komprimering, posterbillede og hensyn til reduceret bevægelse. En hero bliver ikke bedre alene af at bevæge sig.

Løftet øverst skal blive dokumenteret længere nede. Hvis heroen lover hurtig levering, bør siden forklare processen og tidsrammen. Hvis den fremhæver en pris, skal vilkår og indhold være lette at finde. Ellers oplever brugeren et brud mellem reklamen og den faktiske information.

Brug også samme ordvalg i navigation, overskrifter og knapper. Konsistens gør brugerrejsen lettere at følge. Det betyder ikke, at alt skal gentages ordret, men siden skal tale om den samme løsning på samme måde.

Til sidst bør heroen vurderes sammen med trafikkilden. En besøgende fra en specifik annonce forventer at genkende budskabet på landingssiden. En bruger fra en bred organisk søgning kan have brug for mere forklaring. Den bedste hero er derfor ikke nødvendigvis den mest dramatiske, men den der giver den rigtige besøgende en klar og troværdig start.