Wat betekent dat nu, user experience? Het begrip – dat we ook kennen als gebruikerservaring of UX – omvat alles dat met de beleving van jouw website te maken heeft. Denk aan de snelheid waarmee je website laadt, maar ook hoe vlot iemand de juiste informatie kan vinden en hoe gemakkelijk ze die informatie begrijpen.

Dat zijn natuurlijk maar een paar voorbeelden. User experience is een bijzonder breed begrip. Wil je aan de slag met de gebruikerservaring van jouw website, dan doe je er goed aan concrete doelstellingen te formuleren. Kan je website sneller laden? Moet de navigatie minder complex? Kunnen bezoekers alle pagina’s makkelijk vinden?

Om je te helpen een kritische blik te werpen op je website, geven we je 5 beginselen van user experience mee.

1. Consistent design

Zorg met een consistent design voor herkenbaarheid op je website. Bezoekers die na een paar klikken twijfelen of ze nog op dezelfde website zitten, haken af. Gebruik overal dezelfde lettertypes en kleuren, laat je bedrijfslogo op dezelfde plaats terugkeren en ga voor afbeeldingen die bij elkaar passen. Mensen die zien dat alle pagina’s visueel op elkaar aansluiten, weten dat je een oog voor detail hebt.

2. Makkelijke navigatie

Elke pagina op je website moet vlot bereikbaar zijn, met zo weinig mogelijk kliks. Het startpunt van een vlotte navigatie, is het hoofdmenu op je website. Je hoeft natuurlijk niet elke pagina in dat menu te proppen. Neem alle belangrijke categorieën op in het hoofdmenu en zorg voor voldoende, duidelijke doorklikmogelijkheden op onderliggende pagina’s. Hoe minder kliks een bezoeker nodig heeft om de juiste informatie te vinden, hoe beter.

3. Leid de aandacht niet af

Een webpagina staat vaak in teken van een bepaalde actie. Bezoekers moeten dan wel weten wat ze kunnen doen of van hen verwacht wordt. Kies daarom voor een eerder minimalistisch ontwerp, zodat de call-to-action op de voorgrond blijft staan. Geraakt je bezoeker afgeleid door andere elementen op een pagina, dan ben je hem kwijt.

4. Toegankelijk voor iedereen

Een toegankelijke website heeft niets te maken met toegang tot het internet, maar wel met de bruikbaarheid ervan voor mensen met een functiebeperking. Houd ook daarmee rekening wanneer je de user experience van je website aanpakt. Niet alle bezoekers zien, lezen, horen of begrijpen alles op dezelfde manier als jij. Voldoende contrast op webpagina’s, ondertitels bij filmpjes en begrijpelijke teksten zijn maar enkele voorbeelden waarmee je rekening moet houden bij het toegankelijk maken van je website.

5. Mobielvriendelijk

Het is wellicht een open deur, maar het is nog steeds essentieel om een website te hebben die ook op mobiele toestellen gebruiksvriendelijk is. Is alle tekst goed leesbaar op een smartphone? Laden pagina’s vlot? Zijn actieknoppen groot genoeg om aan te klikken? Heel wat mensen bezoeken je website voor het eerst via een mobiel apparaat. Laat hen niet in de kou staan.

En dus wil je dat je bezoekers ook op hyperlinks klikken. Herkenbare en duidelijke links vergroten de kans dat mensen dat doen. Hoe je dat aanpakt en meer behandelen we in dit artikel.

• Goede hyperlinks: 5 tips

• Uitzonderingen op de basisregels

• Waarom zijn links op je website nu zo belangrijk?

Wat we met een hyperlink bedoelen

Met hyperlinks doelen we in dit artikel op een tekstlink. Geen knoppen, banners of afbeeldingen met een link eronder.

Goede hyperlinks: 5 tips

Een goede hyperlink is een link waarvan surfers meteen zien dat ze die kunnen aanklikken. Je wil vermijden dat ze niet begrijpen dat ze kúnnen klikken. Hoe pak je dat aan? Tijd voor onze 5 tips voor betere links op je website.

1. Onderlijn links

Onderlijn elke hyperlink op je website. We herkennen links al jarenlang aan onderstreepte tekst. Dat ontdekte Jakob Nielsen, expert in gebruiksvriendelijkheid van websites, al in 2004. Vandaag is dat niet anders.

Een onderlijnde tekstlink valt meteen op bij je bezoekers. Dat speelt trouwens goed in op de vluchtige manier waarop we op het internet lezen. Onderlijnde woorden trekken de aandacht van je scannende lezers.

Wel belangrijk: onderlijn alleen links. Ga je ook andere tekst onderlijnen, dan verdwijnt het onderscheid tussen links en gewone tekst. Dat is verwarrend voor mensen.

2. Geef links een duidelijke kleur

Een hyperlink nog beter laten opvallen? Zet de link in een andere kleur dan de rest van je tekst.

De standaardkleur voor een link is blauw. Tim Berners-Lee, een van de grondleggers van het www, koos al in 1989 voor blauw als standaardkleur van hyperlinks. Ook daaraan zijn we al lang gewend.

Je website hoeft er natuurlijk niet uit te zien alsof hij 30 jaar geleden gemaakt werd. Kies je liever een andere kleur? Dat mag. Zorg er in ieder geval wel voor dat de kleur van links sterk verschilt van de normale tekstkleur én onderlijn ze altijd.

Denk aan de toegankelijkheid

Een opvallende link helpt elke bezoeker. Maar voor surfers met een visuele beperking zijn opvallende links dubbel belangrijk. Een groot contract tussen linkkleur en tekstkleur is onmisbaar. Op zoek naar meer tips om de toegankelijk van je website te verbeteren? Daarvoor kan je op onze link hieronder klikken.

3. Duidelijke tekst voor links

Ziet je hyperlink eruit als een hyperlink? Tijd om aandacht te besteden aan de ankertekst of de tekst waar je link onder ligt.

Je bezoeker heeft weinig aan een tekst zoals ‘Klik hier’, ‘Ontdek nu’ of ‘Meer info’. Een hyperlink zoals https://www.eblog.be rechtstreeks in je tekst opnemen doet het ‘m ook niet. In plaats daarvan plaats je liever een link onder een ankertekst die helpt bezoekers te begrijpen waarop ze precies klikken en waar ze naartoe gaan.

Waarom dat zo belangrijk is? Mensen verwachten iets van een klik. Gebeurt er plots iets anders, dan ben je je bezoeker kwijt. Maak daarom duidelijk wat mensen mogen verwachten, zodat je hen niet teleurstelt.

Een extra tip: laat bezoekers weten dat ze een PDF- of ander bestandje gaan openen wanneer ze op een link klikken.

Ankerteksten en zoekmachines

Niet alleen mensen, maar ook Google, Bing en andere zoekmachines zijn geholpen met een duidelijke ankertekst. Zoekmachines gebruiken een linktekst om te begrijpen waar je naartoe linkt. Hoe beter Google je website begrijpt, hoe beter de zoekmotor kan bepalen wanneer jouw website een relevant zoekresultaat is.

4. Consistent met links

Niets zo verwarrend als hyperlinks die blauw en onderlijnd zijn op de ene pagina, en plots donkerrood kleuren op een andere. Je gaat best na of alle links op je website consistent zijn. Bij zo’n check kan je letten op de volgende zaken:

• Kleur: welke kleur je ook kiest, geef elke link dezelfde tekstkleur. En vermijd daarbij dat normale tekst, paginatitels of tussenkoppen ook die kleur krijgen.

• Bezochte links: vroeger werd een link paars wanneer je een pagina al had bezocht. Hoewel dat niet meer zo gebruikelijk is, is het voor bezoekers nog steeds handig om te weten of ze die pagina nu al gezien hebben of niet. Je kan voor een felle kleur kiezen voor niet bezochte links. Links die wel al aangeklikt werden, kan je iets matter van kleur maken.

• Ankertekst: link je frequent naar een specifieke pagina binnen jouw website? Dan kan het een goed idee zijn een consistente ankertekst te geven aan die hyperlinks. Jij weet dat een klik op ‘Vacatures’ en ‘Jobs’ naar dezelfde pagina leidt, maar je bezoeker weet dat niet.

5. Aandacht voor de bestemming

Een link die duidelijk is opgemaakt als hyperlink, met een sterke ankertekst, zal worden aangeklikt door je bezoekers. Zoekmachines begrijpen je website ook beter, waardoor je een paar plaatsen wint in de zoekresultaten. Maar er is meer dan alleen goede hyperlinks.

Ook de bestemming, of pagina waar mensen naartoe surfen na een klik, is belangrijk. Elke pagina op je website een herkenbaar design geven is een eerste stap. Verder kan je een stukje van de linktekst laten terugkomen op de bestemmingspagina, zodat bezoekers weten dat ze goed geklikt hebben. Klikt iemand op ‘Ons nieuwsoverzicht’ en ziet die vervolgens ‘Blog home’ op de nieuwe pagina, dan creëert dat alweer verwarring. Liever herhaal je op de bestemmingspagina gewoon het woord ‘nieuwsoverzicht’.

De uitzonderingen

Onze 5 tips hierboven zijn goede basisregels voor hyperlinks. Al zijn er een aantal uitzonderingen die je in het achterhoofd moet houden.

Navigatiemenu

In een navigatiemenu hoef je hyperlinks niet te onderlijnen of een specifieke kleur te geven. Het menu van je website moet op zichzelf duidelijk maken dat het de navigatie is. Bezoekers weten dan dat ze op elementen kunnen klikken.

Lijstjes

Heb je een lijstje van links op een pagina staan, omdat je bijvoorbeeld ankerlinks gebruikt in lange artikels (en zoals we helemaal bovenaan hebben gedaan)? Die hoef je ook niet te onderlijnen. Net zoals de links die je in de footer van je website plaats. De opeenvolging van onderlijnde regels tekst maken het lezen ervan net moeilijker.

Call-to-action

Met een call-to-action (CTA) vraag je bezoekers een bepaalde actie uit te voeren. Bijvoorbeeld om je gloednieuw e-book te downloaden. Zo’n call-to-action mag er wat meer uitspringen dan de rest van de tekst op je website.

Hoewel CTA’s vaak in een knop staan, hoeft dat niet altijd zo te zijn. Als je geen knop gebruikt voor een call-to-action, maar die wel wil laten opvallen, kan je voor een andere kleur kiezen dan de gewone linkkleur.

Waarom links op je website zo belangrijk zijn

Je weet nu hoe je hyperlinks zo aanpakt dat ze massaal worden aangeklikt. Maar waarom zijn links op je webpagina’s nu zo belangrijk? We zoomen in op 2 soorten links: interne en externe.

Interne links

Een interne link is een verwijzing naar een pagina op dezelfde website. Klikt je bezoeker op zo’n link, dan surft hij verder naar een andere pagina op jouw website. Interne links hebben een tweevoudig nut:

• Voor bezoekers zijn interne links handig om meer informatie op je website terug te vinden.

• Voor zoekmachines zijn interne links van belang om je website beter te begrijpen en te weten welke pagina’s jij het belangrijkst vindt.

Goed geplaatste interne links verbeteren kortom de gebruikerservaring, maar spelen ook een rol in zoekmachineoptimalisatie (SEO). Een pagina met veel autoriteit, geeft een beetje van die autoriteit door aan andere pagina’s via interne links.

Externe links

Externe links – soms ook backlinks genoemd – zijn dan weer verwijzingen naar een andere website. Wie op een externe link klikt op jouw website, surft daarmee naar een andere website.

Backlinks zijn een onmisbaar onderdeel van elke SEO-strategie. Schrijf je regelmatig (lange) blogposts, dan helpen externe links je content relevanter maken. Met een externe link onderbouw je de cijfers en feiten waarover je schrijft.

Omgekeerd geven externe websites die naar jouw website linken meer autoriteit. Dat komt omdat Google zo’n externe link beschouwen als een teken van betrouwbaarheid. Anders gezegd: krijgt jouw website veel backlinks, dan moet dat wel betekenen dat je website relevant is.

Conclusie

Een goede linkstrategie draagt bij aan het succes van je website. In zoekmachines én onder je bezoekers. Al moet je je bezoekers helpen te begrijpen dat ze een hyperlink kunnen aanklikken en hen duidelijk maken wat er gebeurt na zo’n muisklik. Pak je dat goed aan, dan zijn je bezoekers, zoekmachines en jij tevreden.

Ze zorgen over het algemeen voor een gebruiksvriendelijkere ervaring op je website, al kunnen ze in sommige gevallen ook nadelen hebben. Waarom ankerlinks een goed idee zijn, wanneer je ze in andere gevallen beter niet gebruikt en hoe je ze precies maakt, vertellen we je hieronder.

Wat is een ankerlink?

Ankerlinks hebben wel wat namen. Springlinks, jumplinks, anchor links of speed links zijn er maar enkele van. Het zijn interne links waarmee je bezoekers naar een specifieke sectie binnen éénzelfde pagina kan sturen.

Op pagina’s met veel content, zijn ankerlinks een goed idee. Wanneer je een lang artikel in een kennisbank hebt, een handleiding of een blogpost van enkele duizenden woorden, dan heeft een bezoeker aardig wat scrolwerk. Zeker wanneer je ook foto’s, video’s of andere media toevoegt, worden die pagina’s behoorlijk lang.

Plaats je dan bovenaan die pagina een duidelijke inhoudstafel, dan kan iemand meteen naar het stukje tekst klikken dat hij of zij interessant vindt. In zekere zin maak je je content daarmee extra scanbaar. Maar bovenal voeg je een duidelijke structuur toe, waarmee bezoekers snel weten wat ze mogen verwachten.

Voordelen van ankerlinks

Ankerlinks hoef je niet alleen te gebruiken in inhoudsopgaven. Je kan zo’n hyperlink ook toevoegen aan een knop om iemand naar een formulier te laten springen onderaan de pagina. Naast structuur, hebben anchor links nog een aantal voordelen voor je website:

• Lange content maak je beter leesbaar voor bezoekers, omdat ze snel kunnen klikken naar een gedeelte waarin ze echt geïnteresseerd zijn.

• Ankerlinks zijn ook handig om te delen op sociale media, wanneer je volgers naar een specifiek stukje wil sturen.

• Gebruik je ankerlinks als inhoudsopgave, dan kan Google die links ook opnemen in de zoekresultaten. Goed voor SEO, dus. Een voorbeeldje daarvan zie je hieronder.



• Niet alleen als inhoudsopgave of sprongetje naar een formulier, maar ook om lezers weer naar het begin van een pagina te sturen, kan je een ankerlink gebruiken.

Hebben ankerlinks ook nadelen?

Springlinks zijn nuttig, maar ze kunnen ook het vervelende neveneffect hebben dat je bezoekers bepaalde informatie niet leest. Iemand die op het voorlaatste kopje klit, slaat alle voorgaande tekst over.

Dat kan ook betekenen dat bezoekers minder tijd op je website doorbrengen. Of dat echt een nadeel is, hangt er maar van af. Iemand die via Google op je website landt, snel naar de gewenste informatie kan klikken via een ankerlink, die informatie ook vindt en je website tevreden verlaat, is waarschijnlijk een bezoeker die graag terugkeert. Ook al heeft-ie eigenlijk weinig tijd op je website doorgebracht.

Een nadeel waarmee je rekening moet houden bij ankerlinks, is dat ze niet werken wanneer je 301-redirects gebruikt of van domeinnaam verandert. Wijzig je de URL, dan moet je de ankerlinks toch nog handmatig wijzigen.

Hoe maak je een ankerlink?

Een ankerlink kan je op verschillende manieren toevoegen. Beginnen doen we bij ankerlinks in html.

Ankerlinks in html toevoegen

1. Zoek de tussentitel waar je een anker wil plaatsen. Die tussentitel staat tussen een h2- of h3-tag en ziet er zo uit: < h2 > Hier wil ik een anker < /h2 >. Om het eigenlijke ankertje toe te voegen, voeg je een id toe. Je tussenkop wordt dan: < h2 id="anker" > Hier wil ik een anker < /h2 >

2. Nu je een anker hebt toegevoegd, moet de link waarop iemand kan klikken nog worden gemaakt. Bovenaan je pagina, waar je een inhoudstafel maakt, plaats je link met < a href="#anker" > Hier wil ik een anker < /a > .

3. Heb je verschillende tussenkoppen met een anker en dus verschillende items in je inhoudsopgave? Voor elk van die ankerlinks volg je bovenstaande stappen. De inhoudsopgave wordt dan een lijstje van < a href="#anker" > voorbeeld < /a >. Elke tussenkop moet op zijn beurt een id krijgen dat correspondeert met de tekst na de hashtag.

Ankerlinks in WordPress toevoegen

Maak je je content in WordPress op in html, dan kan je ankerlinks op dezelfde manier toevoegen als hierboven. Maar je kan ook met TinyMCE Advanced werken. Dat is een kleine plugin die extra functionaliteit toevoegt aan de editor en je zo helpt eenvoudig anchor links toe te voegen.

1. Zodra je TinyMCE hebt geïnstalleerd en geactiveerd, ga je naar het bericht waaraan je ankerlinks wil toevoegen.

2. Selecteer een van de puntjes in de inhoudstafel. Klik op het symbooltje om een link toe te voegen. In plaats van daar een URL in de typen, geef je daar de naam van anker dat je wil plaatsen. Ook nu doe je dat met de hashtag, door bijvoorbeeld #ankernaam in te typen.

3. Markeer nu de koptitel waar je dat anker wil toevoegen. Klik daarna op ‘Insert’ in de werkbalk en kies voor ‘Anchor’. Het is net die werkbalk die je krijgt dankzij de TinyMCE-plugin.

4. In het vakje ‘Id’ vul je nu de naam in die je in stap 1 hebt toegevoegd. In dit geval is dat ‘ankernaam’. Het hekje moet je er dus niet bij invullen.

En daarmee is je ankerlink toegevoegd. Heb je meerdere tussenkoppen, dan kan je dat proces voor elk van die titels herhalen.

Extra tips voor goede ankerlinks

Op lange pagina’s of blogposts zijn ankerlinks altijd een goed idee. Maar om ze hun werk goed te laten doen, zijn er nog een aantal basisregels waarmee je rekening kan houden. Je wil dat bezoekers begrijpen wat ze kunnen doen met zo’n inhoudstafel bovenaan je artikel. Wat zijn nu die basisregels?

• Gebruik je ankerlinks als inhoudstafel, maak dan een opsomming van die ankerlinks bovenaan je pagina, zodat bezoekers duidelijk zien wat je ermee bedoelt.

• Hoe minder tekst er tussen je hoofdtitel en inhoudstafel staat, hoe beter. Je wil het scrolwerk voor bezoekers beperken in plaats van vergroten.

• Onder de inhoudstafel plaats je best geen tekst meer. Je kan onder die opsomming meteen verdergaan met de eerste tussenkop.

• Let ervoor op dat je ankerlinks en tussenkoppen dezelfde tekst hebben. Iemand die op ‘fietsen kopen en verkopen’ klikt in je inhoudstafel en vervolgens alleen ‘fietsen kopen’ in de tussenkop ziet, kan snel vermoeden dat er iets niet klopt en daarom beslissen niet verder te lezen.

• Plaats rechtsonder (of naast je tussenkoppen) de pagina een ankerlink waarmee mensen terug naar het begin van je pagina kunnen klikken. Dat kan onder de naam ‘Top’, ‘Naar boven’ of onder een pijltje dat naar boven wijst.

Een checklist komt goed van pas in je project. Zo’n checklist helpt je elke pagina consistent te designen, zodat elk van die pagina’s herkenbaar blijft en je website een geheel vormt. Al is er meer. Knoppen voor calls-to-action, een logische flow in een registratieformulier of een zoekfunctie, bijvoorbeeld. Stuk voor stuk belangrijke elementen in je webdesign.

Hebben we nog niet genoemd: welke pagina’s wil je allemaal op je website? Welke mag je niet vergeten? Hoe ga je de navigatie aanpakken? Klopt het typografische plaatje? Ben je voorbereid op de mobiele versie van je website? Je merkt het al: er is wel wat werk aan een nieuwe website.

Handleidingen en tools kunnen je inspireren en helpen om je website, van prototype tot finaal design, gestroomlijnd te ontwerpen. Een van onze favoriete tools daarvoor is Checklist Design.

De checklist die je design nodig heeft

Checklist Design voorziet een uitgebreide lijst van webpagina’s, elementen en designtopics die de aandacht verdienen bij het ontwerpen van een nieuwe website. Maar het is meer dan een leidraad. We lichten een aantal handige functies van Checklist Design uit.

• Naast een overzicht van belangrijke pagina’s voor je website (zoals een contactpagina of 404-pagina), krijg je per pagina ook concrete tips voor de invulling daarvan.

• Een lijst van elementen die elke website nodig heeft, zoals knoppen, tabellen of een zoekfunctie helpt je een gebruiksvriendelijke website of applicatie te designen.

• Topics zoals typografie, dark mode en de leesbaarheid van je content helpen je een website te ontwerpen die voor iedereen aangenaam en toegankelijk is.

• Een goede flow tijdens het herstellen van een wachtwoord of invoeren van een promocode wordt in duidelijke scenario’s getoond.

Hoe Checklist Design werkt

Tijdens het ontwerpen van een website of applicatie kan je wel eens een element vergeten. Of lijkt alles logisch opgebouwd. Je zit ten slotte voortdurend met de neus op je project. Tot je je website op het grote publiek loslaat en merkt dat ze bepaalde pagina’s niet vinden of functies niet begrijpen.

Een standaardlijstje van de best practices vereenvoudigt het designproces en helpt te voorkomen dat je misschien kleine, maar toch belangrijke elementen vergeet. Dat lijstje is net wat Checklist Design is. Hoe werkt de tool nu precies?

1. Beginnen doe je eenvoudigweg door naar de website te surfen. Door wat naar beneden te scrollen of het navigatiemenu te openen, krijg je een overzicht van categorieën zoals Pages of Elements.

2. Wil je werk maken van pak weg een 404-pagina, dan klik je op Pages en vervolgens 404. Je ziet meteen een lijst verschijnen die alle belangrijke elementen opsomt: je logo, een duidelijke paginatitel en omschrijving enzovoort.

3. Kan je wat inspiratie gebruiken? Of zoek je naar meer in depth content over 404-pagina’s? Rechts op de pagina kan je doorklikken naar extra tips of voorbeelden.

4. Nu de basics van je 404-pagina er zijn, kan je verder met de functies op die pagina. Zoals een zoekfunctie. In het navigatiemenu kan je een blok Elements terugvinden, waar je dan weer een checklist terugvindt onder Search.

5. Een van de elementen die belangrijk is bij zo’n zoekfunctie, is een duidelijke knop. En ook daarvoor vind je weer een checklist op de website, via Button onder de categorie Elements.

6. Eens je een gebruiksvriendelijke 404-pagina hebt opgezet, is het tijd om ervoor te zorgen dat die ook goed werkt op smartphones. En jawel, daar krijg je ook een checklist voor. Die kan vinden onder Topics.

En zo kan je checklist na checklist opsnorren voor je nieuwe design. Voor elk van die lijstjes kan je extra informatie of voorbeelden vinden, zoals we in stap drie al vermeldden. Checklist Design helpt je alle belangrijke basiselementen te verwerken in je website, voor een optimale gebruikerservaring.

Consistentie in je design

Een consistent design over je volledige website heen is belangrijk. Stel je maar eens voor dat je een website bezoekt waarop het navigatiemenu, kleurgebruik of tone of voice verandert van pagina tot pagina. Dat creëert een bevreemdend gevoel.

Bewaak de positieve ervaring van je bezoekers door ervoor te zorgen dat alle webpagina’s consistent worden vormgegeven.

Wat ook belangrijk is voor een positieve gebruikerservaring, is een duidelijke navigatie. Die vormt de hoeksteen van je website. Een eenvoudige en logische structuur van je navigatiemenu garandeert dat bezoekers snel kunnen terugvinden wat ze komen zoeken op je website.

Scanbare content

Wanneer we online zoeken naar informatie, doen we dat heel doelgericht. In plaats van alle tekst te lezen op een bepaalde pagina, scannen we die, op zoek naar triggers die erop wijzen dat een bepaald stukje interessant is.

Door je pagina’s gemakkelijk scanbaar te maken, speel je daarop in. Deel je teksten op in korte alinea’s, voorzie tussentitels en gebruik opsommingen om je content leesbaarder te maken.

Test je (nieuwe) design

Dat je zelf overtuigd bent van het (re)design van je website, is natuurlijk belangrijk. Toch is het goed om feedback te vragen aan andere mensen. Hoe ervaren ze de structuur van je website? Welk gevoel roept het design bij hen op? Begrijpen ze snel waarover een bepaalde pagina gaat en wat van hen verwacht wordt?

De input van gebruikers die niet betrokken waren bij het ontwerpen van je website kan je waardevolle inzichten opleveren om je website verder te optimaliseren.

Benieuwd naar alle do’s en don’ts voor een succesvol webdesign? Check ze in de infographic hieronder!

1. Eenvoud siert

Zo nu en dan land je wel eens op een website met veel poeha. Dat is zodanig overdonderend, dat je niet meer weet wat eerst gedaan. Met als gevolg dat je die website snel verlaat.

Dat zie je liever niet gebeuren op je eigen website. Eenvoud in je webdesign en structuur zijn belangrijk. Bijzonder belangrijk, als je weet dat de aandachtsspanne van een bezoeker gemiddeld maar 8 seconden bedraagt.

Ga je aan de slag met een nieuwe website of redesign, vraag je je dus best af of het niet nóg eenvoudiger kan. Wat altijd helpt? Bundel je content op een logische manier en breng daarin een duidelijke hiërarchie aan. Nog een tip: witruimte! Daar pikken we hieronder verder op in.

2. Breng rust met witruime

De kracht van witruimte valt niet te onderschatten. We krijgen voortdurend gigantische hoeveelheden informatie op ons af. Het liefst wil je natuurlijk dat de belangrijkste informatie als eerste gezien wordt.

Witruimte is eigenlijk lege ruimte rondom je content. In een blog zijn dat witregels tussen verschillende alinea’s, maar je kan ook witruimte creëren tussen de header en het eerstvolgende blok van je website.

Slim inzetten op witruimte creëert meer rust en maakt je content beter leesbaar. Maar het kan ook helpen meer aandacht te trekken naar een call-to-action. Wat op zijn beurt meer conversies oplevert. Klinkt goed, niet? De homepagina van Mailchimp is een leuk voorbeeld van eenvoud en witruimte.

3. Responsive design

Is je website nog niet geoptimaliseerd voor mobiele toestellen? Tijd om daar verandering in te brengen. Mensen surfen en kopen almaar meer via hun smartphone. Mensen die je niet wil teleurstellen met een design dat niet responsive is.

Zorg voor een goede, mobiele weergave van je website om smartphonegebruikers niet te verliezen aan concurrenten. Google denkt daar trouwens hetzelfde over. Volgend jaar schakelt de zoekmachine over naar mobile-first indexing. Dat betekent dat Google je website gaat bekijken zoals die op smartphoneschermen verschijnt.

4. Snel, sneller, snelste website

Elke seconde telt. Elke halve seconde, eigenlijk. We hebben anno vandaag niet zo veel geduld wanneer we online zijn. Wist je dat 40 procent van je bezoekers je website verlaat wanneer ze langer dan 3 seconden moeten wachten?

De laadsnelheid van je website optimaliseren is essentieel om bezoekers bij je te houden. Een handige tool om te controleren hoe je website presteert, is PageSpeed Insights van Google. Of je kan een kijkje nemen in onze tips voor een snellere website.

5. Zorg voor een beetje beweging

Een statische website vinden we niet zo leuk. Subtiele micro-animaties kunnen daar verandering in brengen. Met een nadruk op subtiel. Je wil de rust op je website niet verstoren.

Bezoekers vinden het leuk om een kleine visuele verandering te zien wanneer ze op je website terechtkomen. Een scroll-animatie of effectje wanneer je over een link hovert, zijn daar leuke voorbeelden van.

Maar! Ga niet té gretig inzetten op animaties. Te veel beweging zorgt er net voor dat de gebruikerservaring een duik neemt. Benieuwd hoe zo’n subtiele animatie eruitziet? Dit vinden we een leuk voorbeeld.