Gebruik iconen als ondersteuning, niet als vervanging van labels

In deze stap kies je iconen die labels ondersteunen in één consistente stijl, zodat ze begrip versnellen zonder bezoekers te laten raden.

Iconen zijn visuele steno: kleine pictogrammen die snel begrip geven en je tekst rust gunnen. Maar ze werken alleen als ondersteuning van labels, niet als vervanging. Een icoon zonder tekst dwingt de bezoeker te raden, en dat kost milliseconden die hij liever besteedt aan jouw boodschap. In deze les leer je iconen gebruiken op de juiste plek en in de juiste stijl.

Leren: iconen versnellen begrip, mits ze het labelen

In deze video leg ik uit waar iconen werken, waar ze juist verwarren en waarom je ze altijd in één stijl gebruikt.

Begrijpen: hoe gebruik je iconen op je website?

Iconen werken het beste op zes plekken: bij voordelen-blokken (om snel verschillende voordelen visueel te onderscheiden), in navigatie (sociale media-links, contact-icoontjes), bij stappen (om een proces visueel te markeren), in formulieren (om snel te tonen wat een veld is), op buttons (om actie te accentueren) en als statusindicatoren. Buiten deze plekken zijn ze meestal decoratie en kunnen ze beter weg.

Flash3000 wijst op de regel die elke iconen-set verbetert: kies één bibliotheek (Heroicons, Phosphor, Tabler) en blijf daarbij. Mixen van stijlen ziet er rommelig uit, ook al zijn alle iconen netjes. NL Design System voegt daar een toegankelijkheidsregel aan toe: voorzie iconen altijd van een aria-label of zichtbaar tekstlabel, want screenreaders kunnen visuele steno niet uitleggen. Wie alleen op icoontjes vertrouwt, sluit een deel van zijn doelgroep uit.

De zes regels voor iconengebruik:

1. Eén bibliotheek. Niet verschillende stijlen mixen, alle iconen uit dezelfde set.
2. Altijd een label. Tekst onder of naast het icoon, niet alleen het icoon zonder uitleg.
3. Consistente grootte. Iconen op dezelfde plek hebben dezelfde dimensie en lijnsterkte.
4. Zes vaste plekken. Voordelen, navigatie, stappen, formulieren, buttons, statusindicatoren.
5. Toegankelijkheid. Aria-labels of verborgen tekst voor schermlezers.
6. Geen decoratief gebruik. Voeg geen icoon toe omdat de witruimte 'leeg' aanvoelt.

Evy den Hengst van Label Vier herinnert eraan dat iconen vaak helderder voelen dan ze zijn. Wat voor jou een 'prullenbak' is, kan voor een ander een 'archief' zijn. Test je iconen op tien gebruikers door alleen de iconen te tonen en te vragen wat ze betekenen. Welke iconen gemiddeld scoren onder de zeventig procent juist, krijgen een tekstlabel.

Toepassen: de blueprint

Vul de Iconen Blueprint in: één A4 met de zes plekken in een tabel, met per plek welk icoon je gebruikt en welk label erbij hoort. Eén pagina, in tien minuten klaar als je je iconen-set kent.

De eerste actie kost vijf minuten: open je homepage en tel de iconen. Heeft elk icoon een tekstlabel ernaast of eronder? Zo niet, voeg vandaag het label toe aan minstens één visueel zichtbaar icoon en je hebt direct een element dat sneller begrijpelijk is.