Les icônes : ces petits symboles qui nous accompagnent au quotidien, dans la vie comme dans les nombreux services numériques qui s’offrent à nous aujourd’hui. Ils sont très pratiques, souvent bien utiles et mêmes jolis, mais encore faut-il bien maîtriser leur utilisation ! Voici ce que nous pouvons vous livrer de notre expertise mobile à leur sujet.
À quoi sert une icône ?
Il peut être utile de préciser qu’une icône sert avant tout à faire passer un message. Elle est employée pour simplifier la compréhension d’une information et par conséquent, de permettre à un utilisateur d’effectuer ce qu’il recherche le plus rapidement et simplement possible. Rien que ça !
Les concepteurs d’applications mobiles, comme nous chez Mobizel, sommes très friands de ces pictogrammes qui sont particulièrement sollicités en mobilité. Ils permettent de gagner de l’espace et de simplifier la lecture de nombreuses fonctionnalités. Leur place dans l’expérience utilisateur d’une interface est une évidence !
Comment ça fonctionne ?
Définir leur emplacement
Les icônes sont parfaites pour accompagner un utilisateur dans sa navigation. Il peut y avoir une icône associée à chaque item d’un menu latéral (d’ailleurs, vous voyez sûrement à quoi je pense en parlant de menu, c’est sûr ! 🍔), ou d’une tabbar. Elles peuvent servir à illustrer des catégories, en attribuant une couleur pour chaque, ou encore elles peuvent faciliter le remplissage d’un formulaire. En revanche, il y a peu de chances pour qu’une icône ait une pertinence dans un paragraphe de texte : elles gênent la lecture de celui-ci plus qu’autre chose, et ajouterait une complexité visuelle en plus.
Après avoir identifié où disposer vos icônes, il faut aussi réfléchir à la façon dont elles vont être affichées. Alors, avec ou sans label ?
Utiliser des labels
Les icônes doivent être claires, faciles à identifier, c’est vrai ! Mais dans une succession de plusieurs icônes, aussi compréhensibles soient-elles, l’utilisateur aura besoin d’un label pour le conforter dans l’action qu’il souhaite réaliser dans la plupart des cas.
Un très bon exemple est celui de la tabbar : ce système de navigation est de plus en plus répandu mais pas toujours utilisé avec des labels. Pourtant, les tests montrent qu’un utilisateur a moins de chances d’erreur en utilisant une tabbar qui indique clairement vers quoi il peut aller, qu’en essayant de déchiffrer une icône.
Quels picto choisir ?
Il existe une quantité phénoménale d’icônes sur le web, parfois accessibles gratuitement en échange d’une mention, partagées par la communauté de designers du monde entier, ou vous pouvez faire l’acquisition d’un set complet qui sera mis à jour régulièrement par son/sa propriétaire. Chez Mobizel, pour chaque projet, nous choisissons notre set d’icônes ou bien nous fabriquons le nôtre selon les cas.
Voici les principales caractéristiques qu’une icône doit posséder pour bien fonctionner :
1. La simplicité
Vos icônes doivent être très facilement identifiables, même en tout petit. La simplicité est l’un des principes de bases de l’UX Design. Pas la peine de chercher à représenter chaque fenêtre d’une maison, recherchez plutôt ses principales caractéristiques, comme une porte, un toit et une cheminée par exemple.
2. Déjà vu
“Oh, cette icône tout le monde l’utilise, on la voit partout…” c’est très bien ! Cela signifie qu’elle est familière à un bon nombre d’utilisateurs. Ils n’auront donc pas de mal à trouver de quoi vous voulez parler avec celle-ci. (Vous vous souvenez du burger ?)
3. Le style graphique
Il faut être vigilant quant à la cohérence graphique de vos icônes. Vous l’avez lu, ces symboles guident l’utilisateur tout au long de son périple dans votre interface. Il faut à tout prix éviter de les perdre en utilisant des icônes différentes pour une même fonctionnalité ou de passer d’une icône pleine à une icône en contour par exemple.
Il peut être judicieux également de réfléchir à l’utilisation de vos icônes dans le design de votre application. Elles devront potentiellement passer en couleur, peut-être même en bi-color (et si tel est le cas, alors toutes les autres icônes devront l’être aussi), en blanc sur fond coloré, etc.
Toujours dans le style graphique, un point qui pourrait sembler être du détail n’est pas à négliger : une icône doit globalement entrer dans une forme carrée. Il est très difficile d’intégrer un pictogramme très vertical à un endroit, puis un autre très horizontal à un autre. Il faut que les formes soient uniformes, et le carré est l’idéal.
🎉 Bonus : un set d’icônes à télécharger
Découvrez et télécharger notre set d’icônes sur notre nouvel espace dédié aux outils et ressources.