Den första upplevelsen av ditt företag på en förvirrande eller dåligt utformad landningssida kan göra att besökaren aldrig återvänder. Första intrycket är 94 % designrelaterade, och om någon inte gillar vad de ser inom 14 millisekunder kan de lämna för gott. Det innebär att du bränner pengar för att få ögon på dina produkter, och när du har uttömt dessa prospekt måste du börja om från början.
Faktum är att även några av världens största varumärken har ineffektiv design av landningssidor. Det är ett vanligt problem – men du kan lösa det med en webbdesign som bygger på en djupare förståelse för din målgrupp.
Här nedan kan du lära dig av experter hur man skapar bättre design av landningssidor som omvandlar prospekt till kunder, komplett med 20 exempel för att ge inspiration från varumärken som har lyckats.
Table of contents
Vad gör en landningssida effektiv?
En landningssida följer vanligtvis samma struktur, men det finns vissa element som högpresterande sidor lägger särskild vikt vid.
Innehåll ovanför ”the fold”
“The fold”, eller ovanför kanten, är det område på en webbsida som är synligt utan att scrolla, och det varierar beroende på vilken enhet någon använder, oavsett om det är en stationär dator, surfplatta eller mobil enhet, som alla har olika skärmstorlekar.
Generellt ligger kanten vid 600 pixlar från toppen av webbläsarfönstret.Inte alla besökare på din landningssida kommer att scrolla förbi kanten på stationära eller mobila enheter. Faktum är att majoriteten av besökarna antagligen inte kommer att scrolla ner alls.
Fokusera på informationsflödet över hela sidan snarare än att enbart designa för ovanför och nedanför vikningen – i princip allt som en användare kan se på din landningssida utan att scrolla ner.
Text på landningssidan
Bra text på en landningssida består av orden på sidan – inklusive produktbeskrivningar, Call-to-action-texter, rubriker och din meta-titel och beskrivning. Använd en djärv, problemfokuserad rubrik för att inleda din landningssida.
Överväg kundens röst när du skriver texten på din landningssida. Gräv i recensioner och sociala medier, och inkludera de ord och fraser som din målgrupp använder i din text.
Kom ihåg att framhäva fördelar istället för funktioner. Om din landningssida till exempel marknadsför ett vattentåligt mobilskal, prata om hur människor kan ta bilder medan de simmar när du lyfter fram betyget för IP-vattentålighet.
Slutligen är en övertygande text skriven med din varumärkesröst i åtanke. Konsekvens är avgörande, även när det gäller riktade kampanjer.
Bildspråk och färgschema
Landningssidans design bör ta hänsyn till färger och typsnitt, samt ha utrymme för välplacerade bilder. Många börjar med texten på sin landningssida och utvecklar sedan de visuella tillgångarna för att säkerställa samstämmighet mellan de två. Kom ihåg att bilder också kan inkludera illustrationer och videor utöver produktfoton.
Kundrecensioner
En av de minsta men mest effektiva justeringarna som Ezra Firestone, grundare av Smart Marketer och medgrundare och VD för BOOM! by Cindy Joseph, gjorde på sina egna Shopify-butiker var att lägga till kundrecensioner högst upp i rutan istället för produktnamnet.
Så här ser det ut:
Att inkludera ett citat högst upp bygger förtroende, gör att folk inte behöver leta efter recensioner, och låter dina kunder tala å dina vägnar. Se bara till att du väljer citat som direkt visar på en fördel eller ett problem som varje produkt löser.
Överväg dessutom att inkludera en hel sektion avsedd för dina kundrecensioner, så att shoppare kan läsa perspektiven från riktiga personer som faktiskt har köpt dina produkter. Se till att åtminstone visa också några av de negativa och medelbra recensionerna, så att andra kan få en komplett förståelse för vad folk älskar och vad de inte gillar.
Uppmaning till handling
Varje landningssida behöver en uppmaning till handling (CTA) för att vara effektiv. Din bör driva användare att ta den åtgärd du vill att de ska ta. Beroende på din landningssida kan CTA:n säga något som "Läs mer", "Köp nu" eller "Prenumerera." Du kan också inkludera prisinformation här, om det är relevant.
Om du undrar över placeringen av CTA:n beror det också på vad din målgrupp behöver. Du kommer att avgöra detta baserat på tester av placeringen för att se vad som ger en bättre konverteringsgrad. I allmänhet bör du ha en CTA ovanför "the fold" samt genom hela landningssidan, beroende på sidans längd.
Exempel på design för landningssidor
Brightland
Har du någonsin blivit omnämnd i en nyhetsartikel? Att visa mediernas logotyper på dina landningssidor med citat från artiklarna är vad Nik Sharma, VD för Sharma Brands, kallar en "skrytruta." Dessa publikationer tillför trovärdighet till ditt varumärke, och att nämna dem gör stor skillnad för köpare som söker mer information.
Brightland, till exempel, säljer extra jungfrulig olivolja från Kalifornien. Den har fått positiv kritik från publikationer som The New York Times och The Wall Street Journal, vilket de utnyttjar till sin fördel i sin design av landningssidan.
Olipop
Olipop säljer hälsosammare läskedrycker fulla av växtbaserade ingredienser och prebiotika för att stödja en hälsosam mikrobiom. Varumärket använder text som lyfter fram fördelarna för att direkt hantera invändningar ("Men hur mycket socker innehåller läsken?") och positionera drycken som en lösning för läsk-älskare som letar efter ett sätt att sluta.
Olipop har en rolig och funky design av landningssidan.
Du kan inspireras av andra landningssidor, inklusive tydlig, djärv text, djupgående produktinformation (vid scrollning), och stjärnor med faktiska recensioner för att stärka trovärdigheten, en liten rubrik som inte dominerar sidan, intuitiv och lättnavigerad layout och fantastiska produktfoton.
Path
Path är en virtuell fotoediteringsstudio med en Shopify-butik. Deras kärnerbjudanden är tjänster för editering av produktfoton. En av de kanaler de använder för att marknadsföra sig och koppla ihop med potentiella kunder är e-post. Path har en dedikerad landningssida för att driva anmälningar till sitt nyhetsbrev.
Du kan tydligt se att sidan fokuserar på målet – att driva prenumerationer – och erbjuder inte mycket distraktion som kan komma i vägen för det målet. Sidan är inte lättillgänglig från företagets webbplats, men den kan driva riktade kampanjer som främjar anmälningar till nyhetsbrevet till denna landningssida.
LUSH Cosmetics
Certifieringar går långt med shoppare, och vissa gör inte ett köp utan dem. Leaping Bunny, icke-GMO eller certifierad B Corp är tre exempel. Om du har blivit certifierad för något, visa det på din landningssida.
LUSH Cosmetics tar detta tillvägagångssätt med sin design av landningssidan. Längst ner på deras “plastfria” sida ser kunderna varumärkets kärnvärden – inklusive att deras produkter är 100 % vegetariska, handgjorda och inte testade på djur.
Netflix
Netflix anses vara en pionjär inom prenumerationsbranschen. Med över 232,5 miljoner betalande prenumeranter i över 190 länder vet de en eller annan sak om att designa landningssidor som övertygar människor att prenumerera.
Ta designen av deras landningssida för presentkort som exempel. Det finns två enkla uppmaningar till handling (om du vill köpa kortet genom Netflix eller på Amazon) och en liten sammanställning av hur presentkortet fungerar. Den är kort och koncis och ger någon all den information en kund behöver veta innan de köper.
Grind
Grind är ett kaffemärke som säljer genom sin nätbutik och kafé. De har en landningssida där de pratar om hållbarhet – ett av varumärkets kärnvärden och differentierande faktorer.
Det som är särskilt bra med designen av landningssidan är användningen av visuella element. Det finns en rullningslist strax ovanför “folden”, färgkodade knappar som hjälper människor att navigera till den sektion de är mest intresserade av, och catchy underrubriker som speglar målgruppens vokabulär – som "Vi tar kaffe på allvar."
Creatorpreneur Academy
Digitala produkter kan vara dyra; människor behöver mycket information innan de åtar sig ett större köp. Skaparen Ali Abdaal har designat den perfekta landningssidan för detta – en som levererar nödvändig information på ett sätt som inte överväldigar besökarna.
Det första någon ser när de besöker denna landningssida är rubriken: “Skala upp din kreativa sidoverksamhet till nästa nivå.” Det berör en utmaning och ett mål som är relevant för den avsedda målgruppen. Om någon föredrar att lära sig mer om kursen, utan att läsa text, kan de klicka på länken för att se YouTube-videon som förklarar den mer i detalj.
Jolie
Det primära målet med en landningssida är att få någon att slutföra en handling. När det gäller e-handel betyder det inte alltid att din design av landningssidan ska kretsa kring funktionerna och fördelarna med vad du säljer.
Ta Jolie som exempel, ett konsumentvarumärke som säljer duschfiltreringssystem. De byggde en landningssida för sin vattenrapport – ett sätt för människor att se vilka kemikalier som finns i deras vatten.
Sidan pratar om farorna med vissa kemikalier och deras påverkan på vår hud och hår. När människor känner till denna information blir problemet mer akut och viktigt, vilket ökar sannolikheten för att de slutför beställningen av rapporten genom något av e-postformulären som är integrerade i landningssidans design.
Ahrefs
Du behöver inte specialistkunskaper i design för att anpassa en högkonverterande landningssida. Ta Ahrefs som exempel, ett SEO-verktyg som har landningssidor för var och en av sina nyckelfunktioner och användningsområden.
Designen av landningssidan för dess funktionalitet för nyckelordsforskning innehåller små grafiska element som bryter upp centrala punkter i textblock. Det finns också en liten Ahrefs-logotyp i radbrytningarna – ett smart sätt att säkerställa en konsekvent varumärkesidentitet och igenkänning av logotypen utan att infoga den fulla versionen.
Tabs
Tabs sidor för ingredienserna i deras choklad, är ett mästerligt exempel på hur man förenar sociala bevis i designen av landningssidan. Landningssidan har en rosa list, som står ut mot den monokroma designen, för att visa hur de erbjuder en pengarna-tillbaka-garanti, tusentals femstjärniga recensioner och mer än 200 000 nöjda kunder.
Det finns också en sektion för femstjärniga recensioner under huvud-CTA-knappen, vilket förstärker att någon är i gott sällskap om de handlar sin egen choklad. Placeringen är strategisk – det är troligt det sista besökarna ser innan de klickar på CTA-knappen.
Peepers
Produktbeskrivningen som du kan inkludera i designen av din landningssida är en koncis text som omedelbart förmedlar vad din produkt faktiskt är. Du har mycket mer utrymme längre ner på sidan för att ge detaljer som direkt hanterar eventuella invändningar som kan hindra en kund från att slutföra sitt köp.
Ögonvårdsföretaget Peepers använder den här taktiken. “Above the fold” finns en mängd produktbilder, och nedanför hittar du detaljer och en beskrivning som listar alla fördelar med att välja en Peepers-lins.
Peepers låter inte utrymmet under vikningen gå till spillo.
ConvertKit
Även om bästa praxis är att hålla sig till ett litet antal komplementfärger på din landningssida, visar ConvertKit hur du kan använda nyanser och toner för att få mer variation – utan att avvika för långt från dina stilguider.
Det som är bra med den här designen av landningssidan är användningen av vit yta. Istället för att lämna sektionen ovanför underrubriken tom, lade ConvertKits designer till handskrivna anteckningar till besökaren. Det är en smart användning av mikrotext – och en inspirationskälla för design – som kan hjälpa besökare på landningssidan att få en känsla för varumärkets personlighet.
Jones Road Beauty
Vissa skönhetsmärken har problem med returer när de säljer kosmetika online. Nyanser ser olika ut på en datorskärm jämfört med i verkligheten. Jones Road Beauty löser detta problem med quiz som hjälper människor att hitta rätt.
Landningssidans design för Jones Road Beautys quiz är enkel och direkt. Den strider mot bästa praxis att endast inkludera en CTA, men den gör ett bra jobb med att förklara de tillgängliga quizzen, hur de används och hur du kan klara dem. Det finns till och med ett litet stjärnbetyg under quizens underrubrik för att förstärka att quizet gör ett bra jobb med att lösa problemet med felaktiga nyanser.
BEAM Content
Precis som din text bör vara i linje med varumärket, bör även bilder, typsnitt och färger vara det. Även om du kan ha mer utrymme för kreativitet med designen av landningssidan, är det fortfarande viktigt att ge en enhetlig varumärkesupplevelse över alla kontaktpunkter.
BEAM Content är ett bra exempel på en landningssida att hämta inspiration ifrån. Byrån använder en sofistikerad färgpalett med grafiska element som matchar. Typsnittet är enkelt och elegant, med handritade typsnitt för mikrotext som drar uppmärksamhet till viktig text – som “varumärkessocial” är den huvudsakliga tjänsten på denna landningssida.
Basecamp
Kundrecensioner är en viktig del av designen på alla landningssidor. En studie har visat att när en sida visar recensioner för en dyr produkt, kan konverteringsgraden öka med så mycket som 380 %.
Problemet med testimonials är att du inte kan ändra vad någon har sagt. Det är dålig praxis att korta ner någon annans ord och tillskriva dem till personen. Basecamp visar dock hur du kan lyfta fram de mest kraftfulla delarna av en testimonial för att få den att sticka ut.
Maev
Maev är ett bra exempel att hämta inspiration från för landningssidor om du behöver presentera mycket information på ett för ögat vänligt sätt.
Istället för att helt enkelt lista ingredienserna i sin hundmat har återförsäljaren använt bilder. Folk känner omedelbart igen en blåbär eller grönkål, vilket hjälper dem att övervinna en vanlig svårighet när de köper djurfoder online: att visualisera exakt vad deras hund äter.
Money with Katie
Landningssidor för nyhetsbrev har ett tydligt mål: att få någon att prenumerera på din e-postlista. Money with Katie, ett nyhetsbrev under Morning Brew-varumärket, har fulländat det utan att investera i en fullständig design av landningssidan
Money with Katie:s hela landningssida är bara det vi ser “above the fold”. Det finns inget behov av att scrolla eller överväldiga besökaren med för mycket information. Rubriken lovar exakt vad de kommer att få; bilden visar vad de anmäler sig till. Det enda de behöver göra är att fylla i registreringsformuläret.
Denna landningssida för ett nyhetsbrev är kort och koncis.
Creator Wizard
Justin Moore är en expert på sponsring som säljer digitala produkter. Hans kurs, Gifted to Paid, är en premium online-utbildning som hjälper innehållsskapare att få sponsorer och tjäna pengar på sitt digitala innehåll.
Gifted to Paid berör båda dessa mål genom hela landningssidan. Denna sektion i synnerhet ger besökaren information om handledning för kursen. Det är mycket information att smälta, så Justin gjorde smarta designval – som att fetmarkera viktig text och använda GIF:ar – för att göra det lättare att förstå.
Justin använder GIF:ar och fetad text för att bryta upp innehållet på sidan.
Descript
Rubriker kräver utrymme på din landningssida, vilket gör dem till ett viktigt element att fokusera på vid design. På till exempel Descripts landningssida, är rubrikerna smarta och adresserar subtilt det hinder någon kan ha innan de konverterar: Hur mycket kostar det? Och vad ingår egentligen i en "gratis" plan?
Med så många variabler för prissättning finns det också en interaktiv priskalkylator för att hjälpa människor att räkna ut hur mycket programvaran för videoredigering kostar. Det är mycket mer engagerande än statiskt innehåll och hjälper varumärket att personalisera i stor skala.
Shopify POS
De Shopify-designers som byggde landningssidan för försäljningsstället (POS) hade den svåra uppgiften att tillgodose tre olika CTA:er:
- Starta en gratis provperiod
- Prata med försäljningsteamet
- Logga in på ett befintligt Shopify POS-konto
Färgvalen för knapparna gör en stor skillnad här. Knappar med hög kontrast (vit text på en mörk bakgrund) står ut mest mot den neutrala designen, så detta blev alternativet för den föredragna och mest viktiga CTA:n: att starta en ny provperiod.
Att prata med försäljning fick samma storlek på knappen, men med omvända färger. Den tredje och minst viktiga är bara en liten bit länkad text under varje knapp.
Bästa praxis för design av landningssidor
Du har fångat uppmärksamheten hos en potentiell kund, och nu har du några sekunder på dig att visa vad som gör ditt varumärke och dina produkter unika. Det är en ganska stor begäran att få fram det med några ord eller bilder, och ännu mer utmanande när en potentiell kund har begränsad kännedom om ditt varumärke.
Även om prestationen kommer att bero på många faktorer, kan en enkel design av landningssidan hjälpa till att styra människor till den information du mest vill att de ska se. Om de inte tar med sig något annat, vad är det enda du skulle vilja att de kommer ihåg?
Överväg informationsflödet
Oavsett vad som fungerar bäst för dina kunder, vill du alltid ha tänkt igenom vilken typ av text och innehåll du lägger högst upp på en landningssida. Men att försöka få in allt innehåll på första sidan kan slå tillbaka och resultera i en rörig upplevelse för användaren.
”Marknadsförare bör tänka mindre på ”above the fold” och mycket mer på den övergripande hierarkin av information och flödet av innehållet på landningssidan”, säger CRO-konsulten Michael Aagaard.
Reflektera över följande frågor när du bygger dina landningssidor. Svaren kommer att bero på din förståelse för din målgrupps användarresa och vilken roll du önskar att landningssidan ska fylla.
- Besvarar du rätt frågor och tar upp rätt hinder?
- Hanterar du förväntningar och följer upp "löften" gjorda i annonsen?
- Levererar du innehållet i rätt ordning och bygger upp momentum mot konverteringsmålet?
Optimera din konverteringsruta
Konverteringsrutan är en liten sektion på varje landningssida som behöver göra stort intryck. Ezra kallar den den viktigaste delen på dina landningssidor för produkter. Det är bokstavligt en ruta på sidan med en noggrant optimerad uppsättning av konverteringsverktyg, som inkluderar en köpknapp.
Generellt sett, om du ser på den på en stationär dator, innehåller konverteringsrutan en bildkarusell med foton av produkten till vänster samt din sammanfattning, försäljningstext, prissättning, stjärnor med recensioner, köpknapp eller Shop Pay-knapp och unika USP:ar under knappen till höger.
”De flesta företag har inte försäljningstext i konverteringsrutan, de har inte sociala bevis i rutan, de har inte unika USPAR och värdeerbjudanden eller bildformat under knappen ”Lägg till i kundvagn”, och produkt-karusellen innehåller bilder som inte ser bra ut,” säger Ezra. ”Konverteringsrutan är allt.”
Det finns några mallade element som ger utrymme för din text och dina bilder att verkligen lysa. En högt optimerad konverteringsruta innehåller vad Ezra kallar "conversion asset stacking” (stapling av konverteringsresurser). Här är ett exempel på hur det kan se ut på stationär dator:
Fokusera på visuella element
Bilderna du tar med av dina produkter är sannolikt det enda som potentiella köpare har har när de tänker på att genomföra den önskade åtgärden. Bryt upp informationen vid design av landningssidan med andra element som:
- Punktlistor eller numrerade listor
- Logotyper eller grafik
- Bilder
- CTA-knappar
- Recensioner
- Videotestimonials
I en e-handel är bilder det som hjälper en köpare att visualisera en produkt utan att kunna ta på den. Om dina foton inte fullt ut fångar hur fantastiska dina produkter är, är det mycket svårt för kunderna att få rätt uppfattning.
Använd en responsiv design
Du designar förmodligen din landningssida på en bärbar dator eller datorskärm, men verkligheten är: inte alla kommer åt landningssidor på en stationär dator. Ungefär hälften av all internettrafik sker på en mobil enhet. En responsiv design anpassar sig för att göra din landningssida lämplig för vilken enhet som helst.
Använd ditt hemsidesprogram och din webbplatsbyggare för att kontrollera hur bild-karuseller och CTA:er renderas på både stationära och mobila enheter för att säkerställa att de är optimerade för båda. Andra tips för en responsiv webbdesign inkluderar:
- Att använda hopfällbara menyer
- Att knyta ihop de mindre detaljerna för att säkerställa en smidigare upplevelse
- Att använda en bildkompressor som TinyPNG för att minska bildstorleken för snabbare laddningstid
- Att undvika videor som spelas upp automatiskt.
- Att använda stora, fingervänliga knappar
Analysera trafik och enhetskälla
Att designa din landningssida baserat på vilken enhet någon handlar från är ett sätt att börja din forskning kring konvertering.
Om de flesta av dina kunder kommer till din webbplats via en mobil enhet, vill du optimera dina landningssidor för en bra mobilupplevelse. Eller, om du får veta att dina kunder föredrar en stationär dator, kommer du att vara bättre rustad för att bygga en landningssida som förbättrar en stationär upplevelse.
Nik Sharma från Sharma Brands rekommenderar att man tittar ännu djupare på trafiken för att förstå vilken typ av plattform människor kom ifrån – oavsett om det är TikTok, Facebook, ett blogginlägg eller en annan kanal.
”Att inte anpassa dina sidor efter den plattform besökarna kommer ifrån kommer att orsaka att din avvisningsfrekvens skjuter i höjden och att din totala ROAS [avkastning på annonsutgifter] förblir låg,” säger han. Denna typ av kontextuell analys driver en bättre kundupplevelse överlag.
Testa dina design av landningssidor
När du har dina landningssidor live och fått igång en del meningsfull trafik till sidan, kan du börja A/B-testa olika delar designen på din landningssidan för att säkerställa att den konverterar i högsta möjliga grad.
A/B-testning handlar inte bara om att hitta den bäst presterande taglinen eller placeringen av CTA:n. Ben Labay, verkställande direktör på Speero by CXL, noterar: ”Om du testar vill du inte testa bara för att bekräfta åsikter, utan snarare för att utmana strategier eller testa hypoteser som är direkt kopplade till kundproblem eller affärsmöjligheter.”
Ben säger att tester bör vara direkt proportionerliga till faktorer relaterade till ditt företags tillväxtmodell. Om du vill skaffa fler kunder, tjäna pengar på din Instagram eller behålla befintliga kunder, behöver upplevelsen av landningssidan och testhypoteserna anpassas därefter.
Förstå när bästa praxis för design av landningssidan misslyckas
Tipsen för design av landningssidor i den här artikeln har varit framgångsrika för de experter som har testat och itererat dem. Men var försiktig med att implementera designelementen utan att förstå hur de kopplar till dina övergripande mål.
Att veta vad din målgrupp behöver är grunden för att bygga högkonverterande landningssidor.
”Ju bättre du förstår din målgrupp, desto bättre landningssidor kan du bygga. Låt dig inte bländas av de senaste designtrenderna,” säger Michael. “Se istället till att du får alla grunder på plats och gör djupgående användaranalyser så att du fattar informerade beslut som påverkar beteendet, snarare än att bara justera sidlayouten.”
Skapa vackra designer för landningssidor
Shopify har alla verktyg, appar, integrationer och teman du behöver för att komma igång med dina design av landningssidor. Börja från grunden eller med en mall, anpassa den för att passa ditt unika varumärke och hantera allt från var som helst.
Du kan också bläddra bland tusentals Shopify-appar för att lägga till funktioner och funktionalitet på landningssidan, vilket hjälper dig att öka konverteringarna och få ut det mesta av din investering.
Vanliga frågor om landningssidans design
Vad är design av landningssidor?
Design av landningssidor består av de element, både visuella och skrivna, som utgör en webbsida optimerad för att konvertera nya kunder och uppmuntra till återkommande köp. Enkelhet i visuell layout, copy som lyfter fram fördelar och högkvalitativa produktbilder är tre av många grundpelare för framgångsrik design av landningssidor.
Hur skapar man en landningssida?
Vad bör en landningssida bestå av?
En landningssida består vanligtvis av en rubrik, en kort introduktion, en uppmaning till handling och ett formulär för besökare att lämna sina kontaktuppgifter. Den kan inkludera ytterligare element som videor, bilder, kundrecensioner, sociala bevis och produktdemonstrationer.
Hur påverkar design av landningssidor konverteringsgraden?
Den genomsnittliga konverteringsgraden för en landningssida är 5,89 %, även om designen kan påverka hur nära detta riktmärke du är. De bäst designade landningssidorna är responsiva, använder visuella element för att bryta upp text och A/B-testar för bästa resultat.
Bör du A/B-testa dina design av landningssidor?
A/B-testning innebär att skapa två versioner av din landningssida (med en liten förändring i taget) och kontrollera vilken som har den högsta konverteringsgraden. Det hjälper dig att fatta datadrivna beslut om hur du ska designa andra landningssidor.
