Webdesign en gebruiksvriendelijkheid · Bijgewerkt op
Signifiers: laat zien waar bezoekers kunnen klikken
Signifiers zijn aanwijzingen die laten zien welke onderdelen van een website je kunt gebruiken, zoals een herkenbare knop of een onderstreepte link.
Een bezoeker wil je diensten bekijken of een afspraak maken. Maar ziet die ook meteen waar dat kan? Signifiers zijn aanwijzingen die duidelijk maken welke onderdelen van een website je kunt gebruiken. Wij leggen uit hoe je daarmee een rustige website maakt die toch duidelijk richting geeft.
Wat zijn signifiers?
Een signifier is een waarneembaar signaal dat een mogelijke handeling aanwijst. Denk aan een onderstreepte link, een knop met een herkenbare vorm of een pijltje naast een uitklapmenu. De bezoeker hoeft minder te raden wat er gebeurt als hij ergens op drukt.
Het begrip hangt samen met affordances. Een affordance gaat over de mogelijkheid om iets te doen; een signifier helpt die mogelijkheid te ontdekken. Op een website kan een element technisch klikbaar zijn, terwijl de vormgeving dat nauwelijks laat zien.
Onderzoek en praktijkrichtlijnen van Nielsen Norman Group beschrijven dat zwakke aanwijzingen voor klikbaarheid onzekerheid en extra zoekwerk kunnen veroorzaken. Dat is een bruikbaar ontwerpprincipe, maar geen bewijs dat een aangepaste knop op iedere website meer aanvragen oplevert. Bron: NN/g — Flat UI Elements Attract Less Attention and Cause Uncertainty.
Voorbeeld: een afspraakknop die op een kop lijkt
Stel dat een adviesbureau onder een dienstenbeschrijving de tekst ‘Plan een kennismaking’ plaatst. De tekst heeft dezelfde kleur, grootte en opmaak als de tussenkoppen op de pagina. Er is geen onderstreping of herkenbare knopvorm.
De link werkt, maar een bezoeker kan hem aanzien voor gewone tekst. Alleen als hij toevallig met zijn muis erboven komt, verandert de cursor. Op een telefoon helpt die aanwijzing niet.
Een voorstel is om deze actie een herkenbare knopvorm te geven en de opmaak consequent te gebruiken voor vergelijkbare acties. De tekst kan bijvoorbeeld luiden: ‘Plan een kennismakingsgesprek’. Dit is een fictief voorbeeld; de passende benaming hangt af van wat je werkelijk aanbiedt.
Een rustig ontwerp heeft geen verborgen bediening nodig
Duidelijkheid vraagt niet om meer banners, felle kleuren of bewegende elementen. Vaak zit de verbetering juist in een vaste visuele afspraak: links in lopende tekst zijn herkenbaar als links, knoppen zien eruit als knoppen en gewone koppen lijken niet op bediening.
Ook het menu verdient die duidelijkheid. Zet de navigatie op een verwachte plek en gebruik herkenbare labels. Heeft ‘Diensten’ een submenu, maak dan zichtbaar dat het kan uitklappen. Een duidelijk menu-icoon met het woord ‘Menu’ kan op mobiel helpen de navigatie herkenbaar te maken. Welke uitvoering past, beoordelen wij binnen het totale ontwerp.
Kijk verder dan de kleur
Een andere kleur kan een aanwijzing zijn, maar maak de werking niet uitsluitend daarvan afhankelijk. Een onderstreping helpt een tekstlink bijvoorbeeld te onderscheiden van de omliggende tekst. Zorg daarnaast dat bediening met het toetsenbord een zichtbare focus heeft. Een hover-effect is aanvullende feedback; de belangrijkste actie moet ook zonder muisbeweging herkenbaar zijn.
Voor links tussen gewone tekst beschrijft W3C specifiek hoe kleur samen met aanvullende visuele aanwijzingen gebruikt kan worden. Dit is geen algemene verplichting om iedere knop te onderstrepen. Bron: W3C — Understanding Use of Color.
Hoe beoordeel je of het duidelijker wordt?
Laat iemand die de website niet kent een concrete taak uitvoeren, zoals: ‘Zoek waar je een kennismaking kunt aanvragen.’ Kijk waar die persoon zoekt, aarzelt of op niet-klikbare onderdelen drukt. Vraag wat hij verwacht voordat hij de actie uitvoert.
Na een wijziging kun je dezelfde taak opnieuw laten uitvoeren. Voor zakelijke resultaten kijk je verder dan klikken: komen bezoekers daadwerkelijk tot een aanvraag, en passen die aanvragen bij je dienstverlening? Een stijging na een wijziging bewijst op zichzelf nog niet waardoor die is ontstaan. Bij voldoende verkeer en een passende meetopzet kan een A/B-test helpen om varianten te vergelijken.
Van herkenbare bediening naar een logische route
Wij bekijken knoppen en links als onderdeel van de hele route: begrijpen bezoekers het aanbod, vinden ze de juiste vervolgstap en sluit de bestemming aan op hun verwachting? Bij website optimaliseren combineren wij die beoordeling met de uitvoering van gekozen verbeteringen.
Signifiers hangen samen met mentale modellen, visuele saillantie en cognitieve belasting. Een knop kan opvallen, maar moet ook begrijpelijk zijn en naar een passende volgende stap leiden.
Wil je laten beoordelen waar die route op jouw website onduidelijk is? Leg je vraag aan ons voor. Wij denken mee en kunnen de verbeteringen voor je uitvoeren.
Bronnen en verdieping
De bronnen onderbouwen het begrip. De websitevoorbeelden en verbeteracties zijn onze praktische vertaling, geen gemeten resultaten uit deze onderzoeken.
- Nielsen Norman Group — Flat UI Elements Attract Less Attention and Cause Uncertainty
- W3C — Understanding Use of Color