Een goede klantervaring zorgt voor tevreden klanten. En tevreden klanten leveren meer omzet op en brengen de kosten omlaag. Het is dus van belang om te weten hoe klanten jouw dienstverlening ervaren en waar je zaken kunt verbeteren. Bijvoorbeeld door de inzet van digitale kanalen.

De customer journey in kaart brengen

Het begint met het in kaart brengen van de customer journey. Welke fasen doorloopt een klant allemaal bij jou en waar in die klantreis kun je zaken optimaliseren? Door met klanten in gesprek te gaan kom je daarachter. Maar ook het inventariseren van belletjes naar de klantenservice geeft je meer inzicht in punten waar klanten vastlopen.

De journey breng je letterlijk in kaart op een customer journey map. Je geeft aan waar klanten met jou in contact komen, welke emoties ze in die stap ervaren en wat je nog zou kunnen doen om de ervaren emoties te verbeteren.

De klantreis verbeteren door de inzet van digitale kanalen

Een van de manieren om touchpoints tussen jou en de klant te verbeteren is door de inzet of optimalisatie van jouw digitale kanalen. Heeft de klant problemen met bestellen van een product? Verbeter de check-out van je webshop, of lanceer een webshop als je die nog niet had. Komen hulpvragen van klanten per telefoon binnen? Kijk hoe je het je klant makkelijker kan maken door ze een mailtje te laten sturen of een formulier in kunnen vullen.

Je digitale kanalen heb je niet alleen als visitekaartje of als verkoopmachine. Je hebt ze om de klanttevredenheid te vergroten maar ook om je eigen processen te optimaliseren. In het webinar dat we hielden met service design bureau Essense laat Harald Lamberts mooi zien hoe je de journey in kaart brengt. Hij geeft ook een aantal mooie voorbeelden van grote en kleine organisaties die hun digitale kanalen hebben geoptimaliseerd op verschillende touchpoints in de klantreis.

Het bericht Webinar Essense: digitale kanalen ontwikkelen vanuit de klantreis. verscheen eerst op Van Ons.

Wat is WCAG

De Web Content Accessibility Guidelines (WCAG) dus, de leidraad om een website volgens een bepaalde richtlijn te ontwerpen. Deze guidelines worden hoofdzakelijk gebruikt bij het ontwerpen en bouwen van websites en platformen voor overheidsinstanties. De EU vereist zelfs dat websites en mobiele applicaties van overheidsinstanties voldoen aan deze WCAG. Dit om webinformatie toegankelijk te maken voor iedereen.

De Web Content Accessibility Guidelines (WCAG) maken deel uit van een reeks richtlijnen voor webtoegankelijkheid die zijn gepubliceerd door het Web Accessibility Initiative (WAI) van het World Wide Web Consortium (W3C), de belangrijkste internationale organisatie voor standaardisatie van het internet. Het zijn een reeks aanbevelingen om webinhoud toegankelijker te maken, voornamelijk voor mensen met een handicap. Websites moeten voor alle informatiedragers volgens de WCAG ontworpen worden, waaronder natuurlijk ook mobiele telefoons. 

Uiteindelijk is het natuurlijk het best wanneer alle platformen en websites volgens de WCAG worden ontworpen. Zo help je niet alleen de gebruiker, maar ook jezelf. Door deze guidelines niet te volgen, loop je het risico om een grote groep gebruikers niet te kunnen bedienen en in het geval van een webshop zelfs omzet mis te lopen.

4 kernwaardes 

Als we in detail kijken naar wat deze WCAG richtlijnen inhouden, zien we dat bij het ontwerpen en bouwen van websites met een 4-tal kernwaardes rekening moet worden gehouden:

Waarneembaar

Hoewel dit voor de hand lijkt te liggen, is de waarneembaarheid van informatie complexer dan het lijkt. Zo is het bijvoorbeeld voor op tijd gebaseerde media goed om ook een alternatief te hebben. Zodat indien deze verdwijnt, de gebruiker de informatie toch nog kan raadplegen.

Ook is het goed om tekst alternatieven te maken voor niet-tekstuele inhoud, zoals grote letters, braille, symbolen of spraak. Deze kan dan worden gewijzigd in andere vormen die mensen nodig hebben. Het presenteren van informatie in verschillende vormen zonder structuurverlies is hierbij ook essentieel. Duidelijk is dat waarneembaarheid zich dus vertaalt in vele vormen. 

Bedienbaar

De bedienbaarheid van een site of platform vertaalt zich vooral in het gebruik van de navigatie en de interface. Zo is het belangrijk dat alle functies beschikbaar zijn vanaf het toetsenbord en is het belangrijk om gebruikers te helpen bij het navigeren. Zo bestaat het dat er met de tab-toets op sites een menu geactiveerd kan worden, die vervolgens met pijltjestoetsen verder kan worden bediend.

Een ander voorbeeld is om gebruikers de mogelijkheid te geven om bewegende elementen te pauzeren. Dit kan gelden voor sliders, maar bijvoorbeeld ook voor video’s en gifjes.

Verder moeten er meerdere manieren geboden worden om inhoud te vinden en te bepalen waar de gebruiker zich bevindt.

Begrijpelijk

Niet geheel onbelangrijk is het begrijpelijk maken van de informatie op een website. Het spreekt bijna voor zich, maar toch zijn er een aantal zaken die onderbelicht kunnen blijken. Zo is het belangrijk dat webpagina’s op voorspelbare manieren verschijnen en werken. Daarbij is het ook goed om gebruikers te helpen bij het vermijden van fouten. Correctie van fouten is ook aan te raden. 

Ook de inhoud van de tekst moet uiteraard begrijpelijk zijn. Het niveau moet matchen met het doel van de website.

Robuust

Een iets abstractere richtlijn die zo goed en kwaad vertaald kan worden als “betrouwbaar”. De robuustheid van een site of platform moet dus ervoor zorgen dat de getoonde informatie betrouwbaar over komt. Uiteraard geldt dit voor alle informatiedragers en verschillende technologieën. 

De beste slag sla je met deze richtlijn door tijdens het ontwerpen een voorsprong te nemen op toekomstige technologische ontwikkelingen, zodat je niet elk jaar drastische aanpassingen hoeft te doen.

Onze toepassingen

Als internetbureau hebben wij bij het bouwen en bedenken van platformen vaak te maken met WCAG. Wij kunnen er dan ook prima mee uit de voeten wanneer klanten ons vragen om WCAG toe te passen. Het liefst zouden we dit voor elke klant doen, omdat wij vinden dat het internet voor iedereen een toegankelijk plek moet zijn.

Een aantal van onze WCAG projecten vind je hieronder. Kijk gerust hoe we dit in de praktijk brachten bij de websites van bijvoorbeeld De Afsluitdijk en KiFiD.

Voor De Afsluitdijk is veel aandacht besteed aan de navigatie. Het bedienbaar maken van deze website was een mooie uitdaging. Te meer omdat de site visueel een onconventioneel karakter heeft. Het navigeerbaar maken van alle elementen via toetsenbord was dan ook extra lastig.

Bezoek de website van De Afsluitdijk

Ook de website van KiFiD is gemaakt volgens de WCAG richtlijnen. Zo is onder andere de waarneembaarheid verbeterd met het gebruik van de kleur oranje om een beter contrast tussen voor en achtergrond te krijgen. Het gekozen font is bevorderlijk voor de leesbaarheid van de site.

Bezoek de website van KiFiD

Het bericht WCAG – voor een (rolstoel)vriendelijk internet verscheen eerst op Van Ons.

De tool waarvan je niet wist dat je die nodig had

Een Content Delivery Network (CDN) dus. Een heus digitaal panacea voor iedereen die van een snelle en goed beveiligde website houdt. Maar wat houdt dat precies in, zo’n CDN?

Een Content Delivery Network is een wereldwijd gedistribueerd netwerk van webservers met als doel onder andere een snellere levering en maximaal beschikbare inhoud te bieden. De inhoud wordt door het hele CDN gerepliceerd, zodat het op veel plaatsen tegelijk bestaat. Een CDN staat los van de hosting, en is een aparte dienst die je inschakelt ter verbetering van onder andere de snelheid en veiligheid van je website.

Waarom een CDN?

• Hogere PageSpeed voor je platform
• Bescherming tegen cybercrime, waaronder DDoS
• Een snel ladende website over de hele wereld

Verbeterde PageSpeed

Om te beginnen heeft een CDN als absolute voordeel dat je website overal ter wereld min of meer even snel laadt. Een bekend probleem dat iemand in Indonesië gerust een kop koffie kan halen tijdens het laden van een Nederlandse website is hiermee verholpen. Een Content Delivery Network slaat als het ware de website op lokale servers op, waardoor de verbinding letterlijk een stuk korter wordt. Dit opslaan, en daarmee een kopie van de website paraat hebben, heet caching. Je PageSpeed is daarmee overal ter wereld ontzettend hoog. Goed voor je Google ranking, en dus goed voor jou.

Een CDN distribueert dus belangrijke inhoud naar meerdere, wereldwijd geplaatste datacenters, zodat deze dichter bij de eindgebruiker is en de inhoud dus sneller weer te geven is. Het netwerk gebruikt server optimalisaties op basis van inhoudstype om die inhoud zo efficiënt mogelijk bij de gebruiker te krijgen.

Digitaal slot op de deur

Niet alleen kan een CDN de PageSpeed van je website verbeteren, maar ook de nodige beveiliging bieden. Zo kan een CDN razendsnel IP’s van gebruikers blokkeren bij een hoge frequentie van aanvragen, maar ook het voorkomen van DDoS-aanvallen behoort tot het takenpakket van een CDN.

DDoS-aanvallen zijn hard op weg de meest voorkomende vorm van cyberdreiging te worden. Ze zijn het afgelopen jaar snel gegroeid, zowel in aantal als in frequentie. De trend die je nu ziet is dat aanvallen van kortere duur zijn, maar dat er een groter aantal “packets-per-seconde” wordt verstuurd tijdens een aanval. Niet alleen bedrijven, maar ook consumenten worden steeds vaker de dupe van dergelijke aanvallen.

Als bedrijf wil je natuurlijk voorkomen dat jouw website het doelwit wordt van een dergelijke DDoS-aanval. Een bedrijf in de ecommerce branche moet er bijvoorbeeld niet aan denken dat juist tijdens een piekperiode als Black Friday de website eruit ligt door een dergelijke aanval. Ook hier kan een partij die CDN aanbiedt de oplossing bieden.

Een DDoS-aanval kenmerkt zich doordat het een doelwit aanvalt vanaf wereldwijd verspreide apparaten, verzameld in een zogenaamd botnet. Het onderscheidt zich van andere denial-of-service (DoS)-aanvallen doordat het een enkel apparaat met internetverbinding (één netwerkverbinding) gebruikt om een doelwit te overspoelen met kwaadaardig verkeer.

Een stap in de juiste richting

CDN’s zijn natuurlijk geen échte panaceas. Ze kunnen sites met fundamentele problemen met betrekking tot de primaire hostingomgeving of applicatie configuratie niet ineens op magische wijze aanzienlijk versnellen. Het verhelpen van potentiële prestatieproblemen is daarom cruciaal om het meest uit een CDN te halen.

Omdat wij kwaliteit hoog in aanzien hebben, zijn de platformen die wij bouwen tot in de puntjes verzorgd. Daarom adviseren wij vrijwel altijd om een nieuw platform te voorzien van een CDN. Zelf werken wij al jaren met CDN aanbieder Cloudflare. Een partij die verschillende pakketten aanbiedt en nooit storing heeft. 

Wil je advies over CDN’s of het verbeteren van je huidige website of platform? Neem dan even contact met ons op om te zien hoe wij jullie kunnen helpen.

Het bericht De ultieme uitbreiding voor een snellere en veiligere website verscheen eerst op Van Ons.

Dag 1

Bij aankomst bij de Super Bock Arena wordt iedere WordCamp-er verwelkomd met een bescheiden goodie bag en naamplaatje. We splitsen ons langzaamaan op en ieder beweegt zich richting een eerste talk of workshop.

Leo Postovoit van XWP kan ons als head of product strategy alles vertellen over de prestaties van je website. Vooral over het holistisch beschouwen van de prestaties van je website, bekeken vanuit de gebruiker. Page Speed, UX, Conversies en Retentie zijn de vier pijlers waar Leo zich op richt. Naast de voor de hand liggende tips als “een langzame website jaagt gebruikers weg”, biedt hij ook diepgang. Hij deelt daarbij inzichten mbt content, testen en ads.

Verder haalt hij een aantal handige tools aan zoals Calibre. Een tool die bijvoorbeeld empirische test-data inzet. Deze kan de ontwikkelaar in realtime vertellen of een bepaalde plugin of script voor extra laadtijd zorgt.

Tijd voor de gezamenlijke lunch, waarbij iedereen even zijn ervaringen deelt en timetables naast elkaar worden gelegd. De schema’s lopen uiteen, waarbij de één ‘s middags op de expo-vloer te vinden is om te netwerken, en de ander nog een talk mee pakt. 

Na de lightning talks sessie met korte presentaties over uiteenlopende onderwerpen zoals FSE (full site editing) en de toekomst van Gutenberg blocks, sluiten we af met een talk over de integratie van podcasts in WordPress. “With WordPress podcasters can turn attention into action”, aldus Richard Midson. Hij geeft antwoord op de vraag hoe WordPress de toekomst van podcasts kan zijn. Met de immer groeiende aandacht voor podcasts is met name de integratie van audio in WordPress middels plugins een punt van aandacht. Extra interessant voor ons natuurlijk, aangezien wij ook een podcast produceren.

Dag 2

De tweede WordCamp dag trappen we af met een meer marketing georiënteerde talk. De Bulgaarse Vassilena “Vassy” Valchanova praat ons bij over data-driven content personas. Als ervaren marketing strategist weet ze alles van online personas en doelgroepprofielen en ondanks dat ieder bedrijf wel weet hoe belangrijk het is om een sterk en solide klantprofiel te hebben, neemt ze de aanwezigen mee om een praktisch stappenplan te doorlopen om een profiel te creëren. Naast de usual suspects (demografie, leeftijd etc.) moet je als bedrijf tegenwoordig ook soorten content-interesses ook zeker meenemen in je profielschets. De focus ligt op B2C, maar voor B2B bedrijven liggen er zeker ook kansen.

Op de expo-vloer wordt het netwerken en het verzamelen van merchandise tot kunst verheven, waarbij een enkeling al een tas vol heeft. Een gesprekje met een hosting partij, een groet aan oude bekende, of even kijken wat Google nu weer heeft ontwikkeld.

We sluiten uiteindelijk het congres af met een talk van grote WordPress baas Matt Mullenweg. Een animatie wordt gevolgd door een vragenrondje uit het publiek. En ondanks dat deze er meteen met gestrekt been ingaat met opmerkingen over community support en taal ondersteuning, proberen Matt en Josepha (Haden Chomphosy) zo goed en kwaad mogelijk de kritiek te pareren. 

We genieten nog even van de zon, een drankje en een heerlijk diner om de volgende dag rond het middaguur weer huiswaarts te keren. Door de centraal gelegen venue hebben we naast WordCamp ook veel van Porto kunnen zien en een heerlijke trip kunnen beleven waarin we plezier met werk perfect hebben kunnen combineren. We kijken nu al uit naar Athene!

Het bericht WordCamp Europe 2022 – op locatie! verscheen eerst op Van Ons.

Bounce rates en laadsnelheid

Laten we allereerst duidelijk hebben waarom een snelle website zo belangrijk is. Omdat we in een mobile-first wereld leven, is een snelle gebruikerservaring op mobiel essentieel. De hoeveelheid tijd die mensen op hun mobiele apparaten doorbrengen, neemt jaar op jaar toe. Maar de aandachtsspanne neemt af. Je wil dus niet dat die mensen je website wegklikken omdat deze te langzaam of incorrect laadt. Wegklikkers kunnen immers geen zaken met je doen. Een trage site, en daarmee een slechte PageSpeed score, is funest voor je bounce rate. Google zelf raadt aan om de algemene laadsnelheid van je pagina onder de 2 seconden te houden. Dat er veel meer is dan alleen laadsnelheid behandelen we in dit blog. Een kijkje onder de motorkap van PageSpeed.

Hier is goed te zien dat de bounce rates omhoog schieten zodra je boven de 3 seconden laadtijd komt.

Maar ook bij 1 tot 3 seconden is het verval al groot. 20-30% haakt immers al af bij een laadtijd van >1 seconde.

Death by a thousand cuts

Omdat de PageSpeed is opgebouwd uit allemaal verschillende elementen, zijn er een aantal remedies die je kan toepassen om je website uit dat slakkengangetje te helpen. Je kan bovendien op een hoop vlakken de mist in gaan. Gevolg hiervan is dat je aan een hoop zaken moet denken om een goed geoptimaliseerde website te hebben, en houden.

Dat een goede PageSpeed score belangrijk is, is duidelijk. Maar hoe haal je een goede PageSpeed score? Wat komt er allemaal kijken bij het verbeteren hiervan, en wat zijn de hoofd- en bijzaken?

Geef niet meer weer dan nodig

Waarschijnlijk het meest bekende issue wanneer je denkt aan een trage site. Afbeeldingen en video’s inladen met onnodig hoge kwaliteit. Zorg er dus voor dat de getoonde afbeeldingen en video’s niet groter zijn dan nodig. Zorg er ook voor dat ze de juiste bestandsindeling hebben en dat ze zijn gecomprimeerd voor het web. 

Gebruik CSS-sprites om een sjabloon te maken voor afbeeldingen die je vaak op de site gebruikt, zoals knoppen en pictogrammen. CSS-sprites combineren afbeeldingen tot één grote afbeelding die in één keer wordt geladen (wat minder HTTP-verzoeken betekent) en geeft vervolgens alleen de secties weer die je wilt weergeven. Dit bespaart laadtijd omdat de gebruiker niet hoeft te wachten op meerdere afbeeldingen.

Support your local met een Content Delivery Network (CDN)

Duidelijk dus dat een oorzaak van een trage website kan komen door ongecomprimeerde media. Zowel afbeeldingen als video’s kunnen enorm toevoegen aan de laadsnelheid van een pagina. Er zijn dan in principe 2 dingen die je kan doen. De weer te geven media comprimeren (van 5 mb naar bv 100kb) zoals hierboven beschreven, of de media (bron) naar de gebruiker toe verplaatsen. Dat laatste kan met een zogeheten CDN.

Een Content Delivery Network slaat als het ware de website op lokale servers op dicht bij de gebruiker, waardoor de verbinding letterlijk een stuk korter wordt. Dit opslaan, en daarmee een kopie van de website paraat hebben, heet caching. Een CDN heeft als absolute voordeel dat je website overal ter wereld min of meer even snel laadt. Een bekend probleem dat iemand in Indonesië gerust een kop koffie kan halen tijdens het laden van een Nederlandse website is hiermee verholpen. De PageSpeed score is daarmee overal ter wereld ontzettend hoog. Goed voor je Google ranking, en dus goed voor je business.

Een CDN distribueert belangrijke inhoud naar meerdere, wereldwijd geplaatste datacenters, zodat deze dichter bij de eindgebruiker is en de inhoud dus sneller weer te geven is. Het netwerk gebruikt server optimalisaties op basis van inhoudstype om die inhoud zo efficiënt mogelijk bij de gebruiker te krijgen. Lees hier meer over het gebruik van een CDN

Vermijd redirects

Elke keer dat een pagina doorverwijst naar een andere pagina, wacht de gebruiker langer totdat de pagina klaar is met laden. Al deze extra bounces kosten namelijk tijd. Kostbare tijd, weten we inmiddels. Als het mobiele redirect pad er bijvoorbeeld als volgt uitziet:

voorbeeld.com -> www.voorbeeld.com -> m.voorbeeld.com -> m.voorbeeld.com/home

Komt het er dus op neer dat de site effectief pas na 4 redirects verschijnt. Onnodige vertraging die je moet zien te voorkomen.

Gebruik browser caching

Browser caching werkt door de eerder geladen bronnen te laten “onthouden”, zodat ze niet bij elk bezoek opnieuw laden. Wanneer een websitebezoeker naar een nieuwe pagina op uw site gaat, hoeft niet alle content, zoals logo’s en voetteksten, opnieuw te worden geladen. Dit resulteert in een grote snelheidstoename wanneer mensen op een website terechtkomen.

PageSpeed ontleed

En dan PageSpeed zelf. De metrics die Google zelf gebruikt komen in principe neer op wat hierboven behandeld is, maar dan in iets andere bewoording. Google hanteert zelf namelijk 6 behoorlijk technische termen die bij elkaar een PageSpeed score vormen. Maar wat meet PageSpeed eigenlijk precies?

• Largest Contentful Paint (LCP) – In essentie is het de snelheid waarmee de belangrijkste content op de site laadt. Een paar hoofdredenen die een slechte LCP score overleggen zijn langzame server response tijden en trage bron laadtijden. Meer hier.
• First Contentful Paint (FCP) – In tegenstelling tot de LCP gaat het bij de FCP logischerwijs om de tijd die verloopt voordat de eerste contant wordt weergegeven. Het markeert het eerste punt waar de gebruiker iets op het scherm kan zien – een snelle FCP helpt de gebruiker gerust te stellen dat er iets gebeurt. Meer hier.
• Interaction to Next Paint (INP) – Bij INP gaat het om de reactiesnelheid van alle elementen op input van de gebruiker. Een praktisch voorbeeld hieronder waarin niet alleen de snelheid van een element weer wordt gegeven, maar ook de manier van reageren op input. Meer hier.

• First Input Delay (FID) – Waar het bij FCP en LCP om weergavesnelheid gaat, gaat het bij FID om de responsiveness van de website. En dan met name de snelheid van de respons op de eerste interactie van de gebruiker met de site. Meer hier.
• Cumulative Layout Shift (CLS) – CLS behelst het veranderen van de indeling van elementen op een pagina. Onverwachte verplaatsing van pagina-inhoud gebeurt meestal omdat bronnen niet synchroon worden geladen of DOM-elementen dynamisch worden toegevoegd aan de pagina boven bestaande inhoud. De boosdoener kan een afbeelding of video zijn met onbekende afmetingen, een lettertype dat groter of kleiner wordt weergegeven dan oorspronkelijk de bedoeling, of een advertentie of widget van derden dat zichzelf dynamisch aanpast. Meer hier.

• Time to First Byte (TTFB) – TTFB is een metric die de tijd meet tussen het verzoek om een bron en het moment waarop de eerste byte van een antwoord begint te arriveren. Een aantal oorzaken van een slechte TTFB kunnen bijvoorbeeld gezocht worden bij hosting services met inadequate infrastructuur en daardoor geen hoge volumes verkeer aan kunnen. Het verbeteren van TTFB wordt vaak gedaan door een geschikte hostingprovider te kiezen met een infrastructuur die een hoge uptime en responsiviteit garandeert. Dit kan – in combinatie met een CDN – helpen. Meer hier.

Snel, maar toch een matige PageSpeed score

Al de bovengenoemde metrics bij elkaar vormen dus de PageSpeed score van een website. En ondanks dat de naam doet vermoeden dat het allemaal om snelheid gaat, hoeft een tegenvallende score niet per se te betekenen dat je website ook daadwerkelijk traag is. Een supersnel ladende website kan nog steeds een minder goede score overleggen vanwege slecht geladen elementen of elementen die verspringen en niet dynamisch genoeg zijn.

Vergeet ook zeker niet dat de PageSpeed test beschikbaar is voor zowel dekstop als mobiel. Een website kan bijvoorbeeld sublieme scores halen op desktop, maar slechts matig presteren op mobiel.

De gebruiker tevreden houden

Een goede PageSpeed score is dus belangrijk, omdat dat betekent dat je website op meerdere fronten goed presteert. Dat de content snel wordt getoond, maar ook dat de content correct en logisch wordt weergegeven. Opdat de gebruiker een tevreden bezoeker is. En een tevreden bezoeker is immers een converterende bezoeker.

Op https://pagespeed.web.dev/ kunnen bedrijven zelf checken hoe hun site presteert. De test geeft ook meteen weer op welke vlakken er verbetering nodig is. Dit gebeurt op een erg gedetailleerd niveau, waardoor je direct precies weet waar het mis gaat. Of juist goed natuurlijk. Mocht het zo zijn dat deze inzichten je te technisch worden, dan kan je altijd bij de website-bouwer aankloppen om opheldering te vragen.

Het bericht Waarom PageSpeed zo belangrijk is voor jouw business verscheen eerst op Van Ons.

Het gebruikersprobleem

Een gebruiker van een website wil van alles, maar niet alles. Zo moet je als ontwerper altijd rekening met het bieden van keuzes aan de gebruiker, en vooral ook het wegnemen van deze keuzes. Choice overload bestaat namelijk niet alleen in de supermarkt. Zaak is wel dat wanneer je een keuze weglaat, je de gebruiker forceert om een handeling uit te voeren. En deze moet bij voorkeur de meest logische handeling zijn. Een goede gebruikerservaring is immers leidend. 

Één van deze handelingen is het resultaat van het klikken op een hyperlink. To open in new tab or not to open in new tab. That’s the question. 

Naast UX-ontwerpers hebben ook content-makers veel te maken met deze beslissing. Laat je de gebruiker weggaan van de huidige pagina of open je de link in een nieuw tab voor hen. En wat blijkt? Het verschilt nogal per situatie en doel om de gebruiker een bepaalde optie te geven. 

We kunnen dus niet zomaar alle gebruikers en situaties over één kam scheren wanneer we een link in een nieuw tabblad (of venster) moeten openen of gebruikers in hetzelfde tabblad houden. Uit een uitgebreid gebruikersonderzoek bleek dat deze beslissing veel meer te maken met de context, taak van gebruikers en wat deze vervolgens zullen doen met de inhoud op een pagina. 

Waar moet je rekening mee houden

Een aantal zaken waar je rekening mee moet houden bij het maken van deze beslissing:

Context: Gebruikers die informele, ontspannen taken uitvoerden, hadden veel minder last van nieuwe browsertabbladen of -vensters dan gebruikers die zich in hogedruk- of tijdgevoelige scenario’s bevonden.

Apparaat: Een zeer belangrijk aspect. Voor mobiele gebruikers is het een stuk onhandiger wanneer links in nieuwe tabbladen werden geopend, omdat ze de “Terug” knop niet konden gebruiken om terug te keren naar het vorige scherm en toegang tot het vorige tabblad een extra handeling vereiste.

Taak: het openen van een pagina in een nieuw venster of tabblad werd goed ontvangen wanneer de taak een van de volgende soorten activiteiten omvatte:

• Content vergelijken – Dit is vooral relevant voor contentmakers. Deze kan bijvoorbeeld een webpagina in een CMS in het ene tabblad of venster bewerken en een voorbeeld van de pagina in een ander tabblad bekijken. Dit kan zelfs nog opgevangen worden met een compleet nieuw venster ipv tabblad.
• Combineren van informatie – Een gebruiker moet bijvoorbeeld een online formulier invullen waarbij deze extra informatie moet opzoeken via referenties uit het formulier, of van de pagina zelf. Raadzaam is om dan elke link los in een nieuw tabblad te laten openen.
• Vergelijken van meerdere producten – Vooral relevant voor e-commerce. Gebruikers bleken het fijn te vinden wanneer tijdens het online shoppen de productspecificaties in een nieuw tabblad openden. Dit geeft de gebruiker een beter overzicht van de producten waarin deze interesse toont. Ook wel Page-parking genoemd.

Baseer je ontwerp op research

Nog los van het feit dat er geen “catch-all” oplossing is voor dit probleem, heeft de gebruiker natuurlijk altijd zelf nog de optie om een link handmatig in een nieuw tab te openen. Maar om daarom altijd een bepaalde keuze te forceren, is ook niet het antwoord. Het blijft dus sterk afhankelijk van wat er gebeurt op de pagina die je presenteert aan de gebruiker.

Open links voor gebruikers voor het grootste deel altijd in hetzelfde tabblad. Als je als ontwerper of contentmaker echter denkt dat het openen van een nieuw tabblad gebruikers kan helpen bij hun taak, baseer deze beslissing dan niet alleen op onderbuikgevoel. Het kan de gebruiker een hoop frustratie schelen, en jouw bedrijf een slechte associatie.

Overdrijf niet met het openen van links in een nieuw tabblad simpelweg omdat je denkt dat gebruikers links in bepaalde gevallen op een manier willen openen.

Begrijp de gebruiker

Als web- en appontwikkelaar lopen wij dagelijks tegen UX-vraagstukken aan. Niet alleen moet het er goed uitzien, maar moet een app of website ook logisch opgebouwd zijn. Zodat de gebruiker een vanzelfsprekend pad kan bewandelen.

Het bericht Open in new tab? – de do’s en don’ts voor UX verscheen eerst op Van Ons.

Website van het Jaar verkiezing

Als webontwikkelaar ontwikkel je uiteraard geen platform met als doel om een award te winnen. Je bouwt een platform omdat een bedrijf of organisatie die nodig heeft. 

Een platform is pas award-waardig als het perfect werkt. Daar gaat veel tijd en inspanning in zitten. En dankzij deze tijd en inspanning won lokaal nieuwsplatform indebuurt twee jaar op rij de prijs voor Website van het Jaar in de categorie ‘Nieuws’. Een platform dat wij bouwden en ontwikkelden, tegenwoordig beheren en tot op de dag van vandaag doorontwikkelen. Een korte toelichting hoe je tot zo’n resultaat komt.

Techniek voorop

Een goed platform kenmerkt zich soms doordat de gebruiker eigenlijk niet doorheeft hoe goed het allemaal werkt. Daar gaat een hoop design en techniek aan vooraf. En met miljoenen bezoekers per maand is het fijn als de gebruikerservaring voor iedereen prettig is.

Indebuurt.nl is natuurlijk een contentplatform. En wie content zegt, zegt laadtijd. Voor een gebruiker is het essentieel dat een site snel en goed laadt, anders is deze net zo snel weer vertrokken. PageSpeed is hierbij een cruciaal onderdeel. Zeker bij een nieuwsplatform is het zaak dat zowel beeld als tekst snel en accuraat wordt weergegeven.

Een belangrijk onderdeel van PageSpeed is de zogeheten Time to First Byte (TTFB) – TTFB is een metric die de tijd meet tussen het verzoek om een bron en het moment waarop de eerste byte van een antwoord begint te arriveren. Belangrijk om dit goed op orde te hebben bij websites die hoge aantallen gebruikers aan moeten kunnen. Een uitgebreide uitleg over PageSpeed vind je hier.

Het verbeteren van TTFB wordt vaak gedaan door een geschikte hostingprovider te kiezen met een infrastructuur die een hoge uptime en responsiviteit garandeert. Dit kan – in combinatie met een CDN – helpen.

En ook dat deden we. We maakten gebruik van een CDN via Cloudflare om tot hypersnelle laadtijden te komen. Een Content Delivery Network (CDN) is een wereldwijd gedistribueerd netwerk van webservers met als doel onder andere een snellere levering van content te verzekeren. Meer weten over CDN? Kijk dan hier.

Vorm en inhoud op orde

Je kan nog zo’n mooie boekenkast bouwen, maar als je er geen interessante boeken in zet, loop mensen er toch aan voorbij. Daarom verdienen de redacteuren en alle content marketeers bij indebuurt ook de credits. Zonder content ben je nergens. Allicht niet op een nieuwsplatform. Van vacatures bij het lokale theater tot de lekkerste hamburgers in de buurt, al je lokale nieuws kan je vinden op indebuurt. Altijd relevant en altijd actueel. 

En om dit nieuws snel en makkelijk bij de gebruiker te krijgen, moest de website makkelijk te beheren zijn. Content kan daarom eenvoudig worden beheerd en aangepast waar nodig. Omdat er liefst 40 steden en plaatsen moeten worden voorzien van nieuws, is het cruciaal dat contentmakers er op een intuïtieve manier mee om kunnen gaan.

Het mag duidelijk zijn dat een award winnen voor website van het jaar niet uit het niks komt. Content, techniek en gebruikerservaring moeten allemaal perfect aansluiten en de gebruiker de beste ervaring bieden. Aan de achterkant is het zaak dat alles makkelijk beheerd kan worden. En als je dat allemaal op orde hebt, kan je zomaar een award winnen voor website van het jaar.

Het bericht Zo bouwden wij een website van het jaar verscheen eerst op Van Ons.

Converteren als functie

Bedrijven hebben logischerwijs steeds vaker een digital-first-benadering. Daarom kan het belang van een website of app die bezoekers omzet in klanten hebben niet genoeg worden benadrukt. Maar bezoekers converteren helaas niet zomaar. Daar heb je goed ontwerp voor nodig. Op conversie gericht ontwerp is een ontwerpstrategie die bedrijven kan helpen dit doel te bereiken door het ontwerp van hun website te optimaliseren voor maximale conversieratio’s.

Platformen moeten aan bepaalde voorwaarden voldoen, en gebruikers moeten gemakkelijk bepaalde handelingen kunnen verrichten. Daar begint het eigenlijk mee. De gebruiker moet zo gemakkelijk mogelijk het conversiepad kunnen bewandelen. In het geval van ecommerce wil je dat de gebruiker bij voorkeur in één rechte lijn naar de digitale checkout gaat. Kijken → winkelmand → kopen.

Conversiegericht ontwerp is een framework dat gebruikt kan worden om goed converterende campagnes en platformen te ontwerpen. Het bevat overtuigende design technieken die psychologische triggers aanspreken om gebruikers te doen laten handelen. Uiteraard is vaak een lead of sale de meest wenselijke handeling. Het draait dus voor een groot gedeelte om gebruikerservaring, ofwel UX.

De belangrijkste principes van conversiegericht ontwerp

1. Duidelijkheid
2. Eenvoud
3. Visuele hiërarchie
4. Social proof
5. Testen en optimaliseren

Op conversie gebaseerd ontwerp is een ontwerpbenadering die zich richt op het ontwerpen van websites en apps met als doel het maximaliseren van het aantal bezoekers dat een gewenste actie onderneemt, zoals het doen van een aankoop of het invullen van een contactformulier. De belangrijkste principes van op conversie gebaseerd ontwerp zijn:

User-Centered Design: Op conversie gebaseerd ontwerp stelt de behoeften en voorkeuren van gebruikers voorop en ontwerpt websites die gemakkelijk te navigeren en intuïtief in gebruik zijn. De gebruikerservaring wordt geoptimaliseerd om gebruikers naar de gewenste actie te leiden. Meer over UX specifiek kan je hier lezen.

Duidelijkheid: Het ontwerp moet duidelijk en ondubbelzinnig zijn, de voordelen van het product of de dienst communiceren en duidelijk maken welke actie de gebruiker moet ondernemen.

Eenvoud: Het ontwerp moet eenvoudig en vrij van “rommel” zijn, afleidingen minimaliseren en de cognitieve belasting van de gebruiker verminderen.

Visuele hiërarchie: Het ontwerp moet visuele aanwijzingen zoals kleur, contrast en plaatsing gebruiken om de aandacht van de gebruiker naar de belangrijkste elementen van de pagina te leiden, inclusief de call-to-action.

Social proof: Op conversie gebaseerd ontwerp maakt gebruik van zogeheten sociaal bewijs, zoals klantrecensies en getuigenissen. Hiermee straal je vertrouwen en geloofwaardigheid uit bij gebruikers.

Testen en optimaliseren: Op conversie gebaseerd ontwerp is een herhalend proces waarbij ontwerpen worden getest en verfijnd om de conversiepercentages in de loop van de tijd te verbeteren. A/B-testen en andere analysetools worden gebruikt om de effectiviteit van verschillende ontwerpelementen te meten. Vervolgens kan je verbeterpunten identificeren.

Ready, get set, call to action!

Wie conversie zegt, zegt natuurlijk call to action (CTA). CTA’s mogen nooit ontbreken bij je website, app of ad. Maar er komt nog een hoop kijken bij het verzinnen van de juiste copy, de locatie van de CTA en het ontwerp.

Een belangrijk ontwerpelement om de conversiepercentages positief te beïnvloeden, is de juiste positionering van opvallende koppen en call-to-actions (CTA’s) in advertenties of bestemmingspagina om een duidelijke visuele hiërarchie te creëren. Dit proces heet “attention-driven design”. Dit betekent in feite het optimaliseren van het gebruik en positionering van ontwerpelementen om de focus naar het conversiedoel te leiden.

Aangezien de gemiddelde aandachtsspanne van een mens is kort, dus moet je ervoor zorgen dat de boodschap duidelijk is en dat alle ontwerpelementen op de pagina of advertentie bezoekers naar een CTA leiden.

Maak het verschil

Over het algemeen is het doel van op conversie gebaseerd ontwerp het creëren van een website of digitale ervaring die er niet alleen geweldig uitziet, maar ook echte resultaten oplevert voor het bedrijf of de organisatie erachter. Er zijn nog duizend en één onderdelen die te maken hebben met conversiegericht ontwerp. Zoals het aansturen op micro conversies.

Of je nu een kleine ondernemer, een marketingprofessional, of nike.com, uiteindelijk willen we allemaal een website met een ontwerp dat conversies stimuleert en je bedrijf laat groeien. Het gedrag van de gebruiker hierbij centraal zetten is cruciaal.

Het bericht Conversiegericht ontwerp verscheen eerst op Van Ons.

Een dunne lijn tussen veel of weinig

Het hebben van te veel items in de navigatiebalk kan gebruikers overweldigen en het voor hen moeilijk maken om te vinden wat ze zoeken. Aan de andere kant kan het hebben van te weinig items het voor gebruikers moeilijk maken om door de site te navigeren en de informatie te vinden die ze nodig hebben. Damned if you do, damned if you don’t. Maar er is hoop!

Vanuit een UX-standpunt kan het beste aantal onderwerpen in de navigatiebalk van een website variëren, afhankelijk van de specifieke context en doelen van de website. Als algemene regel wordt echter aanbevolen om het aantal onderwerpen in de navigatiebalk op ongeveer 5-7 items te houden. En daar is natuurlijk een reden voor.

Naast het aantal items zijn ook de labeling en organisatie van de onderwerpen in de navigatiebalk belangrijke factoren om rekening mee te houden. De labels moeten duidelijk en beknopt zijn, en in taal die vertrouwd en begrijpelijk is voor de doelgroep. De onderwerpen moeten ook op een logische en intuïtieve manier worden georganiseerd en de hiërarchie en structuur van de inhoud op de site weerspiegelen.

Uiteindelijk is het doel van de navigatiebalk om gebruikers een duidelijk en gebruiksvriendelijk pad te bieden naar de informatie die ze nodig hebben, dus het is belangrijk om rekening te houden met het perspectief van de gebruiker bij het ontwerpen en organiseren ervan.

De wet van Miller

Je raadde het waarschijnlijk al. Want het was natuurlijk good old George Miller die dit in 1956 ontdekte. “The magical number seven, plus or minus two”. Mensen zijn in één opzicht tamelijk gelijk, bewees Miller, want het korte termijn geheugen van veruit de meeste mensen houdt kortstondig zeven elementen vast.”

Het idee om het aantal items in de navigatiebalk op ongeveer 5-7 items te houden, is dus gebaseerd op de wet van Miller, een bekend concept in de cognitieve psychologie. De wet van Miller stelt dat het menselijk brein op elk moment slechts ongeveer 7 (plus of min 2) stukjes informatie in het kortetermijngeheugen kan bevatten.

De 3 kernpunten van Miller

• Staar je niet blind op dat “magische” getal 7. Niet alle design beslissingen hoeven aan de hand hiervan verantwoord te worden. Wat niet logisch voelt, is vaak ook goed.
• Zorg ervoor dat content in behapbare stukken gepresenteerd wordt aan de gebruiker. Dit helpt voor het begrijpelijk houden van de inhoud en het onthouden ervan. Ook wel chunking genoemd.
• Gebruik progressieve onboarding om de cognitieve belasting voor nieuwe gebruikers te minimaliseren. Zorg er dus voor niet meteen alle informatie te presenteren maar sommige delen te verbergen achter knoppen of menu’s.

Dit betekent dat wanneer gebruikers te veel items te zien krijgen om uit te kiezen in de navigatiebalk, ze moeite kunnen hebben om ze allemaal te onthouden en overweldigd of gefrustreerd kunnen raken. Aan de andere kant, als er te weinig items zijn, kunnen gebruikers het moeilijk vinden om de informatie te vinden die ze nodig hebben of kunnen ze het gevoel hebben dat de website hen niet genoeg opties biedt. Meer daarover hier.

Daarom helpt het om het aantal items in de navigatiebalk op ongeveer 5-7 te houden om een balans te krijgen tussen het bieden van voldoende opties aan gebruikers en het niet overweldigen van die gebruiker met te veel informatie. Het is echter belangrijk op te merken dat dit een algemene richtlijn is en dat er situaties kunnen zijn waarin het zinvol is om van deze regel af te wijken, op basis van de specifieke behoeften en doelen van de website en zijn gebruikers.

Tot slot

Onthoud dat als het gaat om het ontwerpen van de navigatiebalk van een website dat less is more. Houd de wet van Miller in het achterhoofd en streef naar 5-7 items om te voorkomen dat je de gebruiker overweldigt. Wijk gerust af als je denkt dat het er beter van wordt, maar zorg er dan wel voor dat het een weloverwogen beslissing is.

Het bericht De wetenschap achter de navigatiebalk verscheen eerst op Van Ons.

Hamburger

Drie horizontale lijnen die op een hamburger lijken. Het wordt het best gebruikt wanneer er meerdere items op een compacte en toegankelijke manier moeten worden weergegeven. Dit pictogram wordt vaak gebruikt bij het ontwerpen van mobiele apps, maar wordt ook vaak gezien in desktop- en webgebaseerde interfaces. Gebruik deze om het menu van de app weer te geven, vooral als er meerdere secties zijn. Probeer dit waar mogelijk in de bureaubladweergave te vermijden, vanwege de sterke associatie met mobiel en apps.

Kebab

Drie verticaal gestapelde stippen. Het wordt vaak gebruikt om aan te geven dat er extra opties beschikbaar zijn die niet direct zichtbaar zijn. Het wordt het best gebruikt wanneer er een paar secundaire opties of acties zijn die moeten worden weergegeven. Het verschil tussen de hamburger en kebab pictogrammen is echter dat het kebabpictogram doorgaans wordt gebruikt om een inline-menu weer te geven. Het hamburgerpictogram wordt doorgaans gebruikt om een menu weer te geven dat zich buiten het scherm en aan de zijkanten naar binnen beweegt.

Gehaktballen

Drie gestapelde cirkels van gelijke grootte. Het is een minder gebruikelijk icoon en wordt soms door elkaar gebruikt met het kebab-icoon. Het wordt het best gebruikt wanneer er meerdere opties zijn die qua belangrijkheid of functie vergelijkbaar zijn. Dit pictogram kan worden gebruikt in mobiele, desktop- en webgebaseerde interfaces.

Wordt gebruikt om een menu te openen of acties voor een gerelateerd item weer te geven. Omdat het pictogram horizontaal is, is deze gemakkelijker te herhalen en op internet te gebruiken voor elementen zoals tabellen of andere horizontaal georiënteerde elementen.

Bento

Een vierkant pictogram met compartimenten, vergelijkbaar met een Bento Box. Het wordt gebruikt om een verzameling gerelateerde items of tools weer te geven, zoals een reeks filters of categorieën. Het wordt het best gebruikt wanneer er meerdere items zijn die in categorieën of groepen moeten worden georganiseerd.

Tevens te gebruiken om een menu te openen met verschillende applicaties, oplossingen of functies binnen hetzelfde product, je kunt er snel tussen schakelen, dit icoontje vind je bijvoorbeeld rechtsboven in de Google Play store.

Hotdog

Een pictogram met een verticale lijn en aan weerszijden twee kleinere lijnen, die verdomd veel lijkt op een hotdog. Het is een minder vaak voorkomend pictogram en wordt soms door elkaar gebruikt met het hamburgerpictogram. Het wordt het best gebruikt als er een paar primaire opties of acties zijn die moeten worden weergegeven. Ook dit pictogram kan worden gebruikt in mobiele, desktop- en webgebaseerde interfaces.

Strawberry

Zie je vooral in een context die te maken heeft met eten en drinken, zoals menu’s, receptenwebsites of apps voor supermarkten. Daarbij kom je deze ook tegen in branding voor bedrijven die gespecialiseerd zijn in verse producten, natuurlijke ingrediënten of gezonde snacks. Het aardbeisymbool kan zowel in digitale als gedrukte media worden gebruikt en kan worden verwerkt in logo’s, iconen of illustraties om een gevoel van frisheid over te brengen.

Een menukaart vol

Afhankelijk van de website die je bezoekt of de applicatie die je gebruikt op je telefoon of andere mobiele apparaten, kunnen deze icoontjes de sleutel zijn in het vinden van de gewenste functies.

In een reeks blogberichten over UX geven we aandacht aan wat er allemaal schuil gaat achter beslissingen die betrekking hebben op design. Eerder schreven we al over hoeveel iconen je in de navigatiebalk plaatst en de wetenschap erachter. En in dit stuk keken we dus naar het design van de menu-knoppen zelf. Achter elk ontwerp zit een gedachte, zo blijkt maar weer.

Het bericht Wat hamburgers, kebab en UX met elkaar te maken hebben verscheen eerst op Van Ons Digital Agency.