Gebruik en misbruik van iconen in de moderne tijd

Het aantal pictogrammen dat we dagelijks zien, is verbluffend. Ze zijn overal om ons heen, zowel online als offline. We gebruiken ze graag. Ze verbeteren de esthetiek van onze sites en kunnen een betere gebruikerservaring bieden. Soms vergeten we echter de reden achter het gebruik van een pictogram, en dat maakt dat pictogrammen voor pictogrammen hun effectiviteit verliezen.


Universeel communicatiemechanisme

Het primaire kenmerk voor pictogrammen is a gemeenschappelijke visuele taal die effectief taalleemtes overbrugt. Ze zijn ogenblikkelijk herkenbaar en verwijderen open interpretaties. Dit maakt ze perfect voor een digitale context, omdat het internet wordt gedeeld door veel mensen en hun overeenkomstige culturen.

Screenshot van The Noun Project

Het ontwerpen van een pictogram dat universeel leesbaar is, is nog steeds een enorme uitdaging. Onze culturen hebben allemaal grafische conventies die kunnen leiden tot verwarring over de betekenis achter sommige op maat ontworpen iconen.

Het verkennen van een nieuwe interface bestaande uit vele pictogrammen kan op het eerste gezicht een uitdaging zijn. Het duurt even voordat we ons bewust worden waar alles is en wennen aan de betekenis van elk pictogram. Om deze reden, labelen van pictogrammen (met behulp van de titel attribuut, of misschien op maat gemaakte tooltips), zal de effectiviteit van het leren van een nieuwe interface verbeteren en wordt als een best practice beschouwd. In feite is het algemeen aanvaard dat pictogrammen in combinatie met labels sneller door gebruikers worden verwerkt.


Maak visuele interesse

Een van de meest voorkomende fouten die we maken is dat we gebruiken te veel pictogrammen in een bepaalde instelling. Pictogrammen zijn het meest effectief wanneer ze de visuele interesse vergroten en de aandacht van de gebruiker trekken. Ze helpen gebruikers bij het navigeren op een pagina. Gebruik te veel pictogrammen en ze worden niets meer dan decoratie. Het gebruik ervan voor navigatie op een webpagina kan vaak verwatering veroorzaken.

Facebook gebruikt zoveel pictogrammen dat ze niet langer dienen als visuele interesse, maar meer als decoratie fungeren. Bepaalde Windows-interfaces gebruiken gecompliceerde pictogrammen, die geen duidelijke interface bieden en dus het gebruiksgemak verminderen.

Door het aantal pictogrammen dat u gebruikt te beperken, trekt u de aandacht van de gebruiker sneller, waardoor het navigeren eenvoudiger wordt.

De voettekst van The Verge maakt slim gebruik van iconen. Hier hebben de pictogrammen een duidelijke meerwaarde en de lay-out voelt niet rommelig. In deze schermafbeelding van Behance zijn de pictogrammen zorgvuldig uitgebalanceerd om de pagina sneller te begrijpen. Hoewel deze kunstpagina op Artsy veel pictogrammen bevat, vanwege de eenvoudige branding van de website, werken de pictogrammen perfect om de gebruiker te helpen navigatiekeuzes te maken.

Icon-kits zijn geweldig, maar soms is het beter om te proberen uw eigen pictogrammen te ontwerpen of bestaande pictogrammen (met toestemming) aan te passen aan uw behoeften. Het uiterlijk van een website moet worden weerspiegeld in de pictogrammen die u gebruikt. Zoals je in de voorbeelden kunt zien, hoeft dit niet per se een zeer moeilijke taak te zijn, en het is zeker iets dat je in gedachten kunt houden om de branding van je website te verbeteren. Het zijn de kleine details die het verschil maken tussen een geweldige website en een uitzonderlijke website.

Aan de andere kant kan het maken van een contrast met de reguliere branding het nog eenvoudiger maken om visuele interesse te bouwen. Hier is een voorbeeld van Twitter. Zie hoe de knop om een ​​tweet te schrijven opvalt?

Wat visuals betreft, moeten interfacepictogrammen voldoende gevarieerd zijn om onderscheidend te zijn, terwijl ze consistent genoeg zijn om te werken als een samenhangend geheel.

De grootste valkuil zit in het gebruik van iconen omdat ze een esthetische esthetiek bieden, niet omdat ze communiceren. Geweldige pictogrammen zijn zowel visueel aantrekkelijk als communiceren met gebruikers.


Zorg voor functionaliteit en feedback

Zonder pictogrammen zouden we verplicht zijn om tekst te gebruiken om bepaalde functionaliteit aan onze gebruikers te beschrijven. Hoewel dit interfaces toegankelijk maakt, kun je je voorstellen dat een videospeler alleen tekst gebruikt die zegt: "play", "pause", "like", "fullscreen"? Pictogrammen bieden vertrouwde metaforen om te communiceren snel.

De kracht van pictogrammen wordt gebruikt om te begrijpen hoe deze videospeler behoorlijk snel en efficiënt werkt. De combinatie van kleur en een herkenbaar pictogram geeft feedback: er is iets mis.

Het is ook mogelijk om gebruikers te geven terugkoppeling via pictogrammen, meestal gedaan in combinatie met kleur. Een groen vinkje geeft bijvoorbeeld aan dat een gebruikersnaam beschikbaar is. Een kruisje in een rood vak vertelt de gebruiker dat ze niet opnieuw een nieuw wachtwoord hebben ingevoerd. Pictogrammen kunnen geweldige ondersteuning toevoegen, vooral als deze in realtime wordt toegepast. In het bovenstaande voorbeeld krijg ik een melding als ik iets invoer dat geen URL is echte tijd. Het concept hierachter heeft veel potentiële doelen, die allemaal de gebruikerservaring verbeteren.


Technische beperkingen

We leven nu in een tijd met verschillende schermformaten, vloeiende lay-outs en verschillende pixeldichtheden. Dit heeft een grote invloed gehad op de manier waarop we met afbeeldingen omgaan en daarom is het alleen maar logisch dat het ook invloed heeft op hoe we omgaan met pictogrammen.

We hebben steeds vaker de gewoonte om afbeeldingen voor verschillende apparaten te optimaliseren, maar we kunnen ook onze pictogrammen aanpassen om een ​​onberispelijke ervaring te creëren. Een bepaald pictogram kan extreem goed werken met 200 px, maar wordt de boodschap nog steeds duidelijk weergegeven op 12px of vervaagt het detail? Onlangs publiceerden we een artikel over ontvankelijke iconografie, waarin dit concept nader wordt toegelicht.


Conventies negeren

Pictogrammen worden misbruikt door gewone praktijken te negeren. Wanneer gebruikers eraan gewend raken dat een pictogram iets betekent, is het wijzigen van de actie achter dat pictogram buitengewoon verwarrend.

Om deze reden worden er voortdurend normen voorgesteld en wordt de bestaande iconografie verfijnd. Bekijk wat Andy Clarke te zeggen heeft over een pictogramstandaard voor responsieve navigatie .

De belangrijkste regel blijft echter: stap niet uit de buurt van bestaande gebruikerspatronen. Hoewel een fraai nieuw menupictogram klinkt als een geweldige manier om je ontwerpvaardigheden uit te dagen en met een uniek ontwerp te komen, kan het tegelijkertijd een ramp zijn voor bruikbaarheid.

Bespreken van holle iconen

Meer recent bekritiseerde een blogpost gepubliceerd op Medium kritiek op het gebruik van holle pictogrammen, na de recente release van iOS 7. Het beweerde dat het gebruik van holle pictogrammen meer "werk" van gebruikers vereist. Deze blogpost is veel besproken in de webontwerpgemeenschap. Er zijn verschillende, interessante gezichtspunten. Maar waar we het allemaal over eens zijn, is dat iconografie voor de gebruiker zinvol moet zijn. Het gaat natuurlijk allemaal om conventies.


Aubrey Johnson's geanimeerde GIF, demonstrerend het werk dat onze hersenen ondernemen bij het verwerken van pictogrammen

Conclusie

Ik had één doel voor ogen toen ik dit artikel schreef: om ons eraan te herinneren onszelf af te vragen waarom we gebruiken pictogrammen op websites die we maken. Voor velen van ons is het een automatisering geworden om ze als vanzelfsprekend in onze projecten op te nemen. Vraag uzelf de volgende keer af wat de toegevoegde waarde van dat extra pictogram is en hoe het zich verhoudt tot de andere pictogrammen op de website.


Handige bronnen

  • Het handboek van het pictogram
  • Alles over responsieve iconografie
  • Hackdesign op Iconografie
  • Interessante Photoshop / Illustratieverlenging
  • Iconmonstr
  • Het zelfstandig naamwoord-project
  • Hoe pictogrammen te gebruiken om inhoud te ondersteunen in Webdesign (Smashing Magazine, '09)