Simpele tips om de gebruiksvriendelijkheid van je website te verbeteren

door Fanny | sep 23, 2021

Leestijd: 7 minuten
Met regelmaat zie ik veelvoorkomende hindernissen op websites, zoals pop-ups tijdens het lezen, te lange teksten, vage foutmeldingen, verplicht een account moeten aanmaken, te kleine klikbare elementen en ga zo maar door. Gemiste kansen, want je hebt maar kort de aandacht van je website gebruikers. In dit overzicht geef ik een aantal voorbeelden met simpele tips om direct de gebruiksvriendelijkheid van je website te kunnen verbeteren.

1 Geen numeriek toetsenbord bij het invoeren van een telefoonnummer

In afbeelding 1 zien we een voorbeeld van een veelvoorkomende ergernis. Een QWERTY toetsenbord bij een invoerveld van een telefoonnummer. Het is weliswaar een kleine moeite om naar het numerieke toetsenbord te switchen, maar het is niet nodig. Op afbeelding 2 een voorbeeld van een numeriek toetsenbord bij het invoeren van een telefoonnummer. Dat werkt direct veel fijner toch?

Tips :

• Pas de input type aan van text naar tel. De code is <input type="tel"/>.
• Ook voor het invoerveld van een e-mailadres is een apart toetsenbord beschikbaar. Gebruik daarvoor de code <input type="email"/>.

2 Verplicht een account moeten aanmaken

In afbeelding 3 een voorbeeld van sportwinkel Decathlon. Als je daar iets wil bestellen moet je verplicht een account aanmaken. Voor veel gebruikers is dit een enorme ergernis en is het vaak ook een reden om af te haken. Op afbeelding 4 een voorbeeld van De Online Drogist. De gebruiker krijgt verschillende opties aangeboden om verder te gaan met bestellen. Je kunt een account aanmaken, maar het is zeker niet verplicht: een stuk gebruiksvriendelijker!

Tips betreft het aanmaken van een account in een bestelproces:

• Stel het maken van een account om een product of dienst te kunnen bestellen niet verplicht.
• Geef gebruikers meerdere opties, zoals in het voorbeeld van De Online Drogist. Natuurlijk is het fijn als je gebruikers een account aanmaken, maar door het verplicht te maken creëer je juist frustratie en loop je het risico dat gebruikers of afhaken of nooit meer terugkomen op je website.
• Is het maken van een account echt noodzakelijk, leg dan uit waarom het noodzakelijk is.
• Zorg er ook voor dat gebruikers favorieten kunnen opslaan zonder een account te hoeven aanmaken.

3 Een zoekveld zonder goede zoekresultaten

Op afbeelding 5 het zoekveld van Scapino zonder resultaten of suggesties. Op afbeelding 6 het zoekveld van de website van IKEA. Er worden suggesties getoond, wat het zoeken direct makkelijker maakt.

Tips om het gebruiksgemak van een zoekveld te verbeteren:

• Maak gebruik van auto-suggest, ofwel automatisch suggesties geven op basis van de invoer. Auto suggest versnelt het zoekproces, voorkomt fouten en zorgt voor goede zoekresultaten.
• Maak gebruik van de kennis die je in handen hebt. Welke zoektermen komen vaak voor op je website? Zet deze vaak gezochte termen bovenaan bij de suggesties als de gebruiker nog niks in het zoekveld heeft ingevoerd.
• Zorg dat de resultaten aansluiten bij de zoekopdracht.
• Voorkom de melding dat er geen resultaten gevonden zijn. Laat eventueel alternatieve resultaten zien die relevant zijn aan de zoekopdracht.

4 Te kleine klikbare elementen

Op afbeelding 7 een typisch voorbeeld van te kleine klikelementen. Het kruisje links bovenaan om de banner weg te kunnen halen is nauwelijks aan te  klikken. Je ziet dit ook vaak gebeuren bij pop-ups en niks is irritanter dan een pop-up scherm die niet weg te krijgen is. Gelukkig zijn er richtlijnen opgesteld door verschillende partijen. Onderstaand een samenvatting.

Richtlijnen touch targets:

De algemene aanbevolen grootte van aanraakdoelen is 7 tot 10 mm. Deze maat komt overeen met de kleinste gemiddelde vinger.

• Richtlijn Google Material Design: aanraakdoelen moeten minimaal 48 x 48 px moeten zijn. Aanraakdoelen zijn de delen van het scherm die reageren op gebruikersinvoer. Ze reiken verder dan de visuele grenzen van een element. Een knop lijkt bijvoorbeeld 48 x 36 px te zijn, maar de opvulling eromheen omvat het volledige aanraakdoel van 48 x 48 px.
• Richtlijn Microsoft: minimaal 7,5 mm vierkant bereik (40x40px) met daarbij de volgende overwegingen: 1) overweeg om doelen die herhaaldelijk of vaak worden ingedrukt groter te maken dan de minimale grootte 2) doelen die ernstige gevolgen hebben als ze per ongeluk worden aangeraakt, moeten een groter opvulling hebben en verder van de rand van het inhoudsgebied worden geplaatst.
• Richtlijn Apple Human Interface Guidelines: probeer voor alle bedieningselementen een minimaal tikgebied van 44×44 pt aan te houden.

5 Problemen met formulieren

Veelvoorkomende problemen met formulieren zijn:

• Niet geoptimaliseerd voor mobiele apparaten (velden vallen buiten het beeldscherm).
• Te lange formulieren.
• Te strenge validatie op bijvoorbeeld streepjes in telefoonnummers.
• Geen gebruik van logische defaults.
• Vage foutmeldingen.
• Velden naast elkaar in plaats van onder elkaar.

Tips om formulieren te optimaliseren:

• Maak gebruik van logische defaults, zoals: Het bezorgadres: zet meest gekozen landen bovenaan en laat niet een lange lijst op alfabetische volgorde zien met alle landen op de wereld. Geboortedatum: vaak begint de lijst om je geboortejaar te selecteren bij het huidige jaartal. Begin dus niet bij het huidige jaar, want geen van je gebruikers is nuljarig.
• Plaats labels boven het veld om het aantal ‘eye movements’ en ‘eye directions’ te minimaliseren.
• Plaats velden onder elkaar en niet naast elkaar.
• Pas op met labels in het veld, omdat lege velden de aandacht trekken en volle niet.
• Gebruik liever adaptieve labels: plaats labels boven het veld als de gebruiker het veld selecteert.
• Geef uitleg bij labels en velden (liever niet in het veld zelf).
• Splits lange formulieren op in kleinere sub-formulieren.
• Toon de focus direct in het eerste formulierveld (de gebruiker hoeft niet eerst nog op het eerste veld te klikken).
• Laat een formulier er zo eenvoudig mogelijk uitzien.
• Pas geen validatie toe tijdens het typen van bijvoorbeeld een e-mailadres. Het is heel vervelend om direct een foutmelding te krijgen, terwijl je nog bezig bent met invoeren. Check pas op juistheid als de gebruiker naar het volgende invoerveld gaat. Geef per veld een foutmelding aan en niet boven- of onderaan het formulier.
• Geef vriendelijke foutmeldingen en leg uit wat de gebruiker dient aan te passen.
• Zorg ervoor dat de code automatisch spaties en streepjes weghaalt bij de invoer van telefoonnummers, datums en postcodes en dat dit dus geen foutmelding creëert.
• Laat extra opties of vervolgvragen pas zien als het nodig is.
• Vraag niet twee keer om een e-mailadres of wachtwoord.
• Zorg voor zo min mogelijke afleiding tijdens het invullen van een formulier.

6 Website is niet goed scanbaar

Sommige websites zijn door een veelvoud aan informatie en een slechte inzet van visuele hiërarchie nauwelijks goed scanbaar (afbeelding 11). Gebruikers scannen websites, bekijken alles kris-kras en lezen niet aandachtig. Ze zijn op een website om iets specifieks te vinden en daarom lezen ze niet meer dan nodig is. Op afbeelding 12 is een voorbeeld te zien van goed gebruik van visuele hiërarchie.

Tips om scannen van een website te optimaliseren:

• Gebruik titels, subtitels, bulletpoints en conversieknoppen om snel scannen mogelijk te maken.
• Maak belangrijke steekwoorden vetgedrukt.
• Gebruik contrast om belangrijke hoofdacties (afbeelding 6 rechts) te laten opvallen.
• Als alles belangrijk lijkt, is niets meer belangrijk!
• Laat overbodige elementen weg.
• Less is more! Schrijven = schrappen. Blijf focussen op wat je gebruikers echt op een pagina komen doen.
• Zorg dat tekst voldoende leesbaar is door de juiste font-sizes toe te passen. De vuistregel is: Body-size: 16-18px. Minimaal dus 16px met 1,5 lijnhoogte Header-size: 2,5 x body-size.
• Zorg voor de juiste contrastverhoudingen achtergrond en tekst. Adobe heeft een handige tool om het kleurcontrast te analyseren en geeft direct suggesties om de contrastverhouding te verbeteren.
• Maak duidelijk wat bij elkaar hoort. Zorg voor voldoende witruimte na een paragraaf en maak gebruik van de wet van de nabijheid. Zorg dat titels zo dicht mogelijk bij de bijbehorende paragraaf staan.

7 Een overload aan informatie met banners en pop-ups

Op afbeelding 13 en 14 twee websites die pop-ups tijdens het gebruik van de homepage toepassen. Het gebruik van pop-ups kan een enorme ergernis zijn voor gebruikers en kan er zelfs voor zorgen dat je gebruiker direct afhaakt. Toch kan het inzetten van pop-ups zeer effectief zijn mits je het op het juiste moment toepast.

Tips voor pop-ups:

• Houd je website zo rustig mogelijk. Tegenwoordig zie je vaak een overload aan meldingen op een website, terwijl je er pas net bent. Denk aan een cookie-melding, een mededeling over corona, pop-ups en ga zo maar door. Probeer dit te voorkomen.
• Gebruik pop-ups alleen als het echt zin heeft. Op afbeelding 7 is op het linker plaatje een voorbeeld te zien waarbij de pop-up eigenlijk niet nodig is. Gebruikers welkom heten kan ook op andere manieren.
• Zorg voor een juiste timing. Laat gebruikers eerst wennen op je website en laat ze rustig navigeren. Het is minder irritant om na een tijdje een pop-up te zien, dan direct na het landen op een website.
• Zorg voor een goede technische implementatie. Maak het gebruikers makkelijk om de pop-up simpel weg te kunnen klikken.Zorg ervoor dat de gebruiker het liefst op 4 manieren kan ‘ontsnappen‘: 1) cancel/afbreek button 2) close/kruisje button 3) escape-toets vanwege accessability regels 4) buiten het pop-up scherm kunnen klikken/tappen op de donkere achtergrond.
• Kijk ook eens naar rustigere varianten, zoals een bewegende banner onderin of bovenin het scherm. Dit soort meldingen zijn wel zichtbaar, maar hinderen de leeservaring veel minder.

8 Automatische sliders

Met regelmaat zie ik websites die gebruik maken van (automatische) sliders/carrousels. Sliders zijn slecht te scannen voor gebruikers en bevatten vaak te veel informatie om over te brengen in de korte tijd dat een gebruiker op je website is. Om die reden werken ze dus ook niet en zijn ze zelfs slecht voor je conversie. Wil je toch een slider inzetten op je website, dan volgen hier een paar tips.

Tips om sliders gebruiksvriendelijker te maken:

• Verwerk max. 2 of 3 slides. Gebruikers kunnen echt niet zoveel lezen in korte tijd.
• Voeg een beknopte tekst toe met een duidelijke CTA button.
• Zet iconen in waarmee gebruikers zelf kunnen navigeren.

Redenen om geen slider te gebruiken:

• Online gebruikers hebben geen geduld!
• Informatie in een slider op de homepage is meestal niet relevant voor wat gebruikers zoeken, omdat het vaak actualiteiten, aanbiedingen en nieuws betreft die vooral belangrijk voor de organisatie zijn.
• Als een gebruiker wel geïnteresseerd is in een slide, dan schakelt de automatische slider over naar de volgende slide en dit alles roept alleen maar ergernis op.