Hoe draagt design bij aan online conversie?

Transcriptie

1 & Hoe draagt design bij aan online conversie?

2 INHOUDSOPGAVE Inleiding...3 Design voor conversie...4 Responsive voor conversie...21 De praktijk: custom of template...31 efusion Group B.V. Randstad BM Almere efusion.eu *Copyright efusion Group BV, Almere *Copyright SEOshop Group BV, Amsterdam 2

3 1 INLEIDING 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? 3

4 2 DESIGN VOOR CONVERSIE 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. 4

5 DESIGN VOOR CONVERSIE Kleurenschema basisbegrippen in de westerse wereld Ondanks dat kleur principieel leidend hoort te zijn en dus bijdraagt aan de conversie, wordt het vaak onderschat. De bezoeker en de pagina-indeling Heb 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. 5

6 DESIGN VOOR CONVERSIE 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. 6

7 DESIGN VOOR CONVERSIE De bezoeker neemt eerst de volgende elementen intuïtief waar: Waarneming basisgrid: waar ben ik en hoe ziet de navigatie eruit? Zie hier van links naar rechts in welke volgorde je scant voor het basisgrid 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? 1. Titels, 2. Subtitels, vetgedrukte tekstfragmenten en opsommingstekens, 3. En dan pas gedetailleerde informatie lokaliseren. Hiërarchie van prioriteiten wanneer je voor het eerst op een website bent beland 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. 7

8 DESIGN VOOR CONVERSIE 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%! De 3 varianten. Kijk zelf even wat jij hieraan prettiger vindt en wat jou tot actie zou doen overgaan 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 site Binnen 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 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. 8

9 DESIGN VOOR CONVERSIE 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 9

10 DESIGN VOOR CONVERSIE Psychologie van kleurgebruik Ieder 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 10

11 DESIGN VOOR CONVERSIE 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 actiekleur Wat 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. 11

12 DESIGN VOOR CONVERSIE Alvast wat praktijkvoorbeelden: kleurgebruik pagina en call-to-action button Hoe 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 12

13 DESIGN VOOR CONVERSIE Philips 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-action Welke 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%. 13

14 DESIGN VOOR CONVERSIE 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. 14

15 DESIGN VOOR CONVERSIE 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 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. 15

16 DESIGN VOOR CONVERSIE Extra klikargumenten zijn nooit ongewenst. Kijk maar op de volgende pagina naar een afbeelding van een call-to-action button op de vacaturepagina van Bij het knopje is er subtiel een pijltje geplaatst om de tekst te ondersteunen. Bijvoorbeeld webwarenhuis 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. 16

17 DESIGN VOOR CONVERSIE 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. Fotogebruik Maak 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 17

18 DESIGN VOOR CONVERSIE Triggers Tot 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 willen Volgens 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. High Motivation Motivation Triggers succeed here Low Motivation Triggers fail here Hard to Do Ability Easy to Do De grafiek die Fogg heeft ontwikkeld aan de Standford University 18

19 DESIGN VOOR CONVERSIE 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 adres 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 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 triggeren Een 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 19

20 DESIGN VOOR CONVERSIE de curve. De combinatie van kunnen en willen moeten boven een bepaalde drempelwaarde uitkomen. Motiveer, vergemakkelijk en trigger Het 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. 20

21 3 RESPONSIVE VOOR CONVERSIE 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 design Wat 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 21

22 RESPONSIVE VOOR CONVERSIE 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 22

23 RESPONSIVE VOOR CONVERSIE 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 design Websites 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 design Of 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 23

24 RESPONSIVE VOOR CONVERSIE 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 content Laten 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 24

25 RESPONSIVE VOOR CONVERSIE 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 Ties Het 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%. Terugblik Zoals 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 responsive Als je kiest voor de toekomst, een responsive website, dan is het belangrijk om te 25