Convivialité des icônes et meilleures pratiques de conception

Imaginez-vous en train de vous rendre au travail, votre podcast préféré, une tasse de voyage à la main et rien que des routes dégagées devant vous. Conducteur prudent, vous jetez un coup d'œil et remarquez une lumière inconnue qui brille sur le tableau de bord.

Quelque chose comme un mélange entre une douille de lumière et un chaudron de sorcière bouillonnant, la petite lumière semble importante, mais vous n'êtes pas sûr de ce que cela signifie. Un coup d'œil aux jauges ne révèle rien d'anormal, et le véhicule semble bien fonctionner, vous décidez donc de vous en occuper après le travail.

Plus tard dans la soirée, votre journée de travail terminée et le dîner à l'horizon, vous vous approchez de votre véhicule sur le parking du bureau et - "Vous devez vous moquer de moi!"

Le pneu avant côté conducteur est à plat comme une crêpe. Si seulement vous aviez su que la petite icône de tout à l'heure était un avertissement du système de gestion de la pression des pneus de votre véhicule, vous auriez résolu le problème et évité des soucis inutiles.

Les icônes doivent apporter de la clarté

Le monde des produits physiques et numériques est inondé d'icônes et pour cause : les images transmettent du sens à une vitesse inégalée par les mots. En fait, les neuroscientifiques du MIT ont découvert que le cerveau humain peut traiter une image en aussi peu que 13 millisecondes.

Malheureusement, il y a des moments où les icônes que nous rencontrons sont mal conçues, nous laissant perplexes et frustrés. Cependant, lorsqu'elles sont conçues avec soin, les icônes améliorent la convivialité en réduisant l'ambiguïté et en communiquant les fonctionnalités.

Le but ultime de la convivialité et de la conception des icônes est d'améliorer l'expérience utilisateur, et non de la confondre. Mais à quoi cela ressemble-t-il et comment les concepteurs d'interfaces utilisateur peuvent-ils s'assurer que les icônes qu'ils créent seront facilement comprises ?

La conception habile des icônes améliore la convivialité du produit

Les icônes sont des abstractions. Ils simplifient les objets, les idées et les commandes en symboles graphiques qui peuvent être rapidement identifiés par l'œil humain. Alors, qu'est-ce qui rend les icônes utiles et que devraient-elles faire ressentir à l'utilisateur ?

Les icônes sont faciles à voir et à utiliser.

Comment ça se sent : « C'était facile. J'ai regardé l'écran et j'ai rapidement trouvé l'icône dont j'avais besoin. J'ai cliqué dessus et cela a fonctionné comme prévu.

Les icônes ajoutent de la cohésion à l'expérience au sein d'un produit.

Comment ça se sent: "Ces symboles signifient clairement quelque chose, et ils m'aident à naviguer et à utiliser ce produit."

Les icônes fonctionnent comme des indices de contexte interculturel.

Comment ça se sent: "Je ne connais pas la langue, mais je sais ce que signifie ce symbole."

Les icônes améliorent et étendent les capacités de narration visuelle d'une marque.

Comment ça se sent : « Cette marque est personnelle, mais professionnelle. Ils se soucient d'être utiles même dans les moindres détails.

La conception d'icônes cryptées rend les produits pénibles à utiliser

Lorsque la conception d'icônes est peu réfléchie ou que des ensembles d'icônes sont assemblés à la hâte après coup dans le développement d'un produit, des complications surviennent et conduisent à une mauvaise expérience du produit, des utilisateurs vexés et une marque ternie.

Que sont les icônes cryptiques et comment les utilisateurs se sentent-ils ?

Les icônes cryptiques sont mal associées à leur fonctionnalité réelle.

Ce que ça fait : « Attendez, je pensais que cette icône ferait quelque chose de différent. Qu'est-ce qui vient juste de se passer?"

Un ensemble d'icônes énigmatiques fournit plusieurs options qui semblent trop étroitement liées.

Comment ça se sent: "Laquelle de ces icônes fait ce que je veux?"

Les icônes cryptiques sont culturellement déroutantes.

Comment ça se sent: "Waouh ! Je ne cliquerais jamais sur quelque chose d'aussi scandaleux.

Des icônes cryptiques font sortir les utilisateurs de l'expérience prévue.

Comment ça se sent : "Je pensais que cette application m'aiderait à budgétiser mon argent, mais ces icônes ont l'air idiotes. Ce produit me convient-il ? »

10 principes directeurs pour une conception d'icônes de classe mondiale

Maintenant que nous comprenons la convivialité des icônes et comment les icônes peuvent améliorer ou entraver la convivialité du produit, examinons un ensemble de principes directeurs que les concepteurs d'icônes peuvent utiliser pour pratiquement n'importe quel projet de conception d'icônes.

1. Travaillez dur pour comprendre les fonctionnalités auxquelles les icônes seront associées. Si vous ne comprenez pas, ne devinez pas. Interroger.
2. Évitez de concevoir une icône à la fois. Au lieu de cela, approchez les ensembles d'icônes dans leur ensemble. Posez-vous la question : « Est-ce que l'ensemble est cohérent ? Y a-t-il des icônes à double sens ou des associations confuses ? L'ensemble est-il une bonne représentation de la marque ? »
3. Contournez l'ordinateur et commencez l'idéation précoce des icônes avec des croquis simples.
   
   
   
   
   Les croquis miniatures dessinés à la main sont un moyen efficace d'explorer plusieurs concepts de conception d'icônes et de capturer rapidement des idées.
4. Ne réinventez pas la roue. Visez des symboles universellement compris et n'ayez pas peur d'utiliser les jeux d'icônes existants qui sont largement utilisés et disponibles sur des sites comme Font Awesome.
5. Lorsque vous utilisez des ensembles d'icônes de stock, n'hésitez pas à personnaliser pour l'alignement de la marque ou le caractère ajouté, mais ne sacrifiez pas la clarté.
6. Utilisez des étiquettes de texte, le cas échéant, pour améliorer la convivialité des icônes. Le texte en lui-même est une cible difficile à cliquer ou à appuyer, mais lorsqu'il est combiné avec des icônes, il aide les utilisateurs à éliminer les doutes et à éviter les erreurs d'interprétation symbolique.
7. Ne sacrifiez pas la facilité d'utilisation pour la conception de bonbons pour les yeux.
8. Tenez compte de la façon dont les icônes s'intègrent dans la hiérarchie de conception d'une interface et n'oubliez pas que différentes tailles d'écran peuvent affecter la visibilité des icônes en raison de la mise à l'échelle.
   
   
   
   
   Remarquez la proéminence visuelle de l'icône "Rechercher" dans l'interface mobile par opposition à la version de bureau. La taille réelle entre les versions change très peu, mais l'interface mobile a moins d'espace donc l'icône se démarque.
9. Rappelez-vous la règle des 5 secondes. Lors de la création de concepts d'icônes, essayez de penser aux associations symboliques en 5 secondes. Sinon, le lien entre le mot, l'action et le symbole peut être faible.
10. Testez les icônes avec de vraies personnes. Sont-ils reconnaissables ? Sont-ils mémorables ? Sinon, continuez à travailler.

Conclusion

Nous vivons dans un monde saturé d'informations visuelles. Nous faisons souvent plusieurs choix en quelques instants. « Où allons-nous ? Comment allons-nous y arriver? Que ferons-nous quand nous arriverons ? Les icônes nous aident à réduire le désordre et à décider rapidement ce qui est important. Ils nous permettent de rester heureux avec les produits que nous utilisons tous les jours, et lorsqu'ils fonctionnent bien, ils favorisent la satisfaction de la marque.

Malheureusement, les icônes sont bien trop souvent en deçà de leur potentiel. Des icônes mal conçues entravent la convivialité du produit, agacent les utilisateurs et nuisent à la fidélité à la marque. Pour les concepteurs de produits et les équipes de conception, il s'agit d'une opportunité majeure perdue.

Lorsque les icônes améliorent l'expérience utilisateur plutôt que de la confondre, elles atteignent l'objectif principal de toute entreprise de conception ; ils améliorent la qualité de vie. N'oubliez pas que les icônes sont des abstractions, pas des réflexions après coup. Ils sont destinés à relier la complexité rapidement et de manière transparente, sans pause de la part de l'utilisateur. Ce n'est pas une mince affaire pour le concepteur, mais c'est possible avec une planification minutieuse, un processus méthodique et des tests utilisateur centrés sur l'humain.

Pour en savoir plus sur le blog Toptal Design :

• Test d'utilisabilité pour la conversion : arrêtez de suivre les tendances, commencez à utiliser les données
• Transformer les données des tests d'utilisabilité en action sans devenir fou
• Comment effectuer des tests d'utilisabilité en six étapes
• UX et l'importance de l'accessibilité Web
• Le guide fondamental de l'utilisabilité mobile