génération

Reconnaissance d’icônes

La reconnaissance d’icônes est une méthode pour concevoir des icônes directement compréhensibles par vos utilisateurs. Elle va ainsi permettre à votre interface d’être plus performante et plus agréable lors de son utilisation.
Pour mener à bien cet atelier il vous faudra des participants représentatifs de vos utilisateurs finaux ; de nombreux paramètres comme leurs cultures ou leurs environnements pouvant influer sur leur compréhension.

Cet atelier comporte plusieurs bénéfices :
– Il s’agit d’une activité ludique qui est donc engageante pour le participant.
– Cette technique permet de recueillir des données précises et chiffrées.
– La méthode peut être itérative.

Durée

30-60 minutes

Participants

30 personnes

Difficulté

facile

Matériel

Grilles imprimées A4
Crayons
Gommes

Utilisation d'icônes

Définition
L’icône est une représentation graphique d’une commande dans un système. Elle peut représenter un objet réel ou bien un symbole.
C’est en quelque sorte la métaphore de l’action qui l’accompagne.

Améliorer l’efficacité
Le but principal des icônes est d’améliorer l’efficacité du système pour l’utilisateur en le rendant plus simple à utiliser.
L’icône dispose de plusieurs atouts permettant de répondre à cette exigence :
– L’exploration visuelle du système est plus rapide ainsi que la recherche d’information (les panneaux de signalisation routière utilisent aussi ce principe).
– Elle facilite l’apprentissage de l’interface en associant des symboles à des actions.
– Elle facilite la reconnaissance des commandes similaires.
– Le système est plus accessible aux personnes ne maîtrisant pas la lecture de la langue utilisée dans le système (étranger ou analphabète).
– Elle apporte des éléments esthétiques faisant respirer l’interface et aidant à la mémorisation d’un produit.
– Elle prend moins de place qu’un texte.

Commandes complexes
Attention cependant à l’absolutisme. Toues les commandes ne peuvent être résumée à un simple pictogramme.
Dans le cas d’une commande complexe, il faut passer au texte. Un texte sera toujours plus parlant qu’une icône incompréhensible.
Cet atelier pourra vous montrer les limites de l’iconographie et vous aider à déceler vos commandes complexes.
Cependant, sachez qu’une icône peut aussi se voir suivie d’un texte descriptif de sa fonction.

Donner un nom à vos commandes complexes peut aussi aider l’utilisateur à les mémoriser.
Par exemple dans Photoshop la commande « tracés avec des courbes de béziers » est appelée « plume ». Cela permet de mieux l’identifier avec un mot commun en se passant d’un jargon complexe. L’iconographie peut alors facilement en découler.

Composition d'une icône

3 ingrédients
Une icône est constituée de 3 ingrédients :
– Le signifiant qui est l’élément principal représenté (corbeille, homme, écran, etc.)
– Le symbole qui apporte un sens particulier au signifiant (couleur, symbole d’interdiction, etc.)
– L’indice qui guide l’interprétation du signifiant (flèche, élément entouré, etc.)

/* IMAGE */

Culture et environnement de l’utilisateur
Plusieurs facteurs venant de vos utilisateurs peuvent jouer sur la compréhension d’une icône :
– l’environnement physique,
– la culture de l’utilisateur (géographique, sociale, travail),
– l’organisationnel,
– le contexte du système et/ou d’utilisation,
– le contexte de l’interface (placement, lecture groupée d’un ensemble d’icônes).
/* IMAGE */

C’est pour ces raisons que vous devez connaître vos utilisateurs afin de vous assurer de leur compréhension des icônes. Car la culture et l’environnement d’une équipe de conception n’est pas la même que celle des utilisateurs finaux.

Déroulement de l'atelier

Préparation
Pour commencer la préparation, il faut lister et regrouper les fonctionnalités qui seront représentées par une icône. Pour cela vous pouvez utiliser des mots ou des phrases si la commande nécessite une description approfondie. Le but est que les participants à l’atelier n’aie pas d’hésitation sur l’usage de la fonction.

Après avoir réalisé cette liste, réalisez des pages A4 avec vos fonctionnalités et en dessous des grilles vides assez large pour y dessiner une icône. Laissez suffisamment de place pour que le participant puisse s’exprimer, sans être trop grande afin qu’il n’ajoute pas de détails à son dessin. Pensez les espaces pour pouvoir découper facilement chaque icône par la suite.
/* IMAGE */

Une fois la liste réalisée, il faut connaître le contexte d’usage des icônes afin de définir l’espace qu’on leur accordera dans l’interface.
Pour cela différents paramètres sont à prendre en compte :
– la place disponible dans l’interface,
– la fréquence d’utilisation de l’outil,
– le public utilisateur du système (ex: personnes âgées, enfants),
– le cadre d’utilisation (ex: personne marchant dans la rue, le téléphone à une main),
– d’autres paramètres pouvant provenir du cahier des charges fonctionnels.

La suite de l’atelier se déroulera en deux parties distinctes, par ailleurs on change de participants entre les ateliers.

Dessiner l’icône
La première partie de l’atelier consiste à faire dessiner par les participants les icônes voulues.
Pour cela commencez à expliquer l’environnement d’utilisation de l’application. Souvenez-vous les participants doivent être vos futurs usagers et donc apporter avec eux la culture de leur secteur. Expliquer dans un second temps les 3 ingrédients d’une icône (cf plus haut). Ainsi, ils ne se limiterons pas forcément à la création d’un simple signifiant.
Donnez leur ensuite les feuilles A4 avec la liste des icônes à réaliser ainsi qu’un crayon et une gomme. Proposez leur d’indiquer à l’écrit avec une flèche si ils souhaitent utiliser une couleur comme symbole (les couleurs ne devant être utilisées que dans ce cadre).
Prévoyez environ 2 minutes par icône et par participant.

Pendant l’atelier observez leur réaction et leur cheminement de pensée face aux différentes fonctionnalités.

Recoupement et création des icônes
Découpez et regroupez les icônes ressemblants entre elles. Gardez ensuite le plus gros tas, c’est cette icône que nous allons tester dans la seconde partie. Cependant s’il y a des tas équivalent, il faudra alors tester les différentes possibilités.
Donnez ensuite les icônes choisies à un graphiste afin qu’il les reproduise au propre.

Il ne vous reste plus qu’à créer la grille pour la seconde partie de l’atelier. Pour se faire disposez les icônes à gauche d’une feuille A4 et laissez de la place à droite pour que les participants y inscrivent la fonctionnalité correspondante.
Attention, si certaines icônes apparaissent ensemble sur votre système et que leur compréhension en est impactée, regroupez celle-ci dans votre feuille.
 /* IMAGE */

Retrouver la signification des icônes
Pour la seconde partie de l’atelier, replacez simplement vos nouveaux participants dans le cadre d’utilisation de votre système. Donnez leur la feuille et demandez leur d’écrire la fonctionnalité que l’icône semble représenter selon eux.

Ici l’atelier est plus rapide, comptez 1 minute environ par icône.

L'analyse

Pourcentage de compréhension
Pour analyser les résultats de la seconde partie il vous faudra noter les réponses de chaque icône avec ces 3 choix :
– non comprise,
– imparfaitement comprise,
– parfaitement comprise.

Calculez ensuite pour chaque icône le pourcentage de compréhension. Ceci sera votre indicateur chiffré pour vous aider à décider ou non d’utiliser cette icône dans votre système.
Par ailleurs, il est conseillé d’avoir un taux d’icône parfaitement compris se situant au dessus de 80% pour garantir une bonne expérience utilisateur .

Itération
Pour obtenir un score idéal sur toutes vos icônes, il vous suffit de travailler par itération. Reproduisez l’atelier avec les fonctionnalités incomprises pour trouver la bonne représentation.
Notez cependant que si certaines fonctionnalités ne parviennent pas à avoir le score souhaité, c’est qu’elles sont difficiles voire impossible à représenter. Optez alors pour l’ajout d’un libellé en dessous de l’icône pour être sur que vos utilisateurs en comprendront son sens (attention cependant à bien choisir le libellé).