Iconographie. Bon ou Mauvais? Comme toujours, ça dépend

Les icônes sont partout. Téléchargez l'un des milliers de kits d'icônes vectorielles gratuits sur Internet ™ et commencez à jeter des pixels sous la forme de hamburgers, de brochettes et de loupes sur votre planche de travail et vous obtenez un dessin. Mais avez-vous arrêté de penser quand utiliser une icône et quand ne pas en utiliser? Quand utiliser quelle icône?

Cet article partage quelques réflexions et recherches de l'équipe SEEK UX concernant l'iconographie, ce qui, espérons-le, vous sensibilisera davantage aux complexités de l'expérience utilisateur derrière ces petites œuvres d'art 8 bits.

Icônes en tant qu'éléments statiques

Les icônes statiques sont celles utilisées comme éléments décoratifs, pour communiquer une information discrète ou pour aider à trouver la route. Comme tout, ils peuvent être à la fois bons et mauvais.

Les icônes sont bonnes

Des icônes bien conçues et facilement reconnaissables peuvent communiquer rapidement les informations qu'un utilisateur peut rechercher - par exemple, numériser une page de résultats de recherche pour des hôtels dotés d'une connexion Wi-Fi ou le nombre de chambres d'une propriété. Nous le voyons dans le symbolisme des parkings accessibles, des panneaux pour les salles de bain et le symbole universel du poison.

Realestate.com.au icônes pour le nombre de chambres à coucher, salles de bains et espaces de voiture pour une liste de propriété

Les icônes permettent d'économiser de l'espace et de réduire la charge cognitive en éliminant la nécessité de relire la même information pour chaque liste, ce qui réduit les frictions.

La conception REA sans icônes augmente le frottement

Les icônes peuvent améliorer l'apparence d'une interface, en ajoutant un attrait visuel reconnu pour améliorer l'UX (perçue) et la convivialité d'un produit. Cet effet est connu sous le nom d’effet esthétique-utilisabilité et vous pouvez le lire ici (NN / G).

Lorsque les icônes sont associées à du texte, cela peut améliorer l’accessibilité en offrant un mécanisme alternatif pour relayer les informations - texte avec un indice visuel - ce qui est bon pour les personnes ayant des problèmes cognitifs, une basse vision qui ne peut pas voir l’icône correctement, etc.

L’icône de chat du NAB est claire

Les icônes peuvent également aider à la navigation des personnes qui parlent (ou lisent) la langue de l'interface en tant que langue non principale (ou pas du tout). Je ne serais peut-être pas en mesure de lire le texte sur l'interface, mais les icônes me permettent de comprendre comment naviguer ou trouver ce que je recherche. C'est également vrai dans le monde réel et c'est pourquoi nous avons des icônes standardisées pour les salles de bain, les aéroports, les ascenseurs, etc.

Malgré mon pauvre catalan, j'ai réussi à laver mes vêtements à Barcelone grâce aux icônes

Les icônes sont mauvaises

Des icônes mal conçues peuvent créer de la confusion lorsque nous ne savons pas ce qu’elles essaient de nous représenter, en particulier si elles ne sont accompagnées ni de texte ni d’une info-bulle.

Sans le texte, une fleur représente-t-elle un «centre de spa et de bien-être»?

Les icônes pour les icônes n'apportent que peu de valeur et ajoutent du bruit à l'interface.

Dans la conception de gauche, les icônes n’ajoutent aucune valeur, nous les avons supprimées et avons réduit le bruit.

Les icônes sans texte alternatif sont source de confusion pour les utilisateurs de lecteurs d'écran. Surtout si elle lit simplement quelque chose comme "Star" au lieu de "Save Job". Les étiquettes de texte aident à réduire cette confusion chez les utilisateurs malvoyants.

Les icônes sont subjectives. La même icône peut signifier différentes choses sur différents sites Web (par exemple, une étoile pour «enregistrer» et une étoile pour «évaluer»). La même icône peut signifier différentes choses dans différents contextes (par exemple, une flèche pour le partage, la réponse, le transfert, le suivant). Les icônes peuvent être indéchiffrables.

Qu'est-ce que toutes les différentes icônes de blanchisserie signifient même? La source

Le but des icônes peut être déroutant

Est-ce une icône statique ou un élément interactif? Parfois, les icônes sont cliquables et exécutent une action. Cela peut être particulièrement déroutant lorsque des éléments cliquables se trouvent juste à côté des éléments non cliquables et dans une conception plate.

L’étoile est plus épaisse, je sais donc qu’elle est cliquable, mais l’utilisateur moyen le fait-il? Elle est séparée des autres icônes non actives - cela signifie-t-il que l'utilisateur moyen peut cliquer dessus?

Nous devons nous assurer qu’il est évident que cet élément est cliquable, ce que nous appelons l’abondance, en particulier s’il ne s’agit que d’une icône sans texte.

Icônes en tant qu'éléments interactifs

Vous avez vu un élément que vous souhaitez retrouver facilement sur une application ou un site Web? Il suffit de cliquer sur l’icône pratique «Enregistrer» de dandy! Mais qu'est-ce qu'une icône de sauvegarde?

Quelle icône, quand?

À l’époque du skeuomorphism, c’était autrefois l’icône du disque, où un objet logiciel était représenté avec son équivalent du monde réel, en l’occurrence une disquette in. La disquette n'a jamais fait l'objet d'une mise à niveau car nous sommes passés des disques aux CD en passant par les clés USB et le cloud, mais sa signification est toujours connue. Vous avez probablement entendu l’histoire folklorique de l’enfant qui a déclaré «Quelqu'un en 3D a imprimé l’icône Enregistrer!» En voyant une disquette IRL de 3 1/2 pouces.

Vous le verrez toujours dans les produits Microsoft Office aujourd'hui.

Icône Microsoft Save

Pour mettre une propriété de côté sur Airbnb, cliquez sur le coeur

Airbnb Sauvegarder une propriété
J'aime cet endroit, peut-être que je resterai ici!

Bien que je n’aime peut-être pas cet endroit, c’est peut-être quelque chose que je veux mettre de côté pour une évaluation ultérieure, car cela pourrait répondre à mes besoins en tant que voyageur. Airbnb a probablement choisi l’icône étoile car elle est déjà utilisée dans les évaluations, et peut-être voulons-nous distancer l’amour de l’épargne, en particulier dans les cas où ce n’est pas quelque chose qui plaira à un utilisateur (une nécessité, pas des vacances amusantes) ).

Des produits comme Twitter brouillent cette ligne - je pourrais toucher le cœur en tant que validation sociale (comme Instagram et Facebook) ou l'utiliser pour le sauvegarder afin que je puisse le récupérer plus tard. Ne pas vouloir utiliser un cœur est particulièrement vrai là où il signifie déjà autre chose - une réaction semblable - par exemple sur Instagram et Facebook, qui sont revenus à la conception skeuomorphic et ont choisi un signet pour représenter «enregistrer». Trouvez votre place avec un objet physique comme vous l'avez fait dans un livre (ou sur votre Kindle).

Moyenne marquer une histoire pour plus tard

Et une star? Si je «marque» quelque chose à sauvegarder, cela signifie-t-il que c’est mon préféré? Si un utilisateur revient et voit un élément dans une liste avec une étoile, cela signifie-t-il que nous le lui recommandons comme un bon match? Ou l'ont-ils sauvé?

Star un message sur Slack

Amazon a évité tous ces problèmes en un simple clic sur le bouton "Ajouter à la liste", sans icône.

Amazon - Ajouter à la liste

Les icônes avec du texte et des prix appropriés ont une action claire et sont plus utilisables. Cela rend également les actions beaucoup plus accessibles à ceux qui utilisent des lecteurs d’écran, aux personnes à faible cognition, etc.

Les étiquettes ajoutent du contexte aux icônes

Compréhension des icônes

En plus des opérations d'icônes déroutantes, très peu d'icônes sont universellement comprises.

Chez SEEK, nous avons effectué une recherche sur la compréhension de l’iconographie.

Nous avons d’abord demandé aux participants sur quel icône ils s’attendraient à cliquer pour mettre un travail de côté pour plus tard (nous avons évité le mot «sauvegarder» car nous ne voulions pas les amorcer). C'était une réponse en texte libre où ils pouvaient expliquer quel symbole ils s'attendaient à voir.

Imaginez qu’une icône (un symbole ou une image) soit masquée par le carré noir dans l’image ci-dessus. Cette icône est ce sur quoi vous voudriez cliquer pour mettre le travail de côté pour plus tard. À quel symbole ou à quelle image vous attendriez-vous?

Les réponses les plus populaires ont été:

  1. Une icône étoile (24%)
  2. «Enregistrer» comme réponse générique (15%) *
  3. Disquette (11%)
  4. Classeur / classeur (6%)

* On ne voit pas clairement ce que les répondants voulaient dire par «sauvegarder», car beaucoup n’ont pas précisé. Certains ont écrit des réponses telles que «l’icône de sauvegarde de la disquette» ou «l’icône de sauvegarde, c’est-à-dire une disquette», mais il n’est pas clair si tous les répondants «sauvegardés» le voulaient.

En outre, une étoile est utilisée sur le site Web de SEEK. Il est donc possible que les répondants répondent de manière biaisée en répondant à ce qu'ils savent être derrière le carré noir.

Nous avons posé la même question qu’un sondage Twitter, avec 4 options, et la majorité a répondu par l’intermédiaire d’une disquette, ce qui signifie économiser!

Sondage Twitter - quelle icône signifie sauvegarder?

Une disquette est peut-être encore universellement comprise, mais en tant que concepteurs, nous ne voulons pas d’une technologie ancienne encombrant nos interfaces, nous sommes donc passés à une étoile ou à un cœur. Avons-nous besoin d'une icône? Pourquoi pas simplement un bouton "Enregistrer"?

Nous avons ensuite montré aux participants 4 icônes isolées de l'interface et sans étiquettes, et leur avons demandé quels mots, expressions ou actions ils associent à l'icône.

Quels mots, expressions ou actions associez-vous à cette icône?

Aucune des icônes n’était universellement comprise et n’était ouverte à interprétation sur la base des expériences précédentes des participants et de leur maîtrise de la technologie. Ceci suggère que le fait de garder l'étiquette à côté des icônes augmentera la facilité d'utilisation et la facilité d'utilisation. Il suit également les directives d’accessibilité dans lesquelles il ne faut pas simplement compter sur des indices visuels pour décrire une action - contexte + repères visuels = utilisable

Les répondants ont repris ce sentiment dans leurs réponses textuelles:

"La plupart des choses en ligne me déroutent, pourquoi tous les viseurs ne peuvent-ils pas utiliser les mêmes formes pour faire la même chose?"
“Les icônes peuvent être un peu déroutantes car elles sont assez subjectives pour l'utilisateur et la situation dans laquelle elles sont utilisées”
«J'aime garder les choses simples - chercher du travail est assez stressant sans avoir un site compliqué pour naviguer dans le processus»

L'icône de signet indiquait le plus probablement aux participants qu'ils ne savaient pas ce qu'il faisait, bien que beaucoup aient compris qu'il laisserait le travail de côté pour plus tard. Certains pensaient que cela signifiait que le travail / l'entreprise était primé ou un bon match pour eux. Globalement, cela a été interprété comme signifiant:

  • Signet (38%)
  • Je ne sais pas / je ne suis pas sûr (11%)
  • Économisez (11%)
  • Drapeau (9%)

L'icône Cœur était associée à l'amour et à la reconnaissance des publications sur les réseaux sociaux (connaissances préalables d'Instagram ou de Twitter). Les répondants qui connaissaient SEEK ont répondu que celle-ci était utilisée pour les recherches sauvegardées. Cependant, dans l’ensemble, les répondants n’associent pas cela autant qu’à mettre de côté quelque chose pour plus tard. Il était associé davantage à des émotions positives (amour, comme, bonheur). On entend par icône de coeur:

  • Amour (54%)
  • J'aime (35%)
  • Préféré (21%)

Certains n’aimaient vraiment pas l’idée d’un cœur utilisé:

“Amour, ne s'applique pas aux offres d'emploi”

On a compris que l’étoile marquait quelque chose pour plus tard ou comme important. Cependant, on pensait également qu’un emploi leur convenait, ou que l’évaluation de l’entreprise. L'étoile était vue comme:

  • Préféré (37%)
  • Économisez (20%)
  • Étoile (17%)
  • Important (10%)
  • Note (8%)

La flèche de partage était interprétée à tort comme signifiant «en avant», mais «hors de contexte»:

  • Aller de l'avant (ou transférer un courriel?), À la page suivante ou à la page suivante (81%)
  • Répondre à un email (10%)
  • Part (8%)

Les connaissances antérieures influencent la compréhension

Comme tout ce que nous concevons, nous devons tester la compréhension de nos icônes avec nos utilisateurs cibles. Un triangle pour une personne peut n’être qu’un triangle, mais pour un physicien ou un mathématicien, il peut être clair que cela signifie «changement».

Une fois, j'ai gagné une partie de Pictionary avec le gribouillage ci-dessous en 3 secondes. Qu'est-ce que ça veut dire? Pour vous, probablement rien. Mais pour moi et mon partenaire Pictionary, c’est mon caniche Penny. Notre compétition n'était pas contente.

Est-ce que cela signifie Penny pour vous?

Le contexte est important

Une flèche située à côté d’une autre flèche faisant face à l’autre sens signifie probablement «suivant», alors que si elle était adjacente à un cœur, il est clair que cela signifie «partage». Tester les icônes en contexte.

Si vous l’aimez, vous devriez mettre une étiquette dessus

Si vous voulez que la plupart des utilisateurs soient capables de comprendre ce que font les icônes, utilisez des étiquettes. Les tests utilisateur ont révélé que les utilisateurs étaient capables de prédire correctement ce qui se produirait lorsqu'ils tapaient une icône avec une étiquette 88% du temps. Pour les icônes sans étiquette, ce nombre a chuté à 60%. Pour les icônes personnalisées non étiquetées, cette baisse a été réduite à seulement 34% du temps. En savoir plus sur leurs recherches ici.

TL; DR- Dois-je utiliser des icônes? Quelles icônes?

Ça dépend.

Demandez-vous si vous utilisez des icônes ici:

  • Aider l'utilisateur à trouver ce qu'il cherche?
  • Réduire la charge cognitive?
  • Ajouter à l'attrait visuel du produit?

Est-ce que l'icône choisie:

  • Compréhensible pour les utilisateurs, dans le contexte donné? At-il été testé avec le groupe cible pour comprendre?
  • Cliquable?
  • Accompagné de texte pour augmenter la convivialité et la compréhensibilité?

Si vous avez répondu oui à ce qui précède, vous pouvez probablement utiliser une icône.

Ne pas utiliser les icônes quand ils:

  • Semblent ne fournir aucune valeur;
  • Encombrer l'interface;
  • Sont ouverts à l'interprétation.