Aller directement au contenu

Bibliothèques d’icones pour le Web et les applications

17/04/2014
9

Durant nos formations en ergonomie, les participants ont souvent des questions relatives aux bonnes pratiques en matière de conception des interfaces (Web ou application). Une question récurrente concerne l’utilisation des bibliothèques d’icônes lors de la conception de maquettes fil-de-fer (wireframe).

Quelle bibliothèque choisir ? Quel type d’icônes utiliser ? Dans quelle mesure ces icônes doivent être proches du rendu final ? Quelle symbolique choisir ?

Pour répondre à ces questions, nous vous proposons des recommandations sur l’utilisation des icônes pour la conception. Nous traitons la thématique des icônes suivant 2 axes : symbolique et simplicité.

Symbolique

Quand nous parlons de symbolique, nous faisons référence à la capacité de l’icône de transmettre une idée à l’utilisateur. L’utilisateur doit reconnaître sans difficulté le symbole affiché.

Lors des phases initiales de la conception d’interfaces, la symbolique est la seule variable que nous devrions prendre en compte pour le choix des icônes, puisque c’est ce facteur qui va assurer la compréhension de l’action à réaliser.

Simplicité

Quand nous parlons de la simplicité des icônes, nous faisons référence à la simplicité du « design » de l’icône, c’est-à-dire, les détails présents dans l’icône (silhouette ou illustration).

Lors des phases initiales de conception, il est recommandable d’utiliser des icônes simples (flat design), puisque ces icônes sont capables d’illustrer la symbolique sans aborder la couleur, les reliefs, le tracé etc.

En fonction de ces deux variables, nous avons identifié plusieurs sources d’icônes qui peuvent être adaptées à vos maquettes wireframe. Nous avons listé ces sources ci-dessous en identifiant la quantité d’icônes et le format, ainsi que les points forts et faibles de la collection.

Icônes en aplat

Les icônes dans cette section sont des icônes en aplat (flat design), c’est-à-dire qu’ils utilisent une seule couleur pour le rendu, comme par exemple les tuiles Windows 8. Ces icônes ont l’avantage de présenter la symbolique de façon simple.

 

Secret Pixels

Secret Pixels logo

  • http://freebie.secretpixels.com/icon/
  • 50 icônes vectoriels en format Photoshop et Illustrator
  • Points forts : icônes sont simples et sobres
  • Points faibles : Incomplète pour certaines applications. Elle contient des icônes pour des thématiques variées (nourriture, temps, design), mais seulement quelques icônes pour chaque thématique
  • Point intéressant : Collection payante, mais vous le payez par un « j’aime » sur Facebook :)

 

GentleFace

Secret Pixels logo

 

Minicons

Secret Pixels logo

 

Iconsweets

Secret Pixels logo

  • http://iconsweets2.com/
  • 1 000+ icônes (version payante $10)
  • Points forts : Une collection très vaste avec plus de 1000 icônes en format vectoriel. La collection inclue les icônes découpés en format PNG, une planche unique en format PSD et une police de caractère avec les icônes.
  • Points faibles : Aucun

 

Icon Finder

Capture d’écran 2014-04-17 à 09.33.56

  • https://www.iconfinder.com/
  • Plusieurs collections
  • Points forts : Un moteur de recherche d’icônes qui cherche dans plusieurs bibliothèques. Beaucoup d’icônes gratuites. Options de recherche efficace
    et copie rapide de l’icône pour la coller dans votre maquette wireframe.
  • Recommandation : attention à conserver un ensemble d’icônes homogène si vous utiliser plusieurs bibliothèques différentes.

Police d’icônes

Les polices d’icônes sont des icônes vectorielles intégrées dans des polices de caractères. C’est-à-dire que ces icônes peuvent être utilisés comme des polices classiques : par exemple, vous pouvez changer la taille et la couleur des icônes de façon dynamique.

Vous pouvez utiliser les icônes sur n’importe quel logiciel, il suffit d’ajouter la police dans votre système.

 

Fontawesome

Secret Pixels logo

  • http://fontawesome.io/
  • 269 icônes
  • Points forts : Icônes très variées
  • Points faibles : Ces icônes ne marchent pas sur des outils de bureautique (i.e. Microsoft Office).

 

Fontastic

Secret Pixels logo

  • http://fontastic.me/
  • Plusieurs collections
  • Points forts : Plus qu’une seule police, ce site est un répertoire d’icônes-polices différentes (y compris Fontawesome). Ce site vous permet de faire votre propre police (en format TTF et SVG) et de l’intégrer à votre système. Et ça marche sur Office.
  • Points faibles : Aucun

Conclusion

Dans la conception des interfaces l’essentiel est d’utiliser des icônes dont la symbolique est rapidement compréhensible. Nos tests utilisateurs ont montré que même certaines icônes considérées comme « standard » ne sont parfois pas comprises par les utilisateurs (la maison pour l’accueil, les trois traits pour le menu “burger” sur mobile etc.). Dans bon nombre de projets il sera donc préférable d’ajouter un libellé auprès de l’icône. Cela présente un double avantage : les utilisateurs qui connaissent la symbolique pourront aller vite, sans lire le libellé, ceux qui ne la reconnaissent pas comprendront la fonctionnalité avec le libellé (si le terme choisi est bon).

La symbolique des icônes est un sujet qui touche souvent à la subjectivité : des équipes de conception, des utilisateurs etc. Il est donc hautement recommandé de recourir à des tests utilisateurs pour valider la compréhension de l’interface.

Pour aller plus loin : nous abordons largement la thématique des icônes pour les interfaces du Web et des applications durant notre formation Design graphique des interfaces.

Lire aussi

 

Voir notre formation Adobe XD pour concevoir des maquettes UX/UI

Mots clés :

9 Commentaires

Commentaire