Iconen op het internet

Door Quinten van Geest, 22 november 2009

Zo nu en dan kom je een website tegen die gebruik maakt van iconen. Deze iconen (afbeeldingen) linken soms naar een bepaalde pagina. Heel vaak weet je niet wáár het naartoe linkt, omdat de afbeelding niet representatief is. Het gebruik ervan heeft dus een negatieve invloed op de usability van de website.

Wat zijn iconen?

Volgens Wikipedia is de definitie van een icoon: “Een teken dat in zijn vorm overeenkomt met zijn betekenis, datgene waarnaar het verwijst”. Simpel gezegd is het dus een afbeelding dat een woord vervangt. Tijdens het rijden maken we bijvoorbeeld gebruik van verkeersborden. Al deze borden hebben een bepaalde betekenis, wat je in principe ook in woorden zou kunnen uitdrukken.

Wat zijn de problemen

Het allergrootste probleem is uiteraard de interpretatie van het icoon. Veel voor de hand liggende iconen voor websites zijn er niet echt. Uiteraard kan je de knop ‘home’ vervangen door een icoon van een huis of een vergrootglas voor de zoekfunctie.

Een oorzaak waardoor interpretatie lastiger wordt, is het feit dat elke ontwerper zijn eigen iconen kan ontwerpen. Hierdoor wordt de algehele consistentie van icoongebruik op het internet verlaagd, wat tevens het tweede probleem is. Stel je voor wat voor chaos het wordt als elke gemeente haar eigen verkeersborden mag ontwerpen. Hetzelfde gebeurt nu eigenlijk op het internet. Elke ontwerper heeft namelijk zijn eigen mening en visie, waarbij de gebruiker soms vergeten wordt.

Hoe kan je ze oplossen

De meest voor de handliggende oplossing is uiteraard het vermijden van iconen. Gebruik woorden om zo duidelijk te maken wat er gebeurt als iemand erop klikt. Taal is iets universeels en staat, indien goed geformuleerd, niet open voor interpretatie. Doe hier je voordeel mee. Waarom zou je nog een keer het wiel uitvinden op het gebied van communicatie?

Ben je toch een liefhebber van iconen? Dan kan je ze ondersteunen door middel van een representatief woord. Je kan dit doen door een hover-state aan het icoon toe te voegen (indien het een menu-item is). Wanneer men dan met de muis over het icoon beweegt, komt er een woord tevoorschijn. Het nadeel is dat men dan wel eerst over het icoon heen moet gaan, voordat men weet waar deze naartoe linkt.

De website van Design For Fun heeft een unieke navigatie op de portfolio pagina. Door bovenin over de iconen te bewegen, verschijnt er links bovenin de categorie waarmee het correspondeert. Naar mijn mening niet gebruiksvriendelijk, maar wel creatief.

iconen1

 

Een andere manier is het permanent zichtbaar maken van een representatief woord. Echter neemt dan de relevantie van het icoon af, omdat men toch geneigd is het woord te lezen. De website van DX Solutions maakt hier gebruik van. Persoonlijk vind ik het erg druk en vrij overbodig.

iconen3

Conclusie

Als ik kort het bovenstaande samenvat, kunnen we het volgende concluderen: iconen hebben (vaak) een negatieve invloed op de usability van een website, omdat deze inconsistent over het internet worden gebruikt en dus erg open staan voor interpretatie. Voor gebruikers is het dan niet duidelijk wat er precies met het icoon wordt bedoelt.

De volgende oplossingen zijn mogelijk:

  • Vervang het icoon door tekst;
  • Voeg een hover-state aan het icoon toe, zodat duidelijk wordt wat ermee wordt bedoeld;
  • Voeg permanent een representatief woord toe.

Moraal van dit verhaal: laat mensen niet denken over de betekenis van iets. Schep duidelijkheid.

Bron



  1. Unadulterated words, some authentic words man. You made my day.

  2. Iconen kunnen wel degelijk een nut hebben op een website.

    Het klopt dat je dan wel een tooltip tekst of het moet laten vergezellen van een vaste tekst. Beide doen is eigenlijk nog beter.

    Quasi elke website gebruikt zijn eigen iconen en dat belemmert de inconsistentie, doch dit is geldig voor ‘alles’: navigatie manieren, locatie en stijl van de menu’s en andere dingen, kleur gebruik, functionaliteit, etc…

    Indien goed gekozen, kunnen ze toch nog enkele voordelen hebben:

    * Het kan een website aantrekkelijker maken
    * Het ondersteunt het aanleren van de website. Iconen, tekeningen, foto’s e.d. worden ongeveer 3x beter onthouden dan tekst.
    * Het is aanbevolen iconen te gebruiken wanneer een significant deel van uw doelgroep bestaat uit laaggeschoolden.

  3. Bedankt voor je reactie!

    Het klopt dat ze wel enkele voordelen kunnen hebben, maar zoals je zelf ook al aangeeft: ze moeten góéd gebruikt worden!

    Persoonlijk vind ik dat de inconsistentie van iconen op het internet niet echt vergeleken kan worden met dat van bijvoorbeeld kleurgebruik. Iconen dienen naar mijn mening een hoger doel: ze moeten helpen bij het navigeren (door goed gebruik). Kleur speelt daar denk ik een minder grote rol in: of een menu nu blauw of groen is, dat maakt niets uit (indien het contrast maar goed is :-) )

    Dat het het aanleren van een website bevordert, kan ik niet ontkennen of bevestigen. Ik denk dat er bij een goede website (met een duidelijke informatiestructuur / navigatie) niet zoveel geleerd hoeft te worden. Alle categorieën moeten voor zichzelf spreken, anders gaat er naar mijn mening iets mis in de usability. Daarnaast is taal universeel en hoeft dat niet nogmaals ‘aangeleerd’ te worden als je eenmal op een website zit.

    Je laatste punt ben ik het helemaal mee eens: ik moet dan ook denken aan websites voor kinderen (die nog niet zo goed zijn in taal). Het is dan inderdaad een waardevolle toevoeging, vooral als je het aan een (permanente) tekst koppelt. Werken ze gelijk aan hun vocabulaire :-)

  4. Quinten,

    Ze moeten inderdaad echt wel goed zijn en bv. je link of omschrijving ondersteunen.

    Ik zou op een website, ook nooit enkel en alleen een icoon gebruiken als link bv. Je mag nog zo’n mooi en duidelijk icoon gekozen hebben, het is best mogelijk dat uw bezoeker het niet herkent. Die kans is zelfs groter wanneer uw website een internationaal publiek moeten bedienen.

    Een typische Amerikaanse brievenbus, herkennen wij, Europeanen, niet als een brievenbus.
    Enkel iconen gebruiken, gaan mensen met bepaalde fysieke gebreken ook niet leuk vinden.

    Ik kan wel bevestigen dat iconen het aanleren van een website bevorderen. Vanuit het veld van de cognitieve psychologie weten we dat we veel beter afbeeldingen onthouden en herkennen dan puur tekst. Tekst en afbeeldingen worden doorgaans niet in hetzelfde soort geheugen gestopt. Maw. je spreekt andere cognitieve bronnen aan, wanneer je iets moet herkennen. Door diversificatie toe te passen vergroot je de kans dat de herkenning positief is.

    Websites in het bijzonder moeten gemakkelijk aan te leren zijn. Geen enkele gebruiker is bereid om uren training te accepteren, voor hij door heeft hoe je site werkt. Dat aanleren moet intuïtief gebeuren. Die iconen zijn gewoon context om dit leerproces te vereenvoudigen en versnellen.

    Kleur is niet het belangrijkste (doch je kan wel degelijk ‘slechte’ kleuren kiezen), de plaatsing en de volgorde van je menu en zijn onderliggende menu items zijn belangrijker. Veel websites volgen wel een bepaalde lijn, degene die daar te sterk van afwijken kennen grote problemen om hun navigatie menu’s ‘verkocht’ te krijgen.

    Maar goed ja, het is beter om een website te hebben met een consistente navigatie zonder iconen, dan ééntje met een inconsistente navigatie en mooie iconen.

    Het gaat echt niet alleen over kinderen, ook volwassenen met een lagere scholing hebben extra voordeel. Over het algemeen is die hun woordenschat minder rijk en breed. Die mensen kan je extra ondersteunen door iconen te gebruiken. Die lezen doorgaans ook niet zo graag. Uiteraard zijn hier wel uitzonderingen, maar die zijn niet de norm.

    Iconen zijn geen must, veel websites hebben er geen en toch zijn ze gemakkelijk te gebruiken. Het is alleen een extraatje die in bepaalde gevallen echt wel een hoger doel nastreeft.

    Bovendien, wanneer je goede mooie relevante iconen gebruikt, dan verhoog je de aaibaarheidsfactor. Mensen houden nu eenmaal van mooie dingen.

    Mijn excuses voor het lange antwoord :)

  5. Ik houd van lange antwoorden, dus dat is geen probleem :-)

    Ben het met je woorden eens. Het meest interessante vind ik het geheugen mbt afbeeldingen en tekst (heb morgen m’n tentamen neuropsychologie).

    Beide (tekst en afbeeldingen) worden volgens mij opgeslagen in het expliciete semantische LTM. Wat is dan het verschil? Of zit het verschil in de verwerking van de stimulus (bij een afbeelding worden andere hersengedeelten geactiveerd dan bij tekst)?

    Ben benieuwd! Cognitieve neuropsychologie is de kant die ik op wil gaan, vandaar mijn fascinatie voor de hersenen :-)

  6. Edwin :

    Niet noodzakelijk. Kennis kan ook in je impliciet geheugen terechtkomen. Quasi niemand van ons zit iconen ed. écht te bestuderen, maw. onbewust neem je ‘de leerstof’ (het icoon dus) op.

    Dat impliciet geheugen heeft nog wat onderverdelingen die van toepassing zijn in deze iconen-case: priming, conditionering en habituatie.

    Ene Hitch (en niet alleen hij) heeft o.a. de volgende zaken aangetoond over het LTG:

    * Hoe meer verschillend en uniek de opgeslagen informatie in het Lange Termijn Geheugen is, hoe groter de kans dat het wordt teruggevonden.

    Het verschil tussen iconen is gewoonweg veel groter, dan het verschil tussen woorden.

    * Het herinneren vanuit het Lange Termijn geheugen gaat beter met tekeningen dan via woorden en het gaat beter met herkenbare dan met onherkenbare woorden.

    Dit wordt nog verder ondersteund doordat sommige mensen met bepaalde geheugenstoornissen bv. wél het gezicht van hun vrouw kunnen herinneren, maar niet hun naam.

    Ik gebruik wel wat elementen over cognitieve psychologie in mijn ontwerpen. Het spaart testen uit, ik kan gewoon beredeneren en argumenteren waarom bepaalde dingen werken of niet. En het is gewoon ook fijn om te weten waarom bepaalde dingen zijn zoals ze zijn.

    Je kan op mijn blog wel een paar artikelen over Cognitieve Psychologie terug vinden. Beschouw ze als een goede start. Ik ga die in de toekomst nog wel wat uitbreiden.


Laat een reactie achter