9 juli 2024

Verbeter de gebruikerservaring van je website via deze 7 tips

  • Profielfoto Tom 08168 Final
    Tom Van humbeekUX/UI DESIGNER

Wil je ervoor zorgen dat je webbezoekers met veel plezier navigeren op je website? Dan moet die toegankelijk, gebruiksvriendelijk en intuïtief zijn. Je website moet met andere woorden een optimale gebruikerservaring of ‘user experience’ (UX) bieden. Klinkt wat abstract misschien, dus we zetten dit voor jou graag om in 7 duidelijke en hapklare UX-tips waarmee jij meteen aan de slag kunt.

1. Zorg voor een optimaal kleurencontrast

Huh … wat staat er juist geschreven? Niets lastiger dan bijvoorbeeld een lichtblauwe tekst op een lichtgrijze achtergrond; of een knalwitte tekst op een pikzwarte achtergrond. Een te laag of te groot kleurencontrast zorgt voor een onaangename gebruikerservaring. In het eerste geval kan je bijna niet lezen wat er staat, in het laatste geval word je praktisch verblind en worden je ogen vermoeid. Natuurlijk ben je als merk vaak gebonden aan bepaalde kleuren, dus het is heel belangrijk om hier bij je (re)branding onmiddellijk aan te denken.

Zo pak je dat aan:

  • Via de gratis tool ‘WebAIM’ kan je snel en makkelijk een specifiek kleurencontrast testen. Je vult gewoon de HEX-kleurcode in van de 2 kleuren die je wil combineren en krijgt nadien meteen de contrast-ratio. Hoe hoger deze contrast-ratio, hoe beter. Vind je het moeilijk om de ratio te interpreteren? Geen zorgen, de tool geeft onderaan aan of je voor deze ratio een ‘pass’ of een ‘fail’ krijgt. Staat er een ‘pass’ bij ‘WCAG AA’, dan is dat al supergoed; staat er een ‘pass’ bij ‘WCAG AAA’, dan is het om je vingers bij af te likken. Via de slider onder de HEX-kleurcode kan je je gekozen kleur aanpassen. Zo kan je de contrast-ratio blijven veranderen en optimaliseren.
  • Wil je meteen een volledig kleurenpalet testen? Dan kan je ook aan de slag gaan met de gratis tool GitHub’. Geef eerst alle HEX-kleurcodes in van je kleurenpalet. Vervolgens krijg je een tabel met alle mogelijke, gebruiksvriendelijke combinaties. De lichtgrijze blokken met een streep erdoor zijn een no-go. Zo zie je meteen welke kleuren je met elkaar kan combineren voor een goeie gebruikerservaring.
  • Een volledig kleurenpalet kan je ook makkelijktesten met de gratis tool ‘ContrastGrid’. Geef alle HEX-kleurcodes in bij ‘Rows & Columns’ om eenkleurentabel op te bouwen. Hier staat ‘AA’ opnieuw voor een positief resultaat en met ‘AAA’ win je de hoofdprijs. De combinaties met score ‘DNP’ moet je absoluut vermijden: die zijn niet aantrekkelijk en leiden tot een negatieve gebruikerservaring.
WCAG, AAA compliant
WCAG, AAA  not compliant

2. Verduidelijk links met beschrijvende linktekst

Interne en externe links op je webpagina zijn van cruciaal belang. Dankzij deze links kan de webbezoeker makkelijk van punt A naar B navigeren. Een link wordt op een webpagina achter een‘klikbare tekst’ verborgen: een linktekst of anchor-tekst (onderlijnd in de voorbeelden). Helaas komen we vaak weinigzeggende linkteksten tegen, zoals ‘Je vindt alles over onze diensten via deze link’ of ‘Meer informatie vind je hier’. Dergelijke anchor-teksten druisen in tegen een goeie gebruikerservaring en zijn nefast voor schermlezers.

Zo pak je dat aan:

  • De linktekst moet meteen duidelijk maken naar welke info je link zal leiden. Schrijf bijvoorbeeld ‘We geven je graag meer informatie over onze richtlijnen’ i.p.v. ‘Meer ontdek je hier’. Of schrijf ‘Via deze weg kan je je afspraak bij de dokter inplannen’ i.p.v. ‘Vul dit formulier in’. Zo weten webbezoekers,zoekmachines én schermlezers direct waarover het zal gaan als ze op de link klikken.
  • Je kan een link niet alleen ‘achter een tekst’ verstoppen, maar ook in een duidelijke, kleurrijke button plaatsen om hem meer te laten opvallen. Bovendien kan je alle links samenbundelen in een kader en de belangrijkste link highlighten. Alles voor een makkelijke navigatie en een optimale gebruikerservaring
Linktekst

3. Integreer ‘visuele cues’ in je actieknoppen

Vaak onderscheiden we deverschillende actieknoppen op onze webpagina enkel van elkaar door middel van kleur. De tekst ‘juist antwoord’ staat bijvoorbeeld in een rechthoekige, groene knop; de tekst ‘fout antwoord’ in een rechthoekige, rode knop. Maar wat doe je dan bijvoorbeeld met kleurenblinde webbezoekers? Zij kunnen het onderscheid tussen beide knoppen maar moeilijk uitdokteren op deze manier. Zo kunnen sommigewebbezoekers belangrijke details missen of niet de gewenste actie ondernemen. Hetzelfde gebeurt wanneer iemand je webcontent bijvoorbeeld afprint in zwart-wit. Ook dan gaan sommige boodschappen verloren die rechtstreeks gelinkt zijn aan de gebruikte kleuren. Wil je een goeie gebruikerservaring creëren, dan heeft je website nog enkele extra eyecatchers nodig.

Zo pak je dat aan:

  • Geef je actieknoppen niet alleen verschillende kleuren, maar zorg voorvisuele cues’ of ‘visuele indicaties’. Zo kan je werken met o.a. symbolen, smileys, vormen, afbeeldingen … Voeg bijvoorbeeld een vinkje toe aan de knop ‘juist antwoord’ en een kruisje aan de knop ‘fout antwoord’. Of kies voor een ronde knop ‘aan winkelmand toevoegen’ en een vierkante knop ‘aan winkelmand toegevoegd’. Als je webbezoekers de kleuren dan niet van elkaar kunnen onderscheiden, kunnen ze je boodschap wel nog steeds op een andere manier ontdekken.

4. Pas op met roterende homepage-banners

Je kent het vast wel. Je belandt op de homepage van een webpagina en ziet een knallende fotobanner bovenaan die maar blijft verspringen en telkens nieuwe producten toont. Is het een advertentie? Kan je de slideshow stoppen? Hoe kan je een specifieke bannerfoto terugvinden? Verwarring alom. Roterende homepage-banners zijn handig om op korte tijd veel producten aan je webbezoekers te tonen, máár het is heel belangrijk dat je dit op de juiste manier aanpakt. Vaak gaat de slideshow te snel, waardoor het zijn doel mist. Soms zijn ook de pauzeknop, de navigatiepijltjes of het slideshow-overzicht te onopvallend in het design. Dit allemaal ten nadele van de gebruikerservaring.

Zo pak je dat aan:

  • Slideshows op je homepage raden we eigenlijk niet aan. Wil je hier toch voor gaan? Laat de homepage-banners dan nooit automatisch roteren. Zorg ervoor dat de webbezoeker de slideshow zelf kan bedienen aan de hand van duidelijke en contrasterende actieknoppen of ‘visuele cues’. Verduidelijk de navigatiemogelijkheden in de fotobanner met pijltjes naar links en rechts, een pauzeknop of zelfs een knop ‘Stop slideshow’, een overzicht van het aantal fotobanners (door bv. streepjes of bolletjes onderaan) én een indicatie waar de webbezoeker zit in de slideshow (door bv. een bepaald streepje of bolletje in te kleuren). De webbezoeker moet moeiteloos kunnen navigeren doorheen de slideshow voor een feilloze gebruikerservaring.
Carousel

5. Vermijd een ‘valse bodem’ op je webpagina

Opent je homepagina met zo’n prachtige fotobanner die het volledige scherm vult? Veel webbezoekers weten helaasniet dat er méér content volgt op je webpagina als er enkel een afbeelding staat ‘boven de fold’. Dit is het stuk van je website dat zichtbaar is zonder naar beneden te scrollen. Hetzelfde gebeurt wanneer je bijvoorbeeld een brede advertentie plaatst in het midden van je tekst. Sommige webbezoekers denken dan mogelijk dat ze aan het einde van je webpagina gekomen zijn. In beide gevallen zit er als het ware een ‘valse bodem’ in je webpagina, die verhindert dat webbezoekers verder naar onderen scrollen. Opnieuw minpunten voor je gebruikerservaring.

Zo pak je dat aan:

  • Bekijk je webpagina’s altijd op verschillende toestellen, zowel laptops, tablets als smartphones. Zorg ervoor dat er nergens ‘valse bodems’ zijn: grote witruimtes, brede advertenties of fotobanners bijvoorbeeld. Motiveer de webbezoeker altijd om verder naar onderen te scrollen.
  • Zorg ervoor dat je intro-banner niet het volledige scherm ‘boven de foldinpalmt. Laat eronder nog wat ruimte om een kleine sneak peek te geven van de rest van de webpagina, met een hintende tekst of subtitel.
  • Start je webpagina niet met een banner? Geef webbezoekers dan eveneens een reden om naar onderen te blijven scrollen. Werk met call-to-actions, pijlen die naar onderen wijzen of andere hints.
  • Integreer advertenties niet in het midden van je webpagina, in de volledige breedte. Kies liever voor een minder opvallende plaats aan de zijkant of volledig onderaan je webpagina.

6. Creëer een specifieke landingspagina voor je pdf’s

Pdf’s zijn ideaal om je webbezoeker veel informatie te bieden. Toch zitten er verschillende addertjes onder het gras: pdf’s zorgen maar al te vaak voor een slechte gebruikerservaring. Als je webbezoeker onverwacht of ongewenst in een pdf-bestand terechtkomt, leidt dit vaak tot frustraties. Pdf’s zijn namelijk ontworpen voor print, niet voor het web. Ze zijn daarom niet vlot online toegankelijk of mobielvriendelijk. Inzoomen hier, scrollen daar; het is een hele uitdaging om een pdf te lezen op je smartphone. Pdf’s openen bovendien vaak automatisch in een nieuwe browser of applicatie. Daarnaast is het moeilijk om goeie analytics te verzamelen over je pdf’s. Hoelang of op welke manier werden ze gelezen? Hebben ze geleid tot een conversie? We hebben geen toegang tot deze statistieken. Pdf’s zijn tot slot vaak niet begrijpelijk of vindbaar voor zoekmachines zoals Google.

Zo pak je dat aan:

  • Maak een specifieke landingspagina of ‘gateway’-webpagina waar al je pdf’s te vinden en te downloaden zijn. Op deze pagina kan je alles in HTML zetten, in een gestructureerd formaat. Zo weten zoekmachines waarover je pdf’s nu eigenlijk gaan. Op de webpagina kan eveneens een samenvatting en inhoudstafel komen van de pdf-content. Plaats zeker ook altijd het bestandsformaat in je link, bv. ‘Maandelijks rapport (pdf)’.
Pdf downloads

7. Zorg ervoor dat je content gedeeld wordt

Quotes, Instagram Reels, memes … we sturen ze maar al te graag door naar onze vrienden, collega’s en familie. Ook al hebben we het zelf niet volledig grondig gelezen of bekeken. Deze trend moeten we trachten door te trekken naar onze website. Door elementen op je webpagina te verwerken die bijvoorbeeld grappig, inspirerend of leerrijk zijn, kan je ervoor zorgen datje content meer online gedeeld wordt met anderen en dus ook bij een pak meer mensen terechtkomt. Opnieuw een win-win voor je gebruikerservaring.

Zo pak je dat aan:

  • Pimp je webcontent met pakkende hoofdtitels, handige lijstjes, herkenbare afbeeldingen of boeiende infographics die lezers makkelijk kunnen delen via bericht of sociale media. Bij de afbeeldingen en infographics kan je best ook een transcriptie voorzien voor schermlezers.
  • Voorzie knoppen op je webpagina waarmee lezers bepaalde visuele of tekstelementen rechtstreeks kunnen delen op sociale media.

Je gebruikerservaring optimaliseren met onze UX-experten?

Geschreven door

  • Profielfoto Tom 08168 Final
    Tom Van humbeekUX/UI DESIGNER

Share this post