De 7 hoofdzonden van webdesign
Het wereldwijde web is een belangrijke plaats voor mij. Net zoals een fanatiek lid van een wijkcomité wil ik ook dat mijn thuisbasis een aangename plaats is om te vertoeven. Helaas zijn er nog te veel websites die voor frustratie en walging zorgen in plaats van een verademende ervaring te bieden. Vanuit mijn ervaring en gemotiveerd door een utopische visie op het internet noteer ik de zeven hoofdzonden van webdesign.
Alle tips in dit artikel kunnen eigenlijk worden herleid naar de algemene regel: KISS. Keep it Short and Simple. Houd dit dus steeds in het achterhoofd wanneer je een website aan het bouwen of onderhouden bent.
Achtergrondmuziek en video’s die automatisch afspelen
Tenzij je een interactieve horrorervaring wil bieden aan je bezoekers is het automatisch afspelen van muziek absoluut een no-go. Niemand staat ook te wachten op filmpjes die uit zichzelf beginnen spelen wanneer ze op je website terechtkomen. Ik zal vast niet de eerste zijn die met zijn hart in de keel paniekerig naar het tabblad zoekt dat geluid produceert. Bespaar je bezoekers de frustratie en laat niets automatisch afspelen. Gewoon niet doen.
Hoe het wel moet
Voorzie gerust een mediaspeler of een filmpje, maar geef bezoekers altijd de keuze om het zelf te activeren. Het is ook mogelijk om de video alvast te laten spelen, maar het geluid standaard uit te schakelen. Dit is echter niet wenselijk voor mensen die je website bezoeken via hun mobiel apparaat en zo heel wat mobiele data moeten inleveren voor een bezoekje aan je website. KISS en laat niets automatisch afspelen.
Ik zal vast niet de eerste zijn die met zijn hart in de keel paniekerig naar het tabblad zoekt dat geluid produceert.
Pop-ups en pop-unders
Laat handen zien, wie houdt er van pop-ups? Niemand? Wat een verrassing. Toch hebben veel te veel websites nog steeds pop-ups. Oorspronkelijk was het een prima techniek die de gebruiksvriendelijkheid van je website stevig omhoog kan krijgen, maar het is de wijze waarop het gebruikt wordt waardoor de techniek zo’n negatieve connotatie heeft gekregen. Er is niets mis met een pop-up die getoond wordt wanneer je een actie wil uitvoeren en je een bevestiging te zien krijgt in een melding die op je scherm springt. Pop-ups die echter op een willekeurig moment op je scherm verschijnen met een reclameboodschap, daar is álles mis mee.
Hoe het wel moet
Gebruik pop-ups niet voor reclameboodschappen, maar zet ze in als handige techniek om dingen extra uit te lichten. Denk dan vooral aan bevestigingen wanneer gebruikers een actie uitvoeren, zoals op een knop klikken om een formulier te verzenden. Voor mensen die pop-unders gebruiken is er een speciaal plaatsje in de hel, dus laat die techniek wijselijk opzij liggen.
Slechte toegankelijkheid op mobiele apparaten
Het is 2018 en het zou geen verrassing mogen zijn dat de meeste websites worden bezocht via een mobiel apparaat zoals een smartphone of een tablet. Frappant genoeg zijn er nog veel websites die niet geoptimaliseerd zijn voor de kleinere schermformaten van onder andere smartphones. Bezoekers moeten het dus doen met een onhandige desktopversie op hun smartphone waardoor ze constant moeten inzoom en uitzoomen om de gewenste informatie op hun scherm te krijgen. Als een concurrent dezelfde informatie aanbiedt in een formaat dat zich perfect schaalt naar de smartphone van de gebruiker, dan is het wel duidelijk welke website de voorkeur zal krijgen.
Hoe het wel moet
Zorg ervoor dat je website over een design beschikt dat schaalt naargelang het apparaat waarop de website wordt bekeken. In het vakjargon noemen we dat een ‘responsive design’. Doe het niet alleen voor je gebruikers, maar ook voor je eigen gewin. Google zal namelijk minder waarde hechten aan websites die niet goed worden weergegeven op mobiele apparaten. Dit betekent dat je website slechter zal scoren in Google en wellicht onder de website van je concurrenten zal komen te staan (tenzij je concurrent echt een héél slechte website heeft, maar dan moet je een andere concurrent zoeken om je aan te spiegelen).
Te veel tekst
Mensen lezen je website niet, ze scannen. Een lange lap tekst kan dan wel veel belangrijke informatie bevatten, maar helaas zal het bezoekers enkel afschrikken. Gebruikers gaan op zoek naar woorden die opvallen, tussentitels, lijsten, etc. Copywriting voor het wereldwijde web is een vak op zich, dus verwacht niet om lange lappen tekst zomaar op je website te plaatsen en er hoog mee te scoren.
Hoe het wel moet
Gebruik korte teksten en duid in die teksten ook nogmaals de kernwoorden aan, net zoals ik in de tekst hierboven heb gedaan. Probeer om de tekst zoveel mogelijk op te delen in alinea’s met tussentitels en verwerk lijsten, afbeeldingen en citaten om de doorlopende tekst wat te breken. Het internet biedt heel wat mogelijkheden om nieuwe vormen van media (audio, video, social media publicaties, etc.) in teksten te verwerken dus maak hier zeker gebruik van.
Slecht kleurgebruik
Van sommige websites lijkt het alsof ze gemaakt zijn door een kleurenblinde (ik mag dat zeggen want ik ben zelf kleurenblind). Ik heb het over de webdesigners waarvan hun kleurenspectrum beperkt is tot de basiskleuren zoals geel, blauw, groen en rood en zich ook genoodzaakt voelen om al deze kleuren gelijktijdig te verwerken in hun website. Een blauwe header, een groene sidebar, een rode achtergrond en gele letters (bij voorkeur in Comic Sans).
Hoe het wel moet
Zoek congruente kleuren. Met andere woorden, kleuren die niet ‘vloeken’. Hiervoor kan je beroep doen op de website color.adobe.com. Hier kunnen mensen kleurenpaletten indienen die vervolgens omhoog kunnen worden gestemd. Zo vind je makkelijk een kleurenpallet dat door veel mensen leuk wordt gevonden.
Vermijd achtergrondafbeeldingen
Beginnende webdesigners denken altijd dat ze een website volledig moeten opvullen, dat witruimte de vijand is. Helemaal niet, witruimte is je vriend. Probeer dus niet om de achtergrond van je website op te vullen, niet met een kleur en al zeker niet met een afbeelding. Er is niets dat amateuristischer overkomt dan een willekeurig gekozen afbeelding van je huisdier als achtergrond.
Hoe het wel moet
Bij twijfel grijp je terug naar het KISS-principe en gebruik je geen achtergrondafbeelding, laat het gewoon wit. De meeste websites die je bezoekt hebben ongetwijfeld een witte achtergrond dus internetgebruikers zijn het reeds gewend. Een extra tip die kan worden doorgetrokken naar alle aspecten van webdesign: als je kan kiezen tussen verschillende opties, kies dan voor de optie die internetgebruikers reeds gewend zijn. Als je er echt van overtuigd bent dat een achtergrond een meerwaarde is voor je website, google dan even op ‘subtle patterns’ om een subtiel patroon te vinden als achtergrond.
Ondoordachte navigatie
Nog voordat je begint met het maken van je website, moet je nadenken over de informatie-architectuur van je site. Dit betekent dat je effectief al gaat bepalen wat er op je website komt en hoe je die informatie hiërarchisch zal opbouwen. Logisch, zou je denken, je bouwt immers ook geen huis zonder gefundeerde blauwdruk. Toch gebeurt het maar al te vaak dat iemand een website begint te bouwen zonder vooraf na te denken wat erop komt.
Als resultaat heb je vervolgens een websites waar elke vorm van structuur in ontbreekt. Er zijn geen logische onderverdelingen en de bezoeker weet niet waar hij moet klikken om de informatie te krijgen die hij zoekt.
Hoe het wel moet
Nog voordat je begint met het bouwen van je website, schrijf je alle pagina’s die je op je website wil op afzonderlijke post-it’s. Een post-it voor de ‘over ons’ pagina, de contactpagina, productpagina … Vervolgens ga je puzzelen en de post-it’s groeperen en er een hiërarchie aan toekennen. Wanneer je meerdere pagina’s hebt die bij elkaar horen, verzin dan een verzamelterm voor deze items. Zo kan je de navigatie voor je website uitdokteren. De vuistregel hier is om niet meer dan een 7-tal hoofditems in je navigatiebalk te hebben.
Het wereldwijde web is een belangrijke plaats voor mij. Net zoals een fanatiek lid van een wijkcomité wil ik ook dat mijn thuisbasis een aangename plaats is om te vertoeven. Helaas zijn er nog te veel websites die voor frustratie en walging zorgen in plaats van een verademende ervaring te bieden. Vanuit mijn ervaring en gemotiveerd door een utopische visie op het internet noteer ik de zeven hoofdzonden van webdesign.
Alle tips in dit artikel kunnen eigenlijk worden herleid naar de algemene regel: KISS. Keep it Short and Simple. Houd dit dus steeds in het achterhoofd wanneer je een website aan het bouwen of onderhouden bent.
Achtergrondmuziek en video’s die automatisch afspelen
Tenzij je een interactieve horrorervaring wil bieden aan je bezoekers is het automatisch afspelen van muziek absoluut een no-go. Niemand staat ook te wachten op filmpjes die uit zichzelf beginnen spelen wanneer ze op je website terechtkomen. Ik zal vast niet de eerste zijn die met zijn hart in de keel paniekerig naar het tabblad zoekt dat geluid produceert. Bespaar je bezoekers de frustratie en laat niets automatisch afspelen. Gewoon niet doen.
Hoe het wel moet
Voorzie gerust een mediaspeler of een filmpje, maar geef bezoekers altijd de keuze om het zelf te activeren. Het is ook mogelijk om de video alvast te laten spelen, maar het geluid standaard uit te schakelen. Dit is echter niet wenselijk voor mensen die je website bezoeken via hun mobiel apparaat en zo heel wat mobiele data moeten inleveren voor een bezoekje aan je website. KISS en laat niets automatisch afspelen.
Ik zal vast niet de eerste zijn die met zijn hart in de keel paniekerig naar het tabblad zoekt dat geluid produceert.
Pop-ups en pop-unders
Laat handen zien, wie houdt er van pop-ups? Niemand? Wat een verrassing. Toch hebben veel te veel websites nog steeds pop-ups. Oorspronkelijk was het een prima techniek die de gebruiksvriendelijkheid van je website stevig omhoog kan krijgen, maar het is de wijze waarop het gebruikt wordt waardoor de techniek zo’n negatieve connotatie heeft gekregen. Er is niets mis met een pop-up die getoond wordt wanneer je een actie wil uitvoeren en je een bevestiging te zien krijgt in een melding die op je scherm springt. Pop-ups die echter op een willekeurig moment op je scherm verschijnen met een reclameboodschap, daar is álles mis mee.
Hoe het wel moet
Gebruik pop-ups niet voor reclameboodschappen, maar zet ze in als handige techniek om dingen extra uit te lichten. Denk dan vooral aan bevestigingen wanneer gebruikers een actie uitvoeren, zoals op een knop klikken om een formulier te verzenden. Voor mensen die pop-unders gebruiken is er een speciaal plaatsje in de hel, dus laat die techniek wijselijk opzij liggen.
Slechte toegankelijkheid op mobiele apparaten
Het is 2018 en het zou geen verrassing mogen zijn dat de meeste websites worden bezocht via een mobiel apparaat zoals een smartphone of een tablet. Frappant genoeg zijn er nog veel websites die niet geoptimaliseerd zijn voor de kleinere schermformaten van onder andere smartphones. Bezoekers moeten het dus doen met een onhandige desktopversie op hun smartphone waardoor ze constant moeten inzoom en uitzoomen om de gewenste informatie op hun scherm te krijgen. Als een concurrent dezelfde informatie aanbiedt in een formaat dat zich perfect schaalt naar de smartphone van de gebruiker, dan is het wel duidelijk welke website de voorkeur zal krijgen.
Hoe het wel moet
Zorg ervoor dat je website over een design beschikt dat schaalt naargelang het apparaat waarop de website wordt bekeken. In het vakjargon noemen we dat een ‘responsive design’. Doe het niet alleen voor je gebruikers, maar ook voor je eigen gewin. Google zal namelijk minder waarde hechten aan websites die niet goed worden weergegeven op mobiele apparaten. Dit betekent dat je website slechter zal scoren in Google en wellicht onder de website van je concurrenten zal komen te staan (tenzij je concurrent echt een héél slechte website heeft, maar dan moet je een andere concurrent zoeken om je aan te spiegelen).
Te veel tekst
Mensen lezen je website niet, ze scannen. Een lange lap tekst kan dan wel veel belangrijke informatie bevatten, maar helaas zal het bezoekers enkel afschrikken. Gebruikers gaan op zoek naar woorden die opvallen, tussentitels, lijsten, etc. Copywriting voor het wereldwijde web is een vak op zich, dus verwacht niet om lange lappen tekst zomaar op je website te plaatsen en er hoog mee te scoren.
Hoe het wel moet
Gebruik korte teksten en duid in die teksten ook nogmaals de kernwoorden aan, net zoals ik in de tekst hierboven heb gedaan. Probeer om de tekst zoveel mogelijk op te delen in alinea’s met tussentitels en verwerk lijsten, afbeeldingen en citaten om de doorlopende tekst wat te breken. Het internet biedt heel wat mogelijkheden om nieuwe vormen van media (audio, video, social media publicaties, etc.) in teksten te verwerken dus maak hier zeker gebruik van.
Slecht kleurgebruik
Van sommige websites lijkt het alsof ze gemaakt zijn door een kleurenblinde (ik mag dat zeggen want ik ben zelf kleurenblind). Ik heb het over de webdesigners waarvan hun kleurenspectrum beperkt is tot de basiskleuren zoals geel, blauw, groen en rood en zich ook genoodzaakt voelen om al deze kleuren gelijktijdig te verwerken in hun website. Een blauwe header, een groene sidebar, een rode achtergrond en gele letters (bij voorkeur in Comic Sans).
Hoe het wel moet
Zoek congruente kleuren. Met andere woorden, kleuren die niet ‘vloeken’. Hiervoor kan je beroep doen op de website color.adobe.com. Hier kunnen mensen kleurenpaletten indienen die vervolgens omhoog kunnen worden gestemd. Zo vind je makkelijk een kleurenpallet dat door veel mensen leuk wordt gevonden.
Vermijd achtergrondafbeeldingen
Beginnende webdesigners denken altijd dat ze een website volledig moeten opvullen, dat witruimte de vijand is. Helemaal niet, witruimte is je vriend. Probeer dus niet om de achtergrond van je website op te vullen, niet met een kleur en al zeker niet met een afbeelding. Er is niets dat amateuristischer overkomt dan een willekeurig gekozen afbeelding van je huisdier als achtergrond.
Hoe het wel moet
Bij twijfel grijp je terug naar het KISS-principe en gebruik je geen achtergrondafbeelding, laat het gewoon wit. De meeste websites die je bezoekt hebben ongetwijfeld een witte achtergrond dus internetgebruikers zijn het reeds gewend. Een extra tip die kan worden doorgetrokken naar alle aspecten van webdesign: als je kan kiezen tussen verschillende opties, kies dan voor de optie die internetgebruikers reeds gewend zijn. Als je er echt van overtuigd bent dat een achtergrond een meerwaarde is voor je website, google dan even op ‘subtle patterns’ om een subtiel patroon te vinden als achtergrond.
Ondoordachte navigatie
Nog voordat je begint met het maken van je website, moet je nadenken over de informatie-architectuur van je site. Dit betekent dat je effectief al gaat bepalen wat er op je website komt en hoe je die informatie hiërarchisch zal opbouwen. Logisch, zou je denken, je bouwt immers ook geen huis zonder gefundeerde blauwdruk. Toch gebeurt het maar al te vaak dat iemand een website begint te bouwen zonder vooraf na te denken wat erop komt.
Als resultaat heb je vervolgens een websites waar elke vorm van structuur in ontbreekt. Er zijn geen logische onderverdelingen en de bezoeker weet niet waar hij moet klikken om de informatie te krijgen die hij zoekt.
Hoe het wel moet
Nog voordat je begint met het bouwen van je website, schrijf je alle pagina’s die je op je website wil op afzonderlijke post-it’s. Een post-it voor de ‘over ons’ pagina, de contactpagina, productpagina … Vervolgens ga je puzzelen en de post-it’s groeperen en er een hiërarchie aan toekennen. Wanneer je meerdere pagina’s hebt die bij elkaar horen, verzin dan een verzamelterm voor deze items. Zo kan je de navigatie voor je website uitdokteren. De vuistregel hier is om niet meer dan een 7-tal hoofditems in je navigatiebalk te hebben.
