Welke pagina’s moeten op je website komen? Hoe zijn ze aan elkaar verbonden? En misschien nog wel lastiger; wat plaats je qua content op elke pagina?!
Ah, de structuur van je website. Nu begint het allemaal concreet te worden. We gaan het hebben over structuur op verschillende niveau’s; te beginnen met het pagina-niveau.
De grootste open deur van deze training; een website bestaat uit meerdere pagina’s. Je website heeft sowieso de ‘standaard pagina’s’ en daarnaast nog een aantal customer jobs-to-be-done-afhankelijke pagina’s.
De op één na grootste open deur van deze training; een website heeft een home page nodig.
Voor veel bezoekers (zij die op ‘home’ landen) is dit de eerste indruk en die kan maar beter goed zijn. Wat je hier in de ‘hero’ zet, is enorm belangrijk. Het maakt je bezoekers hopelijk nieuwsgierig en geeft ze het idee dat ze op de juiste plek geland zijn.
“Eigenlijk hebben we maar twee pagina’s: home en pricing. Zolang die maar goed staan”
- Een klant.
Deze pagina begint met een ‘hero section’. Vaak is dit een schermvullend visueel onderdeel van je website met een aansprekende titel, optionele subtitel en een call-to-action. Het is wat je aanbiedt in één duidelijk overzicht. Ik kan niet genoeg benadrukken hoe belangrijk dit stuk van je website is.
De rest van de pagina is een doorgeefluik naar de rest van je website. Als je een dienst aanbiedt, laat je hier in grote lijnen de problemen die je oplost zien en de manier waarop je dat doet. Of als je een dierentuin bent, toon je hier de dieren die in je park verblijven in combinatie met openingstijden (een belangrijke jobs-to-be-done) en ticketprijzen.
De truc is om niet alles te tonen. Je toont een intro van de belangrijke pagina’s op je website voor een goed beeld van wie je bent. Wanneer mensen meer willen weten, laat je ze doorklikken naar de volledige pagina’s van dat onderwerp.
Deze pagina wordt vaak onderschat. Ik zal je een voorbeeld geven. Eén van mijn klanten bouwt een tool voor wetenschappers om hun onderzoek sneller gepubliceerd te krijgen. Een onderdeel daarvan is een (hoe kan het ook anders) AI-gestuurde schrijfhulp.
Waarom zou je hun tool gebruiken als je ook al een meer algemene (betaalde) AI tool zoals ChatGPT, Gemini of Claude gebruikt?
Omdat ze zelf wetenschappers zijn. Ze weten waar ze het over hebben en maken die tools voor jou; een andere wetenschapper. Dat ‘ons kent ons’ en ‘zij snappen mijn problemen tenminste’ is echt kritiek voor een goede conversie. En dat moet je dus op je ‘Over ons’ pagina plaatsen. Vertel je verhaal!
In de praktijk ziet het er als volgt uit:
Benieuwd hoe dat er uit ziet? In de onderstaande video pak ik er wat ‘over ons’ pagina’s bij.
(video)
De volgende kritieke pagina is ‘pricing’. Belangrijk om hier te weten is dat dit afhankelijk van wat je aanbiedt meerdere pagina’s kunnen zijn. Daarom eerst wat voorbeelden op een rij.
Welke je hiervan kiest, ligt aan de diensten of producten die je aanbiedt. Daar is weinig goed of fout aan te doen. Wat wel belangrijk is, is wat je verder op je pagina plaatst. Zoals die klant van mij al zei; ‘pricing’ is een top 2 pagina qua belang.
Op deze pagina is het bijvoorbeeld een slim idee om ‘social proof’ te plaatsen. Denk aan referenties of een (scrollende) ‘logo wall’. Laat mensen zien dat jij een betrouwbare partij bent die doet wat het belooft.
Je bezoekers zijn (hopelijk) dicht bij het doen van een aankoop. Voor de mensen die nog twijfelen, is het opzetten van een ‘FAQ’ (veelgestelde vragen) een goed idee. Door veel met je klanten en doelgroep te praten, kun je ontdekken wat die veelgestelde vragen zijn. Het is letterlijk een geval van scherp zijn op welke opmerking je van 80% van je doelgroep te horen krijgt.
Hou het trouwens simpel. Het is heel Amerikaans om haast oneindige pagina’s met uitleg, verhalen van klanten en dat soort dingen op je ‘pricing page’ te plaatsen. Wees eerlijk en duidelijk. Dan ben je al een heel eind.
En als laatste; de contact-pagina. Ook hier geldt dat de vorm van de pagina afhangt van dat wat je aanbiedt. In mijn geval heb ik bijvoorbeeld een link naar een agenda-tool waar je direct iets kunt plannen in mijn agenda en een formulier waar ik al het één en ander hoop te ontdekken van een potentiële klant.
Voor medische organisaties zal dit niet veel anders zijn. Voor de fysio, huisarts of tandarts zal het contactformulier te maken hebben met het inschrijven als patient en/of het boeken van een afspraak.
Bij een grotere partij is de contactpagina vaak wat algemener met info over openingstijden, links naar hulpartikelen en misschien nog een telefoonnummer.
(afbeelding mondzorgmakers)
Het bovenstaande voorbeeld vind ik persoonlijk erg sterk (niet omdat ik het zelf heb gemaakt, mocht je dat denken…). Dit is gemaakt voor een tandartspraktijk. Het speelt uitstekend in op één van de belangrijkste jobs-to-be-done voor dit type klant; ‘ik wil een afspraak maken bij de tandarts’.
De uitdaging qua UX is hier dat een klant graag wilt bellen terwijl dit niet altijd binnen bereikbare tijden is. Deze klant (mogelijk met spoed en pijn aan het gebit) wilt in één oogopslag zien of hij kan bellen en zo ja; naar welk nummer.
Verder zitten er nog wat UX-handigheidjes in; op mobiel opent de knop meteen je telefoon en wanneer je op het moment van bezoeken niet kunt bellen, laat de contactpagina zien wanneer het eerste moment is waarop je wel kunt bellen.
De bovenstaande pagina’s ga je in haast alle gevallen nodig hebben. Daarnaast heb je nog een aantal pagina’s afhankelijk van je JTBD’s. Hieronder noem ik diegene die ik in de praktijk het vaakst zie.
Dit type van pagina’s is vooral belangrijk voor mensen in dienstverlening (duh). Ik heb bijvoorbeeld een portfolio-website waarop ik mijn diensten aanbied. Per dienst leg ik uit wat het is, wat het oplost en hoe het precies in zijn werk gaat.
Wanneer van toepassing toon ik ook voorbeelden. Voorbeelden zijn handig bij visuele diensten, zoals het ontwerpen van een logo, maar niet als je een tandarts bent met verschillende type van ingrepen.
Het onderdeel ‘attracties’ mag je in de breedste zin van het woord zien. Dit zouden optredens, achtbanen en kraampjes in de Efteling kunnen zijn, maar ook een overzicht van dieren in een dierentuin.
Je maakt dit onderdeel van je website om je bezoekers een volledig beeld te geven van jouw bedrijf. Dat helpt ze met het maken van een keuze. Hieronder een aantal voorbeelden:
Deze pagina’s zijn belangrijk wanneer je klanten nog in de ontdekken-fase zitten. Wees dus niet bang om hier flink uit te pakken. Maak een overzichtspagina van alle attracties die per stuk doorlinken naar een detail-pagina met meer info, fun facts en afbeeldingen.
Documentatie is vooral belangrijk in het geval van software (SaaS) producten. Stel, je hebt een marketing-platform waar je allerlei social media accounts kunt koppelen. Per account-type heb je allerlei hulpdocumenten nodig om mensen te hebben als ze er zelf niet uitkomen (foutmeldingen, etc).
Vaak kun je dit het beste in een help-subdomein onderbrengen en koppelen aan een platform wat daarvoor gemaakt is, zoals bijvoorbeeld HelpScout.
Tot nu toe werken we op pagina-niveau. Je pagina’s duidelijk hebben zorgt voor een goed fundament, maar als je eenmaal gaat (laten) bouwen, moet je een niveau dieper. En dat zijn de onderdelen die samen een pagina vormen; componenten.
Dat je gebruikers op je website houdt, is van enorm belang. Zeker wanneer mensen nog aan het ontdekken zijn, wil je dat ze eenvoudig van pagina naar pagina kunnen gaan om aan hun besluitvorming (“Ga ik met deze partij in zee?”) te werken.
Verreweg de meeste websites hebben een ‘top navigatie’; een menu-balk bovenaan de website. Ze werken veelal hetzelfde en dat is prima. Je hoeft het wiel hier niet opnieuw uit te vinden. Dat komt door het ‘mental modal’ van je bezoekers.
Het mental model van je bezoeker is hoe zij verwachten dat je website werkt en in elkaar steekt.
Je bezoekers hebben ervaring met andere websites met een vergelijkbare navigatie. Ze verwachten bijvoorbeeld een zoekveld, als je die hebt, rechtsboven in de navigatie. En je logo linksboven? Daarop klikken brengt je terug naar de home page van je website.
Dat zit er zo ingebakken dat het haast verplicht is om zulke dingetjes ook te doen. Vandaar dat het prima is om ook ‘gewoon’ een ‘top navigatie’ te hebben. Daarnaast;
Deze lijst kan nog langer, maar daarvoor verwijs ik je naar het ‘UX’ hoofdstuk van deze training. Daar gaan we extra diep in op navigatie, mental models en meer.
Dan nu de footer; het ‘uiteinde’ van je pagina’s. De mindset van je bezoekers die dit stuk van de pagina bereiken is enorm belangrijk om in het achterhoofd te houden.
Als iemand namelijk de moeite heeft genomen om heel de pagina door te nemen, zou je kunnen aannemen dat de content van je pagina je bezoeker aanspreekt. Anders waren ze al eerder gestopt met lezen. Dat betekent dus dat dit het ideale moment is om met een call-to-action te komen.
Verder is je footer de perfecte plek voor informatie en links naar pagina’s die nodig maar niet super belangrijk zijn. Denk hierbij aan veelgestelde vragen, informatie over verzendtijden en terugsturen, links naar social media en contactgegevens.
Twee hoofdstukken verderop gaan we het hebben over UX lessen en valkuilen. Daar gaan we het in verder detail hebben over componenten. Navigatie en footer wou ik er even uitlichten omdat ze zo’n grote hap nemen uit het ontwerp van je website. Handig om vast te benoemen!
Het eerste wat je nu voor je website moet doen, is je eerder vastgestelde jobs-to-be-done naast elkaar leggen en per ‘job’ te bepalen wat een bezoeker nodig heeft om die job te volbrengen.
Stel, je doelgroep heeft als job-to-be-done het kunnen solliciteren op een vacature bij jouw bedrijf. Daar pakken we dan de standaard stappen van een customer journey bij; ontdekken, beslissen, uitvoeren. Wat heeft je doelgroep nodig per stap?
Het bovenstaande is een brainstorm die ik al typend heb zitten bedenken. Doe dit voor al je jobs-to-be-done en je bent een heel eind. Als je hiermee klaat bent, gaan we het hebben over conversie.
Vragen? Of iets onduidelijk? Laat het weten! Ik help je graag verder. Dat maakt deze training daarnaast ook weer beter.
Hallo! Ik ben een (freelance) senior UX designer. Meer weten? Lees hieronder verder.
