# Landingssidedesign: en struktur som gir flere konverteringer [Canonical HTML page](https://gradiently.design/nb/guide/landing-page-design) En landingsside bygger ett resonnement frem mot én handling. Her får du rekkefølgen, et eksempel du kan bruke, og designvalgene som får folk til å lese videre. ## The short version - En landingsside er en selvstendig side laget for ett mål, som registrering, bestilling eller kjøp. - En pålitelig struktur er toppseksjon, problem, slik fungerer det, dokumentasjon, tilbudsdetaljer, innvendinger og en avsluttende handlingsoppfordring. - Siden bør stemme med annonsen, innlegget eller e-posten som førte den besøkende dit, både i ord og uttrykk. - Når du fjerner navigasjon og ekstra lenker, samler du oppmerksomheten om handlingen siden er laget for. - Test én endring om gangen mot dine egne tall i stedet for å støtte deg på generelle referanseverdier. Godt **landingssidedesign** handler om ett mål, forklart i riktig rekkefølge. En hjemmeside skal fungere for alle. En landingsside er laget for én besøkende fra ett sted som skal gjøre én ting: bestille prøvetimen, melde seg på ventelisten eller benytte tilbudet. Strukturen som fungerer igjen og igjen, er en tydelig toppseksjon, problemet med leserens egne ord, slik fungerer det, dokumentasjon, tilbudsdetaljer, svar på innvendinger og samme handlingsoppfordring til slutt. Designet skal gjøre denne rekkefølgen enkel å følge. ## Én side, ett mål Skriv målet som én setning før du designer noe: «Få nye besøkende fra Instagram-annonsen vår til å bestille en gratis introduksjonstime.» Da kan du vurdere hver seksjon. Hjelper den denne personen med å ta dette steget? Hvis ikke, fjern den eller flytt den til hovednettstedet. ### Hjemmeside - For alle typer besøkende - Full navigasjon og mange lenker - Flere produkter eller tjenester - Forklarer hele virksomheten ### Landingsside - For én målgruppe fra én kilde - Ingen navigasjon, eller bare en logo - Ett tilbud - Bygger ett resonnement og ber om handling først én gang, så igjen ## Landingssidens struktur, seksjon for seksjon 1. **Toppseksjon** En overskrift med løftet, én støttelinje, én knapp og ett visuelt element. [Design av toppseksjonen](https://gradiently.design/nb/guide/hero-section-design) forklarer dette skjermbildet nærmere. 2. **Problemet** To eller tre setninger om situasjonen den besøkende står i, med deres egne ord. Du viser at du forstår før du selger. 3. **Slik fungerer det** Tre steg, hvert med en kort tittel og én setning. Det er lettere å si ja når man kan se prosessen for seg. 4. **Dokumentasjon** Ekte kundeuttalelser med navn, bilder av faktisk arbeid, logoer fra reelle kunder eller en kort demonstrasjon. Aldri oppdiktet. 5. **Tilbudet i detalj** Nøyaktig hva de får, når de får det og hva det koster eller ikke koster. Klare vilkår fjerner nøling. 6. **Innvendinger** Korte spørsmål og svar om det som hindrer folk i å handle: tid, pris, egnethet, avbestilling og hva som skjer videre. 7. **Avsluttende handlingsoppfordring** Gjenta løftet fra overskriften og den samme knappen. Besøkende som leser til slutten, er klare. Ikke tving dem til å bla opp igjen. Ikke alle sider trenger alle seksjonene. En venteliste til en lansering kan klare seg med en toppseksjon, tre linjer om hvordan det fungerer og et e-postfelt. Et tilbud som krever større forpliktelse, som et kurs eller en konsultasjon, trenger vanligvis alle sju og mer dokumentasjon. ## Et konkret eksempel: introduksjonstilbud hos et yogastudio | Seksjon | Hva siden sier | | --- | --- | | Toppseksjon | «Vi spanderer din første time.» Støttelinje: «Små, nybegynnervennlige grupper i Bristol, seks dager i uken.» Knapp: «Bestill en gratis time» | | Problem | «Store gruppetimer på treningssentre går fort, og ingen sjekker teknikken din. Det er vanskelig å komme i gang når du ikke vet hva du gjør.» | | Slik fungerer det | Velg en nybegynnertime. Kom ti minutter før, vi har matter. Bli igjen til en fem minutters samtale om hva som passer for deg. | | Dokumentasjon | Tre korte omtaler fra ekte medlemmer med fornavn og bilder, pluss bilder av det faktiske studioet. | | Tilbud | Én gratis time for nye elever, på valgfri nybegynnertime, uten krav om betalingskort. | | Innvendinger | «Jeg er ikke myk.» «Hva skal jeg ha på meg?» «Finnes det parkering?» «Hva skjer etter gratistimen?» | | Avsluttende handlingsoppfordring | «Kom og prøv en time.» Samme knapp: «Bestill en gratis time» | Hver linje besvarer noe en nervøs nybegynner faktisk lurer på. Den samme strukturen fungerer for et tilbud om tannlegesjekk eller en prøveperiode for programvare. ## La siden stemme med annonsen besøkeren kom fra De fleste besøkende på en landingsside kommer fra noe: en [Instagram-annonse](https://gradiently.design/nb/guide/instagram-ad-design), en LinkedIn-annonse, en e-post eller en QR-kode på et flygeblad. Når de kommer inn, sjekker de straks at de er på riktig sted. Gjenta det nøyaktige tilbudet fra annonsen i overskriften, og viderefør uttrykket: samme bakgrunn, farger og skrift. En side som virker urelatert til annonsen, kan føles som et lokketilbud, selv når den ikke er det. En stående Instagram-annonse for et yogastudio med en gratis første time Instagram-annonsen i 1080×1350. En bred toppseksjon som gjentar tilbudet om en gratis første time og bakgrunnen fra annonsen Toppseksjonen på landingssiden i 1920×1080: samme ord og samme uttrykk, slik at ingen lurer på om de klikket på riktig lenke. Når begge lages fra samme utgangspunkt, skjer dette automatisk. I Gradiently kan du med Pro tilpasse ett design til alle størrelser i ett steg. Innlegget, storyen, e-postbanneret og toppseksjonen deler dermed én Mark og én overskrift. [Ett uttrykk i alle størrelser](https://gradiently.design/nb/guide/one-look-every-size) viser arbeidsflyten, og [en konsekvent merkevare](https://gradiently.design/nb/guide/brand-consistency) forklarer hvorfor dette betyr noe utover én kampanje. ## Designvalg som får folk til å lese videre - **Én aksentfarge for alle knapper**, som ikke brukes noe annet sted. Øyet lærer hvor det skal klikke. [60 30 10-regelen](https://gradiently.design/nb/guide/60-30-10-rule) hjelper deg med balansen. - **God plass mellom seksjonene**, slik at hver seksjon formidler én idé. Tette sider virker krevende. - **Overskrifter som gir mening alene.** Mange skumleser bare overskriftene. De bør fortelle hele historien. - **Ekte bilder fremfor arkivbilder.** Dine faktiske lokaler, produkter, ansatte eller resultater. - **Korte skjemaer.** Be bare om det du trenger nå. Det er lettere å gi fra seg en e-postadresse enn et telefonnummer. - **Ingen navigasjonsmeny**, eller bare en logo, slik at det ikke finnes andre steder å vandre videre til. - Sidebakgrunn: #fbf7f2 - Seksjonsbånd: #efe6da - Tekst: #2b2a33 - Sekundærtekst: #6b6670 - Bare knappen: #c2410c En rolig palett for landingssider: to varme bakgrunner som veksler mellom seksjonene, to tekstfarger og én aksent forbeholdt handlingsoppfordringen. ## Mobil først, deretter testing Trafikk fra sosiale innlegg kommer hovedsakelig fra telefoner, så design versjonen på 390 piksler først. Ha overskriften og knappen på første skjermbilde, gjør knapper minst 44 piksler høye, og bruk bare en fast knapp hvis den ikke dekker innhold. ### Unngå - Endre fem ting samtidig og gjette hva som fungerte - Bruke en konverteringsrate fra et blogginnlegg som mål - Popup-vinduer som vises før den besøkende har lest noe - Et skjema med ti felt for å laste ned en veiledning ### Gjør - Endre én ting, for eksempel overskriften, og sammenlign - Mål mot din egen forrige versjon - La folk lese tilbudet før du ber om noe - Be om minst mulig, og lær mer senere Det finnes ingen universell god konverteringsrate. Den avhenger av tilbudet, prisen og trafikken. Du kan alltid gjøre neste versjon tydeligere enn den forrige. For fargene bak det hele, se [fargepaletter for nettsteder](https://gradiently.design/nb/guide/website-color-scheme). ## FAQ ### Hva er den beste strukturen for en landingsside? Toppseksjon, problem, slik fungerer det, dokumentasjon, tilbudsdetaljer, innvendinger og en avsluttende handlingsoppfordring. Enkle tilbud kan hoppe over seksjoner. Større forpliktelser trenger dem alle. ### Bør en landingsside ha navigasjon? Vanligvis ikke. Når du fjerner menyen, holder du oppmerksomheten på handlingen siden er laget for. En logo er nok. ### Hvor lang bør en landingsside være? Så lang som det tar å svare på den besøkendes spørsmål. En gratis venteliste kan få plass på ett skjermbilde, mens et betalt kurs ofte trenger en lang side med grundig dokumentasjon og spørsmål og svar. ### Hva er forskjellen på en landingsside og en hjemmeside? En hjemmeside er for alle besøkende og lenker til mange steder. En landingsside er for én målgruppe fra én kilde og ber om én handling. ### Bør landingssiden min se ut som annonsen min? Ja. Gjenta tilbudet fra annonsen i overskriften og behold fargene og bakgrunnen, slik at besøkende straks vet at de er på riktig sted.