Iconographie

Tout dépend des besoins. Les bibliothèques publiques couvrent aujourd'hui la majorité des cas, avec des jeux d'icônes cohérents entre eux et déclinés dans plusieurs styles. Elles conviennent à la plupart des projets. Des icônes sur mesure se justifient quand l'identité de la marque est forte au point que les icônes standard jurent avec elle, ou quand un métier manipule des concepts qu'aucune bibliothèque ne couvre.

En arrêtant un style et en s'y tenant. Tracé ou plein, épaisseur du trait, angles arrondis ou vifs, présence ou non de couleur. Une icône isolée peut sembler correcte et détonner une fois placée dans un groupe, c'est en les regardant ensemble qu'on juge. Une bibliothèque centralisée dans l'outil de conception évite ensuite que chacun ajoute sa propre version.

Une icône décorative, qui accompagne un texte déjà explicite, n'a pas besoin d'alternative textuelle. Une icône fonctionnelle, qui déclenche une action sans libellé, doit en avoir une, pour que la croix de fermeture d'une fenêtre soit annoncée par un lecteur d'écran. Une information ne doit jamais reposer sur la seule icône, pour ceux qui ne reconnaissent pas le symbole.

16 ou 20 pixels pour une icône en ligne, dans un texte ou à côté d'un libellé. 24 pixels pour la navigation et les boutons iconiques. La zone cliquable doit mesurer au moins 44 pixels de côté, même si l'icône y est plus petite, faute de quoi la cible devient difficile à atteindre au doigt.

Le SVG est un format vectoriel, il reste net à toutes les tailles et sur tous les écrans, sans avoir à produire plusieurs versions d'une même icône. Son poids est faible, ce qui compte quand une interface en affiche des dizaines. Sa couleur et l'épaisseur de son trait se pilotent en CSS, une icône peut donc suivre le thème d'une interface ou changer d'état sans être redessinée. Il accepte enfin le texte alternatif nécessaire aux lecteurs d'écran, ce qu'une icône intégrée en image ne permet pas toujours.