Utilisation et abus des icônes à l'ère moderne

Le nombre d'icônes que nous voyons quotidiennement est incroyable. Ils sont partout autour de nous, à la fois en ligne et hors ligne. Nous aimons les utiliser. Ils améliorent l'esthétique de nos sites et peuvent fournir une meilleure expérience utilisateur. Parfois, cependant, nous oublions la raison d'utiliser une icône, et c'est à ce moment-là qu'il devient facile pour les icônes de perdre leur efficacité..


Mécanisme de communication universel

L’attribut principal des icônes est d’être un langage visuel commun qui comble efficacement les lacunes linguistiques. Ils sont instantanément reconnaissables et suppriment les interprétations ouvertes. Cela les rend parfaits pour un contexte numérique, car Internet est partagé par de nombreuses personnes et par les cultures correspondantes..

Capture d'écran du projet Noun

Concevoir une icône universellement lisible reste un défi de taille. Nos cultures ont toutes des conventions graphiques qui peuvent entraîner une confusion quant à la signification de certaines icônes conçues sur mesure..

Explorer une nouvelle interface composée de nombreuses icônes peut être un défi de prime abord. Il nous faut un certain temps pour nous rendre compte de l'endroit où tout se trouve et nous habituer au sens de chaque icône. Pour cette raison, l’étiquetage des icônes (à l’aide de la Titre attribut, ou peut-être des info-bulles personnalisées) améliorera l'efficacité d'apprentissage d'une nouvelle interface et est considéré comme une meilleure pratique. En réalité, il est généralement admis que les icônes combinées avec des étiquettes sont traitées plus rapidement par les utilisateurs..


Créer un intérêt visuel

Une des erreurs les plus courantes que nous faisons est que nous utilisons trop icônes dans un paramètre donné. Les icônes sont plus efficaces lorsqu'elles améliorent l'intérêt visuel et attirent l'attention de l'utilisateur. Ils aident à guider les utilisateurs lorsqu'ils naviguent sur une page. Utilisez trop d'icônes et elles ne seront plus que de la décoration. Leur utilisation pour la navigation sur une page Web peut souvent provoquer une dilution.

Facebook utilise tellement d'icônes, elles ne servent plus à créer un intérêt visuel mais agissent davantage comme une décoration. Certaines interfaces Windows utilisent des icônes compliquées, qui ne fournissent pas une interface propre et diminuent ainsi la facilité d'utilisation.

En limitant le nombre d'icônes que vous utilisez, vous attirerez plus rapidement l'attention de l'utilisateur, ce qui facilitera la navigation..

Le pied de page de The Verge utilise intelligemment les icônes. Ici, les icônes ont une valeur ajoutée évidente et la mise en page n'est pas encombrée. Dans cette capture d'écran de Behance, les icônes sont soigneusement équilibrées pour rendre la compréhension de la page plus rapide.. Même si cette page d'illustration sur Artsy contient de nombreuses icônes, en raison de la simple personnalisation du site Web, les icônes fonctionnent parfaitement pour aider l'utilisateur à faire des choix de navigation..

Les kits d'icônes sont excellents, mais il est parfois préférable d'essayer de concevoir vos propres icônes ou de modifier des icônes existantes (avec autorisation) en fonction de vos besoins. L'aspect et la convivialité d'un site Web doivent être reflétés dans les icônes que vous utilisez. Comme vous pouvez le voir dans les exemples, cela ne devrait pas nécessairement être une tâche très difficile, mais vous devez certainement garder à l'esprit l'amélioration de la marque de votre site web. Ce sont les petits détails qui font la différence entre un site Web exceptionnel et un site Web exceptionnel.

D'autre part, créer un contraste avec l'image de marque habituelle peut rendre encore plus facile la création d'un intérêt visuel. Voici un exemple de Twitter. Voyez comment le bouton pour écrire un tweet se démarque?

Sur le plan visuel, les icônes d'interface doivent être suffisamment variées pour être distinctives, tout en étant suffisamment cohérentes pour fonctionner comme un tout cohérent..

Le plus gros piège est d'utiliser des icônes parce qu'elles offrent une esthétique, pas parce qu'elles communiquent. Les superbes icônes sont à la fois visuellement agréables et communiquent avec les utilisateurs.


Fournir des fonctionnalités et des commentaires

Sans icônes, nous serions obligés d'utiliser du texte pour décrire certaines fonctionnalités à nos utilisateurs. Bien que cela rend les interfaces accessibles, pouvez-vous imaginer un lecteur vidéo utilisant uniquement du texte indiquant "lecture", "pause", "similaire", "plein écran"? Les icônes fournissent des métaphores familières pour communiquer rapidement.

La puissance des icônes permet de comprendre le fonctionnement rapide et efficace de ce lecteur vidéo.. La combinaison de couleur et d'une icône reconnaissable fournit un retour d'information: quelque chose ne va pas.

Il est également possible de donner aux utilisateurs retour d'information à travers des icônes, généralement en combinaison avec la couleur. Par exemple, une coche verte indique aux utilisateurs qu'un nom d'utilisateur est disponible. Une croix dans une case rouge indique à l'utilisateur qu'il n'a pas ressaisi correctement le nouveau mot de passe. Les icônes peuvent apporter une aide précieuse, surtout si elles sont appliquées en temps réel. Dans l'exemple ci-dessus, je suis averti si je saisis quelque chose qui n'est pas une URL. temps réél. Le concept sous-jacent à de nombreux objectifs potentiels, qui améliorent tous l'expérience utilisateur.


Contraintes techniques

Nous vivons maintenant une époque avec différentes tailles d'écran, dispositions fluides et densités de pixels variables. Cela a eu une influence majeure sur la manière dont nous traitons les images et il est donc logique que cela influence également la façon dont nous traitons les icônes..

Nous avons de plus en plus l'habitude d'optimiser les images pour différents appareils, mais nous pouvons également personnaliser nos icônes pour créer une expérience sans faille. Une icône particulière peut très bien fonctionner à 200px, mais son message est-il toujours clairement transmis à 12px ou ses détails sont-ils flous? Récemment, nous avons publié un article traitant de l’iconographie réactive, expliquant davantage ce concept..


Ignorer les conventions

Les icônes sont utilisées de manière abusive en ignorant les pratiques courantes. Lorsque les utilisateurs s'habituent à reconnaître une icône comme signifiant quelque chose, modifier l'action derrière cette icône est extrêmement déroutant..

Pour cette raison, des normes sont continuellement proposées et l'iconographie existante améliorée. Jetez un coup d'œil à ce qu'Andy Clarke a à dire sur un standard d'icônes pour une navigation réactive .

La règle la plus importante reste cependant: ne vous éloignez pas des modèles d'utilisateurs existants. Même si une nouvelle icône de menu vous semble être un excellent moyen de contester vos compétences en matière de conception et de proposer une conception unique, cela pourrait également être un désastre pour la convivialité..

Discuter des icônes creuses

Plus récemment, un article de blog publié sur Medium a critiqué l'utilisation d'icônes creuses, après la récente publication d'iOS 7. Il a affirmé que l'utilisation d'icônes creuses exigeait plus de "travail" de la part des utilisateurs. Ce blog a été largement discuté dans la communauté des concepteurs de sites Web. Il existe différents points de vue intéressants. Cependant, nous sommes tous d’accord sur le fait que l’iconographie devrait avoir un sens pour l’utilisateur. Ce qui, bien sûr, est tout au sujet des conventions.


GIF animé d'Aubrey Johnson, illustrant le travail effectué par notre cerveau pour traiter les icônes

Conclusion

J'avais un seul objectif en tête en écrivant cet article: nous rappeler à tous de nous demander Pourquoi nous utilisons des icônes sur les sites Web que nous créons. Pour beaucoup d'entre nous, il est devenu automatisé de les inclure naturellement dans nos projets. La prochaine fois, demandez-vous quelle est la valeur ajoutée de cette icône supplémentaire et comment elle se compare aux autres icônes du site Web..


Ressources utiles

  • Le manuel d'icônes
  • Tout sur l'iconographie réactive
  • Hackdesign sur l'iconographie
  • Intéressant Photoshop / Illustration Extension
  • Iconmonstr
  • Le projet de nom
  • Comment utiliser les icônes pour prendre en charge le contenu dans Webdesign (Smashing Magazine, '09)