Tijdens het ontwerpen van een website denk je misschien niet direct aan het uitwerken van de 404-foutmelding. Deze pagina ziet de gebruiker als de bezochte pagina niet (meer) bestaat. Toch is het een gegarandeerd scenario dat zal voorkomen bij gebruikers van je site. Het is frustrerend als de gebruiker op een 404-pagina komt. Een proces wordt verbroken of de gewenste informatie kan niet gevonden worden. Dit kan opgelost worden als de 404-pagina de gebruiker gerust weet te stellen en correct doorverwijst naar een relevante alternatieve pagina. In dit artikel vind je 10 tips om een gebruiksvriendelijke 404-pagina te ontwerpen.

1. Wees duidelijk

Het is op de eerste plaats belangrijk dat je duidelijk maakt dat de gebruiker op een pagina is aangekomen die niet bestaat. Zorg er dus voor dat de pagina niet lijkt op een pagina met inhoud. Communiceer met een duidelijke kop dat de pagina waar de gebruiker naar zocht niet gevonden is. Als je deze kop centreert is het direct helder dat dit het belangrijkste bericht op deze pagina is. Daarnaast moet het ook de grootste tekst op deze pagina zijn zodat de bezoeker dit als eerste leest. Zie bijvoorbeeld hieronder de 404-pagina van Behance; de melding is het eerste wat je (onbewust) opneemt.

2. Behandel de foutmelding als een landingspagina

Sommige gebruikers zullen de 404-pagina als eerste pagina van je website te zien krijgen. Dit kan voorkomen als er naar de site wordt gelinkt met een foutieve link, of als de gebruiker een URL verkeerd overtypt. De 404-pagina functioneert dus ook als ongelukkige landingspagina. Het is daarom belangrijk dat de branding van je merk goed wordt toegepast op deze pagina. Denk hierbij aan het gebruik van kleur, beeld en typografie. Toon duidelijk het logo van het bedrijf of de site. Zorg ervoor dat de geschreven teksten op deze pagina passen bij de toon die gebruikt wordt in de algehele branding. Let er daarnaast op dat eventuele foto’s of illustraties een goede indruk van jouw merk geven.

3. Houd het luchtig

De beste 404-foutmeldingen zijn pagina’s die een grapje maken over de fout die zich voor heeft gedaan. Het internet staat vol met voorbeelden van grappige 404-pagina’s. Niet zonder reden, want de frustratie zakt bij een gebruiker snel weg als hij aan het lachen wordt gemaakt. Hieronder zie je twee voorbeelden die ik zeer creatief en leuk vind. Bij deze voorbeelden is goed te zien dat het grapje de duidelijkheid en gebruiksvriendelijkheid van de pagina niet in de weg zit. De simpelste manier om dit toe te passen is om een woordgrap in de kop te zetten, maar ook een grappig beeld dat aansluit op diezelfde woordgrap voegt veel toe.

4. Toon links naar de meest bezochte pagina’s

Een makkelijke manier om de gebruiker effectief verder op weg te helpen is om links naar de 6 meest bezochte pagina’s van je site te laten zien. De kans is namelijk aanwezig dat de gebruiker naar die inhoud op zoek is of vanuit daar naar de juiste pagina kan navigeren. Dit werkt voornamelijk goed als je website uit weinig pagina’s bestaat. De beste manier om dit vorm te geven is als een lijst van inline links, dit is het makkelijkste om doorheen te scannen. Zorg ervoor dat de inline links er net zo uit zien als de andere inline links van je site: onderscheid ze met een kleur en onderstreep de links als je extra veel rekening wilt houden met slechtzienden die je website bezoeken. Als je de regelhoogte op 1,5 x de letterhoogte instelt wordt het nog makkelijker om doorheen te scannen. Hieronder zie je een voorbeeld van Airbnb, die deze links op de perfecte manier vormgeeft:

5. Laat de gebruiker zoeken

Als de website uit honderden pagina’s bestaat kan het beter zijn om een zoekbalk te tonen zodat een gebruiker zelf de juiste pagina kan vinden. Let wel op dat de pagina’s die hier aangeboden worden wél bestaan. Ook geeft het de gebruiker controle om weer op het juiste pad naar het gewenste gebruiksdoel te komen. Geef deze zoekbalk vorm zoals je dat bij andere zoekbalken ook doet: een zichtbaar ingekaderd invoerveld met een knop ernaast die duidelijk het label ‘zoeken’ bevat. Een placeholdertekst kun je weglaten, omdat je met deze functionaliteit alles op de site zou moeten kunnen vinden. De zoekbalk kun je het beste direct onder de kop van de foutmelding plaatsen. Je kunt ervoor kiezen om de kop en de zoekbalk te centreren zodat de blik er gelijk op valt als de gebruiker de 404-pagina opent. Daarnaast communiceer je met het centreren van de zoekbalk dat dit de beste optie is voor de gebruiker om weer op het juiste pad te komen.

6. Bied content aan op basis van de URL

Een reden waarom gebruikers soms op 404-pagina’s komen is dat ze een spelfout maken tijdens het invoeren van een URL of omdat een link een spelfout bevat. Het is mogelijk om uit de paginalink die niet gevonden wordt steekwoorden te halen en zo een inschatting te maken welke pagina de gebruiker bedoelde. Wat een mooie verrassing als je na het maken van een invoerfout gelijk de correcte pagina te zien krijgt! Je kunt deze pagina’s op twee manieren aanbieden: je kunt de steekwoorden in de zoekbalk plaatsen én daaronder direct de resultaten laten zien. Dit werkt het beste als je niet zeker weet of de steekwoorden van de ingevoerde URL direct overeenkomen met bestaande pagina’s. Als je wel een exacte match beschikbaar hebt dan kun je deze URL aanbieden als inline link onder de kop. Zorg ervoor dat deze link groot zichtbaar is en dat de gehele URL te lezen is, zodat de gebruiker ook kan zien welke spelfout hij heeft gemaakt tijdens het invoeren van de URL.

7. Voeg een optie toe om feedback te sturen

Ook kun je een formulier of link toevoegen zodat gebruikers feedback kunnen sturen naar de websitebeheerders. Het heeft drie voordelen om dit aan te bieden.

• Ten eerste krijgen gebruikers het gevoel dat het niet hun schuld is dat ze een foutmelding te zien krijgen.
• Ten tweede geeft dit de gebruikers de mogelijkheid om hun frustratie op een constructieve manier te uitten.
• Als laatste voordeel krijgt de sitebeheerder de mogelijkheid om de 404-fout te herstellen, zodat andere gebruikers in de toekomst niet hetzelfde struikelblok in hun gebruikersweg tegenkomen.

Een mooie manier om deze optie aan te bieden is door een link naar een service e-mailadres toe te voegen, uiteraard met een call-to-action. Een andere methode is om een simpel contactformulier met alleen velden voor een e-mailadres en een bericht toe te voegen. Een contactformulier met meer velden raad ik af, omdat dit visueel concurreert met je hoofdkop, links en/of beelden. Een 404-pagina is een foutmelding en moet simpel en duidelijk blijven. Daarnaast zullen niet veel bezoekers deze functionaliteit gebruiken en dient het voornamelijk om de bezoeker gerust te stellen. Het is belangrijk dat de gebruikers niet de pagina hoeven te verlaten om de feedback te sturen, en ze verder op weg worden geholpen met relevante links of een zoekfunctionaliteit.

8. Maak de foutmelding toegankelijk

Zorg ervoor dat je 404-pagina op alle apparaten werkt en goed toegankelijk is voor slechtzienden, kleurenblinden en bezoekers die een screenreader gebruiken. Denk er dus om dat de koppen, de links, het zoekveld en/of het feedbackformulier genoeg contrast hebben met de achtergrond en er genoeg witruimte om de elementen heen zit. Zorg ervoor dat de melding bovenaan staat in de HTML-boom zodat een screenreader de kop en relevante links voorleest vóór dat het bij de headernavigatie aan komt.

9. Beschouw de foutmelding als onderdeel van de site

Als de navigatiebalk, het logo van je bedrijf en de footer ook zichtbaar zijn op de 404-pagina krijgt de gebruiker minder het gevoel dat er iets ‘groots' fout is gegaan. Hij is namelijk nog steeds op de juiste website, enkel op een pagina die niet bestaat. De navigatie en footerlinks geven ook routes naar relevante inhoud, wat de gebruiker weer verder op weg kan helpen. De inhoud van deze pagina zelf moet duidelijk losstaan van de rest van de site. Zoals in een eerdere tip is genoemd kun je dit goed vormgeven door de belangrijke elementen te centreren en de complete breedte van het scherm te pakken voor een (achtergrond)beeld. In het grappige maar effectieve voorbeeld hieronder zie je dat zelfs de winkelwagen nog zichtbaar is zodat de gebruiker zeker weet dat hij niet zijn producten ook kwijt is.

10. Verstop geen cruciale informatie

Zorg ervoor dat alle belangrijke tekst en interactieve elementen van je foutmelding boven de ‘vouw’ van de pagina staan; dat houdt dus in dat je niet hoeft te scrollen om verscholen berichten of interacties te kunnen zien. Dit geldt ook voor je melding op mobiele apparaten. Daarvoor zal je de elementen mogelijk kleiner moeten maken. Het is van belang dat het aanbieden van vervolgstappen belangrijker is dan de beelden, dus geef de mobiele variant van de 404-pagina simpeler vorm. Plaats het sprekende beeld of de grappige illustratie onder de links of zoekfunctionaliteit.

Conclusie

Er zijn veel manieren om een goede 404-pagina in te richten. Het is aan te raden niet alle bovengenoemde oplossingen te gebruiken, maar geschikte ontwerppatronen toe te passen. Wat zijn de scenario’s die kunnen voorkomen, naar welke inhoud zijn je gebruikers op zoek en hoe kun je ze zo goed mogelijk helpen tijdens deze foutscenario’s? Het belangrijkste is dat de ontwerper de volgende richtlijnen aanhoudt:

• Gebruik duidelijke vormgeving.
• Zorg dat alle vervolgopties (links of zoekformulier) goed te vinden en makkelijk scanbaar zijn.
• De pagina moet goed werken voor de verschillende gebruikers, dus zorg ervoor dat het logisch werkt voor mobiele apparaten en screenreaders.
• De 404-pagina moet visueel een onderdeel zijn van de website, maar moet wel in één oogopslag herkenbaar zijn als een foutmelding.

Wil je meer weten hoe 404-foutmeldingen ontstaan en wat je er aan kunt doen? Lees dan het artikel over 404-foutmeldingen geschreven door Thomas van Eldijk.

Hulp nodig om de 404-pagina van jouw website gebruiksvriendelijk vorm te geven?

Bij Emble helpen we jou om de beste online ervaring voor je bedrijf of merk te creëren. Neem daarom gerust contact met ons op als je interesse hebt in een ontwerptraject voor jouw zakelijke of dienstverlenende website.