Que sont les icônes de sites web ?

Navigation Rapide dans l'article

Quels symboles ne sont pas appréciés par les utilisateurs ? Lesquels préfèrent-ils et pourquoi ?

Il existe plusieurs icônes que les consommateurs n’aiment pas. Ils se plaignent que l’emblème est vague, inesthétique, ou qu’ils sont incapables d’expliquer pourquoi ils le détestent. Le raisonnement est simple : ces symboles enfreignent une ou plusieurs règles fondamentales de leur conception. Les connaissances présentées dans cet article peuvent vous aider à éviter les erreurs et à développer des icônes que les consommateurs aimeront. Les principes s’appliquent à toutes sortes d’icônes et sont applicables aux icônes de sites Web et d’applications.

Commençons par les principes de base. Dans la conception de sites Web, les icônes sont des éléments mineurs en termes de taille, mais pas en termes d’importance ou de pertinence. Elles sont nécessaires pour fournir des informations. Ce sont des points d’ancrage visuels qui aident à capter l’attention de l’utilisateur et à le diriger vers l’action souhaitée.

Les icônes aident à :

attirer l’attention ;
comprendre la signification ;
parcourir l’interface utilisateur
économiser l’espace visuel ;
créer un contact avec l’utilisateur

L’utilisation d’icônes n’est pas aussi simple qu’il n’y paraît à première vue et nécessite une expertise en matière de conception ainsi qu’une approche stratégique. (Il est préférable que les icônes soient traitées par un autre spécialiste).

Certains concepteurs se soucient davantage de savoir si leurs icônes sont belles, correctement centrées et si les pixels sont exactement alignés. Ils alignent les pièces à l’aide de formules mais négligent le facteur le plus critique.

Quelles sont les directives les plus essentielles pour concevoir des icônes qui plaisent à tous ?

1. Facilité d’utilisation

Les utilisateurs n’aiment pas les interfaces sophistiquées.

Une bonne icône doit être directe et simple à « lire ». Il n’est pas nécessaire de fournir une explication écrite. Vous pouvez mettre l’icône à l’épreuve en la montrant à une personne qui n’est pas familière avec le design. Si elle n’a pas deviné ce qu’elle signifie approximativement, c’est que quelque chose ne va pas avec ce symbole.

Principaux adversaires de la simplicité :

les éléments en excès
élaboration inutile

Ils faussent la perception, distraient et rendent les utilisateurs perplexes. En général, moins il y a de composants dans un symbole, mieux c’est. Lorsqu’une icône comporte trois couleurs ou plus, elle n’est plus un pictogramme et devient une illustration.

Les icônes sont esthétiquement indistinctes et ambiguës en raison d’un enchevêtrement de composants et d’accents de couleur :

Les détails des symboles doivent être adéquats.

Ne pensez pas que la complexité est une mauvaise chose ; l’expression « le diable est dans les détails » a été inventée par les concepteurs de sites Web. Oui, tout détail complique l’iconographie. Toutefois, s’il convient au concept de design et s’il est réalisé de manière professionnelle, il est justifié.

Référencement local : Comment améliorer son positionnement sur Google Maps ?

Par exemple, supposons que vous souhaitiez que l’utilisateur regarde l’icône de près afin qu’il reste sur le site Web pendant un certain temps. Dans ce cas, tout est logique. La plupart des gens ne se fatiguent pas les yeux et sont incapables d' »interpréter » un symbole compliqué à la volée.

La page ne doit pas comporter beaucoup d’iconographie détaillée. Ne les placez pas trop près les uns des autres. Elles doivent avoir une toile de fond unicolore et une palette de couleurs limitée.

Nous ne recommandons pas aux novices de commencer par des icônes complexes. Leur construction nécessite une grande expérience, une sensibilité créative et des compétences.

2. Perceptivité et caractère informatif

Les utilisateurs n’aiment pas les éléments qu’ils ne comprennent pas.

Ils n’aiment pas qu’une icône ambiguë doive être « décryptée ». C’est également un inconvénient important si elle n’a aucune signification. La fonction première de l’icône est de communiquer rapidement une information. Par conséquent, notre devoir est de supprimer tous les éléments superflus qui l’empêchent de le faire.

Les utilisateurs sont déroutés par ces symboles.

La simplification, bonne et mauvaise

Les utilisateurs n’aiment pas les composants de l’interface et en sont même conscients. Par conséquent, il est essentiel que les icônes soient simples à « lire ». Les icônes sont reconnues en fonction de leur simplicité, de leur compréhensibilité et de leur caractère métaphorique. Il existe toutefois plusieurs types de simplicité. La clarté n’est pas garantie par la simplicité. Le symbole peut être simplifié au point d’être méconnaissable.

Les composants trop simplifiés en sont un exemple.

Une simplicité excessive ou, à l’inverse, une complexité excessive peut rendre le symbole inintelligible pour l’utilisateur.

Ne prenez pas au pied de la lettre des conseils tels que « les icônes solides sont plus faciles à lire ». Tout symbole bien conçu est simple à lire.

Tailles

La reconnaissance des icônes est également affectée par la taille des pièces. Plus il y a de petites pièces dans une icône, plus il est difficile de comprendre ce qu’elle représente.

Exemple d’une icône bâclée :

La forme initiale de l’icône ne permet pas d’établir les liens essentiels, et des détails mineurs la rendent difficile à reconnaître. Les tailles de ces parties ne correspondent pas aux proportions des deux autres icônes, et l’épaisseur du trait et la couleur sont également différentes. Il y a ici une violation de la cohérence esthétique, ainsi que l’absence d’une métaphore appropriée et une abondance de pièces mineures. Tous ces facteurs contribuent à l' »illisibilité » de l’icône.

Clarté métaphorique

Les bons symboles sont accessibles à des individus de cultures, d’âges et de milieux divers. Cependant, vous devez faire des recherches sur votre public cible et choisir des couleurs et des métaphores qui soient acceptables et compréhensibles pour lui.

L’utilisation de métaphores appropriées garantit que les icônes sont claires et informatives.

Le code RIO : qu'est-ce que c'est ?

Les utilisateurs n’aiment pas les objets inutiles.

Les concepteurs aiment créer des objets magnifiques mais inutiles lors de leurs élans créatifs. Cette méthode prive les symboles de leur fonction première : transmettre rapidement des informations.

Toutefois, une icône peut être nécessaire pour décrire un sujet compliqué ou abstrait pour lequel il est difficile de trouver une métaphore. Dans ce cas, il est bon d’abstraire l’emblème et d’exprimer le message par des mots.

Dans ce cas, les symboles servent de points d’ancrage accrocheurs, tandis que le texte en gros caractères transmet l’information requise.

Les icônes sans métaphores peuvent être utilisées si elles ne sont nécessaires que comme accents visuels pour équilibrer le design et si leur caractère informatif est soutenu par le texte. Même dans ce cas, il est préférable de trouver des liens visuels appropriés.

3. Cohérence du style

Les utilisateurs n’aiment pas les choses discordantes.

C’est le cas lorsque les individus sont incapables d’exprimer clairement pourquoi ils n’aiment pas l’icône. Nous avons tous un sens inné de la discorde. La voie de l’harmonie passe par l’homogénéité stylistique.

L’homogénéité stylistique implique que la conception de l’icône est conforme au style et à la philosophie de conception de la marque.

Rappeler les directives de la marque

les spécifications de la marque

Les icônes doivent exprimer l’essence et les valeurs de la marque non seulement sur le plan esthétique, mais aussi sur le plan psychologique. Le style d’une marque peut être perçu comme rude ou doux, riche ou frugal, formel ou intime, élitaire ou démocratique, etc. Dans le premier cas, le design de l’icône doit répondre aux critères de la marque.

Spécifications du design

Le concept d’unité stylistique suppose l’existence de paramètres communs pour un ensemble d’icônes, tels que

une palette de couleurs constante ;
l’unité graphique et conventionnelle (raster ou vectoriel, 2D ou 3D, solide ou contour) ;
la même taille
la même largeur de trait
le même poids visuel
le même équilibre élémentaire ;
le même degré d’attention aux détails ;
principe d’emphase uniforme ;
un rythme cohérent, une personnalité statique ou dynamique ;
des ombres qui sont les mêmes (le cas échéant) ;
conformité au style du logo et à l’idée générale du design
ressemblance visuelle avec les polices de caractères.

Les concepteurs sont souvent contraints d’utiliser des icônes provenant de collections préétablies sur le web ou de les utiliser comme point de départ. Cependant, il se peut que la collection ne contienne pas les icônes essentielles, et vous devez les concevoir vous-même. Une erreur typique est que votre « propre » icône diffère quelque peu des autres dans un ensemble. Les causes en sont le non-respect d’un ou de plusieurs des critères d’unité susmentionnés.

L’unité de style est plus qu’un simple clin d’œil à l’esthétique et un soutien au look de la marque. L’uniformité du style facilite la reconnaissance des icônes, simplifie la navigation et conduit à une expérience utilisateur favorable.

Référencement naturel Antibes : les meilleures astuces pour booster votre site web !

4. Individualité

Il existe deux types d’originalité : l’unicité des jeux d’icônes et l’unicité des icônes individuelles.

L’onboarding en 3D dans une application mobile

l’unicité du jeu d’icônes

La première forme d’originalité se passe d’explication. Il s’agit d’une conception qui permet à un groupe d’icônes de se démarquer d’un océan d’icônes identiques, ce qui les rend uniques, intrigantes et mémorables. L’originalité des symboles contribue à l’individualité de la marque.

Pour être unique, il n’est pas nécessaire de développer des symboles que le monde n’a jamais vus auparavant. Il n’y a pas de meilleure stratégie pour faire fuir les gens. Les consommateurs d’Internet sont habitués à certaines attentes et idées préconçues, et s’en écarter est une idée terrible. Ces stéréotypes limitent l’inventivité tout en rendant les composants de l’interface utilisateur prévisibles et clairs. Les gens ne doivent pas faire d’efforts pour comprendre ce qu’ils ont observé ou perdre du temps à résoudre des rébus.

Utilisez des analogies que tout le monde connaît, mais rendez leur exécution visuelle distinctive. Les utilisateurs ne souhaitent pas résoudre des énigmes.

le caractère distinctif de l’icône

Le caractère distinctif d’une icône doit être défini comme sa distinction par rapport à ses voisines dans la collection. Les concepteurs délaissent parfois l’élément le plus important dans leur quête d’unité : la signification de l’icône. Il ne faut pas oublier que l’uniformité et la monotonie ne sont pas synonymes. Chaque symbole a un but précis.

Les utilisateurs n’apprécieront pas ou ne comprendront pas une grande collection avec des photographies visuellement identiques. Les gens ont honte parce qu’ils ne peuvent pas distinguer un symbole d’un autre.

« Unifié » n’implique pas « identique » !

5. Harmonie visuelle

Il s’agit d’un sous-ensemble du point 3 « Unité de style », mais il exige une attention particulière.

Les utilisateurs n’aiment pas les symboles qui sont optiquement déséquilibrés au premier coup d’œil. Les gens voient le déséquilibre instinctivement et instantanément, sans même jeter un coup d’œil à l’image. Les interférences d’équilibrage sont souvent désignées comme des erreurs d’alignement des éléments. Malgré l’importance de l’alignement des éléments, de minuscules incohérences dans l’alignement ne sont pas la principale raison pour laquelle le symbole est esthétiquement peu attrayant. Dans de nombreuses circonstances, les problèmes d’alignement et de centrage ne sont pas la source du déséquilibre.

La discordance des formes et la concentration des couleurs perturbent l’équilibre.

C’est la première chose que les consommateurs remarquent, et non le petit changement d’un élément d’un pixel ou deux.