De ideale webpagina

Wat is nu de beste landingspagina? Hoe ziet deze eruit, wat moet hij doen? Een aantal vragen die ik geregeld krijg van verschillende kanten. De eerste denkfout die vaak gemaakt wordt, is dat we in een oplossingsrichting denken. We hebben een vraag en eigenlijk hebben we in gedachte al het ideaalbeeld voor ons. Dat beperkt je in de oplossingsrichtingen en gaat ten koste van de ontwerpmogelijkheden.

Hoe gebruikt een klant je product/dienst?

De stap die je terug zou moeten doen, is je afvragen wanneer iemand behoefte heeft aan of een keuze maakt voor je product/dienst. Is het logisch om dit onderweg te doen, even snel tussendoor te checken of op een rustig moment achter de pc? Bedenk daarom eerst hoe je het probleem zou willen oplossen voordat je vaststelt dat het een iPad- of app moet zijn of dat een website het beste voorziet in de behoefte. Het gedrag verschilt per device en moet een logisch antwoord zijn op een vraag, probleem of wens. Oriënteert iemand zich of is er de behoefte om iets aan te schaffen? Gebeurt dat op hetzelfde device? En hoe verhouden de verschillende contactmomenten tussen de verschillende devices zich tot elkaar? Allemaal zaken die je je van tevoren af moet vragen voordat stappen genomen worden.

Neem nu het voorbeeld van Albert Heijn. Daar is goed nagedacht hoe de app integreert met de website. Puur bedacht vanuit klantperspectief.

Onderdeel van het geheel

Pagina’s staan niet op zichzelf. Bezoekers komen ergens vandaan en gaan ergens naartoe. De ideale pagina laat dus zien waar je je bevindt. Dat kan via een kruimelpad, navigatie, categorisering, maar je kunt ook laten zien in welke stap van het proces iemand zich bevindt.

Hoe komt een bezoeker op de pagina? Dat kan op velerlei manieren. Bijvoorbeeld:

• via een prijsvergelijker;
• via een zoekmachine (SEO);
• naar aanleiding van een tv-/radiocampagne;
• via een online banner of PPC campagne;
• door direct in te toetsen;
• via social shopping (tweet, aanbeveling);
• viadoorgestuurde e-mail;
• vanuit een direct-mailinglijst.

Een bezoeker moet daarom de context begrijpen waar hij zich in bevindt. Door dit te visualiseren kan hij zich oriënteren en actie ondernemen of snappen wat van hem verwacht wordt.

Doelstellingen van bezoek begrijpen

Elke pagina en elk onderdeel van een website draagt bij aan het grotere geheel. Elke individuele pagina heeft een specifieke missie. Anders zou hij er niet geweest zijn. Voordat we het doel van de pagina gaan uitleggen, moeten we begrijpen waar een bezoeker naar op zoek is. Er zijn natuurlijk veel meer doelen of deze kunnen gedifferentieerder gemeld worden. Een aantal hiervan vindt je hieronder.

Een bezoeker:

• heeft een aankoopdoel;
• wil producten vergelijken;
• wil een coupon gebruiken en profiteren van voordeel;
• Research Online, Purchase Offline (ROPO) onderzoek;
• heeft een servicevraag (self-service- of consumentenvraag);
• zoekt een fysieke winkel;
• komt per ongeluk op je website.

Zie bijvoorbeeld Ziggo. Op de homepage wordt aan een veelvoud van bezoekdoelen gerefereerd, maar is de homepage nu echt nodig in https?

Redenen om online producten of diensten aan te schaffen is dat het in de fysieke winkel niet beschikbaar is, het makkelijker is om te kunnen vergelijken en een veel grotere hoeveelheid producten gezocht en getoond kan worden. Ja, je kunt in je pyjama lekker shoppen, je hoeft er inderdaad niet altijd de deur voor uit. En natuurlijk vind je unieke producten die anders nooit gevonden hadden kunnen worden; het internet brengt vraag en antwoord locatie-ongebonden dichterbij. Zeker nu met location based services waar producten en diensten rondom jouw persoontje ook nog eens voor het snotje komen.

Internet Conventies

De afgelopen jaren zijn er redelijk wat best practises verschenen en hebben we een hoop internetconventies opgebouwd. Veel hiervan zijn no-brainers en spreken voor zich. Een aantal loop ik hier door. Ja natuurlijk willen we het de bezoeker zo makkelijk mogelijk maken, moet content uniek zijn.

De ideale pagina moet scanbaar zijn.

Zo zijn er verschillende theorieën over Z- of T-scans. Het makkelijkst is om dit met usabilitytesten die door Bart Hilhorst ben Louise Nell beschreven zijn uit te zetten. Bekijk het voorbeeld van een mooie kleurige website als GrapeDistrict. Hier wordt veel aandacht gevraagd door het kleurgebruik, maar wordt er nu eigenlijk gevraagd? Help de bezoeker keuzes te maken in wat te doen.

Het einde van de fold

Welke informatie zet je boven en onder de fold (de vouwlijn)? Met de komst van 80 verschillende tablets krijg je een diversiteit aan ‘fold’ waar je u tegen zegt. Zorg dat de actie boven de fold blijft. Wanneer je pagina niet uitnodigt tot scannen en scrollen (wat ook weer een handeling verwacht) is het wenselijk om de call-to-action boven de fold te plaatsen. Dat hij onderaan herhaald wordt is een logisch gevolg van wellicht een lange pagina. Zolang de pagina maar scanbaar is zie ik niet zo heel veel afhakers wanneer er gescrolld moet worden.

Kleurgebruik

Aan kleuren hebben we signalen toegekend. Zo staat rood voor stoppen en niet doen, terwijl blauw voor vertrouwen staat. Geel vraagt om attentie. Speel met de kleuren en wees er zorgvuldig mee. Maak gebruik van softe kleuren en een felle kleur wanneer je iets eruit wilt laten springen (lees meer).

Helder taalgebruik

Alle SEO-technieken gelden natuurlijk voor de ideale webpagina. Maar belangrijk is om het te hebben over wat je wilt vertellen en in welke woorden je dit wilt doen. Zoekt iemand op andere termen dan dat je gebruikt? Snel aanpassen dus. Copyformules en mogelijkheid bieden tot user generated content, om maar een aantal basisprincipes te noemen. Is onderstaande url een logische voor de aanbiedingen van Riviera Maison?

• Gebruik persona’s. Kruip in de huid van je persona, hoe gebruikt hij of zij een website, welke content vindt hij of zij belangrijk?
• Focus op voordelen, niet op feiten.
• Bied handreikingen, geen leesvoer.
• Houd rust en overzicht op de pagina door spatiëring of H1- en H2-tags (headings).
• Geef foto’s en video’s onderschriften en alt-teksten.
• Gebruik informatiehiërarchie door tabbladen te gebruiken of bullets. Erg fijn altijd.
• Vergeet niet je spellingscontrole alsjeblieft.
• Wees persoonlijk, liefst nog op de man af.

Wat nou laadtijd

Het mooie van het web is dat we alles kunnen meten. Meet, maar meet met mate. Wat ik bedoel is: wees je ervan bewust wat je wilt gaan meten. Achterliggend ligt een sturingsmechanisme of een testdoel. Waarom wil je meten? Belangrijker nog: wat levert het op? Wat ga je met de informatie doen? Sommige sites staan vol met meetcodes die verschillende taken meten of dezelfde metingen verrichten met een ander doel (STIR versus je eigen analytics ter bevordering van benchmarking). Zijn alle codes noodzakelijk en voegen ze waarde toe? Een simpele oplossing: haal bij twijfel tijdelijk codes weg en kijk of er intern iemand gaat piepen. Een andere alternatief is werken met containertags of verzamelbakken van codes. Het is belangrijker om actie te kunnen ondernemen op meetresultaten dan dat je kunt vertellen dat je alles kunt meten.

Onderscheid paginatypen

Vanuit de designconventie zijn paginatypen aan te raden. Een bezoeker weet dan wat hij kan verwachten van een pagina. Een stukje DNA of grid in je website kan daarom geen kwaad. De meeste CMS of E-commercesystemen bieden dit tegenwoordig standaard, maar het is wel erg fijn om hier wat ontwerpafspraken voor te handhaven. Standaard kennen we de volgende typen pagina’s:

• Homepagina of startpagina (vermindert overigens in toegevoegde waarde omdat er steeds minder bezoekers vanaf de homepage binnen komen en er steeds meer bezoekers vanuit Google je pagina vinden);
• Overzichtspagina
• Categoriepagina
• Landingspagina
• Productpagina of detailpagina;
• Transactiepagina;
• Bedankpagina.

Wees je ervan bewust wat de ‘call-to-action’ per paginatype is. Beperk ook het aantal actie elementen op een pagina. Je vraagt de bezoeker iets te doen, iets aan te schaffen of te lezen.

Een aantal tips voor productpagina’s:

Laat het product in gebruik zien. Een plaatje laat veel beter de voordelen zien wanneer het product ‘in actie’ te zien is. Een auto rijdend op de snelweg tonen, is veel effectiever dan een uitsnede van een auto op een witte achtergrond. Maak daarom gebruik van de juiste productomschrijvingen. Speel ermee, test ze. Leuk, technische omschrijvingen vanuit de fabriek. Maar wat doet het product of dienst nu voor mij als klant?

• Inzoommogelijkheid. Door je oogharen heen ziet alles er prachtig uit. Een close-up werkt vaak als bewijsvoering dat iets er echt goed of functioneel uitziet.
• Productreviews of testimonials.
• Productbeschikbaarheid (hoeveel is er nog op voorraad, hoe snel heb ik het binnen?).
• Wat kost het of wat is mijn (prijs)voordeel? Test met prijsvoordelen in termen van bijvoorbeeld 10% korting of € 50 voordeel.
• Wat zijn de voordelen van upselling? Als ik nu een duurdere variant neem, wat levert dat me concreet extra op?
• Toevoegen aan het winkelmandje moet erg makkelijk gaan.

Veelgemaakte fout is dat de cookies te lang bewaard worden, zodat als je een keer 3 manden later terugkomt, de website nog steeds herkent dat je witte sokken maat 43 had besteld. In essentie zijn bezoekers van je website nog wel argwanend als het gaat om het “big brother principe”. Je mag wel door laten schemeren dat je de bezoeker (nota bene in zijn voordeel) volgt en surfgedrag onthoudt, maar laat dit niet al te duidelijk merken. Retargeting klinkt erg leuk, maar je moet de klant niet het gevoel geven dat je alles van hem onthoudt. Maak het shareable; laat het de klant delen aan vrienden of op andere sociale media. Breng focus aan; het is onmogelijk overal de aandacht op te vestigen, wees duidelijk wat eruit moet springen en ontwerp daar naartoe.

Kijk hoe Bol.com je probeert te overtuigen om het winkelmandje te gebruiken. Van suggesties tot testimonials en inzicht in voorraden tot alternatieven.

Om het allemaal nog mooier te maken, kun je ook denken aan gepersonaliseerde aanbevelingen, zoekfilters en suggesties (‘bedoelde u…’), laat zien hoe lang het duurt voordat het product bezorgd wordt, heb vriendelijk ogende foutmeldingen, bied contextuele hulp, heb een Twitter-serviceskanaal of een call me back/call me now/ chatfunctionaliteit.

Er zijn nog veel meer tips en tricks uiteraard. Voor veel van jullie is het een opfrisser en zijn veel elementen bekend terrein. Dus mocht je tips willen achterlaten voor de ideale pagina: feel free om je bijdrage hier op Frankwatching te leveren. Veel plezier!