Een succesvolle website komt niet vanzelf. Een website moet niet alleen mooi zijn, maar moet in de eerste plaats de specifieke boodschap verkondigen en tegelijkertijd de bezoeker boeien en aanzetten tot actie. Verschillende factoren dragen hieraan bij, zoals consistentie, kleurgebruik, lettertype, afbeeldingen, eenvoud en functionaliteit.
Bij het ontwerpen van een website zijn er dus verschillende elementen die mee bepalen hoe de website overkomt. Een goed ontworpen website helpt om vertrouwen te creëren en zet de bezoekers aan tot actie. Een goede gebruikerservaring creëren houdt in dat je website geoptimaliseerd is voor gebruiksvriendelijkheid (vorm en esthetiek) en functionaliteit. Hieronder vind je een aantal webdesign principes terug waarmee je alvast rekening kan houden bij het ontwerpen van je website.
“Design is not just what it looks like and feels like, design is how it works”
Steve Jobs
1. Denk vanuit de gebruiker
Het is belangrijk om veel aandacht te besteden aan de gebruikerservaring. Je moet er enerzijds voor zorgen dat je bezoekers makkelijk de juiste info vinden, maar anderzijds wil je je bezoekers ook converteren naar klanten.
Enkele tips:
- Maak een lijst van taken die bezoekers op je website kunnen uitvoeren en bepaal hoe je dit voor hen zo makkelijk mogelijk kan maken. Zorg ervoor dat elke pagina een duidelijk doel heeft.
- Wijk niet te veel af van de norm. Je mag zeker origineel zijn, maar een website zou zoveel mogelijk moeten doen wat gebruikers ervan verwachten. Zo gaat een bezoeker er altijd van uit dat hij kan klikken op het logo om terug te gaan naar de homepagina.
- Spreek dezelfde taal als je bezoeker. Gebruik termen die hij of zij ook gebruikt en de afbeeldingen en icoontjes waaraan ze gewend zijn. Dit is belangrijk voor de beleving van de bezoeker.
2. Visuele hiërarchie
Hiërarchie verwijst naar de rangschikking van elementen. Hiermee geef je aan welke elementen belangrijk zijn en welke minder. Houd bij het ontwerp van je website rekening met visuele hiërarchie: de volgorde waarin je bezoeker de elementen van je website ziet. Wanneer mensen op een website komen, dan ‘scannen’ ze deze immers alvorens ze echt de inhoud gaan lezen.
Enkele tips:
- Verdeel de inhoud op in logische blokken en gebruik verschillende hoofdingen. Zo ziet de bezoeker direct welke stukken belangrijker zijn dan andere.
- Let erop dat het belangrijkste deel van de webpagina (het focal point) direct in het oog springt.
- Denk ook aan het formaat. Groter=belangrijker. Kleiner=minder belangrijk.
3. Verminder keuzestress
De Wet van Hicks stelt dat hoe meer keuze er is, hoe langer het zal duren om tot een keuze te komen. Als een bezoeker te veel keuze heeft en niet meer weet waar hij eerst moet klikken of kijken, dan zal hij al gauw weer vertrekken. Less is altijd more!
Nog een paar tips:
- Houd de mogelijke keuzes zo beperkt mogelijk.
- Zorg dat elke pagina een duidelijk doel heeft.
- Zorg voor een goede flow. Zo kan je de gebruiker stap voor stap helpen om zijn weg te vinden in de website.
- Bij webshops kan je bv. een filterfunctie toevoegen, zodat gebruikers makkelijker de producten kunnen vinden waarin ze geïnteresseerd zijn.
4. Duidelijke call-to-action
Een call-to-action is een vraag om een actie uit te voeren op een webpagina. Meestal gaat het hier om een opvallende knop waarmee je een offerte kan aanvragen, je kan inschrijven voor een cursus, een product kan aankopen,… Zorg dat elke pagina één duidelijke call-to-action heeft.
Houd hiermee rekening met volgende tips:
- Vraag liefst slechts één actie per pagina. Een tweede vraag tot actie kan eventueel, maar laat de aandacht dan niet teveel afleiden van de primaire call-to-action.
- Plaats de call-to-action ook op de juiste plaats. Als een koper een fysieke winkel binnenkomt, duw je ook niet direct een product in zijn handen en roep je ‘koop dit!’. Plaats de call-to-action dus op het juiste moment in de verkoopcyclus.
- Zorg ervoor dat de knop voldoende opvalt. Gebruik een opvallende kleur, maak de knop groot genoeg en zorg voor voldoende witruimte rond de knop. Wist je bijvoorbeeld dat bezoekers vlugger op een groene knop zullen klikken dan op een rode?
- Doe de oogknijptest. Als je je ogen tot spleetjes knijpt, wat zie je dan? Vallen de knoppen nog voldoende op?
- Maak de tekst van de knop heel specifiek én actief. Vermijd dus passieve werkwoorden zoals ‘worden’ en ‘zijn’ of vage instructies als ‘klik hier’ en ‘lees hier’. Gebruik liefst de bevelvorm en voeg een zekere urgentie toe. Vb: ‘ontdek onze deals nu’, download nu ons gratis werkboek’, ‘boek nu een gratis call’,…
5. Juist kleurgebruik
Het kleurenpalet moet voldoen aan jouw huisstijl en wordt consistent overal toegepast. Kies één primaire kleur (deze kleur zit meestal ook in je logo). Kies daarnaast nog een secundaire kleur (de secundaire kleur kan de primaire kleur complementeren of het kan juist een contrast vormen) en eventueel enkele andere bijpassende kleuren.
Nog wat tips:
- Beperk je kleurgebruik en voorkom dat bepaalde accenten als storend worden ervaren.
- Je kan ook gebruik maken van de 60-30-10 regel: de primaire kleur beslaat ongeveer 60 procent van de lay-out, de secundaire kleur maakt 30 procent uit en een derde kleur voegt met 10 procent extra accenten toe. Deze verdeling heeft een evenwichtig effect op de gebruiker.
- Denk er ook aan dat kleuren een psychologische betekenis hebben die moet passen bij het doel van je website.
- Zorg voor contrast tussen je kleuren, vb. zwarte tekst op een witte achtergrond om de leesbaarheid te vergroten. Plaats bv. ook geen witte tekst op een afbeelding met lichte kleuren.
- Gebruik geen superheldere of té donkere kleuren op je website.
- Laat belangrijke informatie opvallen. Gebruik bijvoorbeeld een accentkleur om je call-to-action knoppen te doen opvallen.
- Gebruik goede kleurencombinaties. Op https://coolors.co/ of https://color.adobe.com/create kan je zelf kleurencombinaties laten genereren.
- Wees minimalistisch in je kleurgebruik.
- Houd rekening met kleurenblindheid. Zorg ervoor dat je ontwerp nog steeds bruikbaar is voor mensen die het onderscheid tussen bepaalde kleuren niet kunnen maken.
6. Goed gekozen afbeeldingen
Afbeeldingen zijn heel belangrijk voor je website. Ze bepalen voor een groot deel de sfeer en de uitstraling. De gebruikte foto’s moeten sprekend zijn en van goede kwaliteit.
- Voeg altijd ALT-tekst (=beschrijvende tekst) toe aan alle afbeeldingen.
- Geef je bestandsnamen een betekenisvolle, relevante bestandsnaam met een paar zoekwoorden erin, dus niet ‘DSC9872.jpg’, maar vb. ‘afbeeldingen-optimaliseren-smush.jpg’.
- Gebruik afbeeldingen met menselijke gezichten ipv illustraties, dit trekt mensen meer aan.
- Optimaliseer je afbeeldingen naar laadsnelheid toe.
- Laat foto’s maken door een goede fotograaf of gebruik gratis stockfoto’s. Je gebruikt best trouwens niet alleen stockfoto’s, want mensen voelen dat al gauw aan. Investeren in een fotoshoot loont dus zeker.
- Houd altijd rekening met copyright!
- Als je tekst over je afbeeldingen wenst te plaatsen, zorg dan dat deze leesbaar is. Je kan een filter over je afbeeldingen plaatsen of de tekst in een apart gekleurd blok plaatsen.
7. Typografie
Het juiste lettertype past bij jouw branding en trekt de aandacht van de bezoeker. Maar daarnaast moet het lettertype ook leesbaar en functioneel zijn. Je kan een ander lettertype kiezen voor de teksten en de hoofdingen. Zorg er dan wel voor dat ze bij elkaar passen. Op https://www.reliablepsd.com/ultimate-google-font-pairings/ vind je een aantal mooie voorbeelden om inspiratie op te doen.
- Gebruik zeker niet te veel lettertypes. Eén lettertype voor je logo, één lettertype voor je menu’s en hoofdingen en een laatste voor de inhoud is een goede vuistregel.
- Zorg ervoor dat je lettertype een contrasterende kleur heeft, zodat de tekst duidelijk leesbaar is.
- Maak tekst niet te klein en weest consistent met de gekozen lettergrootte.
- Denk ook aan de regelafstand (de afstand tussen de lijnen). Zorg dat de tekstlijnen niet te dicht tegen elkaar vallen.
- Zorg voor niet te grote lappen tekst. Maak je tekstblok niet te breed (werk eventueel met tekstkolommen, zoals in een krant) en breek lange teksten op in verschillende stukken. Maak gebruik van vetgedrukte trefwoorden en opsommingstekens om je tekst helder en duidelijk te kunnen communiceren.
- Zorg er ook voor dat je een lettertype kiest dat standaard bij iedereen geïnstalleerd staat. Google Fonts biedt heel veel gratis en veilige lettertypes.
Lees ook: Meer tips over het kiezen van het juiste lettertype
8. Duidelijke navigatie
Zorg ervoor dat bezoekers makkelijk door jouw website kunnen navigeren. Als het niet duidelijk is wat bezoekers kunnen doen op je site of waar ze alles kunnen vinden, dan zullen ze al gauw afhaken.
Het is belangrijk om je hoofdmenu overzichtelijk te houden. Als je teveel menu items hebt, dan weet een bezoeker niet waar hij moet kijken en raakt hij het overzicht kwijt. Daag jezelf dus uit om je menu te beperken tot zo weinig mogelijk items, met een maximum van 7.
Indien echt nodig, dan kan je eventueel werken met onderliggende menu items die uitklappen, maar probeer deze ook te beperken tot maximaal 2 niveau’s diep. Gebruikers vinden die dropdown menu’s vaak frustrerend omdat ze eerst moeten klikken vooraleer ze kunnen zien wat er onder zit.
Hier zijn enkele tips:
- Houd de menustructuur zo simpel mogelijk met niet al te veel items (max. 6 à 7 items is een goede richtlijn).
- Beperkt het aantal onderliggende pagina’s en ga zeker niet te diep (max. 2 niveau’s diep).
- Gebruik korte, duidelijke menutitels (trefwoorden) die mensen begrijpen. Gebruik geen vakjargon.
- Plaats de belangrijkste info vooraan in je menu.
- Voeg een zoekfunctie toe aan je hoofdmenu, vooral als je een website hebt met veel inhoud.
- Vermijd dat gebruikers teveel moeten klikken. Denk aan de three-click regel. Gebruikers zouden de gewenste info moeten kunnen vinden met slechts drie muisklikken.
9. Balans
Probeer de visuele elementen op een webpagina op een evenwichtige, gebalanceerde manier in te delen. Dit kan je bijvoorbeeld doen door tekst of andere elementen op je pagina te centreren. Je kan ook symmetrie bekomen door een groot tekstblok met een grote afbeelding ernaast te balanceren. Of je kan elementen verdelen rond een centraal punt.
10. Contrast
Speel met contrast. Ons brein is erop gericht om verschillen te ontdekken. Zo kan je bv. bij prijstabellen één specifiek pakket (datgene wat je liefst wil verkopen) laten opvallen door het eruit te laten springen en een andere achtergrondkleur te geven.
Ook kan je experimenteren met het verrassingseffect. Iets dat verrassend is, wat we niet verwachten, zal vlugger onze aandacht trekken. Maar wees hier ook voorzichtig mee, je wil je bezoeker ook niet afschrikken.
11. Gebruik witruimte
Het gebruik van witruimte (die trouwens niet noodzakelijk wit hoeft te zijn) kan helpen om bepaalde delen van je website eruit te laten springen. Het wordt ook vaak negatieve of lege ruimte genoemd. Het zorgt voor meer focus, balans en vergroot de leesbaarheid. Het maakt een pagina overzichtelijker.
- Laat tekst nooit een afbeelding raken. Zorg altijd voor ruimte tussen de verschillende elementen.
- Verdeel je pagina’s in verschillende secties.
- Deel lange teksten op in alinea’s.
Verdeel elementen dus gelijkmatig over je pagina, zodat gebruikers duidelijk onderscheid kunnen maken tussen de verschillende delen.
12. Volg het Z-patroon
Mensen zijn gewoontedieren. Studies hebben aangewezen dat wij de informatie op een website scannen volgens een Z-patroon. Eerst lezen we de belangrijkste info bovenaan de pagina, dan scannen we verder naar links naar cijfers, opsommingstekens,… Daarna gaan we terug naar de rechterkant op zoek naar vetgedrukte tekst of hoofdingen die opvallen…
Van dit Z-patroon kunnen we bij webdesign handig gebruik maken door info te tonen in volgorde van belangrijkheid (van links naar rechts en van boven naar onder). Zo plaatsen we het logo bijvoorbeeld standaard in de linkerbovenhoek, daar begint de bezoeker immers te kijken.
13. Wees consistent
Ik heb het al aangehaald bij sommige andere principes, maar consistency is key! Het zorg voor samenhang op je webpagina en tussen de verschillende webpagina’s. Inconsistenties kan je vergelijken met spellingsfouten. Het haalt de kwaliteit naar beneden.
Zorg dus voor een consistent gebruik van lettertypes, lettergrootte, kleuren, hoofdingen, witruimte, randen, knoppen,…
14. Responsive design
Responsive design betekent dat je website makkelijk leesbaar is, niet alleen op desktop, maar ook op tablets en smartphones. Het ontwerp zou moeten meeschalen met het scherm waarmee je de website bekijkt. Google geeft trouwens sowieso prioriteit aan websites die mobielvriendelijk zijn. Zorg er dus voor dat tekst overal leesbaar blijft, dat tekst niet buiten het scherm valt, dat knoppen makkelijk aan te klikken zijn, ook op kleinere schermen,…
Een handige test hiervoor kan je vinden op https://search.google.com/test/mobile-friendly.
15. Performantie
De laadsnelheid van een website is zeer belangrijk. Als het langer duurt dan 2 à 3 sec om een webpagina te laden, dan zal de bezoeker afhaken. De snelheid van je website kan je testen op https://gtmetrix.com/. Zo krijg je een idee waar er eventuele problemen zijn en hoe je deze kan verhelpen.
Enkele tips om de performantie van je website te verbeteren:
- Optimaliseer je afbeeldingen
- Gebruik een caching plugin
- Gebruik niet teveel plugins en verwijder plugins en thema’s die je niet meer gebruikt.
- Zorg voor goede hosting. Als je hosting niet ok is, dan kan je nog zoveel proberen, maar niets zal helpen. Vertrek dus van een goede basis.
Conclusie
Ik zet nog even op een rijtje welke principes je kan volgen om tot een succesvolle webdesign te komen. Zorg ervoor dat jouw website:
- overzichtelijk is en keuzestress vermijdt
- makkelijk navigeerbaar is
- visueel aantrekkelijk is
- een heldere en sterke hiërarchie op elke pagina heeft
- mensen toont met jouw product erbij
- slim gebruik maakt van kleuren, afbeeldingen en lettertypes
- speelt met contrasten en verrassing
- de aandacht van de bezoekers vasthoudt
- witruimte efficiënt inzet om te benadrukken wat werkelijk telt
- call-to-actions op de juiste plaats heeft
- …
Nog vragen?
Als je met deze principes rekening houdt bij het bouwen van je website, dan zal je al een heel eind komen. Mocht je meer willen weten over webdesign, vraag het me gerust!
