Overskriften spiller en central rolle i designet af et websted og sætter tonen for alle andre aspekter af det. Især nu i den triumferende minimalismes æra, hvor diverse øjenkarameller ofte bliver skånselsløst, men retfærdigt udvist. Nogle gange er der ikke andet tilbage for øjet at fange, så rollen som websteds header-design er steget betydeligt.
Webdesignere gør en stor indsats for at designe denne del af et websted med kreativitet og produktivitet i tankerne. Ifølge Google tager det kun 50 ms at danne sig en mening om et websted, og nogle meninger udvikles inden for de utrolige 17 ms. Forbrugernes bekendtskab med et brand starter her.
For at lære, hvordan man designer en websideheader, der virker, og hvilke elementer den skal indeholde, skal du læse videre, der vil være eksempler.
“Livet er et første indtryk. Du får én chance for det.
Gør det evigtvarende.”
– J.R. Rim
En hjemmesideoverskrift er den øverste sektion af websiden. I gamle dage forstod folk headers som smalle striber i de øverste dele af hjemmesiderne, der indeholdt et logo, en opfordring til handling og kontaktoplysninger. Men i moderne design betragtes hele pladsen over folden på hjemmesiden som en header.
Som den strategiske del af siden, som folk ser i de første sekunder af indlæsningen af et websted, fungerer en header som en slags invitation. Den bør give grundlæggende oplysninger om et websted, så brugerne kan forstå, hvad det tilbyder på få sekunder.
Nogle designere laver separate overskrifter for forskellige sektioner af webstedet. Man kan f.eks. lave en stor overskrift til en hjemmeside og lade en lille stribe stå til andre sider. Men hold det konsekvent. Overskriftsdesignet på den indre side bør være en forkortet version af overskriften på hovedsiden. Dette er en god praksis for hjemmesidedesign.
- Hvad indeholder en header på en hjemmeside?
- Bedste praksis for design af websideheader
- Overskriftsstørrelse
- Visuelt hierarki
- Fikseret (sticky) header
- Budskabet, der formidles af en header
- Relevante billeder
- Video eller animation
- Et veldesignet call to action
- Bedste skrifttyper til websideoverskrifter
- Enkel overskriftsdesign
- Gemt navigation (hamburgermenu)
- Mobile header design
- Sammenfattende
Hvad indeholder en header på en hjemmeside?
Overskriften har til opgave at give brugerne svar på de grundlæggende spørgsmål: Hvilket brand er repræsenteret, hvilke varer og tjenester tilbydes, hvordan man kommer i kontakt med virksomhedens medarbejdere, er der aktuelle tilbud osv.
Og derudover repræsenterer den også kvaliteten og endda identiteten af et websted. Hvis overskriften fremkalder en god følelsesmæssig reaktion, og hvis beskueren føler, at den har noget af værdi, så har du bestået den første test.
De vigtigste elementer i en websteds header er normalt:
- logo eller mærkeidentifikator
- call to action
- tekst eller overskrift
- navigationselementer
- søgning.
Du behøver ikke at tilføje dem alle på en gang. Det er nødvendigt at finde en balance mellem overflod af information og dens harmoniske opstilling. Brug kun de data, du har brug for, det vil ikke være gavnligt at overbelaste en overskrift, uanset hvor vigtige alle links kan synes.
Det er heller ikke en god idé at lade overskriften være for tom. En bruger, der ikke kan finde ud af din grænseflade på et par sekunder, vil højst sandsynligt forlade den og ikke vende tilbage. En dårlig overskrift kan skubbe besøgende væk til et andet websted med ringere indhold.
I minimalistiske overskrifters design er det kun links til de vigtigste dele af webstedet og virksomhedens logo, der vises. Denne teknik er især nyttig ved design af landingssider.
Bedste praksis for design af websideheader
Ingen begrænser din kreativitet, når det kommer til at designe header-sektionen. Overskriften på webstedet er et område, der er åbent for et bredt felt af kreative designbeslutninger, som skal være mindeværdige, kortfattede og nyttige.
Lad os gennemgå de vigtigste punkter.
Overskriftsstørrelse
Der er ikke noget entydigt svar på spørgsmålet om, hvilken størrelse et billede af en websideoverskrift skal have. Nogle ressourcer forsøger at give sæt af nøjagtige tal, men i dag er et af de vanskeligste aspekter ved opbygning af hjemmesider at sikre effektiviteten på alle skærmstørrelser. Og selv om to skærme har samme størrelse, kan opløsningen være forskellig, så brugerne vil ikke se det samme.
Så lad være med at fiksere på det nøjagtige pixelbegreb, følg hellere enkle regler for sund fornuft.
Hovedteksten bør være af en sådan højde, at den ikke forstyrrer opfattelsen af indholdet. For informationsressourcer vil en lille overskrift være et godt valg, mens overskriften til landinger kan være større.
Hvis der er tale om voluminøse overskrifter, er det bedre at efterlade lidt plads under folden, så en bruger får et glimt af det næste på siden og begynder at scrolle.
Visuelt hierarki
Nielsen Norman Group formulerede første gang deres teori om det F-formede læsemønster på nettet i 2006, og den har ikke mistet sin relevans den dag i dag.
En person, der befinder sig på et nyt ukendt websted, begynder altid sin visuelle rejse fra det øverste venstre hjørne af skærmen. Og hvis de ikke finder de forventede oplysninger der, vil siden automatisk blive opfattet som vanskelig og ikke-standardiseret, og det vil kræve en for stor indsats at forstå.
Logo. En anden undersøgelse foretaget af NN/g fandt ud af, at brugerne meget lettere vil huske de mærker, hvis logoer er placeret til venstre i forhold til placering i midten eller i højre side.
Hvis du har et rundformet logo, så er det acceptabelt at placere det i midten af skærmen, selv om dets effektivitet stadig vil være lavere sammenlignet med dem, der er placeret til venstre.
Navigation. Vær meget opmærksom på ikke at overfylde denne del af et websted. For mange links overvælder de besøgende. Nogle gange kan det være på sin plads at lave en hel omlægning af et websteds struktur for at frigøre plads til de vigtigste kategorier.
Få de besøgende til nemt at forstå, hvor de er, og hvordan de kan finde videre. Brug hover-effekter til at vejlede brugerne, mens de navigerer.
Call to action. Implementer principperne for visuelt hierarki for naturligt at fremhæve en CTA.
Fikseret (sticky) header
Persistente navigationslinjer, eller med andre ord “sticky headers”, betyder, at navigationen følger dig rundt på siden, mens du scroller. Dette er nu en standard for webdesign.
Gør overskriften fast, hvis det ikke er i strid med dit overordnede designkoncept. Det er en god idé til både desktop- og mobildesigns:
- E-handelswebsteder – indkøbskurven er altid foran brugeren.
- Servicewebsteder – telefonnummeret eller en CTA er konstant på skærmen.
Fikserede overskrifter forbedrer kundeoplevelsen, idet de holder brugerne orienteret og giver dem mere kontrol.
Budskabet, der formidles af en header
Hvor du designer en header, skal du overveje webstedets overordnede stil og dets hovedformål.
Hvis det er et salgsfremmende websted, der er beregnet til præsentation af et produkt, kan designet af overskriften indeholde links til de vigtigste sektioner, kombineret med et stort heltebillede på den første skærm, da hovedformålet med et sådant websted er at præsentere produktet effektivt. I tilfælde af e-handels- eller forretningswebsteder kan situationen være anderledes. En bruger har brug for let at navigere, vide om de seneste tilbud, hvordan han/hun hurtigt kan kontakte lederen, og hvor han/hun kan se de ordrer, han/hun allerede har foretaget, så i dette tilfælde kan overskriften være mere kortfattet og give plads til andre kategorier.
Der er flere mulige budskaber, som en overskrift kan formidle:
- opfordre en forbruger til at gøre noget
- arbejde på at skabe tillid
- opfordre en besøgende til at vide mere
- være morsomt osv.
Valget afhænger af et bestemt websteds formål.
Relevante billeder
Billedet i overskriften skal direkte formidle information om virksomheden. Hvis det f.eks. repræsenterer madleveringstjenesten, kan billedet forestille en pæn kurér med æstetisk attraktiv mad. Generelt set skal den besøgende, der har set dit websted, have lyst til at købe noget hos dig.
Fotos af høj kvalitet. Fotografi er et effektivt værktøj for webdesignere. Det kan fortælle en historie, fremkalde følelser og motivere dine besøgende til at scrolle videre. For websteder med stærkt iøjnefaldende billeder kan du prøve at lave en gennemsigtig header. Det viser billederne bedre og bevarer de vigtigste links.
Slidebilleder. Hvis du har flere gode billeder, der repræsenterer webstedets virksomhed, så værsgo! Brugerne kan rulle gennem et sæt udsøgte billeder i høj opløsning.
Illustrationer. Header-billeder til websites skal ramme den rigtige tone og skabe en personlig forbindelse. Det er bedre, hvis et billede er tydeligt og let genkendeligt, selv hvis det er skåret ud af webstedshovedet. Det kan du opnå ved at udnytte nutidens trend for illustrationer.
Video eller animation
Du skal ikke kun fokusere på statiske billeder.
At tilføje video er blandt de mest effektive ideer til websideheader. Hvis det er muligt, så prøv at tilføje et tematisk videomateriale i en header. Mange websteder bruger det til at fange publikum, mens de præsenterer deres virksomhed eller produkt på den bedst mulige måde.
En anden måde at gøre dit design endnu mere attraktivt, levende og mindeværdigt på er ved at tilføje animation. Det kan lave rigtig fede websideoverskrifter. Hvis du er på udkig efter en interaktiv webside, der engagerer seerne, er animationen et godt alternativ.
Et veldesignet call to action
Når designeren designer en webheader, tilføjer han nogle call to action-elementer der som “log-in”, “sign-in”, “get in touch”, osv. For at tiltrække brugerens opmærksomhed, så det resulterede i den nødvendige handling, bør knappen indeholde en indskrift, der er forståelig for kunden, og være synlig blandt andet indhold.
En call to action-placering på et strategisk vigtigt sted er en perfekt mulighed for at opfordre brugerne til at foretage en handling lige fra starten og dermed øge din konverteringsrate. Nogle CTA’er kan bruges i en periode for at fremme særlige tilbud, mens andre har en langvarig tilstedeværelse.
Bedste skrifttyper til websideoverskrifter
Først og fremmest opfatter kunden navnene på sektionerne og de oplysninger, som virksomheden leverer: kontaktoplysninger, interessante tilbud. Derfor skal du vælge klare, læsbare skrifttyper, der ikke forringer opfattelsen og kan forstås ved første øjekast.
Til store hjemmesideoverskrifter kan du bruge noget fed typografi og fantasifulde elementer for at fange brugernes opmærksomhed, ellers er det bedst ikke at vælge smarte skrifttyper, der kan vise sig at være svære at læse.
Enkel overskriftsdesign
Gennem at holde en overskrift veldefineret og pæn, vil dine besøgende føle, at du ikke forsøger at belemre dem med dine tilbud. En kreativ header på et website kan have et meget enkelt udseende.
Dette er en løsning, der i stigende grad anvendes til design af websites. En hamburgermenu er et lille ikon med tre striber, der viser den fulde menu, når der klikkes på den. Denne teknik bruges af designere, når de har brug for at fokusere på hovedskærmen.
Med hensyn til webstedets brugervenlighed er dette en god løsning. En sådan menu stammer fra mobildesign og er allerede velkendt for brugerne. Hamburgeren er velegnet til salgsfremmende websteder, hvor hovedvægten ligger på præsentation af produktet i høj kvalitet ved hjælp af fotos eller videoer. For onlinebutikker er denne mulighed måske mindre velegnet, da det er vigtigt for kunden at have en kurv, udvalgte produkter og et søgefelt i hurtig adgang.
Mobile header design
Headeren skal vises korrekt, ikke kun på desktop-versionen af websitet, men også på mobilversionen. Derfor skal den være responsiv og kunne tilpasse sig godt til enhver mobilenhed.
Den daglige brug af mobile enheder har ført til hjemmesidedesigns, der ligner mobilorienterede selv i deres desktop-inkarnationer. For eksempel har implementeringen af store heltebilleder og hamburgermenuer sin oprindelse i mobildesign.
Sammenfattende
Hjemmesiden præsenteres af sin header. Det er som et unikt visitkort. Når du designer et websted, skal du derfor være maksimalt opmærksom på overskriften.
Og en sidste bedste praksis for et websteds overskriftsdesign: Lav regelmæssige ændringer for at holde dit websted frisk og opdateret. Brug nogle indsigter fra denne artikel.