Het uitwerken van de 404-pagina is waarschijnlijk niet het eerste van in je opkomt als je een website gaat ontwerpen. Toch is de kans vrij groot dat een bezoeker op een bepaald moment deze pagina gaat zien. Een 404-pagina is een foutmelding en wordt getoond als de bezoeker een pagina opvraagt die niet (meer) bestaat. Dit kan zijn als de bezoeker een verkeerde URL in de adresbalk invoert, of als een link een verkeerde URL bevat. Voor je bezoekers kan het frustrerend zijn als zij op een 404-pagina terecht komen. Hun proces op de website wordt verbroken en ze kunnen niet vinden waar ze naar opzoek zijn. Door de 404-pagina goed te ontwerpen kan je deze frustratie verhelpen en de bezoeker makkelijk verder helpen. In dit artikel vind je mijn 10 tips om een gebruiksvriendelijke 404-pagina te ontwerpen.
1. Wees duidelijk naar je bezoekers
Als eerste is het belangrijk dat je duidelijk maakt aan je gebruiker dat hij is aangekomen op een pagina die niet meer bestaat. Zorg er dus voor dat de 404-pagina niet lijkt op een standaardpagina met inhoud. Geef duidelijk aan dat de pagina waar de bezoeker naar zocht, niet gevonden kan worden. Door de kop de centreren is het direct helder dat dat de belangrijkste boodschap op de pagina is. Daarnaast moet het ook de grootste tekst op de pagina zijn om ervoor te zorgen dat de bezoeker dit als eerste leest. Zie hieronder de simpele, maar duidelijke 404-pagina van Behance. De boodschap is het eerste wat je in je opneemt.
2. Houd de 404-pagina luchtig
Om ervoor te zorgen dat de bezoeker luchtig met de foutmelding omgaat is het goed om de 404-pagina ook luchtig te houden. Het internet staat vol met leuke voorbeelden van grappige berichten op 404-pagina’s. Dit is niet zomaar, de frustratie van de bezoeker zakt een beetje weg als de 404-pagina op een luchtige manier omgaat met de voorgedane fout. Hieronder zie je twee voorbeelden van luchtige 404-pagina’s. Bij deze voorbeelden is de boodschap duidelijk en zit de luchtigheid de gebruiksvriendelijkheid niet in de weg.
Bij dit voorbeeld sluit de 404-pagina helemaal aan bij de persoonlijkheid van de website. Mari Kondo staat bekend om haar opruim- en organisatietips en de tekst op haar 404-pagina brengt deze filosofie haarfijn over.
Carwow is een website om jouw perfecte auto te vinden. Wanneer je op de 404-pagina van de website van Carwow terecht komt gebruiken ze een slimme manier om je op de website te houden. Bezoekers van de 404-pagina krijgen een 8-bitracespelletje waarin ze obstakels moeten ontwijken. Het enige nadeel van een 404-pagina met veel afleiding is dat de bezoeker zich niet volledig op zijn einddoel kan focussen.
3. Behandel de 404-pagina als een landingspagina
Vaak zullen bezoekers de 404-pagina als eerste pagina te zien krijgen, bijvoorbeeld als ze op een foutieve link klikken of als de gebruiker een URL verkeerd overtypt. De 404-pagina functioneert hierdoor indirect ook als een soort landingspagina. Het is daarom belangrijk dat de 404-pagina het merk van de website goed naar voren laat komen, zonder te veel op de standaardpagina’s te lijken. Denk hierbij aan het gebruik van consistente kleuren, beeld en typografie. Zorg ervoor dat het duidelijk is op welke site de bezoeker zich bevindt door duidelijk een logo van het bedrijf op de pagina te plaatsen.
4. Geef de gebruiker de mogelijkheid om te zoeken
Wanneer je website uit honderden pagina’s bestaat is het fijn als de bezoeker middels een zoekbalk door de website kan zoeken zodat hij zelf kan navigeren naar de pagina die hij zocht. Zorg dat de pagina’s die in de zoekresultaten worden aangeboden wel bestaat. Een zoekbalk op de 404-pagina geeft de bezoeker volledige controle om te navigeren naar zijn bestemming.
Zorg ervoor dat de zoekbalk ook duidelijk als zoekbalk te herkennen is: een ingekaderd invoerveld met een prominente knop om te zoeken. Deze zoekbalk kun je het beste direct in het zicht plaatsen, bijvoorbeeld onder de kop van de foutmelding. Wanneer de zoekbalk prominent op de pagina aanwezig is, communiceer je indirect dat dit de beste manier voor je bezoeker is om te vinden wat hij zocht.
De 404-pagina van OptinMonster is heel simpel, maar effectief. De bezoeker heeft 3 opties: hij kanterug naar de home, hij kan naar contactpagina of hij kan zoeken binnen de website. Wat de bezoeker ook besluit te doen, de uitkomst is altijd hetzelfde. Hij blijft binnen de website.
5. Toon links naar de meest bezochte pagina’s
Een makkelijke en efficiënte manier om gebruikers snel verder op weg te helpen is om een aantal links naar de meest bezochte pagina’s binnen je website aan te bieden. De kans bestaat namelijk dat de bezoeker naar die inhoud op zoek is of vanuit die inhoud kan navigeren naar wat hij zoekt. Deze manier is het meest effectief als je website uit minder pagina’s bestaat. Een goede manier om deze links aan te bieden is als lijst met inline links, dit is voor de gebruiker namelijk het makkelijkst om doorheen te scannen.
6. Geef de bezoeker de mogelijkheid om feedback te sturen
Door bezoekers de mogelijkheid te geven om feedback achter te laten over je 404-pagina geef je ze het gevoel dat de fout niet bij hun ligt. Daarnaast geef je op deze manier je bezoekers de mogelijkheid om hun frustratie op een constructieve manier te uiten. Ook heeft het het praktische voordeel dat de websitebeheerder de mogelijkheid krijgt om de 404-foutmelding te herstellen zodat toekomstige bezoekers deze niet meer zullen tegenkomen.
Een goede manier om je bezoeker de mogelijkheid te geven om feedback achter te laten is om een simpel contactformulier met twee velden toe te voegen, één voor een e-mailadres en één voor de feedback.
7. Bied content aan op basis van de URL
Eén van de voornaamste redenen waarom gebruikers op een 404-pagina terecht komen is omdat ze een spelfout maken tijdens het invoeren van een URL of omdat een link een spelfout bevat. De paginalink die ze hebben proberen op te halen bevat de steekwoorden waar je bezoeker hoogstwaarschijnlijk naar op zoek was. Het is mogelijk om deze steekwoorden op te halen en zo een inschatting te maken welke pagina je bezoeker bedoelde. Voor de bezoeker is het een aangename verrassing als hij na het maken van een invoerfout toch de pagina te zien krijgt die hij bedoelde.
Je kunt de relevante pagina’s op twee manieren aanbieden. Je kunt de steekwoorden automatisch in de zoekbalk plaatsen en daaronder direct de resultaten laten zien. De werkt het beste als het niet zeker is of de steekwoorden van de ingevoerde URL direct overeenkomen met bestaande pagina’s. Als er wel een exacte match is dan kan je de URL van deze pagina aanbieden als inline link onder de kop. Zorg er wel voor dat deze link duidelijk zichtbaar is en dat de gehele URL te lezen is, zo kan de bezoeker ook zien welke spelfout hij heeft gemaakt tijdens het invoeren van de URL.
8. Verwerk de foutmelding als onderdeel van de website
De omvang van de foutmelding lijkt veel minder groot als de pagina nog steeds deel uit lijkt te maken van de website. Zorg ervoor dat de navigatiebalk, het logo van je bedrijf en de footer zichtbaar zijn op de 404-pagina. De bezoeker ziet dan dat hij zich nog steeds op de juiste website bevindt, alleen op een pagina die niet bestaat. Daarnaast geven de navigatie- en footerlinks snelle routes naar relevante content. De inhoud van de 404-pagina moet wel visueel duidelijk losstaan van de andere inhoud van je website.
9. Maak de 404-pagina toegankelijk
Het is belangrijk dat de 404-pagina op alle apparaten goed werkt en dat deze toegankelijk is voor slechtziende bezoekers, bezoekers met kleurenblindheid en bezoekers die een screenreader gebruiken. Zorg ervoor dat de elementen op je pagina genoeg contrast hebben tegenover de achtergrond, dat er genoeg witruimte om de elementen zit en dat de foutmelding als eerste wordt voorgelezen door een screenreader.
10. Verberg geen cruciale informatie
Zorg ervoor dat alle belangrijke informatie van je 404-pagina boven de fold staat, zo hoeft de gebruiker niet te scrollen om belangrijke informatie te vinden. Dit geldt ook voor de 404-pagina op mobiele apparaten. Het is belangrijker om de gebruiker goede vervolgstappen aan te bieden dan dat de pagina leuk aangekleed is. Functionaliteit is belangrijker dan opmaak.
Conclusie
Er zijn genoeg manieren om een 404-pagina functioneel en gebruiksvriendelijk te maken. Probeer niet alle bovengenoemde tips in je 404-pagina te proppen, maar probeer geschikte ontwerppatronen toe te passen. Welke scenario’s zullen het meeste binnen jouw website voorkomen, naar welke inhoud zijn jouw bezoekers hoogstwaarschijnlijk opzoek en hoe kan je ze zo goed mogelijk naar hun doel helpen? Het belangrijkste is dat je tijdens het ontwerpen van een 404-pagina de volgende richtlijnen aanhoudt:
- Gebruik een duidelijke hiërarchie en vormgeving
- Zorg dat alle vervolgopties makkelijk te vinden en goed scanbaar zijn.
- De pagina moet toegankelijk zijn voor alle bezoekers. Zorg ervoor dat de pagina werkt op mobiel, geoptimaliseerd is voor screenreaders en dat hij voldoet aan toegankelijkheidsrichtlijnen.
- De 404-pagina moet visueel een onderdeel zijn van de website, maar moet wel in één oogopslag herkenbaar zijn als foutmelding.
Heb je hulp nodig om de 404-pagina van jouw website gebruiksvriendelijk en efficiënt vorm te geven? Plan dan een gratis strategisch gesprek van een half uur in of neem contact met ons op.
