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

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'icones lors de la conception de maquettes fil-de-fer (wireframe).

Quelle bibliothèque choisir ? Quel type d'icones utiliser ? Dans quelle mesure ces icones doivent être proches du rendu final ? Quelle symbolique choisir ?

Pour répondre à ces questions, nous vous proposons des recommandations sur l'utilisation des icones pour la conception. Nous traitons la thématiques des icones suivant 2 axes : symbolique et simplicité.

Symbolique

Quand nous parlons de symbolique, nous faisons référence à la capacité de l'icone 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 icones, puisque c'est ce facteur qui va assurer la compréhension de l'action à réaliser.

Simplicité

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

Lors des phases initiales de conception, est recommendable d'utiliser des icones simples (flat design), puisque ces icones 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'icones qui peuvent être adaptées à vos maquettes wireframe. Nous avons listé ces sources ci-dessous en identifiant : la quantité d'icones et le format ainsi que les points forts et faibles de la collection.

Icones en aplat

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

Secret Pixels

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

GentleFace

• http://mmminimal.com/gentleface-free-wireframe-toolbar-icons-for-gui-design/
• 304 icones
• Points forts : Version gratuite en PNG avec transparence en deux couleurs (noir et blanc) et 4 tailles (16px, 24px, 32px, 48px). Vous pouvez aussi payer la version complète en format vectoriel.
• Points faibles : Aucun

Minicons

• http://www.webalys.com/minicons/icons-free-pack.php
• 210 icones
• Points forts : Collection gratuite en format vectoriel.
• Points faibles : Vous aurez besoin d'un outil professionnel de graphisme (Illustrator, Photoshop ou similaire) pour les exploiter.

Iconsweets

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

Icon Finder

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

Police d'icones

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

Vous pouvez utiliser les icones sur n'importe quel logiciel, il suffit d'ajouter la police dans votre système.

Fontawesome

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

Fontastic

• http://fontastic.me/
• Plusieurs collections
• Points forts : Plus qu'une seule police, ce site est un répertoire d'icones-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 icones dont la symbolique est rapidement compréhensible. Nos tests utilisateurs ont montré que même certaines icones 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'icone. 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 icones est un sujet qui touche souvent à la subjectivité : des équipes de conception, des utilisateurs etc. Il est donc hautement recommandé de recourir à des tests pour valider la compréhension de l'interface.

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