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

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

    • 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

        8. Duidelijke navigatie

        • 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

          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

                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

                    15. Performantie

                    • 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.

                      Divi WordPress Theme

                      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!

                      Zin om samen te werken? Vraag dan vrijblijvend jouw offerte aan!

                      Ontwikkelt en beheert WordPress websites.

                      Algemene voorwaarden | Disclaimer | Privacyverklaring

                      © 2020 Alle rechten voorbehouden. Webdesign Springweb.

                      CONTACT

                      Zoerselhoek 47
                      2980 Zoersel
                      België
                      E-mail: info@springweb.be
                      Tel: 0474/71.83.01
                      BE 0678.789.568

                      Pin It on Pinterest