Hoe de ‘look’ van je landingspagina voor meer conversies kan zorgen

May 16, 2011 4 reacties
Als we het over conversie optimalisatie hebben, dan wordt het visueel aspect soms beetje vergeten. Bij deze dus 3 tips waarbij grafische elementen en het juist gebruiken & plaatsen ervan voor verbetering kunnen zorgen. Of hoe je het om zeep kan helpen :)

Als daar een éénzijdig antwoord op was dan was ik nu aan het rentenieren denk ik. Net of je zou vragen “hoe maak je de beste pizza?”  Iemand die 2 weken op water en brood heeft geleefd zal anders reageren op de best gemaakte pizza dan iemand die elke week in de Pizzeria zit. Of een rasechte Italiaan zal er anders over denken dan een Eskimo.

In dit artikel hier gaf ik al 5 tips om je landingspagina te optimaliseren, vandaag wil ik het eerder over de visuele aspecten op je landingspagina hebben. Die hebben minstens, zoniet meer impact in eerste instantie dan de zaken vernoemd in het gelinkte artikel.

Nog even meegeven dat ik weet dat elke pagina op je site in principe een landingspagina is maar heb het hier heel specifiek over pagina’s die je opmaakt om verkeer vanaf bepaalde bronnen (adwords, banners, verwijzende sites,etc) te laten converteren….

Let’s bring it on…

1.  Afmeting & Positionering.

Op het www is het meestal zo (of zou toch moeten zijn)  dat elementen  die groter zijn in vergelijking met andere elementen op een pagina duiden op een hoge belangrijkheidsfactor. Dus hoe groter een element, hoe belangrijker dat is (of toch zou moeten zijn).

Gelijk een voorbeeld erbij halen van hoe het niet moet :

Hier vinden we 3 call to action knoppen  (al behoorlijk fout) die en dezelfde kleur en nog eens dezelfde vorm/afmetingen hebben. Waar wil je nu eigenlijk dat ik op klik ? Welke is nu het belangrijkst ?

Of dit hier :

  1. Je gooit een gigantische banner in mijn gezicht
  2. waardoor je call to actions volledig verdwijnen. Ook de positionering ligt compleet buiten mijn gezichtsveld.

Hier nog een voorbeeld waar er een hoop elementen zijn op de pagina die naar voor springen maar niet de call to action zijn :

De “nu bestellen” knop is zowat het kleinste element op dit deel van de pagina. Ik begrijp dat je je sterke verkoopsargumenten  naar voor wilt schuiven maar dan moet er hier toch meer met vormgeving en contrast worden gespeeld. Ook het uiterst rechts plaatsen van de “nu bestellen” knop  is waarschijnlijk niet de beste oplossing. Ik zeg waarschijnlijk omdat ik natuurlijk niet over hun cijfermateriaal beschik..

Wat is er dan wel een goed voorbeeld ? Deze hier :

Vergelijk de afmeting van hun knop eens met bijvoorbeeld hun logo of andere links/knoppen op de pagina. De download knop is gemiddeld 2-3 keer groter en de positie..tja je kan hem echt niet missen, hij wordt recht in je gezichtsveld  gegooid…

Als we het over grootte hebben, dan spreken we natuurlijk ook over tekst elementen en niet enkel grafische. Ook in het bovenstaande voorbeeld zitten ze er pal op met hun “Firefox 4 is er ! “.

Hier nog een paar andere voorbeelden van goed tekstgebruik :

En ook aan de linker zijde van de pagina

De tekst over het ganse scherm 'uitsmeren' is ook een optie

Gisteren nog een discussie gehad met iemand die me vertelde “maar een foto zegt toch meer dan 1000 woorden ?”. Ja en neen.. Een foto/afbeelding kan inderdaad een belangrijke rol spelen op een pagina en versterkend/ondersteunend werken  maar er zijn genoeg studies te vinden  die aantonen dat tekst nog altijd de belangrijkste rol vervult op een pagina.  Aan de andere kant zijn er misschien ook studies te vinden die het tegenovergestelde aantonen, laat het even weten als je er eentje weet staan…

Dit is er bijvoorbeeld eentje van die het belang van tekst aantoont :

We kunnen het ook met een eenvoudig voorbeeldje schetsen. Dit hier :

Enkel de afbeeldingen

Of dit :

Met tekst...

Of een voorbeeld die ik uit een modelbouw webshop plukte :

navigatie zonder & met tekst

Ga er dus niet (altijd) vanuit dat je beter een foto/afbeelding op je pagina gooit en geen tekst die verduidelijking brengt..

2. Kleur & Whitespace & Contrast

Misschien nog belangrijker dan afmetingen en positioneringen. Neem een witte pagina met licht grijze (of zelfs zwarte) tekst en verder geen gekleurde elementen,  gooi er een knalrode call to action knop en je kan er niet naast kijken, hoe klein of verkeerd geplaatst die ook mag staan.

Even afwijken van onze landingspagina post maar kleur en contrast is trouwens ook iets wat je doorheen je complete site moet proberen te verwerken. Meestal probeer ik op elke pagina 2 duidelijke zaken naar voor te schuiven (in een shop) :

  • waar ben ik ? doe je meestal door een duidelijke broodkruimel te plaatsen en of de geselecteerde (sub)categorie in een andere (opvallende) kleur te plaatsen
  • hoe ga ik verder/terug ? in het geval van een (sub)categorie, duidelijk aangeven waar er geklikt kan worden om naar het product te gaan. In het geval van een product of uitcheck pagina, de ‘klik en bestel’ en de ‘volgende stap/etc’  een andere kleur geven zodat enkel dit element op je pagina die heeft. Wat de terugweg betreft, eenmaal ze in je uitcheck proces zitten is dat niet echt iets wat je naar voor wilt schuiven. Het moet aanwezig zijn maar eerder ‘onopvallend’. En daarbij, geen studie referentie hier maar volgens mij is de back button nog steeds de meest gebruikte knop om terug te gaan…

Even illustreren. Ik zoek ‘vakantie Spanje’ en kom op deze landingspagina terecht :

Van een kleurboek gesproken waar de contrasten toch lichtjes ‘uit de haak’ staan. En dan heb ik het bovenste gedeelte van de pagina nog weggelaten waar ze je proberen te verleiden met een brede header (met oranje en groen gekleurde navigatiebalk) gevolgd door een landkaart van EU, paar dropdowns, een zoekknop en een G map  (je kan het kunstwerk hier bekijken).

Maar kijk enkel naar deze screenshot en vraag je even af :

  • hoe ga ik verder ?
  • en eventueel : wat kost het ? Als je bijvoorbeeld met een budget in je hoofd zit wat meestal het geval is…

Niet echt iets wat je in 1-2-3 uit die pagina kan plukken. Teveel kleuren die overheersen, de header en vooral de groene navigatiebalk die  je ogen volledig dol laten draaien en de oranje knoppen boven de locaties die me totaal niet verder kunnen helpen met mijn zoekopdracht. Diegene die hier voor het interactie ontwerp heeft gezorgd heeft dat waarschijnlijk vanop een strand in Spanje gemaakt 😉

Neem nu de pagina van Neckerman bijvoorbeeld :

Het eerste wat je daar recht in het gezicht springt is de rode call to action en de prijs, die mede visueel versterkt worden door de blauwe achtergrond. Neem die blauwe achtergrond weg en je krijgt een compleet ander contrast/ visueel effect.

Kleuren en vooral het maken van contrasten kunnen dus voor een serieus verschil zorgen…

Naast kleur & contrast is er ook nog zoiets als ‘whitespace’.  Als we het over de whitespace hebben mbt. de call to action hebben, dan willen we dat die min of meer ‘afgezonderd’ staat en dat er niks in de buurt staat die ons kan weghalen van onze focus.

Ik zoek op ‘autoverzekering afsluiten’ en klik op 2 advertenties. De eerste advertentie stuurt me naar hier :

Ik weet niet wat jullie erover denken maar als we eerst eens zien naar regel 1 die we hebben besproken, dan is het grootste element hier de ‘tombola’ knop (fail 1) . Ik zoek op autoverzekering afsluiten, dus mijn primaire interesse ligt in ieder geval daar niet en het sluit zeker niet aan met wat er zich momenteel in mijn hoofd afspeelt.

De primaire call to action die hier naar voor moet worden geschoven is die om mijn autoverzekering te kunnen berekenen zodat ik weet wat het me zou kosten als ik er eentje zou willen afsluiten. Dus in de buurt van die ‘bereken online’ knop wil je dus als bedrijf ,die Google vet betaald voor het verkeer, niet dat ze iets anders gaan doen.

Die knop afzonderen is dus een absolute must ! Als je snel even naar boven scrolt tot aan de eerste foto, dan kan je daar ook een perfect vb zien van hoe het niet moet.

Wat er verder nog totaal verkeerd zit (fail 2) : hoeveel call to actions tel jij op deze pagina ? Ik heb er eventjes cijfertjes naast geplaatst mocht je zelf niet willen tellen 🙂 En dan heb ik alle navigatie en tekstlinks nog niet eens geteld die me kunnen wegnemen van mijn focus (fail 3-4-…) .

Het blijft onvoorstelbaar dat er op jaarbasis 10.000-en euro’s (we zijn dan nog voorzichtig)  de deur uitvliegen (bij een bedrijf als dit hier bijvoorbeeld) aan advertentiekosten die niks opbrengen omdat er te nonchalant wordt gewerkt. Hoe moeilijk en hoeveel werk is het om deftige landingspagina’s te maken waar er focus is.

Bij ING hebben ze het wel begrepen (Nederlanders zijn toch altijd sneller van begrip dan wij Belgen 🙂 )

Naast de duidelijke afzondering van de call to action hebben ze al de rest zowat ook picobello staan, zou bijna durven zeggen ..de perfecte landingspagina ?

Of om het aspect contrast nog eens aan te halen, een andere landingspagina van hen waarbij mijn zoekopdracht ‘spaarrekening openen’ was :

Ja, de call to action is ‘start uw aanvraag’ maar in tegenstelling met de vorige landingspagina moeten er hier bijkomende taken worden vervuld voor er op de call to action mag worden geklikt..er moeten 3 veldjes worden ingevuld. Probeer je de landingspagina even voor te stellen zonder het oranje, welk effect zou dat hebben denk je ?

Het enige wat hier telt is alles wat in het oranje vak staat, de rest is bladvulling die waarschijnlijk door niemand wordt gelezen…

Er is trouwens nog een andere zaak die ze voortreffelijk uitspelen. Kijk eerst even naar deze landingspagina van BNP Paribas :

Op zich niet zo verkeerd, de call to action staat afgezonderd en heeft ook het nodige contrast ivm de rest van de pagina. Het grote verschil, wat ongetwijfeld een gigantische win is voor ING bestaat erin dat ze eerst je naam en email adres vragen voor je verder kan en op die manier toch de nodige gegevens van je hebben om je te benaderen als je na het drukken op de call to action afhaakt.

Bij BNP Paribas krijg je dit na de call to action :

Los van alles wat hier nog verkeerd gaat , een postje waard op zich 😉 … hoeveel leads denk jij dat ING meer genereert dan BNP ?

Omdat iedereen altijd vraagt voor voorbeeldjes, hier nog eentje waar ze contrast hoog in het vaandel dragen :

Ze willen dus duidelijk dat je hun degree finder gebruikt…

3. Afbeeldingen

Tekst is belangrijk maar afbeeldingen  en  of fotomateriaal kunnen natuurlijk ook een grote rol gaan spelen. Met 1 of 2 lijntjes tekst wordt het soms moeilijk om emoties los te krijgen (als dat van toepassing is bij jou)  bij je bezoekers, en daar komen we natuurlijk wel bij het ‘een foto zegt meerdan 1000 woorden’ gegeven.

Als ik dorst heb en op deze pagina terecht kom, dan worden mijn smaakpapillen in ieder geval extra geprikkeld :

Naast het oproepen van emoties / gedachten / etc mogen we ook niet vergeten dat wanneer dat foto’s het scan patroon kan beïnvloeden. Als we een foto zien van een gezicht die bijvoorbeeld naar onder/boven/links/rechts kijkt, dan gaan we automatisch de kijkrichting van die persoon gaan volgen.

Een foto gebruiken van iemand die recht vooruit staart is niet echt het meest briljante idee omdat je het scan patroon van je bezoeker dan meestal legt. Check deze eye tracking studie eens :

Op de eerste landingspagina gaat de meeste aandacht naar het gezicht van de kleine man terwijl de headline in het 2e voorbeeld het meeste aandacht krijgt omdat de kleine man naar de headline kijkt. Mensen volgen de kijkrichting mee van de baby.

Nog eentje :

In de eerste foto kijkt het model je recht in de ogen, op de 2e foto kijkt ze naar het product. Resultaten :

Dus ga niet gaan verkondigen dat ‘die’ van E-tail heeft gezegd dat foto’s niet belangrijk (kunnen) zijn 🙂

Het kan anders ook met een eenvoudige afbeelding zoals bij ING :

Conclusie

Als het om landingspagina’s gaat dan kan je niks van wat ik hier zeg en aanhaal  als de “one and only truth” aannemen. Het zijn slechts ‘tips’ die mogelijk voor een verbetering (of verslechtering) kunnen zorgen dus het zal toch een kwestie van testen worden.

4 reacties op : Hoe de ‘look’ van je landingspagina voor meer conversies kan zorgen
Skipp de reacties en laat me mijn zegje doen...
[1]jeroen10:19 am on May 16, 2011
Hij is weer top!
Jeroen Ligthart1:00 pm on May 16, 2011
Erg mooie (en vermakelijke) uiteenzetting van de zaken die er echt toe doen. Dank!
[2]Veerle Van Audenaerde8:09 am on May 17, 2011
zeer interessant, onze aan revisie toe na 5 jaar
[3]David11:26 am on May 19, 2011
Goed artikel. Maar ik kan me de laatste afbeeldingen herinneren van een Engelse studie naar banners. Ik heb hem zo snel niet bij de hand. Misschien wel zo netjes om die te vermelden?
[4]Landingspagina’s verbeteren: 7 waardevolle tips! - Michel Tel | Michel Tel11:08 am on May 24, 2011
[...] de belangrijke taak om het vertrouwen van bezoekers te winnen. Dave Lorrez gaf in zijn artikel ‘Hoe de ‘look’ van je landingspagina voor meer conversies kan zorgen?’ al enkele voorbeelden van visuele aspecten die een landingspagina verbeteren. Maar er is [...]
[5]Harry11:23 am on May 28, 2011
Hallo Dave, Lees jouw artikelen altijd met veel belangstellingm zo ook deze. Heb wel een tip voor je; als je in jouw artikelen links aanbrengt/ verwijzingen doet naar andere sites, maak dan gebruik van de 'target_blank'. Hiermee wordt een scherm geopend en verlaat de bezoeker niet direct jouw site. Groet
admin12:58 pm on May 28, 2011
Thxs Harry maar vanuit een usability standpunt is de target_blanc geen goed idee omdat de back button (meestal) de meest gebruikt knop is bij het navigeren (om terug te gaan van waar men komt) en als je een target_blanc gebruikt werkt de back niet en kan je mensen in verwarring brengen ;)
Laat je volledig gaan...
Naam
Email
Website