Comment tester les icônes avec les utilisateurs?
Dans une application Web, nous avons un tas de fonctions de commande, chacune représentée avec une icône et une étiquette.
Nous avons effectué des tests d'utilisabilité de l'interface utilisateur dans son ensemble, et avons noté que quelques icônes sont un peu vagues. Nos concepteurs ont mis au point un tas de modèles alternatifs pour chacune des icônes les plus évidentes.
Nous aimerions tester ces nouvelles conceptions, mais il ne serait pas pratique de faire un test complet de l'interface utilisateur pour chacune des variantes.
Quelles sont certaines techniques et méthodes pour tester ces icônes?
Vous avez quelques options, selon votre temps et vos ressources.
- Utilisez une enquête. Montrez l'icône et donnez au répondant au sondage 4 options pour ce que l'icône pourrait représenter. Si vous faites cela, vous aurez besoin d'un nombre relativement important de répondants pour effectuer l'analyse statistique nécessaire pour obtenir un bon intervalle de confiance.
- Demandez aux utilisateurs ce qu'ils pensent que les icônes représentent. Laissez-les vous donner plusieurs réponses; comptez la réponse et voyez si vous obtenez la réponse souhaitée suffisamment de fois. Encore une fois, vous aurez besoin de suffisamment de répondants pour pouvoir obtenir un bon intervalle de confiance. Vous pouvez le faire en personne ou utiliser un sondage.
- Effectuez une petite étude de convivialité, où vous ne considérez que le temps de localiser l'icône appropriée. Il s'agit probablement d'un sous-ensemble de l'étude d'utilisation originale que vous avez menée.
Mesurer l'utilisabilité a quelques idées supplémentaires pour tester les icônes ; ce sont celles que j'ai trouvées les plus utiles lorsque j'ai spécifiquement posé des questions sur les icônes.
Je suis un grand fan des tests de couloir. Allez trouver quelqu'un qui n'a jamais vu votre candidature (par exemple Sarah en comptabilité ou votre maman) et demandez-lui quelques minutes pour votre candidature. Vous pouvez simplement utiliser les impressions pour faciliter le passage d'une personne à l'autre.
Une question qui me vient à l'esprit est que les fonctions/actions associées à ces icônes sont bien connues ou sont-elles natives de votre produit? S'il est natif de votre produit, une chose à laquelle vous devez penser est l'action principale ou le but derrière ce qu'ils signifient. Vous devez identifier les attentes des utilisateurs pour cliquer sur ces icônes et créer des images alignées sur ces données.
Par exemple, les utilisateurs s'attendent généralement à une icône de crayon pour la possibilité de modifier. Êtes-vous en mesure de vous permettre de visualiser visuellement les informations sur ces utilisateurs?
https://medium.com/design-ux/bcc8e0257bc8
http://www.1stwebdesigner.com/design/choose-perfect-icons/
https://www.measuringusability.com/blog/icon-tests.php
L'analyse des icônes et de tout ce qui préexiste qui est similaire dans l'espace public sera utile. Consultez les documents sur la symbologie d'interface utilisateur commune pour voir s'il y a effectivement priorité. Peut-être faire une enquête rapide ou votre interface utilisateur ou même une étude de café avec plusieurs itérations. Cela devrait vous permettre d'évaluer rapidement les variations avec de minuscules changements mesurés. Découvrez comment Google procède à travers leurs vidéos de développeur sur Youtube pour obtenir des conseils.
Je suppose que vous pourriez essayer de demander à vos testeurs ce que les icônes signifient pour eux. Vous pouvez essayer cela en leur donnant plus ou moins de contexte (sur où l'icône sera, quelle info-bulle sera disponible, etc.) pour voir s'ils peuvent deviner à quoi ils serviront.
Un sujet tellement subjectif!
Après quelques recherches, y compris l'examen de ce post, j'ai créé une variante de test avec des candidats d'icônes en contexte avec des étiquettes obscurcies livrées dans un prototype à l'écran lors de sessions de test d'utilisabilité en direct. 
Sur chaque écran, l'icône principale en question est échangée et l'utilisateur est invité à deviner ce que signifie l'icône et ce que ferait un clic sur le bouton. Nous allons randomiser l'ordre dans plusieurs séries d'études pour nous assurer qu'aucune des icônes n'a un avantage contextuel sur les autres. 
Une fois que nous avons restreint nos options à un nouveau candidat icône, nous espérons que notre équipe pourra tester AB avec le contrôle actuel ... mais sans intégrer la possibilité d'afficher des variantes à l'échelle du site et d'exécuter un long test où au moins les utilisateurs de retour/connectés en garderont un variante - toute nouvelle icône aurait un inconvénient.
Jusqu'à présent, nous l'avons exécuté en quatre sessions d'utilisation et les retours ont été plus instructifs que je ne le pensais. Nous avons déjà un leader clair et objectif (enfin, étant donné un petit groupe d'échantillons).
Je pense qu'il est juste de dire que Microsoft a vraiment réussi à `` visser le tout '' sur la refonte de l'icône de Visual Studio 2012. Même après un test d'utilisation étendu avec des résultats positifs (environ 50 utilisateurs, mais un test mal construit). C'est le programme Beta et feedback de la communauté qui a réduit les dégâts.
En tirant une leçon de cela, vous pouvez essayer un certain engagement communautaire. Bien sûr, avec les réponses avec un aperçu, vous obtiendrez beaucoup de "j'aime .../n'aime pas ..." mais ce n'est pas un mal, car au pire il suffit de tester le jeu d'icônes "le plus populaire" pour vous assurer il ne fait aucun dommage.
À l'envers, vous semblez intéressé et engagé dans votre communauté.
Niveau d'abstraction
tout d'abord, vous devez considérer les niveaux d'abstraction associés à différents types de signes (le travail effectué par le logicien Charles Sanders Peirce est un excellent point de départ pour mieux comprendre l'utilisation des signes en général) sans fouiller trop de détails, je dirais que les icônes pourraient il est intéressant d'interpréter de nombreuses façons car ils ne font que représenter l'objet auquel ils se réfèrent, tandis que les étiquettes et en fait tous les mots sont des symboles basés sur une convention d'utilisation (langues), de sorte que la marge d'interprétation multiple est beaucoup plus réduite avec les mots; L'icône d'un Apple pourrait faire référence à l'objet physique ou à la santé et au bien-être.
Interprétation des icônes
Deuxièmement, lors de la conception, vous devez prendre en compte le niveau d'abstraction perçu de chaque icône, est-il sujet à des interprétations plus ou moins possibles? Posez-vous des questions telles que ce que l'icône représente, la culture joue-t-elle un rôle dans la façon dont les utilisateurs la percevront? est-il couramment utilisé? etc. que lier ceci au contexte d'utilisation et associer une étiquette descriptive à l'icône afin d'atténuer et de réduire la marge d'interprétation. Bien que cela puisse être simple pour de nombreuses applications, des difficultés surgiront lors du traitement de concepts complexes et abstraits auxquels aucune action immédiate ne leur est associée: par exemple, les processus sont généralement très difficiles à capturer sous forme iconique.
test
Lors de tests avec des utilisateurs, je suggérerais de tester ensemble des icônes et des étiquettes associées et d'incorporer des variations à la fois dans la terminologie et les icônes pour valider votre conception. Cela a l'avantage de considérer ces deux éléments comme une unité significative et de réduire le temps utilisé séparément pour tester les icônes et les étiquettes. J'espère que cela vous sera utile
Puisque vos icônes ont toutes des étiquettes, il me semble que les étiquettes sont la partie cruciale de l'interface utilisateur ici. Tant que les icônes sont uniques, peu importe ce qu'elles sont - tant que les étiquettes sont significatives pour les utilisateurs.
Mais si vous voulez toujours tester les icônes, je vous suggère un type d'exercice simple de tri par seau.
Montrez les icônes:
1. ----- 2. ----- 3. ----- 4. -----
| X | | O | | * | | ! |
----- ----- ----- -----
Et puis faites-les correspondre à des concepts:
a. Which icon represents [concept a] to you? _______
b. Which icon represents [concept b] to you? _______
c. Which icon represents [concept c] to you? _______
Pour développer les suggestions de "tests de couloir" déjà mentionnées. Vous pouvez effectuer les opérations suivantes:
- Créez une maquette papier qui utilise l'icône sans étiquette et demandez aux utilisateurs ce qu'ils pensent qu'elle représente. S'ils ne le savent pas, commencez à les nourrir petit à petit pour voir à quel point ils sont loin de s'en sortir. Dites-leur ensuite et demandez-leur s'ils la considèrent comme une icône viable. (Ne demandez leur avis qu'à la fin)
- Créez une maquette papier qui utilise l'icône avec des étiquettes sur l'écran d'accueil, mais isolément plus tard. Définissez-leur une tâche qui se concentre sur une autre partie de l'application et demandez-leur s'ils savent ce que représente votre icône.
- Créez une maquette interactive et demandez à l'utilisateur d'effectuer une tâche qui l'oblige à utiliser les fonctions pointées par l'icône. Faites-les réfléchir à voix haute . Voyez s'ils associent l'icône à la fonctionnalité, ou sinon, comment ils commencent à tester les icônes (par exemple, vérifier les info-bulles).
Le point des icônes n'est pas seulement que les gens sachent instantanément ce qu'ils veulent dire. Habituellement, les gens ne le font pas, même s'ils sont bien conçus. Le fait est que les gens peuvent associer rapidement l'icône au concept et l'utiliser à mesure qu'ils se familiarisent avec l'application. C'est ce que vous testez.