Design af landingssider: en struktur, der konverterer

Godt design af landingssider er ét mål, argumenteret i rækkefølge. I modsætning til en forside, der betjener alle, findes en landingsside for én besøgende, der kommer fra ét sted for at tage én handling: booke prøvetimen, skrive sig på ventelisten, sikre sig tilbuddet. Den struktur, der virker igen og igen, er en tydelig hero, problemet med læserens egne ord, hvordan det virker, bevis, tilbuddets detaljer, svar på indvendinger og den samme opfordring til handling til sidst. Designets opgave er at gøre den rækkefølge ubesværet at følge.

Én side, ét mål

Skriv målet ned som én sætning, før du designer noget: »Få førstegangsbesøgende fra vores Instagram-annonce til at booke en gratis introtime.« Så har hver sektion en test. Hjælper den denne person med at tage dette skridt? Hvis ikke, så skær den væk, eller flyt den til hovedsitet.

Landingssidens struktur, sektion for sektion

1. 1

   Hero

   Overskrift med løftet, én støttelinje, én knap, ét visuelt element. Design af hero-sektionen gennemgår denne skærm i detaljer.

2. 2

   Problemet

   To eller tre sætninger, der beskriver den situation, den besøgende står i, med deres egne ord. Det viser, at du forstår, før du sælger.

3. 3

   Sådan virker det

   Tre trin, hver med en kort titel og en sætning. Folk forpligter sig lettere, når de kan forestille sig forløbet.

4. 4

   Bevis

   Rigtige udtalelser med navne, fotos af rigtigt arbejde, logoer fra rigtige kunder eller en kort demo. Aldrig opdigtet.

5. 5

   Tilbuddet i detaljer

   Hvad de præcis får, hvornår, og hvad det koster eller ikke koster. Klare vilkår fjerner tøven.

6. 6

   Indvendinger

   En kort FAQ, der besvarer grundene til, at folk ikke handler: tid, pris, om det passer, afmelding, hvad der sker bagefter.

7. 7

   Afsluttende opfordring til handling

   Gentag løftet fra overskriften og den samme knap. Besøgende, der læser til ende, er klar; tving dem ikke til at scrolle op igen.

Ikke alle sider har brug for alle sektioner. En venteliste til en lancering kan være bare en hero, tre linjer om, hvordan det virker, og et e-mailfelt. Et tilbud, der kræver en stor forpligtelse, som et kursus eller en konsultation, har som regel brug for alle syv og mere bevis.

Et gennemarbejdet eksempel: et introtilbud fra et yogastudie

Match siden med annoncen, der sendte dem

De fleste besøgende på en landingsside kommer fra noget: en Instagram-annonce, en LinkedIn-annonce, en e-mail, en QR-kode på en flyer. I det øjeblik de lander, tjekker de, at de er det rigtige sted. Gentag annoncens præcise tilbud i overskriften, og tag dens udtryk med: samme baggrund, farver og skrift. En side, der ser urelateret ud til annoncen, føles som lokkemad, selv når den ikke er det.

Designer du begge ud fra én kilde, sker det automatisk. I Gradiently kan ét design med Pro tilpasses til alle størrelser i ét trin, så opslaget, storyen, e-mailens header og sidens hero deler én Mark og én overskrift. Ét udtryk, alle størrelser viser arbejdsgangen, og brandkonsistens forklarer, hvorfor det betyder noget ud over én kampagne.

Designvalg, der får folk til at blive ved med at scrolle

• Én accentfarve til alle knapper, brugt ingen andre steder. Øjet lærer, hvor det skal klikke. 60-30-10-reglen er en god måde at finde balancen på.
• Generøs luft mellem sektionerne, så hver læses som én idé. Overfyldte sider føles som hårdt arbejde.
• Overskrifter, der giver mening for sig selv. Mange skimmer kun overskrifterne; de bør fortælle hele historien.
• Rigtige fotos frem for stockfotos. Dit faktiske lokale, produkt, team eller resultater.
• Korte formularer. Spørg kun om det, du har brug for nu. En e-mailadresse er lettere at give end et telefonnummer.
• Ingen navigationsmenu, eller kun et logo, så der ikke er noget sted at vandre hen.

Mobil først, test derefter

Trafik fra opslag på sociale medier kommer mest fra telefoner, så design versionen i 390 pixels bredde først. Hold overskrift og knap på første skærm, gør knapper mindst 44 pixels høje, og brug kun en fastgjort knap, hvis den ikke dækker indhold.

Der findes ingen universelt god konverteringsrate; den afhænger af tilbuddet, prisen og trafikken. Det, du altid kan gøre, er at gøre næste version tydeligere end den forrige. Farverne bag det hele finder du i farveskemaer til websites.