Iconen in een website of app wel of niet doen?

Iconen worden in het dagelijks leven veel gebruikt. Denk bijvoorbeeld aan het verkeersbord voor de snelweg, de bekende mannetjes en vrouwtjes om de betreffende toiletten aan te geven, of een sigaret met een rode streep erdoor bij een rookverbod.

Iconen zoals bovengenoemde, zijn voor ons vaak kraakhelder. Dat komt niet omdat ze van zichzelf zo duidelijk zijn, maar omdat we er helemaal aan gewend zijn – ze zijn ons ooit aangeleerd en ze worden overal op dezelfde manier toegepast.

icon-snelweg

Als je bijvoorbeeld bovenstaand beeld niet zou kennen, zou je er van alles in kunnen zien. Een hoedje, een tennisveld, etc. Bij websites en apps is het eigenlijk precies hetzelfde. Ook hier worden al sinds lange tijd iconen gebruikt.

Met veel iconen gaat het best goed. Iedereen weet wel dat je voor de startpagina op het ‘huisje’ klikt. Of dat je kunt zoeken door op een ‘vergrootglas’ te klikken.

icon-home+search.fw

Context-afhankelijkheid

Al begint bij laatstgenoemde al weer meteen de twijfel toe te slaan. Staat een vergrootglas ergens bovenaan een webpagina, dan betekent het inderdaad meestal ‘zoeken’. Maar staat een vergrootglas bij of op een afbeelding, dan betekent het doorgaans dat je de afbeelding kunt vergroten door erop te klikken. De functie van het icoon is dan niet geheel eenduidig, maar wordt pas duidelijk door de context. Daar is op zich niets mis mee, zolang die context er maar is.

Nog een voorbeeld van een algemeen bekend maar context-afhankelijk icoon, is dat van LinkedIn. Staat het ergens onderaan een webpagina, dan linkt het meestal naar een bedrijfspagina op LinkedIn. Maar staat het bij de contactgegevens van een specifiek persoon, dan linkt het doorgaans naar het persoonlijk LinkedIn-profiel van die persoon.

Naast contextafhankelijkheid is er het probleem, dat heel veel iconen die gebruikt worden niet ingeburgerd zijn, en dus in principe van alles kunnen betekenen.

Niet doen dus, iconen?

Je zou daarom al bijna kunnen gaan denken dat je beter helemaal geen iconen kunt gebruiken, maar zo erg is het gelukkig niet. Iconen hebben zeker een meerwaarde, maar alleen als de betekenis ervan duidelijk is.

Dit kun je bijvoorbeeld bewerkstelligen door de betekenis er met een tekstlabel klein onder te zetten. Doe je dat niet, dan komt de gebruiker pas achter de betekenis nadat hij op het icoon geklikt heeft.

Mystery Meat Navigation

Dit soort onduidelijkheid, en dan specifiek met betrekking tot navigatie, werd in het boek ‘Webpages that suck’ uit 1998 al eens op ludieke wijze beschreven als ‘mystery-meat navigation’. Met andere woorden: Er ligt wel een stuk vlees op je bord, maar je hebt geen idee wat het precies is of waar het vandaan komt. En daar wil je natuurlijk niet pas achter komen nadat je het hebt opgegeten.

Iconen kunnen, zoals gezegd, hoe dan ook zeker een meerwaarde hebben: ze nemen relatief weinig ruimte in en worden door het brein sneller verwerkt dan tekstuele informatie. Daarnaast hebben ze ook een stijlfunctie. Ze kunnen een design echt afmaken. De enige echt belangrijke stelregel bij het gebruik van iconen is dus: Zorg ervoor dat de betekenis ervan voor de gebruiker duidelijk is.