E-book: hoe draagt design bij aan online conversie?

Hoe draagt design bij aan

online conversie?

&

2HOE DRAAGT DESIGN BIJ AAN ONLINE CONVERSIE ?

Inleiding................................................................................................................................3

Design voor conversie .......................................................................................................4

Responsive voor conversie .............................................................................................21

De praktijk: custom of template ....................................................................................31

eFusion Group B.V.Randstad 21 - 261314 BM Almere036 - 30 30 [email protected]

*Copyright eFusion Group BV, Almere*Copyright SEOshop Group BV, Amsterdam

INHOUDSOPGAVE

http://efusion.eu/


In de digitale wereld van vandaag is de gemiddelde webbezoeker lui en verwend geworden. Zij willen vaak direct aangesproken worden zonder al te veel te hoeven lezen. Daarbij helpt een mooi creatief design vaak, maar ook niet altijd. De functionaliteit speelt namelijk ook een grote rol in het kader van de customer journey en experience. En alsof dat niet genoeg is, komen ze vanaf allerlei apparaten op je website terecht.

Hoe ga je daarmee om en waar zou je rekening mee kunnen houden? Hoe draagt design bij aan conversie?

INLEIDING1


Wat wil je bereiken met je website? Wat maakt een website aansprekend? Welke aspecten van design dragen bij aan een hogere conversie? Dat zijn zo ongeveer de basisvragen die je zal hebben als je aan een website begint.

Het designproces van een website is onder te verdelen in een aantal essentiële aspecten. Feitelijk houd je rekening met het gebruikersgedrag, de indeling van een pagina, kleurgebruik, huisstijl versus de gewenste design richtlijnen, het fotogebruik en de triggers.

Zo is kleur bijvoorbeeld zeer bepalend voor de visuele uitstraling en herkenbaarheid van een website. Bijna net zo belangrijk als hoe kleur een grote rol speelt bij de visuele en psychologische aspecten van de huisstijl van een bedrijf. Het is echter belangrijk om te weten dat het één op één toepassen van corporate kleuren in een online omgeving niet altijd goed werkt, vooral in e-commerce.

Wanneer het kleurenschema juist wordt toegepast, zorgt dat voor een visueel aangenaam en overzichtelijke uitstraling: mooi, professioneel ogend en plezierig.

“Kleur verkoopt”, zegt men wel eens en kan als hét uitgangspunt worden gezien wanneer je begint met het designproces van je bedrijf. Het effect van kleur op de bezoeker is namelijk instant.

Op de volgende pagina is een afbeelding te vinden van een kleurenschema van de basisbegrippen van de Westerse wereld. Dus afhankelijk van wat je wilt bereiken met je webpagina, kun je jezelf het volgende afvragen (met de basisbegrippen in het achterhoofd):• Wie is mijn bezoeker?• Hoe kan ik hem of haar bereiken?• Wat is de functie van mijn kleurgebruik?• Wil ik overtuigen, informeren of overzicht geven?• Wil ik tot emotie aanzetten?• Wil ik triggeren? • Wil ik inspireren? • Wil ik verkopen?• Hoeveel kleuren kan ik gebruiken?

In de loop van dit hoofdstuk zullen we deze vragen behandelen.

DESIGN VOOR CONVERSIE2


DESIGN VOOR CONVERSIE

Ondanks dat kleur principieel leidend hoort te zijn en dus bijdraagt aan de conversie, wordt het vaak onderschat.

De bezoeker en de pagina-indelingHeb je al onderzoek gedaan naar je doelgroep? Wat is de demografische samenstelling van je beoogde doelgroep? Zijn het mensen die vanuit hun emotie besluiten nemen of vanuit het verstand? Wat wil je dat de bezoeker voor actie onderneemt wanneer hij of zij eenmaal op de site is gelandt?

Als je weet hoe de gemiddelde bezoeker zich gedraagt op je website, kan dat behoorlijk helpen in het designproces van de site. Een bezoeker leest in eerste instantie niet, maar scant de site; onbewust hebben zij een taak uit te voeren. De pagina-indeling speelt hierbij een belangrijke rol.

Kleurenschema basisbegrippen in de westerse wereld


Uit eyetracking-onderzoek op websites is gebleken dat bezoekers, bijna altijd, vooral de linkerkant van een webpagina bekijken; met maar liefst 69% van de tijd. Volgens webonderzoeker Jacob Nielsen is de overige 31% verdeeld over 30% aandacht voor de rechterhelft van het scherm, de overige één procent besteedt de bezoeker aan de rechterkant van de pagina.

Een afbeelding van een eyetracking-onderzoek toegespitst op de homepage van eFusion

In de Westerse wereld oriënteren wij ons van links naar rechts vanwege onze schrijf en lees eigenschappen. Over de jaren heen zullen kijkpatronen wellicht kunnen veranderen. Dat kan of afhankelijk zijn van de opvallende elementen op je website, of door toedoen van een utopische maatschappij waarin we multicultureel zo geïntegreerd zijn, dat zelfs onze leesrichting veranderd. Tot dan kun je gerust zijn, want volgens het onderzoek van Nielsen zal de gemiddelde bezoeker altijd een aantal fasen doorlopen wanneer hij of zij zich op je website bevindt.



• Waarneming opmaak: wat voor afbeeldingen, designvisuals en banners zie ik?• Waarneming actiepunten: waar zijn de icoontjes en buttons om acties mee uit

te voeren? • Waarneming informatie/content: waar is de belangrijkste informatie en hoe

neem ik dat tot me?

Zie hier van links naar rechts in welke volgorde je scant voor het basisgrid

Hiërarchie van prioriteiten wanneer je voor het eerst op een website bent beland

De bezoeker neemt eerst de volgende elementen intuïtief waar: • Waarneming basisgrid: waar ben ik en hoe ziet de navigatie eruit?

Wanneer de gebruiker als doel heeft om een bepaalde actie uit te voeren, zoals het kopen van een product, wordt er direct gezocht naar buttons en de daaraan gerelateerde links. Meestal wordt pas in de vervolgfase de bijbehorende tekst gelezen.

A/B test: aanmeldformulier links of rechts? Veel webpagina’s plaatsen automatisch de webtekst aan de linkerkant van de pagina en een afbeelding of formulier aan de rechterkant. Maar of deze (standaard) indeling ook ‘prettig’ is voor je sales, is een ander verhaal.


1. Titels,

2. Subtitels, vetgedrukte

tekstfragmenten en

opsommingstekens,

3. En dan pas gedetailleerde

informatie lokaliseren.


De 3 varianten. Kijk zelf even wat jij hieraan prettiger vindt en wat jou tot actie zou doen overgaan

Blogger Matt Sulivan deed op de website van DirectCapital een A/B test. Hij wilde weten wat de impact zou zijn op het aantal inschrijvingen als je het inschrijfformulier links of rechts van de pagina plaatste. Hij testte 3 varianten waarvan 1 variant uiteraard de huidige pagina was. Het bleek dat de variant met het inschrijfformulier links geplaatst de meeste conversie opleverde; conversie van maar liefst 217%!

Wil je dat de bezoeker van een pagina tot actie overgaat dan moet het ‘actie element’ in plaats van de belangrijkste informatie links van de pagina staan. In elk ander geval zou je kunnen zeggen dat het ‘OK’ is om de webtekst links te plaatsen aangezien we links georiënteerd zijn.

Doe wel altijd eerst een A/B test om vast te stellen wat je moet weten in plaats van lukraak je hele site meteen om te bouwen.

Het AIDA-model toegepast op je siteBinnen 1/20ste van een seconde hebben bezoekers al bepaald of je website voor hen interessant is of niet. Dit blijkt uit onderzoek van Carleton University Ontario in 2006. Kleur, vorm en fotografie zijn daarbij bepalend. Dus de positionering van deze elementen zijn zeer belangrijk. Met de toepassing van het AIDA-model kun je direct de aandacht van de bezoeker vasthouden na zijn of haar eerste reactie. Grijp hun interesse! Daarmee verhoog je dus niet alleen je conversie, maar houd je de ‘bounce rate’ van je website ook laag.

Zoals eerder al verteld scant de gemiddelde bezoeker de ‘basisgrid’ van de website. Je kunt deze basisgrid ook in een F-vorm bekijken. Visualiseer een grote F-vorm over je website. Het AIDA-model dien je dan ook in deze vorm te verwerken.



Het AIDA-model staat voor: Attention, Interest, Desire en Action. • Attention (aandacht) heb je al binnen 1/20ste van een seconde wanneer een

bezoeker op je site terecht komt. • Interest (interesse) bij de bezoeker creëer je door in de F-vorm kort en bondig

informatie te presenteren.• Desire (verlangen) maak je los bij je websitebezoeker wanneer je een

interessant aanbod of uitdagende vraag weet te presenteren. • Action (actie) door de bezoeker komt vaak pas tot stand met een overtuigende

call-to-action gepresenteerd in een mooie call-to-action button (later hierover meer).

Zie hieronder 4 voorbeelden waarin het AIDA-model is verwerkt in de F-vorm; kruisvergelijk de nummers in de afbeeldingen met het hierboven beschreven AIDA-model.

Printscreens met het AIDA-model verwerkt in de F-vorm



Psychologie van kleurgebruikIeder mens heeft een lievelingskleur. Wat is jouw lievelingskleur of welk kleuren vind je lelijk? Wat doen die kleuren met je?

Kleur is krachtig, maar zeer subjectief. In elk werelddeel of cultuur verschilt de betekenis van kleur. Waar zwart in het westen de kleur is van de dood, is dat in het Midden-Oosten de kleur van de wedergeboorte. De kleur rood heeft in het Westen zelfs verschillende betekenissen. Dus los van cultuur speelt de context een grote rol.

De onderstaande afbeelding betreft het colour wheel van McCandles, waarmee heel overzichtelijk wordt aangegeven wat verschillende kleuren betekenen in de verschillende culturen over de wereld.

Het colour wheel van McCandles



Er zijn een zestal zaken waar rekening mee dient te worden gehouden als je de colour wheel bekijkt: • Kleur kan een specifieke betekenis oproepen.• Kleur en de betekenis ervan kan bepaald zijn door biologie of ervaring.• Kleur kan gedragsverandering oproepen.• Kleur heeft een instant effect op de kijker.• Kleur is op basis van context/omgeving variabel in de betekenis en effect

daarvan. • Kleur wordt direct geëvalueerd door de kijker.

Betekenis en gebruik actiekleurWat voor actie wil je dat de bezoeker onderneemt en hoe kun je dat met kleur triggeren?

In de eeuwige zoektocht naar conversie(verbetering) wil je bijvoorbeeld als webshopeigenaar, dat je bezoeker tot een actie overgaat. Daarbij doe je er goed aan rekening te houden met de kleuren die tot actie oproepen. Deze actiekleur kan gekoppeld worden aan de menu’s, tabs, links en primaire buttons. Uit de praktijk is gebleken, dat het goed is om 2 varianten te hanteren:1. Primaire acties - de meest prominente en in het oog springende kleur gebruik

je uitsluitend voor de unieke en meest belangrijke acties, zoals de bestel of betaal button.

2. Secundaire acties - een duidelijke, maar minder prominente kleur gebruik je speciaal voor alle andere actie gerelateerde elementen, zoals minder belangrijke buttons: wenslijst, print of share button etc.

Wat dan nog overblijft zijn de content- en designelementen. Precies zoals omschreven onder het kopje ‘De bezoeker en de pagina-indeling’: voor de content en overige informatie dient er altijd een goed leesbaar lettertype gebruikt te worden met voldoende leescontrast.



Alvast wat praktijkvoorbeelden: kleurgebruik pagina en call-to-action buttonHoe gaat het er aan toe in de praktijk?

Help je gebruikers direct duidelijk maken wat ze op een pagina kunnen doen (en aanklikken). Om een concreet beeld te schetsen van het hier bovengenoemde, volgen er nu een aantal voorbeelden waarin het kleurschema duidelijk en consistent is gebruikt.

Het gaat om 2 websites en een (call-to-action) button waarin het kleurschema correct is toegepast!

Budgetfloorstore

Bovenstaande printscreen is 1 van de 2 voorbeelden, waarin er goed rekening is gehouden met het

kleurgebruik op de homepage. Het tweede voorbeeld staat op de volgende pagina


http://www.budgetfloorstore.nl/


Zie hierboven voorbeeld 2: de site van Philips OEM met een minimale stijl en sterk gebruik van de primaire

en secundaire kleuren

1. Actiekleur (a).2. Wat overblijft; statische informatie (b).3. Primaire kleur; belangrijke in het oog springende actie (c).

Buttongebruik: call-to-actionWelke button op je website is volgens jou het belangrijkste?

Van alle buttons op je website zijn de call-to-action buttons vaak de belangrijkste. Een goede call-to-action button valt op en trekt de aandacht van bezoekers. Kleur, vormgeving en een aantal andere zaken spelen hierin een belangrijke rol:

1. Kleur De belangrijkste regel is dat een actieknop moet contrasteren; een heldere kleur die afwijkt van de rest van de pagina valt het meeste op. In Nederland is de kleur #Oranje met 31% veruit de favoriet op ruime afstand gevolgd door rood. Groen staat bijvoorbeeld op 15%.


Philips

http://oemwebshop.philips.com/


Oranje is bijvoorbeeld een goede conversiekleur. Geel trekt heel goed de aandacht van je bezoekers. Rood is controversieel. Het kan negatieve associaties oproepen: stop, nee, verbod, agressie en gevaar. Graag onderstrepen we nog even dat kleurgebruik natuurlijk ook afhankelijk is van context, omgeving en demografie. Maar liefst 20% van de Nederlandse websites gebruikt een rode call-to-action button. Rood kan blijkbaar in de praktijk prima werken. Vaak past het namelijk ‘toevallig’ wel bij de huisstijl. In onderstaande afbeelding zie je een printscreen van een A/B test, waarin de rode actieknop als winnaar uit de bus komt.

Verklaring: de kop van de tekst begint met het woordje “Stop (...)”. In die zin wordt er onbewust op psychologisch niveau een positieve associatie gemaakt met de rode kleur. Hier zie je dus hoe de tekst en kleur, die normaliter averechts zouden werken, nu juist wel aanvullend op elkaar inspelen.

2. Breedte Een call-to-action heeft in de regel de vorm van een button. Dat ‘triggert’ de bezoeker sneller dan een tekstlink of banner.



Hierin hebben afgeronde hoeken de voorkeur, omdat ze naar binnen wijzen. De breedte van een dergelijke knop, speelt ook een grote rol, wil je dat de knop meer opvalt. Vorm en grootte trekken de aandacht van een bezoeker naar de call-to-action toe. Ook oogt het wat prettiger. In Nederland gebruikt maar liefst 58% liever afgeronde hoeken voor hun actieknoppen.

3. Opmaak De meeste websites in Nederland (58%) gebruiken een call-to-action button die aansluit bij de huisstijl. ABN AMRO, Albert Heijn, C1000, Essent etc. kiezen allen voor een actieknop in de huiskleuren. Het is duidelijk dat de huisstijl over het algemeen boven alles regeert. Toch is het niet gek om eens een afwijkende kleur te kiezen. Kleur valt namelijk op. Zie de website van www.Bongo.nl Naast de huisstijl en de afwijkende kleurenoptie, hebben Nederlandse designers vaak een uitgesproken voorkeur voor een kleurverloop (69%) in plaats van een omlijning of schaduweffect.

4. Call-to-action: tekst en visueel De tekst van een call-to-action moet duidelijk zijn. Duidelijkheid gaat voor alles, maar probeer rekening te houden met bijvoorbeeld je tone of voice. De werkwoordsvorm bepaalt namelijk je tone of voice. Je zegt liever “Bestel(len)” in plaats van “Bestel nu”. De voorkeur gaat uit naar een actieve formulering dan een lijdende passieve formulering of een dwingende tone of voice. Een gepaste afbeelding bij de call-to-action button kan de roep tot actie ondersteunen. Uiteraard moet dit symbool ook duidelijk en herkenbaar zijn. Kijk maar naar H&M. Zij gebruiken een shopping bag in plaats van een winkelwagentje.

In Nederland wordt de visuele call-to-action in 64% van de gevallen toegepast.


http://bongo.nl


Extra klikargumenten zijn nooit ongewenst. Kijk maar op de volgende pagina naar een afbeelding van een call-to-action button op de vacaturepagina van www.eFusion.eu. Bij het knopje is er subtiel een pijltje geplaatst om de tekst te ondersteunen. Bijvoorbeeld webwarenhuis www.Fonq.nl haalt de onzekerheid weg door onderaan in hun call-to-action button de ondersteunende tekst te plaatsen “gratis thuisbezorgd”. Dat is wederom een goed voorbeeld van een klikargument!

5. Best practice: grootste gemene deler Uit onderzoek is gebleken dat een oranje actieknop met afgeronde hoeken als beste naar voren komt. Als grootste gemene deler zegt dit natuurlijk niets over de effectiviteit van het knopje. Het resultaat (conversie) bepaalt uiteindelijk hoe succesvol de designkeuzes zullen zijn. Volgens Guido Jansen spelen vele variabelen een rol bij het succes van een actieknop.


http://efusion.eu


Belangrijk is, dat men beseft dat er een gegeven context is, waarbinnen een call-to-action button zich manifesteert. Dit is van doorslaggevend belang daar de setting van een webpagina of -site bepalend is, hoe het knopje wel of niet tot zijn recht komt.

FotogebruikMaak je al gebruik van foto’s op je website? Op wat voor manier doe je dat?

Er zijn namelijk een aantal spelregels hoe je met foto’s op je website kunt omgaan om bijvoorbeeld een snellere laadtijd te hebben, om beter gevonden te worden, om een sfeer te creëren of zelfs om de conversie op de betreffende webpagina te verhogen. Over dat laatste hier een aantal tips, want het houdt allemaal verband met elkaar: • Zorg dat de personages op de foto’s kijken naar de meest belangrijke

elementen op de webpagina’s.• Zorg dat de objecten ook richting de belangrijkste elementen gericht zijn op de

pagina; draai bijvoorbeeld de foto van een beeldscherm altijd in de richting van de belangrijkste informatie.

• Zorg voor een kwalitatief goede en heldere foto.• Zorg dat de foto de sfeer van de pagina aanvult.• Zorg dat uw website snel blijft door correct fotogebruik.• Zorg dat hoge resoluties niet direct gedownload worden en geef de optie om

een afbeelding te vergroten.• Zorg dat je rekening houdt met de eigenschappen van afbeeldingen op een

website; gebruik bijvoorbeeld altijd RGB kleuren en houdt het liefst een resolutie aan van 800x600 pixels op 72 dpi.

Een voorbeeld van hoe Agis goed gebruik maakt van een afbeelding op haar site; moeder en dochter kijken

naar de verzekeringspremie en brengen deze onder de aandacht



TriggersTot nu toe hebben we gelezen dat kleur, indeling en vormgeving van een pagina of element voor een trigger kunnen zorgen. Een trigger kan zijn dat men het een prettige site vindt en duidelijk kan vinden waar hij of zij naar op zoek is. Deze zijn natuurlijk niet de enige triggers. Waarmee en hoe kun je de bezoeker nog meer prikkelen om tot actie over te gaan?

Kunnen en willenVolgens BJ Fogg, een onderzoeker op het gebied van gedragsbeïnvloeding aan de Stanford University in de VS, wil je als webshopeigenaar dat je bezoekers doelgedrag vertonen. Het gedrag dat jij graag wil dat deze mensen vertonen op je website. Zie onderstaande grafiek die mooi illustreert hoe ‘kunnen’ en ‘willen’ (ability & motivation) met elkaar in verband staan om een bepaald doelgedrag te bereiken.

TriggersLow

Motivation

Hard to Do Easy to Do

HighMotivation

Mot

ivat

ion

Ability

fail here

Triggerssucceed here

De grafiek die Fogg heeft ontwikkeld aan de Standford University



Voorbeeld: stel dat je bezig bent een database op te bouwen voor leadgeneratie door middel van een leuke call-to-action. De bezoeker moet dan zijn of haar emailadres en eventueel andere (contact)gegevens invullen. Dat invullen is het doelgedrag.

Op zich geen moeilijke opgave. Maar hoe zit het met motivatie? Het ‘willen’. Voor velen zal die erg laag zijn, maar er zullen ook mensen zijn, die graag de nieuwsbrief of white paper willen ontvangen. Van die laatste groep is de motivatie, het ‘willen’, dus erg hoog. Zij hebben slechts een kleine trigger nodig om tot actie over te gaan.

Stel je voor dat je een wiskundesom moet oplossen, voordat je jouw contactgegevens mag invullen. Niet iedereen die de nieuwsbrief of white paper wil ontvangen, zal de som kunnen oplossen. Een kleine motivatie zal vaak niet veel helpen tenzij je er bijvoorbeeld 10.000 euro tegenover zet. Dat verandert gelijk de zaak.

De meeste mensen zitten wat betreft ‘kunnen en willen’ vaak in het midden. Meestal is er slechts een klein zetje nodig om hen zover te krijgen om tot een bepaalde actie over te gaan.

Gedrag triggerenEen beloning op zichzelf is niet altijd genoeg. Het doelgedrag moet echt getriggerd worden óók al ìs de motivatie erg hoog. Veel dingen die je graag zou willen doen, doe je uiteindelijk toch niet. Simpelweg, omdat je er op dat moment niet aan denkt.

Er zijn veel soorten triggers: een herinneringsalarm, een smsje of een boodschap dat de kortingsactie bijna is verlopen. Een goede trigger ligt ten grondslag aan het volgende: • Als ze opmerkbaar zijn.• Als je ze koppelt aan het doelgedrag.• Als ze plaatsvinden op het juiste moment: dat je gemotiveerd en in de

gelegenheid bent om het gedrag uit te voeren.

Vooral het laatste puntje is belangrijk; timing is vaak essentieel, maar ook lastig. Psychologen spreken van ‘cues’. Korte boodschappen die je op de juiste plaats en tijd ontvangt. Helaas gaat het in veel gevallen mis met de timing.

Als je terugkijkt naar de grafiek dan zul je zien dat triggers alleen werken boven



de curve. De combinatie van ‘kunnen en willen’ moeten boven een bepaalde drempelwaarde uitkomen.

Motiveer, vergemakkelijk en triggerHet kernwoord in dit paragraafje is ‘hoe’. Hoe motiveer je de bezoeker? Hoe maak je dingen makkelijker? En hoe trigger je de potentiële klant?

De heer Fogg noemt 3 manieren om iemands motivatie te vergroten:1. Plezier en pijn; iets plezierig doe je sneller dan iets dat pijn veroorzaakt.2. Hoop en angst; hopen op een prijs werkt beter dan de angst dat je iets

kwijtraakt.3. Sociale acceptatie en afwijzing; shares en likes zijn voorbeelden van sociale

acceptatie en die aspiraties dragen bij aan het vergroten van iemands motivatie.

Ook zijn er een zestal punten hoe je zaken kunt vergemakkelijken:1. Tijd; iets moet niet te veel tijd in beslag nemen.2. Geld; het product moet niet te duur zijn. 3. Fysieke inspanning; niet al te veel fysieke inspanning helpt ook.4. Mentale inspanning; vaak wil de bezoeker niet te veel nadenken.5. Sociale norm doorbreken; dit is een moeilijk punt, maar belangrijk hierin is om af

te wegen of je tegen de gangbare norm wilt ingaan.6. Routine; routinegedrag is laagdrempeliger dan dat je weer een nieuwe routine

moet aanleren.

Fogg heeft ook een drietal punten waaronder je triggers kunt scharen: 1. Sparks; motiverende boodschappen op het moment dat je beoogde doelgroep

er iets mee kan doen. De doelgroep moet de trigger wel herkennen en kunnen koppelen aan het gewenste doelgedrag.

2. Facilitators; deze maken het gedrag eenvoudiger zoals de OV-ambassadeurs, die ouderen helpen om met de bus te reizen.

3. Reminders; soms zijn reminders cruciaal.



Naast de verschillende aspecten van design spelen er ook andere factoren een rol, die je conversie kunnen verhogen. Je zult vast al eens hebben nagedacht of jezelf hebben afgevraagd hoe er ook conversie valt te halen uit het mobiel verkeer op je website.

In dat geval zit je al op de goede weg. “Details is what matter”. En al helemaal na het lezen van hoofdstuk 1. Je zult nu vast een goed beeld hebben van hoe de kleine dingen in design erg belangrijk zijn.

De pointers uit dit hoofdstuk kun je én moet je eigenlijk meenemen in de ontwerpfase van je site.

De vraag is dus: wat ga je doen? Ga je een nieuwe website bouwen? Begin je pas aan je site of ga je die aanpassen? Je doet er goed aan om meteen de mobiele beleving van je doelgroep hierin mee te nemen. Want heb je al een website voor desktop, maar niet geoptimaliseerd voor mobiel? Als je daarmee rekening wilt houden dan heb je 3 keuzes: 1. Bouw een website met een responsive design.2. Bouw een volledige toegewijde mobiele website.3. Bouw een app voor op je mobiel.

Wij zullen het in dit hoofdstuk echter alleen hebben over de voordelen van een responsive design en werpen kort wat licht op hoe een responsive design impact heeft op je content.

Responsive designWat is responsive precies? Er zijn veel zienswijzen en definities over wat responsive precies inhoudt. Om het beter te begrijpen kijken we eerst naar de letterlijke betekenis van het Engelse woord ‘responsive’; in het Nederlands letterlijk vertaald: “toegankelijk” of “aanspreekbaar”. In de context van webdesign is het woordje “toegankelijk” veel beter op zijn plek.

Auteurs definitie: “een manier van ontwerpen, waarbij er rekening wordt gehouden met een optimale gebuikerservaring door meteen de verschillende schermformaten en resoluties van de mobiele apparaten tijdens het ontwerpproces mee te nemen en de indeling - en content - te ontwerpen aan de hand van de beschikbare ruimte op het betreffend mobiele apparaat.” - Tristan Wirabangsa

RESPONSIVE VOOR CONVERSIE3


Zie hier enkele voorbeelden van responsive sites gebouwd door eFusion.

Zie hierboven een responsive voorbeeld site van TopVorm.nl gebouwd door eFusion

Een ander voorbeeld van de website Marie-Stella-Maris.nl

RESPONSIVE VOOR CONVERSIE

http://eFusion.eu

http://www.marie-stella-maris.com/


Adaptive design Adaptive design gaat een stapje verder dan responsive design. Bij ‘adaptive’ design houd je als designer rekening met de manier waarop een apparaat wordt gebruikt door te kijken naar de contextuele factoren als tijd en locatie. In dit geval past niet alleen de content zich aan, maar ook de functionaliteit van een website. Vaak worden adaptive en responsive design met elkaar verward.

Praktijkvoorbeeld ‘adaptive’ designWebsites van events hebben bijvoorbeeld een tijdelijk karakter. In zo een geval neem je de factor ‘tijd’ mee in het designproces. Je kunt je als eigenaar van zo een site afvragen wat de behoefte is van je bezoekers en hoe deze verandert naarmate het betreffend event dichterbij komt.

Van tevoren willen bezoekers informatie over het event zelf, de line-up, een routebeschrijving of misschien willen ze zelfs al het kaartje meteen kopen. Tijdens het event bijvoorbeeld zou het veel toepasselijker zijn als de website meer als ‘online krant’ zou dienen. Dingen als route-informatie worden meteen minder belangrijk, maar waar je bijvoorbeeld gratis water kunt halen tegen de hittegolf, is dan wel weer meer gewild. Achteraf zijn bezoekers hoogstwaarschijnlijk op zoek naar foto’s, filmpjes of gevonden voorwerpen. De prioriteit van content verandert vaak op basis van van de gegeven situatie.

Voordelen responsive designOf je site of shop nou adaptive of alleen responsive is, maakt voor deze alinea niet uit. De essentie is een platform dat reageert op de verschillende schermformaten, resoluties en op apparaten van de bezoeker. Een dergelijke ‘smart’ site heeft dus een aantal voordelen: 1. Een beter oordeel door gebruikers, omdat de site zich aan hun specifieke

wensen aanpast.2. Een langere bezoektijd; dus lagere bounce rate, omdat de site de belangrijkste

en meest relevante content duidelijk en overzichtelijk indeelt en presenteert.3. Een stijging in het bezoek van de aantal pagina’s, omdat de site lekker

meeschaalt.4. Een stijging van het aantal unieke bezoekers op de homepage, omdat de

dempel lager is om met je mobiel of ander apparaat een responsive website te bezoeken.

5. Een stijging van het aandeel mobiel verkeer, wederom vanwege de verlaagde drempel.

6. Een hogere authorranking van Google, omdat bezoekers je content echt



consumeren en waarschijnlijk zelfs ook delen.7. Een regelmatig terugkerend bezoek van de doelgroep, omdat zij het bezoek als

prettig hebben ervaren.8. Een compleet beeld van al het verkeer, omdat je 1 website hebt voor alle

vormen in plaats van een dedicated mobile site of native app.9. Een toekomstvriendelijke site, omdat responsive al automatisch rekening

houdt met elk ander schermformaat of -resolutie van de toekomst. 10. Een surplus voor je social media ‘presence’, omdat de drempel verlaagd is om

een webpost te delen met je ‘peers’. 11. Een hogere vindbaarheid, want zo verwijzen alle links en ‘bookmarks’ naar 1

URL. 12. Een autoritaire uitstraling, omdat je als professionele website meegaat met de

mogelijkheden van de tijd. 13. Een stapje voor op je concurrenten en een verbetering van je imago, omdat je

progressief bent ingesteld, maar ook gebruiksvriendelijk bent.14. Een daling van de kosten, want je hebt geen onderhoudskosten voor meerdere

sites. 15. Een stijging van efficiency, omdat je maar 1 keer content hoeft te publiceren en

je niet verschillende websitevormen moet onderhouden.

De bovenstaande voordelen dragen allen bij in het grootste voordeel van alles: een hogere conversie!

Mobiele site (responsive) en de contentLaten we naar enkele voorbeelden van succesvolle responsive designs kijken. Deze responsive designs kunnen bijdragen aan meer mobiele conversie. De volgende websites zijn van desktop naar responsive overgegaan:

O’Neill Clothing



Het populaire surfmerk O’Neill heeft interessante resultaten weten te boeken na de implementatie van een responsive design. Gedurende 3 weken hebben zij de conversie, transacties en winst gevolgd, vóórdat ze overgingen op responsive. En toen, na de lancering van responsive elementen, hebben ze voor nog eens 3 weken alle (3 de) activiteiten nagemeten en de resultaten waren indrukwekkend.

iPhone/iPad: • Conversie verhoogde met 65,71%.• Transacties stegen met 112,50%. • Winsten stegen met 101,25%.

Andriod apparaten: • Conversie verhoogde met 407,32%.• Transacties stegen met 333,33%.• Winsten stegen met 591,42%.

Skinny TiesHet bedrijf Skinny Ties bestaat al bijna 40 jaar. Ongeacht de leeftijd van je onderneming, kun je blijkbaar net als Skinny Ties, kiezen voor een nieuwe identiteit om je bedrijf opnieuw te positioneren op de markt. Zij hebben een platform laten bouwen, dat toekomstvriendelijk moest zijn en kozen daarom voor een responsive design. In slechts enkele weken kon Skinny Ties al nameten wat voor impact hun besluit had: • Winsten van een iPhone stegen enorm met 377,6%.• Conversie ratio van iPhone steeg met 71,9%.• Winsten van alle apparaten gingen omhoog met 42,4%.• Bounce rate ging drastisch omlaag met 23,2%.

TerugblikZoals beweert, kun je in de 2 casestudies hierboven zien, dat een responsive design veel beter is dan een desktop als je meer conversie wilt halen uit je mobiel dataverkeer. Ondernemingen die mobiele bezoekers aantrekken op hun desktopsite, verliezen een aanzienlijk potentie op conversies en meer winst. De mobiele markt raakt steeds meer verzadigd en het publiek voert veel meer uit op hun mobiele apparaten. Het niet overgaan op responsive kan voor je het weet, juist veel meer kosten dan de eenmalige investering in een responsive website.

Content op responsiveAls je kiest voor de toekomst, een responsive website, dan is het belangrijk om te



weten dat je afhankelijk bent van de situatie. Met andere woorden: is je website van tijdelijke aard, heb je veel mobiel verkeer op je site of is je website je product?

Een goed opgebouwde responsive site vereist dat je rekening houdt met de pagina-indeling door je content te prioriteren. Zie hieronder 5 zaken waar je rekening mee dient te houden:

1. Richt je op het belangrijkste Verwijder alles wat onnodig is, zoals grote lappen teksten. Zorg ervoor dat je propositie het eerste is wat je bezoekers zien.

Links zie je een voorbeeld waarin de propositie niet duidelijk wordt gepresenteerd aan het publiek in vergelijking met de rechter



Vergeet daarbij niet de triggers of beloningen duidelijk neer te zetten, zodat je conversie gewaarborgd blijft. Een responsive site alleen is niet de oplossing. “Details is what matter”, remember?

2. Maak opvallende CTA’s Zorg ervoor dat je call-to-action knoppen zo groot zijn, dat ze de totale breedte van een mobiel scherm in beslag nemen. Zo hoeven je bezoekers niet in te zoomen op de CTA button. Houd hierbij ook rekening met het mobielgedrag van je bezoekers. Zo doe je geen goed voor je conversie als je een whitepaper van 15 pagina’s laat laden op je mobiele site. Geef je bezoeker de mogelijkheid om op een call-to-action button te klikken aangezien ze vaak onderweg zijn. Dan hebben ze thuis rustig de tijd en ruimte om je whitepaper te lezen. Je doet er slim aan om bijvoorbeeld mobiel specifieke call-to-actions te plaatsen onder contactinformatie, zoals “bel nu” of “routebeschrijving”. Dit kan resulteren in een meer getargete mobiele ‘browsing experience’.

Zie hoe AUDi hun CTA hebben geplaatst; de bezoeker weet meteen wat hij of zij kan doen op de site



3. Foto’s en video’s Maak goed gebruik van foto’s en video’s, want deze spreken eerder tot de beleving en verbeelding van een bezoeker. Grote lappen tekst lezen, is niet waar de gemiddelde websitebezoeker op zit te wachten.

Let op: uit onderzoek is gebleken dat 67% verwacht dat een mobiele site laadt binnen 4 seconden. Gebruik dus niet te veel of te grote foto’s of filmpjes en zeker ook geen flash

4. Kort je formulieren in Hiervoor kijken we even naar het autoverhuurbedrijf Hertz. Als je informatie wilt over een huurauto, hoef je alleen maar 4 informatievelden in te vullen: naam, adres en contactinformatie zijn totaal niet nodig. Dat kan in een later stadium. Faciliteer eerst de gewenste informatie aan je bezoeker. Zie op de volgende pagina een voorbeeld van de mobiele pagina van Hertz.



De mobiele pagina van Hertz

5. Gebruik tabs om structuur aan te brengen Structureer en organiseer je informatie op basis van categorieën, zodat mobiele gebruikers sneller kunnen vinden waar zij naar op zoek zijn. Kijk op de volgende pagina weer naar een voorbeeld van hoe het gebruik van tabs in de praktijk wordt toegepast.



Een voorbeeld van hoe een desktop site (links) boven de vouw de belangrijke informatie plaatst en de overige onderin ten opzichte van een mobiele site, die met een tabblad de informatie heeft gestructureerd



Zal ik een custom site laten bouwen of een template gebruiken voor mijn webshop- of site?

Dat is een vraag die velen stellen en die je jezelf waarschijnlijk ook eens hebt gesteld. Tegenwoordig is het ook mogelijk om als doe-het-zelver je eigen website te bouwen zonder enige verstand van kennis te hebben. Vaak is het een budgetgebonden probleem, waardoor men kiest om hun site of zelf te bouwen of om voor een template te kiezen.

Vergis je niet! Als je een template hebt uitgekozen, ben je er nog niet. De voorbeeld websites die men online laat zien, zijn natuurlijk gevuld met mooie demo content, die de standaard template goed tot zijn recht laat komen. Bij jouw website is er geen demo content, laat staan content die je template tot zijn of haar recht doet komen.

Er zijn een aantal afwegingen die je moet maken in dat opzicht: • Budget, is uiteraard het eerste waar je naar kijkt; een custom site is veel

duurder dan een template. • Tijd, is een tweede daar een custom site een langere productietijd behoeft. • Concept, omdat het concept bepalend is voor de oriëntatie en ontwikkeling van

je website.• Content, wat voor content heb je in gedachten? Lappen tekst, foto’s of filmpjes?

Ook deze zijn belangrijk om mee te nemen in je afweging tussen template of custom. Is je beoogde template wel mediavriendelijk? Kun je filmpjes uploaden of embedden of is het alleen een template geoptimaliseerd voor tekst?

Hieronder zullen we ter afsluiting van dit E-book kort en overzichtelijk de voor- en nadelen van een custom site geven ten opzichte van een site gebouwd op een template.

Voor- en nadelen van custom

Voordelen• Je hebt een op maat gemaakte look & feel voor je website.• Je hebt na oplevering de mogelijkheid om van je website’s CSS een standaard

template te maken.• Je hebt een site die naadloos aansluit bij je huisstijl.• Je hebt een site die je doelgroep aanspreekt.• Je kunt je site zo inrichten dat het ‘compatible’ is met allerlei content, omdat het

DE PRAKTIJK: CUSTOM OF TEMPLATE4


design zich aanpast aan de content en niet andersom.• Je kunt je business propositie veel duidelijker naar voren doen komen. • Je hebt (mits er garantie bij komt kijken) direct contact met de bouwer van je

website als er een foutje is gemaakt of iets snel gewijzigd moet worden.• Je kunt je eigen CMS ook op maat inrichten.• Je hebt invloed op de usability en de user interface, want je kunt je bezoekers

op deze manier leiden om zich of in te schrijven voor de nieuwsbrief, een whitepaper te downloaden of om een account aan te maken.

Nadelen• Je bent voor je het weet snel duizenden euro’s kwijt.• Je bent veel tijd kwijt aan het design- en bouwproces.

Een afbeelding van eFusion’s maatwerk voor GewoonKnus.nl

DE PRAKTIJK: CUSTOM OF TEMPLATE

GewoonKnus.nl%0D%20%0D

GewoonKnus.nl%0D%20%0D


Voor- en nadelen template

Voordelen• Je bent snel online; een template behoeft minder werk.• Je hebt minimale kosten; sommigen zijn zelfs gratis of kosten enkele tientjes. • Je hebt al punten bij Google; het indexeren kan meteen beginnen. • Je hebt een professioneel ogend website; content is hierin ‘key’.

Nadelen• Je kunt de template beperkt aanpassen.• Je bent tijd kwijt met het aanpassen van content die in lijn moet met de

template.• Je website is niet uniek tenzij je de volledige template afneemt, maar dan ben je

bijna net zo duur uit als een custom website.• Je moet meer moeite doen om een call-to-action button ergens op de pagina

mooi te plaatsen.

Baselife.nl een door eFusion op maat gebouwde website op basis van een Delta template


http://www.baselife.nl/


Het voorbeeld op de voorgaande pagina is een prima voorbeeld van ‘ eten van 2 walletjes’: er is namelijk maatwerk verricht op het Delta thema. Je kunt namelijk eerst een thema aanschaffen om op basis daarvan maatwerk te verrichten.

Zie onderstaand voorbeeld van het standaard Delta thema.

Delta is een thema ontwikkeld door eFusion. Als je goed kijkt zal je enkele stijl-elementen herkennen op de pagina van Baselife aangezien dit een thema is met custom aanpassingen.



Zie hieronder een ander voorbeeld van een Delta thema, waarbij er geen maatwerk is verricht.



Waar let je op bij een maatwerkpartijBen je op zoek naar een partij die maatwerk verricht of een partij die werkt met vaste templates?

Ongeacht waar je naar op zoek bent, vinden wij dat de eisen voor een maatwerkpartij net zo streng dienen te zijn voor een partij, die met templates werkt. De reden is simpel: je betaalt uiteindelijk er wel voor en je moet waar krijgen voor je geld.

Wij van eFusion zelf hebben een heel goed en concreet idee waar je als geïnteresseerde op moet letten, wil je een partij hebben die goed werk levert. Graag maken we eerst duidelijk dat er een nuance bestaat in de term ‘goed werk’ leveren: • ‘Goed werk’ in de zin van: partij A bouwt de mooiste sites!• ‘Goed werk’ in de zin van ‘the whole package’: partij B bouwt naast mooie sites

ook goede functionele sites voorzien van mogelijkheden om gebruik te maken van alle moderne web-innovaties.

Goed werk betekent helaas nog steeds niet dat je een goede partij te pakken hebt. Zie hieronder een set aan criteria waarmee je kunt bepalen of de beoogde partij inderdaad ‘goed’ werk levert:• Creatieve designs.• Functioneel ontworpen.• Uitstekende customer experience.• Duidelijke communicatie.

Creatieve designsDe huisstijl van een onderneming is voor velen een uitgangspunt om de website op te richten. Zoals gelezen in hoofdstuk 1 is het niet altijd mogelijk om je huisstijl één op één te vertalen in een online en of e-commerce omgeving.

Het bedrijf dat je op het oog hebt om je website te laten bouwen, dient een portfolio te hebben, dat niet alleen spreekt van creativiteit, maar ook commerciële creativiteit. Zij dienen op de hoogte te zijn van hoe kleur, vormgeving, knopjes, pagina-indelingen etc. van invloed kunnen zijn op de uitstraling van een website, maar ook je ten doel gestelde conversie. Het één sluit het ander niet uit!

Zie op de volgende 2 pagina’s maatwerk voorbeelden, waarvan beiden zijn gebouwd ‘from scratch’.



De prachtige website van Marie-Stella-Maris



De eigenzinnige & arty-like website van 10-27. Niet altijd hoeft een website eruit te zien, zoals wat de ‘ mainstream’ doet. Volgens eFusion mag een beetje eigenzinnig ook wel.


http://10-27.com/


Functioneel ontworpenSuccesvol online ondernemen staat en valt met de juiste software. Los van het esthetische is het functioneel ontwerp van je site of webshop namelijk erg belangrijk. De juiste inrichting van je webtechniek is daar een voorbeeld van. Software speelt dus een cruciale rol, omdat de juiste koppelingen nodig zijn tussen de back-end en de front-end.

Back-end: zorg dat je de juiste softwarepakketten hebt, die op elkaar aansluiten, zodat er een naadloze aansluiting is met de user interface aan de front-end kant.

Front-end: zorg dat je ook hier kiest voor de beste user interface. Onderzoek je doelgroep en kom erachter hoe zij zich oriënteren op een website, wat hen motiveert en triggert.

Uitstekende customer experienceVoor het selecteren van een maatwerkpartij, is het belangrijk om te weten dat customer experience voorop staat. Dat houdt in: een goede klantenservice en bereikbaarheid. Je gaat namelijk in de ontwerpfase van je site geregeld het ‘hoe of wat’ bespreken.

Met een wireframe, de blauwdruk van een webshop of -site, wordt in overleg met jou de indeling van de site bepaald. Deze fase in de ontwikkeling van de website noemen wij ‘interactie design’. Met een duidelijke navigatie en een overzichtelijk en helder design moet er zorggedragen worden voor een optimale klantbeleving. Je bezoeker wordt hierdoor aangemoedigd om actie te ondernemen op de pagina. Uiteindelijk staat conversie optimalisatie altijd voorop, tenminste... bij eFusion wel.

In een later stadium hoort er ook structureel overleg plaats te vinden over details om je site verder te ‘fine tunen’. Zaken als de kleurenstelling, vormgeving van de knoppen en de ontwikkeling van call-to-action banners zijn enkele stijlelementen die, zoals gelezen, de basis vormen voor elk webdesign.

Duidelijke communicatieEr is nog een laatste punt waar je naar dient te kijken voor je een dure maatwerkpartij aan de haak slaat: de communicatie.

Je kunt de beste webbouwer ter wereld hebben, maar wanneer de communicatie en het overleg niet helder en duidelijk verlopen, zal de ontwikkeling dit ook niet doen.



Tijdens de offertefase kun je al snel terugzien of de betreffende partij helder communiceert en daarin consequent is. Als de offerte niet duidelijk is en er zijn te veel vragen dan is dat vaak een voorbode van hoe de communicatie tijdens het designproces zal verlopen.

Als je vragen hebt, stel deze gerust en let daarbij goed op of ze je een duidelijk antwoord kunnen geven. Je kunt het zelfs nog een stapje verder nemen: “Stelt de beoogde partij zich naast een goede service ook klantgericht op?”

“Details is what matter”, weet je nog?

Ter afsluiting van dit E-book hebben wij in het kader van een ‘ sign-off’ Joey Schmidt, de art director van eFusion, gevraagd hoe hij op de hoogte blijft in zijn vakgebied.

Het is een art director met een echte passie voor grafisch design en alles wat daarmee te maken heeft.

“Details is what matter”, weet je nog?

Joey Schmidt, Art Director eFusion


Nog even een woord van onze pro

http://bit.ly/Y92JdU

E-book: hoe draagt design bij aan online conversie?

Design

Transcript of E-book: hoe draagt design bij aan online conversie?