Forside design: hvad skal der stå på jeres forside, og i hvilken rækkefølge?

Ledermødet om den nye forside går som de fleste. Salg vil have kampagnen øverst, HR vil have jobopslagene frem, direktøren vil have virksomhedens historie og værdier med, og produktchefen vil have de tre nyeste produkter i et karrusel. Resultatet er en forside med seks skiftende billeder, ni knapper og en overskrift, der lyder “Velkommen til os”. Alle er repræsenteret, og ingen besøgende ved efter fem sekunder, hvad virksomheden faktisk laver.

En god forside starter med den besøgende. Den svarer på tre spørgsmål med det samme: Hvad laver I? Er det til mig? Hvad gør jeg nu? Resten af siden hjælper forskellige besøgende videre og samler beviser for, at I kan levere. Når den struktur ligger fast, er det meget nemmere at sige ja eller nej til alle ønskerne fra ledermødet.

Hvad skal en forside kunne?

Forsiden er den side, flest lander på, når de søger på jeres navn, klikker på et link i en mail eller skriver adressen direkte. Den har tre opgaver, og de står i prioriteret rækkefølge.

1. Orientere: fortælle på få sekunder, hvad I laver, for hvem og hvor.
2. Lede videre: give hver vigtig målgruppe en tydelig vej til den side, der er relevant for dem.
3. Overbevise: vise nok bevis til, at den besøgende tør tage næste skridt, også uden at klikke videre.

Det er her, forsiden adskiller sig fra en landingsside, som kun har én målgruppe og én handling. Forsiden skal betjene flere, men den bør stadig have én primær handling, som alt andet understøtter. Forskellen gennemgår vi i guiden om landingssider.

Hvad skal stå over folden på forsiden?

“Over folden” er det, man ser uden at scrolle. På en telefon er det ofte kun en overskrift, et par linjer tekst og en knap, så hvert ord tæller. Folk scroller gerne, men kun hvis toppen har overbevist dem om, at de er det rigtige sted.

• Overskrift: hvad I laver og for hvem, i almindeligt sprog. Gerne med jeres område, hvis I arbejder lokalt.
• Underrubrik: jeres stærkeste argument eller det, der gør jer anderledes, i én eller to sætninger.
• Primær knap: den ene handling, I helst vil have, fx “Få et tilbud” eller “Book tid”.
• Sekundær mulighed: en mindre fremtrædende vej for dem, der ikke er klar, fx “Se vores arbejde”.
• Bevis: stjerner fra anmeldelser, kundelogoer eller et konkret tal.
• Billede: jeres rigtige produkt, folk eller resultat. Et billede, der forklarer, slår et, der pynter.

Fra generisk til konkret: eksempler på overskrifter

Hvilke sektioner skal en forside have?

Efter toppen følger sektionerne den samme logik som den besøgendes overvejelser: Hvad kan I hjælpe mig med? Kan jeg stole på jer? Hvordan foregår det? Hvad gør jeg nu? Tabellen viser en struktur, der passer til de fleste servicevirksomheder, og som I kan tilpasse.

Eksempler på forsidestruktur for tre typer virksomheder

Grundstrukturen er den samme, men vægtningen skifter med forretningen. Her er tre eksempler, vi ofte tager udgangspunkt i, når vi skitserer en ny forside.

Lokal håndværker eller servicevirksomhed

Overskrift med fag og område, telefonnummer og “Book besigtigelse” over folden, Google-stjerner lige under knappen. Derefter ydelserne som kort, billeder fra rigtige opgaver, et kort over det område, I dækker, og forløbet i tre trin. Bookingen er det, der skaber værdi, så den skal kunne nås fra hver sektion. Se, hvordan det kan skrues sammen, under hjemmeside til håndværkere med booking.

B2B-virksomhed med længere salgsproces

Overskrift, der beskriver problemet, I løser, og for hvilken type virksomhed. Primær knap til et møde eller en demo, sekundær til cases. Derefter veje opdelt efter rolle eller branche, kundelogoer, to til tre cases med målbare resultater og en sektion med guides eller viden, der hjælper beslutningstagerne internt. Mere om det i vores guide til B2B-hjemmesider.

Webshop

Søgefelt og kategorier fylder mere, fordi de fleste besøgende allerede ved, hvad de leder efter. Toppen viser den vigtigste kategori eller kampagne med en tydelig knap. Derefter populære kategorier, bestsellere, leveringsløfte og returret, anmeldelser og et nyhedsbrev. Leveringstid, fragtpris og betalingsmuligheder skal kunne ses uden at lede.

Karrusel, video eller statisk billede i toppen?

Video i toppen kan fungere, når den viser noget, ord ikke kan, fx et produkt i brug. Hold den kort, uden lyd, med et stillbillede som reserve, og sørg for, at overskriften og knappen står tydeligt oven på den. En tung baggrundsvideo, der bare skaber stemning, koster typisk mere i hastighed, end den giver i indtryk.

Hvordan tester man, om forsiden virker?

Den enkleste test kræver ingen værktøjer. Vis forsiden til en person, der ikke kender jeres virksomhed, i fem sekunder, luk den, og spørg: Hvad laver virksomheden? Hvem er den til? Hvad ville du klikke på? Kan de ikke svare, er toppen ikke tydelig nok. Derefter kan I gå videre med data.

Brugertesten giver typisk de mest overraskende fund, fordi I ser, hvor folk tøver. Vi har beskrevet metoden og et færdigt testmanuskript i guiden om brugertest.

Hvad betyder forsiden for SEO?

Forsiden er typisk den side, der rangerer på jeres virksomhedsnavn, og den side, der har flest links udefra. Den bør derfor have en titel og en H1, der beskriver, hvad I laver, og links til de vigtigste ydelsessider, så noget af styrken flyder videre til dem. Lad undersiderne tage sig af de fleste søgeord, så hver af dem målrettes én ydelse eller ét emne. Det tekniske fundament gennemgår vi i guiden om en SEO-venlig hjemmeside.

Hvordan skal forsiden se ud på mobil?

Design forsiden til telefonen først. Overskriften skal kunne læses uden at zoome, den primære knap skal være synlig på første skærm, og klik-for-at-ringe skal være lige ved hånden, hvis telefonen er jeres vigtigste kanal. Kortene med ydelser stables, og bevis som stjerner og logoer skal ikke skubbe knappen ned under folden. Mere om principperne i guiden om responsivt webdesign.

Hvilke fejl ser vi oftest på forsider?

• En overskrift som “Velkommen” eller et slogan, der kunne stå på enhver hjemmeside.
• Ni knapper med lige stor vægt, så ingen af dem skiller sig ud.
• Et karrusel med seks budskaber, hvor det vigtigste står på billede fire.
• Stockfotos, der ikke viser jeres folk, produkt eller resultat.
• Ingen pris, intet område og ingen kontaktoplysninger over folden.
• Udtalelser uden navn eller kilde, som virker opfundne.
• En nyhedssektion, hvor det seneste indlæg er fra sidste år.

Hvordan arbejder vi med forsider hos Ceptiv?

Vi starter med målene og målgrupperne og skitserer forsiden som wireframe med rigtige overskrifter, før der kommer farver og billeder på. Det gør det nemt at diskutere indhold og rækkefølge uden at blive fanget i smag. Forskellen på de tre niveauer forklarer vi i wireframe, mockup og prototype. Derefter designer vi mobil og desktop side om side i vores UX/UI-design og bygger i Next.js, så forsiden er hurtig fra starten.

Se eksempler på vores arbejde i porteføljen. Skal I have en ny forside som en del af en ny hjemmeside, starter vores webpakker ved 18.000 kr. plus 600 kr. om måneden, og I kan få en fast pris inden for 24 timer.