Design av landningssida: struktur för sidor som konverterar

Bra design av landningssida är ett mål, framfört i ordning. Till skillnad från en startsida, som tjänar alla, finns en landningssida för en besökare som kommer från ett ställe för att göra en sak: boka provlektionen, ställa sig på väntelistan, ta erbjudandet. Strukturen som fungerar gång på gång är en tydlig hero, problemet med läsarens egna ord, hur det fungerar, bevis, detaljerna i erbjudandet, svar på invändningar och samma uppmaning i slutet. Designens uppgift är att göra den ordningen enkel att följa.

En sida, ett mål

Skriv ner målet som en enda mening innan du designar något: ”Få förstagångsbesökare från vår Instagram-annons att boka en gratis introduktionslektion.” Då får varje sektion ett test. Hjälper det här den personen att ta det steget? Om inte, ta bort den eller flytta den till huvudwebbplatsen.

Struktur på landningssida, sektion för sektion

1. 1

   Hero

   Rubrik med löftet, en stödjande rad, en knapp, en bild. Design av hero-sektion går igenom den här skärmen i detalj.

2. 2

   Problemet

   Två eller tre meningar som beskriver situationen besökaren befinner sig i, med deras ord. Det visar att du förstår innan du säljer.

3. 3

   Så fungerar det

   Tre steg, vart och ett med en kort rubrik och en mening. Folk binder sig lättare när de kan föreställa sig processen.

4. 4

   Bevis

   Äkta omdömen med namn, foton av verkligt arbete, logotyper från verkliga kunder eller en kort demo. Aldrig påhittade.

5. 5

   Erbjudandet i detalj

   Vad de exakt får, när, och vad det kostar eller inte kostar. Tydliga villkor tar bort tvekan.

6. 6

   Invändningar

   En kort FAQ som besvarar skälen till att folk inte agerar: tid, pris, passform, avbokning, vad som händer sedan.

7. 7

   Avslutande uppmaning

   Upprepa rubrikens löfte och samma knapp. Besökare som läst till slutet är redo, så låt dem inte scrolla tillbaka upp.

Alla sidor behöver inte alla sektioner. En väntelista inför en lansering kan vara bara en hero, tre rader om hur det fungerar och ett e-postfält. Ett erbjudande med högt engagemang, som en kurs eller en konsultation, behöver oftast alla sju och mer bevis.

Ett genomarbetat exempel: introerbjudande på en yogastudio

Matcha sidan mot annonsen som skickade dem

De flesta besökare på en landningssida kommer från något: en Instagram-annons, en LinkedIn-annons, ett e-postmeddelande, en QR-kod på ett flygblad. I samma stund de landar kontrollerar de att de är på rätt ställe. Upprepa exakt det erbjudande annonsen hade i rubriken, och för över dess utseende: samma bakgrund, färger och text. En sida som ser orelaterad ut till annonsen känns som lockbete, även när den inte är det.

Att designa båda från en enda källa gör det automatiskt. I Gradiently kan en design ändras till varje storlek i ett enda steg med Pro, så att inlägget, storyn, e-postens sidhuvud och sidans hero delar en Mark och en rubrik. En look, alla storlekar visar arbetsflödet, och enhetligt varumärke förklarar varför det betyder något bortom en enskild kampanj.

Designval som får folk att fortsätta scrolla

• En accentfärg för varje knapp, använd ingen annanstans. Ögat lär sig var det ska klicka. 60-30-10-regeln är ett bra sätt att sätta balansen.
• Generöst utrymme mellan sektioner så att var och en läses som en idé. Trånga sidor känns som hårt arbete.
• Rubriker som fungerar för sig. Många skummar bara rubrikerna, och de ska berätta hela historien.
• Äkta foton framför stockfoton. Ditt eget rum, din produkt, ditt team eller dina resultat.
• Korta formulär. Fråga bara efter det du behöver nu. En e-postadress är lättare att ge än ett telefonnummer.
• Ingen navigeringsmeny, eller bara en logotyp, så att det inte finns något att ströva iväg till.

Mobilen först, sedan test

Trafik från inlägg i sociala medier kommer mestadels på mobil, så designa versionen som är 390 pixlar bred först. Håll rubriken och knappen på första skärmen, gör knappar minst 44 pixlar höga och använd en fast knapp bara om den inte täcker innehåll.

Det finns ingen universell bra konverteringsgrad. Den beror på erbjudandet, priset och trafiken. Det du alltid kan göra är att göra nästa version tydligare än den förra. För färgerna bakom allt detta, se färgscheman för webbplatser.