Symbolen op je website? Maak ze duidelijk!

4 augustus 2011, Ineke Waas | Usability Consultant Optimalisatielab

Op veel websites worden symbolen gebruikt. Ze zijn handig omdat ze snel scanbaar zijn en weinig ruimte innemen terwijl ze toch betekenis overbrengen. Maar die betekenis is niet altijd duidelijk. Wat betekent bijvoorbeeld het symbool op de afbeelding hieronder? Enig idee?

De context helpt waarschijnlijk bij het raden:

Het antwoord is dat de Caps Lock geactiveerd is.

Geef altijd een toelichting

Dit voorbeeld laat zien dat je op moet passen met het gebruik van symbolen. Voor de ontwerper kunnen ze heel duidelijk zijn, maar de gebruiker kan er hele andere betekenissen aan toekennen. Het is daarom nuttig om altijd een tekstuele toelichting te geven als je een symbool gebruikt.

Toelichting met mousehover

Ook Ikea gebruikt symbolen op haar site (zie foto). Op het eerste gezicht is het niet helemaal duidelijk wat het eerste symbool (vinkjes met streepjes) betekent

Als je je muis erover beweegt, zie wat het symbool betekent; namelijk dat je een overzicht te zien krijgt van de producten op de foto. Dit is al duidelijker dan helemaal geen toelichting, maar het kan nog beter.

Toelichting als standaard

Gelukkig worden tegenwoordig op veel sites de symbolen standaard in combinatie gepresenteerd met de toelichting erbij. Enkele voorbeelden hiervan zijn Google, Nu.nl en KPN.

Een symbool in combinatie met tekstuele toelichting is een hele duidelijke en scanbare manier om  een boodschap over te brengen. Toon dus altijd de combinatie, ook al kost dit wat meer schermruimte, want bezoekers klikken zelden op zaken die ze niet snappen. En dan zou je toch mooi je doel voorbij schieten.

Bronnen:

http://littlebigdetails.com/post/7889641562/webkit-when-entering-text-into-a-password-field
http://www.ikea.nl
http://www.kpn.nl
http://www.nu.nl
http://www.google.nl