Dus waarom niet zelf uitpakken met een infographic? Ze zijn een prima manier om interessante data in hapklare vorm te presenteren, een tijdlijn van je organisatie te visualiseren of content te recycleren.

Alleen: hoe zorg je ervoor dat je infographics on point zijn? Venngage heeft 7 designtrends verzameld die je helpen infographics te ontwerpen die écht werken in 2023.

Felle kleuren, nostalgie en creatieve lijnen

Kleuren die van het scherm spatten, het wordt een van dé trends dit jaar. Denk aan limoengroen of violet, bijvoorbeeld. Kleuren die meer leven aan je visuals geven. Venngage ziet ook een belangrijke rol weggelegd voor nostalgie en geanimeerde visuals.

Wat nog meer? Ook gepersonaliseerde data in infographics zet zijn opmars verder. Een bekend voorbeeld daarvan is Spotify Wrapped. Verder gaan we ook creatieve lijnen en andere grafische elementen vaker tegenkomen in infographics. Wil je er graag alle trends bijnemen? Check hieronder de infographic. Met een muisklik krijg je een groter exemplaar.

Die beperkingen moet je ruim zien. Denk aan mensen met een visuele beperking, maar ook slechthorenden, mensen met een leesbeperking, iemand die (tijdelijk) geen computermuis kan bedienen en anderstaligen.

Het basisidee is eenvoudig: zorg voor een website waarop iedereen een oplossing of informatie kan vinden. Hieronder hebben we 7 tips verzameld waarmee je je website toegankelijk kan maken, gevolgd door enkele handige extra’s.

Tip #1: Contrastrijke pagina’s

Bezoekers met een visuele beperking (denk ook aan kleurenblindheid) kunnen je teksten moeilijk lezen wanneer er te weinig contrast is tussen de voor- en achtergrond. Zonder voldoende contrast, worden ook knoppen of illustraties moeilijk te zien.

Combinaties zoals een (licht)grijze tekst op een witte achtergrond, of blauwe tekst op een rode achtergrond kies je beter niet. Let goed op een contrastrijk kleurenpalet. Zit je nog in de ontwerpfase van je (nieuwe) website? Neem deze tip dan meteen mee op in je plan bij het kiezen van kleuren.

Op toptal.com kan je testen hoe je website eruitziet voor verschillende varianten van kleurenblindheid. Via Tanaguru kan je het contrast tussen 2 kleuren gratis meten.

Tip #2: Alt-teksten voor afbeeldingen

Mensen die slechtziend of blind zijn, zien je afbeeldingen niet. Voeg daarom bij elke afbeelding ook een beschrijving toe die duidelijk vertelt wat er op de afbeelding te zien is. Screenreaders kunnen die tekst dan voorlezen.

Een duidelijke beschrijving betekent eigenlijk een volledige beschrijving. Wanneer je een foto toevoegt van iemand die een smartphone vastheeft met een voorbeeld van je app, is ‘smartphone’ niet voldoende. In plaats daarvan voeg je een beschrijving toe zoals ‘Smartphonescherm waarop het startscherm van de planning-app van Google te zien is’.

Een handig extraatje: alt-teksten voor afbeeldingen hebben ook waarde voor SEO, omdat ze ook aan zoekmachines vertellen wat op een afbeelding te zien is.

Tip #3: Kies voor links met betekenis

Een link moet altijd vertellen waar hij je naartoe stuurt. Nog te vaak worden links onder tekst zoals ‘klik hier’ gezet, maar bezoekers weten daar eigenlijk niets mee.

Hoe pak je het dan wel goed aan? Een link in een tekst plaats je best onder een goed stuk van die tekst. ‘Bekijk alle hostingpakketten’ is veel duidelijker dan ‘klik hier voor onze hosting’. Hetzelfde geldt ook voor links in een knop. Vermijd ‘klik hier’, ‘ontdek nu’ of ‘lees meer’ en ga in de plaats voor ‘bekijk alle hostingpakketten’ of ‘ontdek alle hostingpakketten’.

Een linktekst moet altijd duidelijk maken wat de handeling is en op welke pagina je bezoeker terechtkomt.

Tip #4: Toon welk onderdeel actief is

Sommige bezoekers kunnen geen computermuis gebruiken. Ze navigeren dan op je website via de tab- en entertoets. De tab-toets dient om naar andere elementen op je website te navigeren, met de entertoets volg je een link.

Let op dat je bezoekers altijd goed zien bij welk onderdeel ze zich bevinden. De beste manier om dat te doen is met een lijntje of kader rond de link die op dat moment actief is. Hieronder zie je een voorbeeld van de website van DNS Belgium. Het actieve onderdeel (‘Veilig internet’) krijgt een zwart kader, zodat het voor toetsenbordgebruikers duidelijk is waar ze zich bevinden.

Op de website van DNS Belgium zie je duidelijk welk element actief is.

Tip #5: Ondertiteling bij video

Op je website moet je er rekening mee houden dat niet iedereen de audio van video’s kan horen. Ondertiteling is daarvoor de oplossing. En die voeg je best ook handmatig toe.

YouTube biedt vandaag de mogelijkheid automatisch ondertiteling toe te voegen. Dat gebeurt via spraakherkenning. Meestal is het resultaat een ondermaatse ondertiteling. Daarnaast ontbreekt ook ondertiteling voor doven en slechthorenden waarmee geluidseffecten, lachen en andere zaken omschreven worden. Kortom: voeg zelf goede ondertiteling toe aan de video’s op je website.

Tip #6: Schrijf tekst die iedereen begrijpt

Ga je aan de slag met tekst voor je website, sta dan ook goed stil bij de leesbaarheid van je content. Die wordt bepaald door het lettertype, de lettergrootte en de regelafstand, maar ook door het gebruik van paragrafen, woordgebruik en tussentitels (zie daarvoor tip #7).

De taal die je hanteert in blogposts of op productpagina’s moet eenvoudig zijn. Vermijd daarom overbodige adjectieven, moeilijke synoniemen of vakjargon. Liever heb je duidelijke, korte zinnen die meteen to the point zijn.

Ook irrelevante elementen in en rond je teksten maken het alleen moeilijker. Op de website deathtobullshit.com krijg je een goed voorbeeld van hoe het (niet) moet. Bij je eerste bezoek krijg je een duidelijke tekst waar je vlot doorheen leest. Klik je op de knop ‘turn on the bullshit’, merk je meteen wat het effect is van een overdosis extra elementen of aandachtstrekkers.

Tip #7: Structuur in koppen en pagina’s

In onze vorige tip hebben we het al even genoemd: koptitels en subtitels bevorderen de leesbaarheid van je content. Die titelniveaus worden in html gemarkeerd met h1, h2, h3 en verder.

Zet je die koppen goed in, dan krijg je een duidelijke structuur in je teksten. Vergelijk het even met een boek: de titel vooraan is de h1-titel, de verschillende hoofdstukken zijn h2-titels, de rubrieken per hoofdstuk h3- en misschien nog h4-titels. Op je website helpen titels mensen snel te begrijpen welke informatie de belangrijkste is.

Bezoekers die een screenreader gebruiken, hebben veel baat bij duidelijke (tussen)titels. De software helpt bezoekers met een beperking sneller naar de tussenkoppen te springen waar ze informatie willen vinden. Plaats je tussenkoppen op een goede manier, dan help je die bezoekers eenvoudig de informatie te vinden die ze écht nodig hebben.

Zoekmachines houden trouwens ook rekening met koppen en tussentitels. Google en co gebruiken de h1-, h2- en h3-tags van je (tussen)titels om je teksten te begrijpen en indexeren.

Extra tips voor de lay-out van je website

Een contrastrijke kleurkeuze en focus op welk onderdeel op een webpagina actief is voor toetsenbordgebruikers, zijn maar enkele voorbeelden van hoe je lay-out en functionaliteit kan verbeteren om je website toegankelijker te maken. Hieronder vind je extra tips om de webtoegankelijkheid te verbeteren.

• Maak de knoppen op je website groot genoeg. Zo zijn ze gemakkelijk te bedienen voor mensen met een motorische beperking en toetsenbordgebruikers.

• Ook belangrijk voor mensen die navigeren met een toetsenbord: zet alle elementen in een logische volgorde. Daarmee garandeer je de beste ervaring op je website.

• Een goed lettertype dat voldoende groot is en leesbaar tegen de achtergrondkleur staan voorop. Hoewel je met de meeste browsers vandaag ook inzoomen op tekst, kan je overwegen een tool aan je website toe te voegen waarmee bezoekers zelf de lettergrootte of het lettertype kunnen wijzigen.

• Staat er een kaartje op je website om te vertellen wat de locatie van je onderneming of winkel is? Geef altijd ook het adres mee in tekst. Niet iedereen kan de kaart op je website zien. Eventueel kan je ook extra aanwijzingen toevoegen.

• Meldingen bij een formulier, bestelling of een pagina die niet gevonden kan worden, moet je duidelijk formuleren. Voor formulieren en bestellingen geldt dat zowel voor een gelukte handeling als een mislukte. Vertel je bezoekers ook wat ze kunnen of moeten doen als vervolgstap.

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.

Je hoeft kortom geen volleerd techneut te zijn om jezelf op de digitale kaart te zetten. Wel wil je dat ook het design van je website goed is. Daarom geven we je 7 belangrijke principes van design mee die je kan toepassen op het ontwerp van je website.

Hoe designprincipes je kunnen helpen

Wat we mooi vinden of net niet, is onmiskenbaar subjectief. Waarom dan vasthouden aan designprincipes?

Mensen reageren op een bepaalde manier wanneer ze een kleur zien. Net zoals we patronen zoeken of creëren. Elementen waarmee je rekening kan houden om van je website een visueel pareltje te maken en tegelijkertijd ook een gebruiksvriendelijke website af te leveren.

Design gaat over creativiteit. Maar als je weet bezoekers soms al na 50 milliseconden hebben beslist of ze je website visueel aantrekkelijk vinden, moet de eerste indruk direct goed zijn. En daar kunnen de 7 designprincipes hieronder je bij helpen.

7 kernprincipes van design

Misschien heb je al een eerste ervaring op vlak van design. Of heb je research gedaan naar do’s en don’ts. Dat kan voor veel uiteenlopende ideeën of tips zorgen. Met onze verzameling van designprincipes keren we terug naar de kern. Zo houd je de creatieve sleutels zelf in de handen.

1. Balans

Een stabiel en goed uitgelijnd design maakt of kraakt een webpagina. Kijk maar even naar het voorbeeld hieronder. Welk van beide designs spreekt jou als eerste aan?

Balans is een grondprincipe van design. Al hoef je daarom niet per se symmetrisch te werken. Een asymmetrisch ontwerp kan je bezoeker net extra prikkelen of meer contrast creëren.

2. Kleur

Binnen de 90 seconden hebben we onbewust een oordeel klaar over een product of design. Een oordeel dat we grotendeels maken op basis van kleur.

De kleuren op je website hebben met een andere woorden een bijzonder grote verantwoordelijk. Kies voor kleuren die passen bij wat je wil uitstralen en die elkaar onderling complementeren. Contrast is daarin ook belangrijk. Zeker wanneer je meteen een toegankelijke website wil lanceren.

3. Spatiëring

Spatiëring draait helemaal rond ruimte. En dan vooral rond witruimte. De kracht daarvan is nauwelijks te onderschatten.

We krijgen voortdurend grote hoeveelheden informatie te verwerken. Door slim om te gaan met witruimte, kan je de belangrijkste informatie benadrukken. Tegelijkertijd geef je je bezoekers genoeg rust om die informatie te absorberen. Last but not least: goede spatiëring maakt de content op je website ook beter leesbaar.

4. Consistentie

Photo by Omar Flores on Unsplash

We zoeken graag naar patronen. Dat principe kan je toepassen op je design door met herhaling te werken in het ontwerp van je website.

Herhaling heeft overigens ook een positief effect op de herkenbaarheid van je website. Laat op elke webpagina bijvoorbeeld je bedrijfslogo terugkomen op dezelfde plaats. In bredere zin doe je er goed aan alle webpagina’s visueel op elkaar te laten aansluiten, zodat je bezoekers niet plots het gevoel krijgen dat ze op een totaal andere website zijn beland.

5. Contrast

Wil je een bepaald stuk op je website laten opvallen? Dat doe je door genoeg contrast aan te brengen. Dat kan via kleur, maar ook door objecten groter te maken of ze een verrassende plaats te geven.

Contrast is vooral belangrijk voor de calls-to-action op je website. Zet je in op een monochroom design (1 kleur), dan kan je contrast aanbrengen met schaduw en de plaatsing van content.

6. Stijl

Je website moet er mooi uitzien. Stijl (of esthetiek) is een wat vaag begrip, maar eigenlijk brengt het de 5 bovenstaande principes samen tot eentje. Balans, kleur en ruimte zorgen samen voor een website die een visueel plezier is.

Photo by Ståle Grut on Unsplash

Waarom dan stijl als aparte tip? Tijdens het designen van je website ga je best op zoek naar visuele elementen of nuances die ervoor zorgen dat je website opvalt tussen alle andere. Je wil tenslotte jouw stempel drukken.

7. Feedback

Feedback is altijd belangrijk. Maar ook voor het design van je website benadrukken we het belang ervan graag.

Je mag dan wel overtuigd zijn van de keuzes die je maakt, je website moet ook voor bezoekers aantrekkelijk zijn. Vraag vrienden, kennissen en collega’s wat ze van je ontwerp vinden, welk gevoel het bij hen oproept, wat hen meteen opvalt en of ze snel begrijpen waarover het gaat.

De antwoorden die je krijgt kan je vervolgens toepassen om het design aan te scherpen voor het beste resultaat.

Extra tips nodig?

Heb je nog wat extra inspiratie nodig voor je website? Dan hebben we nog een heleboel interessante tips voor je klaar.

• Een goede website heeft ook een goed webadres nodig. Dat krijg je door een domeinnaam te registreren. Check onze 7 tips voor een domeinnaam die een goede indruk maakt.

• Een goede planning is het halve werk. Deze checklisttool helpt je geen enkele stap over te slaan tijdens het designen van je website.

• Meer do’s en don’ts voor een succesvol design? Je vindt 20 extra designtips in deze infographic.

• Een contactpagina is een van de belangrijkste op je hele website. Deze informatie is onmisbaar op je contactpagina.