Hur man blir en konverteringscentrerad designer

Så du vill bli en malldesigner för målsida? Du kanske tror att du har det enkelt - landssidemallar är ju bara en enda sida. Det är mycket lättare än att utforma en fullständig hemsida. Men reglerna för design förändras ganska när man bygger omvandlingscentrerade målsidor.

Vad är en målsida?

Innan vi går in i designprinciperna bakom målsidor, låt oss få några definitioner ur vägen:

En målsida är en fristående kampanjspecifik webbsida. Dess avsikt är att få dina besökare att slutföra en enda åtgärd. Det är inte din hemsida, och det är verkligen inte din hemsida.

Hemsidor är brandstationscentraler och är för personer som organiskt hittar din webbplats eller som behöver referera till eller titta på den i forskningsläget för deras köpcykel. Dom är inte bra för marknadsföringskampanjer.

Marknadsföringskampanjer är baserade på ett enda syfte - köp det här, prenumerera på det - och som sådan behöver en mer fokuserad upplevelse. Den största orsaken till att du använder en målsida kontra en hemsida för målet för kampanjtrafik (PPC, e-post, socialt) är på grund av något som heter uppmärksamhetskvot.

Uppmärksamhetsförhållande är förhållandet mellan interaktionspunkter (länkar) på en sida, antal avsedda åtgärder på den sidan (vilken för en kampanj är alltid 1). På en hemsida är det vanligtvis runt 40: 1 vilket innebär att det finns 39 distraherande åtgärder och 1 önskad åtgärd.

En fokuserad landningssida å andra sidan har ett uppmärksamhetsförhållande på 1: 1. Av den anledningen använder smarta marknadsförare en kampanjspecifik, dedikerad målsida för varje kampanj som de kör.

Vad betyder detta för mig som designer?

Borta är de dagar då det var acceptabelt att designa en vacker webbupplevelse, sätt borsten ner och gå iväg med en check i fickan.

Omvandling är ett av de hetaste orden på webben just nu. Varje webbsida du designar är nu en del "ansvarsfullt innehåll". Med detta menar jag att dess syfte, inverkan och framgång kan vara och mäts. Om det inte spelar en roll för att konvertera besökare till kunder, är den inte korrekt utformad.

Design är inte den enda faktorn i höga konverteringsfrekvenser. Kopia spelar en enorm del. Men den största kopian i världen kommer inte att hjälpa om din besökare är distraherad, förolämpad - vi vet alla att dålig design kan vara rätt stötande - eller förvirrad.

Genom att kombinera några enkla designprinciper och en del grundläggande psykologi kan du helt ändra ditt fokus för att designa webbupplevelse som både glädjer och konverterar.

Jag kallar denna konverteringscentrerad design. CCD för kort.

Det här är en kraschkurs i CCD, så jag ska diskutera de 7 principerna, få dig på en viss Psych 101 och visa dig några vackra och högkonverterande målsidor för landningssidor som gör dem till praktik så att du kan lära dig genom exempel.

Klar för att bli en konverteringscentrerad Designer?

De 7 principerna för omvandlingscentrerad design

Principerna är enkla. Lär dem, träna dem, så ser du dina omvandlingsfrekvenser.

Princip 1: Inkapsling

Förpackning saker är en smart övning. Det fungerar för ditt huvud i kalla temperaturer, bakade potatisar i het och det gör julen roligare. Så ta det viktigaste på din sida (ditt omvandlingsmål) och linda det i något för att visa att det är värt din besökares uppmärksamhet.

Princip 2: Kontrast

Så många marknadsförare pratar om knappfärg. Det här är ett misstag. En bra Konverteringscentrerad Designer vet att knappfärgen är irrelevant. Det är kontrast som räknas. Om du har en främst grön hued sida, kommer en röd knapp att hoppa ut på dina besökare. Var inte bekymrad över att det ser arg ut; dina potentiella kunder är inte tjurar.

Princip 3: Riktningsignaler

I vissa kulturer anses det oförskämt att peka. Ej i konvertering mark. När någon anländer till din målsida ska din design peka på dem mot det mål du vill att dom ska nå. Använd pilar och triangulering för att skapa kontaktpunkter. Med fotografering, använd synfält för att rikta uppmärksamheten på din Call-To-Action (CTA).

Princip 4: Whitespace

Det här är enkelt. Krama inte saker ihop. Brist på blankutrymme är stötande design. Genom att låta människornas ögon andas (de kan göra det?) Skapar du en mer härlig upplevelse som ger dig några extra värdefulla sekunder för att kommunicera ditt kampanjmeddelande.

Princip 5: Brådska och knapphet

Detta är den första psykologibaserade principen. Att skapa brådskande eller brist är i första hand en skriftlig övning, men det är upp till dig att presentera informationen med bra design. Närhet till målsidan för omvandlingsmål är nyckeln när det gäller signalbrist. Genom att säkerställa att din besökare förstår att de har en deadline, kan du göra det klickar lite mer sannolikt.

Expedia gör ett bra jobb här med hjälp av inkapsling för att markera knapptrycket ("Endast 3 biljetter kvar till detta pris!") I bilden nedan.

Princip 6: Försök innan du köper

Har du någonsin "provat" en druva i en stormarknad? Det är en förhandsgranskning av kvalitet och det hjälper människor att fatta välinformerade köpbeslut. Exempel i den digitala riken inkluderar ett kapitel i en ebook eller ett visuellt bildspel som täcker några höjdpunkter från en branschrapport, online kurs eller en teaser / trailer video för en kommande händelse. Amazon ställer verkligen standarden med deras "Look Inside" bokförhandsvisningar.

Genom att öppna din produkt för granskning innan köpet visas du auktoritativ och trovärdig. Detta ökar förtroendet, och det kan vara en viktig faktor för att öka omvandlingar.

Som en konverteringscentrerad designer bör du hitta kreativa sätt att presentera dessa förhandsgranskningar.

Princip 7: Socialt bevis

Element av förtroende är en viktig del av varje målsida. De säkerhetskopierar dina påståenden och när de görs rätt, pratar du med dina besökare ur en likasinnade konsument. Testimonials är det mest populära tillvägagångssättet. Precis som princip 5 är detta i första hand ett skriftligt element, men du kan använda aspekter av smart innehållsdesign - i synnerhet hierarkin - för att uppmuntra människor att faktiskt läsa dem.

Lägga till en förklarande rubrik ovanför testimonials (eller kund logotyper etc.) kan öka makt sociala bevis.

Konverteringscentrerad design i åtgärd; 5 målsidor för målsidor

Beväpnad med dina nya designverktyg, låt oss ta en titt på fem Unbounce landningssidemallar för att inspirera dig när du skapar egna mallar.

1. Lockwood: Fastigheter

  • inkapsling Omvandlingsmålet är formen, så det är placerat fram och i mitten och inkapslat i en behållare som gör att det kritiska innehållet ovanför kan anslutas visuellt.
  • Kontrast CTA står klart på sidan med en vibrerande kontrastfärg.
  • Riktlinjer Det finns en pil placerad i slutet av huvudinnehållsområdet som leder din blick till CTA, och användningen av samma orange färg förbinder de två elementen.
  • blank När du flyttar ner på sidan kan dina ögon falla fritt genom innehållsblocken. Luftigt och rymligt fotografi och en minimalistisk palett kombinerar för att göra det till en trevlig upplevelse.
  • Brist Uttalandet att endast 3 av enheterna förblir placeras direkt under CTA som en påminnelse om att du ska skynda dig. Om du vill bli mer aggressiv här kan du prova en * Cringe * Starburst sorts - bara kom ihåg att vara elegant. Det skulle vara ett bra A / B-test.
  • Socialt bevis Lämpligt socialt bevis används här, med inriktning på designutmärkelser, snarare än ett vittnesbörd som skulle ha mycket begränsad inverkan.

2. Lasano: Hälsa och välbefinnande

  • Formkapsling? Kontrollera.
  • Kontrastande CTA? Kontrollera.
  • blank? Kontrollera.
  • Socialt bevis? Kontrollera.
  • Riktlinjer Här kommer du att märka två former av riktningskod. Den första använder kvinnans webbplats för att rikta blicken från vänster till höger. Ännu bättre skulle vara om hon tittade ner och till höger, men det kan också få henne att se ledsen, vilket skulle gå emot temat för mallen. För det andra finns det ett sekundärt uttalande under formuläret som slutar med en liten påminnelsespil som pekar på dig. Små saker har inte alltid stor inverkan, men när du har flera små saker som fungerar i konsert kan de.

3. Yuli: Software Demo

  • Formkapsling? Kontrollera.
  • Kontrastande CTA? Kontrollera.
  • blank? Kontrollera.
  • Riktlinjer Sidans övre del är där allt huvudinnehåll lever, så en pil - med en förfrågan - placeras vid den punkt där innehållet har lästs, pekar på CTA. Observera också hur en slags instruktions triangel skapas genom att reservera färgen orange för element som hänvisar till syftet med sidan: "free demo", "kom med oss ​​för en gratis demo", "boka min demo nu."
  • Socialt bevis En video används denna gång för en högre grad av sofistikering. I ett A / B-test körde jag på Unbounce.com hemsida, jag fann att genom att ersätta textuttalanden med en videoversion ökade konverteringsfrekvensen med 25%. Här finns en kombination av video och text. Observera också att mallen använder hierarkin för informationsdesign för att införa de sociala beviselementen (videon och kundlogotyperna nedan) med en beskrivande rubrik.

4. Wanderlust: Resa

  • Kontrastande CTA? Kontrollera.
  • blank? Kontrollera.
  • Socialt bevis? Kontrollera.
  • inkapsling Det är lite annorlunda på en klickbaserad målsida eftersom det inte finns någon form, men CTA är fortfarande positionerad med annan viktig information i en avgränsningsruta i sidhuvudet. Footer-elementet använder också färgkontrast för att inkapsla "avslutningsargumentet" med en upprepad CTA.
  • Riktlinjer Det är lite av en sträcka, men Eiffeltornet beror på CTA. Och det betyder ganska smart att genom att klicka på CTA kommer du att whisked till Paris för att stå under tornet. Så romantiskt. I en annan bemärkelse leder bilderna i cirkulärfunktionen ner genom sidan till den stängande CTA.

5. Polar: Inte för vinst

  • blank? Kontrollera.
  • Socialt bevis? Kontrollera.
  • Kontrastande CTA Som i alla dessa exempel sticker CTA ut från resten av designen. Observera också hur målet med kampanjen (att skaffa pengar genom donationer) markeras med hjälp av orangefärgen i måltermometern. Detta gör en koppling mellan de emotionella och fysiska (omvandlings) målen på sidan.
  • Urgency & Scarcity Kombinationen av donationsmålet och de emotionella uttalandena "Tid löper ut för isbjörnen" och "Jag förutspår att vi kunde se isfria somrar på Nordpolen inom ett decennium" skapar både brådskande och överhängande känsla av knapphet.

Sammanfattningsvis

Att vara en konverteringscentrerad designer är nästa utveckling av design i affärer, och beväpnad med dagens lärande gör du din chef / kunder mycket glada när deras omvandlingsfrekvens går upp.

Så när du utformar dina temforestringsmallar, kör dem mot de sju principerna för CCD och se hur de verkligen stack upp.

Vidare läsning

  • Den ultimata guiden till omvandlingar centrerad design (ebook)