Iconen worden gebruikt om ruimte te besparen. Een plaatje zegt meer dan duizend woorden, is het idee. In de praktijk is een icoon vaak een raadsel met een mooie vorm. Wat betekent dat pijltje precies? En dat vierkantje met een streepje erin?
Er zijn maar een handvol pictogrammen die iedereen hetzelfde leest. De rest is aangeleerd, en dat kost je bezoeker denkwerk.
Bij ParamediCare Huid- en Oedeemtherapie speelde dat mee. Ik verzorgde daar het webdesign en de vindbaarheid. De praktijk biedt meerdere behandelingen die voor een leek op elkaar lijken.
Ik heb daar bewust pictogrammen gebruikt met een label eronder, en niet zonder. Het icoon helpt bij het scannen, de tekst voorkomt vergissingen. Alle iconen komen bovendien uit dezelfde set, met dezelfde lijndikte.
Iconen werken alleen als iedereen ze hetzelfde leest.
Wat is iconografie?
Iconografie is de samenhangende set pictogrammen die je op je site gebruikt. Het gaat niet om losse plaatjes maar om een familie.
Die samenhang is de kern. Iconen uit vier verschillende sets naast elkaar zien er rommelig uit, ook als ze allemaal mooi zijn. Verschillende lijndiktes vallen meteen op.
Waar ze voor bedoeld zijn
Voor herkenbaarheid bij het scannen. Iemand die een pagina overziet, springt van vorm naar vorm. Een goed icoon versnelt dat.
Wat ze niet zijn: decoratie. Een icoon dat niets toevoegt, kost laadtijd en aandacht zonder er iets voor terug te geven.
Wanneer werkt het?
Bij begrippen die iedereen kent. Een telefoonhoorn, een envelop, een winkelwagen, een vergrootglas. Die zijn zo ingesleten dat ze zonder uitleg werken.
Bij alles daarbuiten is een label bij een icoon nodig. Diensten, behandelingen, categorieen of stappen in een proces. Daar raadt niemand het goed.
Mijn vuistregels
Twijfel je of het duidelijk is? Zet er tekst bij.
Gebruik hetzelfde icoon altijd voor dezelfde betekenis.
Kies een set en meng niet met een tweede.
Houd de lijndikte gelijk aan je lettergewicht.
Geef iconen die iets doen een naam voor hulpsoftware.
Die laatste wordt bijna altijd vergeten. Een kruisje zonder naam is voor een screenreader een naamloze knop. Meer daarover lees je bij accessibility.
Welk formaat?
SVG, vrijwel altijd. Dat is schaalbaar beeld, dus het blijft scherp op elk scherm en bij elke grootte.
Bovendien kun je de kleur ervan aansturen met CSS. Hetzelfde icoon kan zo donkerblauw op wit en wit op donkerblauw zijn, zonder een tweede bestand.
Iconenlettertypen waren jarenlang gebruikelijk. Die raad ik af, want je laadt dan een compleet lettertype voor een handvol vormen. Dat kost onnodig pagespeed.
Waar haal je ze vandaan?
Er zijn goede gratis bibliotheken met duizenden pictogrammen in een consistente stijl. Let wel op de licentie, want niet alles mag commercieel.
Laat je ze zelf tekenen, dan krijg je iets dat echt bij je merk past. Dat is een investering die zich pas terugverdient bij een groter merk.
Vastleggen
Zet je gekozen set en de betekenis per icoon in je design system. Noteer ook welke kleur ze krijgen, met de bijbehorende hexcode.
Zonder die vastlegging sluipt er binnen een jaar een tweede stijl in via een campagnepagina. En dan is de samenhang weg die je juist wilde.
Let op de grootte
Een icoon van zestien pixels is op een telefoon nauwelijks te raken. Voor iets klikbaars houd ik minimaal vierenveertig pixels aan als raakvlak.
Dat raakvlak mag groter zijn dan het zichtbare pictogram. Je vergroot dan de onzichtbare rand eromheen, zodat het beeld rustig blijft.
Kleur alleen is niet genoeg
Gebruik een icoon niet als enige drager van betekenis. Een rood driehoekje bij een fout ziet iemand met kleurenblindheid anders dan jij.
Zet er dan ook een woord bij. Dat kost een regel en het maakt je pagina voor iedereen leesbaar.
Wat het je oplevert
Een consistente set maakt je site rustiger zonder dat iemand kan aanwijzen waarom. Dat is hetzelfde effect als een goed raster of een vaste afstandschaal.
Het valt pas op als het er niet is, en dan valt het meteen op.
Meer vragen over Iconografie
Dit zijn de vragen die ik hierover het vaakst krijg. Ik werk ze los uit.
Wat is iconografie?
Wanneer gebruik je een icoon en wanneer niet?
Welk bestandsformaat gebruik je voor iconen?
Moet er tekst bij een icoon staan?
Waar haal je iconen vandaan?
Hoeveel iconen heeft een website nodig?
Wat is iconografie?
Bij begrippen die iedereen kent, werkt het zonder uitleg. Een telefoonhoorn, een envelop, een winkelwagen en een vergrootglas zijn zo ingesleten dat niemand erover nadenkt.
Bij alles daarbuiten is een label nodig. Diensten, behandelingen, categorieen of stappen in een proces: daar raadt niemand het goed.
Mijn vuistregel is simpel. Twijfel je of het duidelijk is? Zet er tekst bij. Dat kost je nauwelijks ruimte en het voorkomt vergissingen.
Gebruik daarnaast hetzelfde icoon altijd voor dezelfde betekenis. Een pijltje dat op de ene pagina uitklappen betekent en op de andere doorgaan, ondermijnt het hele systeem.
Wat een icoon nooit is: decoratie. Een pictogram dat niets toevoegt, kost laadtijd en aandacht zonder er iets voor terug te geven.
Vraag iemand die je site niet kent wat een icoon betekent. Kan hij het niet in een seconde zeggen, dan hoort er een label bij. Doe die test met drie verschillende mensen, dan weet je of het echt duidelijk is.
Wanneer gebruik je een icoon en wanneer niet?
Iconografie is de samenhangende set pictogrammen die je op je website gebruikt. Het gaat niet om losse plaatjes maar om een familie.
Die samenhang is de kern. Iconen uit vier verschillende sets naast elkaar zien er rommelig uit, ook als ze stuk voor stuk mooi zijn. Verschillende lijndiktes vallen meteen op, ook bij iemand die niet weet waar hij naar kijkt.
Iconen worden gebruikt om ruimte te besparen. Een plaatje zegt meer dan duizend woorden, is het idee.
In de praktijk is een icoon vaak een raadsel met een mooie vorm. Wat betekent dat pijltje precies? En dat vierkantje met een streepje erin?
Er zijn maar een handvol pictogrammen die iedereen hetzelfde leest. De rest is aangeleerd, en dat kost je bezoeker denkwerk dat hij liever ergens anders aan besteedt.
Loop je eigen site eens langs op iconen. Komen ze allemaal uit dezelfde familie, of zitten er drie stijlen door elkaar? Dat is vaak de oorzaak van een rommelig gevoel.
Moet er tekst bij een icoon staan?
Bijna altijd wel, en dat is een impopulaire boodschap bij ontwerpers.
Een icoon met een label eronder helpt bij het scannen en voorkomt tegelijk vergissingen. Je bezoeker springt van vorm naar vorm en leest pas als hij denkt goed te zitten.
Zonder tekst leun je op een aanname. Bij een handvol universele symbolen kun je die maken, bij de rest niet.
Er is nog een tweede reden die zwaarder weegt. Een icoonknop zonder tekst is voor een screenreader een naamloze knop. Iemand hoort dan alleen dat er iets klikbaars is.
Geef zulke knoppen daarom altijd een naam mee in de code, ook als er visueel geen tekst staat. Meer daarover lees je bij accessibility.
Zorg ook voor een groot genoeg raakvlak op een telefoon. Een pictogram van zestien pixels is met een duim niet te raken. Test dat op een echte telefoon en niet met je muis op een groot scherm.
Welk bestandsformaat gebruik je voor iconen?
SVG, vrijwel altijd. Dat is schaalbaar beeld, dus het blijft scherp op elk scherm en bij elke grootte.
Een icoon van zestien pixels en dezelfde vorm op zestig pixels komen uit hetzelfde bestand. Je hebt geen aparte versies nodig voor verschillende schermen.
Bovendien kun je de kleur aansturen met CSS. Hetzelfde icoon kan zo donkerblauw op wit en wit op donkerblauw zijn, zonder een tweede bestand.
Iconenlettertypen waren jarenlang gebruikelijk. Die raad ik af, want je laadt dan een compleet lettertype voor een handvol vormen.
Dat kost onnodige laadtijd, en bij een storing krijg je vierkantjes te zien in plaats van pictogrammen. Meer daarover lees je bij pagespeed.
Vraag je bouwer welk formaat er gebruikt wordt. Laadt hij een compleet iconenlettertype voor acht vormen, dan valt daar snelheid te winnen. Vraag ook hoeveel iconen er werkelijk gebruikt worden, want dat zijn er meestal maar acht. Dat scheelt vaak een compleet bestand dat je nergens voor gebruikt.
Waar haal je iconen vandaan?
Er zijn goede gratis bibliotheken met duizenden pictogrammen in een consistente stijl. Daar kom je voor een bedrijfssite ruim mee uit.
Let wel op de licentie. Niet alles mag commercieel gebruikt worden, en sommige sets vragen om een vermelding.
Kies een set en blijf daarbij. Meng je twee bibliotheken, dan zie je dat aan de lijndikte en de hoekafronding, ook al kun je het niet benoemen.
Laat je ze zelf tekenen, dan krijg je iets dat echt bij je merk past. Dat is een investering die zich pas terugverdient bij een groter merk met veel uitingen.
Leg je keuze daarna vast in je design system, samen met de betekenis per icoon. Zonder die vastlegging sluipt er binnen een jaar een tweede stijl in via een campagnepagina.
Bewaar je gekozen set en de bronbestanden op een vaste plek. Bij een herontwerp over drie jaar wil je niet opnieuw beginnen met zoeken. Noteer er ook bij welke betekenis elk icoon heeft, niet alleen hoe het heet.
Ziet jouw website er rommelig uit zonder dat je kunt aanwijzen waarom? Stuur me de link via het formulier hieronder. Ik kijk of je iconen uit een set komen en of ze duidelijk genoeg zijn zonder uitleg. Vaak is dat de oorzaak van het onrustige gevoel. Vermeld je plaats, dan weet ik meteen waar je zit.
