Een conversiegerichte ontwerper worden

Wil je een ontwerper van een landingspagina-sjabloon zijn? U denkt misschien dat u het gemakkelijk hebt - de sjablonen voor bestemmingspagina's zijn immers slechts een enkele pagina. Dat is veel eenvoudiger dan het ontwerpen van een volledige website. Maar de ontwerpregels veranderen nogal bij het bouwen van op conversie gerichte bestemmingspagina's.

Wat is een bestemmingspagina?

Voordat we ingaan op de ontwerpprincipes achter landingspagina's, laten we een aantal definities uit de weg ruimen:

Een bestemmingspagina is een op zichzelf staande, campagnespecifieke webpagina. Het is de bedoeling om uw bezoekers een enkele actie te laten voltooien. Het is niet jouw website, en het is zeker niet jouw startpagina.

Websites zijn merkcentralestations en zijn bedoeld voor mensen die uw site biologisch vinden of die ernaar moeten verwijzen of ernaar moeten kijken in de onderzoeksmodus van hun aankoopcyclus. Zij zijn niet goed voor marketingcampagnes.

Marketingcampagnes zijn op één doel gebaseerd - koop dit, abonneer u hierop - en hebben daarom een ​​meer gerichte ervaring nodig. De grootste reden voor het gebruik van een bestemmingspagina versus een startpagina voor het doelwit van campagneverkeer (PPC, e-mail, sociaal) is vanwege iets dat wordt genoemd aandachtsratio.

Aandachtsverhouding is de verhouding tussen interactiepunten (links) op een pagina en het aantal geplande acties op die pagina (die voor een campagne altijd 1 is). Op een homepage is dit meestal ongeveer 40: 1, wat betekent dat er 39 afleidende acties en 1 gewenste actie zijn.

Een gerichte bestemmingspagina daarentegen heeft een attentieverhouding van 1: 1. Daarom gebruiken slimme marketeers voor elke campagne die ze uitvoeren een voor promoties specifieke bestemmingspagina.

Wat betekent dit voor mij als ontwerper?

Voorbij zijn de dagen dat het acceptabel was om een ​​mooie webervaring te ontwerpen, de borstel neer te zetten en weg te lopen met een cheque in je zak.

Conversie is momenteel een van de populairste woorden op internet. Elke webpagina die u ontwerpt, is nu een stukje 'accountable content'. Hiermee bedoel ik dat het doel, de impact en het succes kunnen worden gemeten en gemeten. Als het geen rol speelt bij het succesvol converteren van bezoekers naar klanten, is het niet correct ontworpen.

Ontwerp is niet de enige factor in hoge conversiepercentages. Kopiëren speelt een enorme rol. Maar het beste exemplaar ter wereld helpt niet als uw bezoeker wordt afgeleid, beledigd - we weten allemaal dat slecht ontwerp ronduit aanstootgevend kan zijn - of verward.

Door een paar eenvoudige ontwerpprincipes en een aantal basispsychologie te combineren, kunt u uw focus volledig verleggen om een ​​webervaring te ontwerpen die zowel plezierig als verbluffend is.

Ik noem dit Conversion-Centered Design. CCD voor kort.

Dit is een spoedcursus in CCD, dus ik zal de 7 principes bespreken, je laten juichen op wat Psych 101, en je een aantal mooie en hoogconverterende bestemmingspagina-sjablonen laten zien die ze in de praktijk brengen zodat je het voorbeeld kunt leren.

Klaar om een ​​Conversion-Centered Designer te worden?

De 7 principes van Conversion-Centered Design

De principes zijn eenvoudig. Leer ze, oefen ze en u zult zien dat uw succespercentages stijgen.

Principe 1: inkapseling

Dingen verpakken is een slimme praktijk. Het werkt voor je hoofd bij lage temperaturen, gebakken aardappelen in hete en het maakt Kerstmis leuker. Neem dus het belangrijkste op je pagina (je conversiedoel) en wikkel het in iets om aan te tonen dat het de aandacht van je bezoeker verdient.

Principe 2: Contrast

Zoveel marketeers praten over knopkleur. Dit is een vergissing. Een goede Conversion-Centered Designer weet dat de knopkleur niet relevant is. Het contrast dat telt. Als u een pagina met voornamelijk groene hued hebt, springt er een rode knop uit naar uw bezoekers. Maak je geen zorgen dat het er boos uitziet; uw potentiële klanten zijn geen stieren.

Principe 3: richtingaanwijzingen

In sommige culturen wordt het als onbeleefd beschouwd om te wijzen. Niet in het conversie-land. Wanneer iemand op uw bestemmingspagina aankomt, moet uw ontwerp ze wijzen naar het doel dat u hen wilt laten bereiken. Gebruik pijlen en triangulatie om focuspunten te maken. Gebruik bij fotografie de gezichtslijn om de aandacht te vestigen op uw call-to-action (CTA).

Principe 4: Whitespace

Deze is eenvoudig. Stop dingen niet bij elkaar. Gebrek aan witruimte is aanstootgevend ontwerp. Door de ogen van mensen te laten ademen (ze kunnen dat doen?) Creëer je een meer aangename ervaring die je een paar extra kostbare seconden geeft om je campagnebericht te communiceren.

Principe 5: urgentie en schaarste

Dit is het eerste op psychologie gebaseerde principe. Het creëren van urgentie of schaarste is in de eerste plaats een schriftelijke oefening, maar het is aan u om de informatie te presenteren met een goed ontwerp. Nabijheid van het conversiedoel van de bestemmingspagina is essentieel als het gaat om signalering van schaarste. Door ervoor te zorgen dat uw bezoeker begrijpt dat ze een deadline hebben, kunt u die klik wat waarschijnlijker maken.

Expedia doet het hier uitstekend door inkapseling te gebruiken om de schaarsteverklaring te markeren ("Nog maar 3 tickets over voor deze prijs!") In de onderstaande afbeelding.

Principe 6: probeer voordat je koopt

Heb je ooit een druif in een supermarkt "gesampled"? Dat is een voorbeeld van kwaliteit en het helpt mensen bij het nemen van geïnformeerde aankoopbeslissingen. Voorbeelden op digitaal gebied omvatten een hoofdstuk van een e-boek of een visuele diavoorstelling die een aantal hoogtepunten uit een brancherapport, online cursus of een teaser / trailer-video behandelt voor een aanstaande gebeurtenis. Amazon heeft echt de standaard gezet met zijn "Look Inside" boekvoorbeelden.

Door uw product voor controle te openen voor de aankoop, lijkt u gezaghebbend en geloofwaardig. Dit verhoogt het vertrouwen en kan een belangrijke factor zijn bij het stimuleren van conversies.

Als een op conversie gerichte ontwerper moet u creatieve manieren vinden om deze voorbeelden te presenteren.

Principe 7: Sociaal bewijs

Vertrouwenselementen vormen een essentieel onderdeel van elke bestemmingspagina. Ze maken een back-up van uw claims en spreken, als ze goed zijn gedaan, met uw bezoekers vanuit het perspectief van een gelijkgestemde consument. Getuigenissen zijn de meest populaire benadering. Net als principe 5 is dit in de eerste plaats een geschreven element, maar je kunt aspecten van slim inhoudsontwerp gebruiken - in het bijzonder hiërarchie - om mensen aan te moedigen om ze daadwerkelijk te lezen.

Het toevoegen van een verklarende kop boven de getuigenissen (of klantlogo's enz.) Kan de kracht van sociaal bewijs vergroten.

Conversie-gecentreerd ontwerp in actie; 5 Sjablonen voor bestemmingspagina's

Gewapend met je nieuwe ontwerphulpmiddelen, laten we vijf Unbounce bestemmingspagina-sjablonen bekijken om je te inspireren terwijl je je eigen sjablonen maakt.

1. Lockwood: onroerend goed

  • inkapseling Het conversiedoel is de vorm, dus deze is vooraan en centraal gepositioneerd en ingekapseld in een container waarmee de kritische content erboven visueel kan worden verbonden.
  • Contrast De CTA onderscheidt zich duidelijk op de pagina met een levendige contrasterende kleur.
  • Directional Cues Aan het einde van het hoofdgedeelte van de inhoud staat een pijl die uw blik op de CTA richt en het gebruik van dezelfde oranje kleur verbindt de twee elementen.
  • Witte ruimte Terwijl u de pagina afloopt, kunnen uw ogen vrij door de inhoudsblokken vallen. Luchtige en ruime foto en een minimalistisch palet maken het tot een aangename ervaring.
  • Schaarste De verklaring dat slechts 3 van de eenheden over zijn, bevindt zich direct onder de CTA als herinnering dat u snel moet opschieten. Als je hier meer agressief wilt worden, kun je een * cringe * starburst van soorten proberen - vergeet niet om stijlvol te blijven. Dat zou een geweldige A / B-test zijn.
  • Sociaal bewijs Passende sociale bewijzen worden hier gebruikt, met de nadruk op designprijzen, in plaats van een getuigenis met een zeer beperkte impact.

2. Lasano: Gezondheid en welzijn

  • Vorm inkapseling? Controleren.
  • Contrasterende CTA? Controleren.
  • Witte ruimte? Controleren.
  • Sociaal bewijs? Controleren.
  • Directional Cues Hier zie je twee vormen van directionele signalen. De eerste gebruikt de lijn van de vrouw om je blik van links naar rechts te richten. Nog beter zou het zijn als ze naar beneden en naar rechts zou kijken, maar dat zou haar ook verdrietig kunnen maken, wat in strijd zou zijn met het thema van de sjabloon. Ten tweede is er een secundaire verklaring onder het formulier dat eindigt met een kleine herinneringspijl die u naar achteren wijst. Kleine dingen hebben niet altijd een grote impact, maar als je verschillende kleine dingen hebt die samenwerken, kunnen ze dat.

3. Yuli: Software Demo

  • Vorm inkapseling? Controleren.
  • Contrasterende CTA? Controleren.
  • Witte ruimte? Controleren.
  • Directional Cues Het bovenste gedeelte van de pagina is waar alle hoofdinhoud leeft, dus een pijl - met een verzoek - wordt geplaatst op het punt waar de inhoud is gelezen, wijzend op de CTA. Merk ook op, hoe een soort educatieve driehoek wordt gemaakt door de oranje kleur te reserveren voor elementen die verwijzen naar het doel van de pagina: "gratis demo", "volg ons voor een gratis demo", "boek nu mijn demo".
  • Sociaal bewijs Een video wordt deze keer gebruikt voor een hoger niveau van verfijning. In een A / B-test die ik op de Unbounce.com-startpagina heb uitgevoerd, ontdekte ik dat de conversieratio's met 25% toenamen door tekstverhalen te vervangen door een videoversie. Hier is een combinatie van video en tekst. Merk ook op dat de sjabloon de hiërarchie van informatieontwerp gebruikt om de sociaal bewijselementen (de video en de klantlogo's eronder) te introduceren met een beschrijvende kop.

4. Wanderlust: reizen

  • Contrasterende CTA? Controleren.
  • Witte ruimte? Controleren.
  • Sociaal bewijs? Controleren.
  • inkapseling Het is iets anders op een doorklik-bestemmingspagina omdat er geen formulier is, maar de CTA staat nog steeds met andere kritieke informatie in een selectiekader in de paginakop. Het voettekstelement gebruikt ook kleurcontrast om de "afsluitende argumentinstructie" in te voegen met een herhaalde CTA.
  • Directional Cues Het is een beetje een stuk, maar de Eiffeltoren maakt een beetje verbinding met de CTA. En het geeft nogal slim aan dat je door op de CTA te klikken, naar Parijs wordt gebracht om onder de toren te staan. Hoe romantisch. In een andere betekenis leiden de cirkelvormige functiefoto's uw aandacht door de pagina naar de afsluitende CTA.

5. Polar: niet voor winst

  • Witte ruimte? Controleren.
  • Sociaal bewijs? Controleren.
  • Contrasterende CTA Zoals in al deze voorbeelden onderscheidt de CTA zich van de rest van het ontwerp. Merk ook op hoe het doel van de campagne (om geld op te halen door middel van donaties) wordt belicht met de oranje kleur in de doelthermometer. Dit maakt een verbinding tussen de emotionele en fysieke (conversie) doelen van de pagina.
  • Urgentie en schaarste De combinatie van het donatiedoel en de emotionele uitspraken "De tijd dringt voor de ijsbeer" en "Ik voorspel dat we ijsvrije zomers op de noordpool binnen een decennium kunnen zien" creëren zowel urgentie als het dreigende gevoel van schaarste.

Samengevat

Conversion-Centered Designer zijn, is de volgende evolutie van design in het bedrijfsleven, en gewapend met het leren van vandaag zul je je baas / klanten erg blij maken wanneer hun conversiepercentages omhoog gaan.

Dus terwijl u uw Themeforest-bestemmingspaginasjablonen ontwerpt, voert u ze uit volgens de zeven principes van CCD en ziet u hoe ze echt op elkaar stapelen.

Verder lezen

  • De ultieme gids voor conversies gecentreerd ontwerpen (ebook)