TP 3 – Nous sommes des critiques
L'art de critiquer des interfaces
Chapitre 1 : Les 3 étapes d'une critique de Pro
  1. Trouver une erreur de design. La nommer à l'aide d'une définition d'élément de découvrabilité. Expliquer Brièvement le problème lié à celui-ci.
    Exemple : "Ce signifiant est trop petit !"
    Figure 1 : Le signifiant qu'on critique est entouré en rouge
  2. Expliquer en quoi l'élément de découvrabilité nuit à un concept d'utilisabilité (citer un ou deux concepts d'utilisabilité).
    Exemple : "Ce signifiant est trop petit ! (1)
    Il peut donc entraver l'efficience du site web. En effet, selon la loi de Fitts, le temps moyen pour atteindre une cible est proportionnel au ratio distance/largeur." (2)
  3. (optionnel) Faire un lien avec le persona (l'utilisateur cible), comment celui-ci sera impacté par ce défaut de design.
    Exemple COMPLET : "Ce signifiant est trop petit ! (1)
    Il peut donc entraver l'efficience du site web. En effet, selon la loi de Fitts, le temps moyen pour atteindre une cible est proportionnel au ratio distance/largeur." (2)
    Gabriel (défini plus bas) pourrait ressentir de la frustration à l'idée de perdre du temps pour cliquer correctement sur le bouton." (3)
Figure 2 : Photo d'archive de la correctrice qui détecte une critique bien formulée à l'intra (2023, colorized)
Chapitre 2 : Qui est Gabriel ?
Un persona est un personnage fictif inventé par le designer correspondant à un utilisateur ciblé par le site web/logiciel
Exemple : "Gabriel est un étudiant en sciences naturelles au cégep de 18 ans vivant à Joliette. Étant un mordu d'informatique, il recherche sa future université afin de poursuivre un bacc en informatique. Il s'informe donc sur les différents sites d'admission des universités du Québec."
En processus de création d'interface, il est commun de définir plusieurs personas distincts, qui chacun représente une partition de l'ensemble des utilisateurs potentiels de la dite interface.
Ainsi, il est toujours intéressant lors d'une critique de se référer aux personas définis afin de rapprocher les erreurs de design avec le point de vue de l'utilisateur.
Chapitre 3 : Exemples de critique
  1. Exemple 1 : Zara
    Figure 3 : Le site Zara Canada
    1. Les signifiants associés à la barre de navigation en bas à droite est très difficile à lire.
    En effet, le très faible contrastre entre le fond d'écran et ces signifiants affecte grandement la VISIBILITÉ de l'interface.
    Un utilisateur pourrait définitivement prendre un instant avant de trouver cette barre de navigation, ce qui impacte l'EFFICIENCE du modèle de design
    2. L'utilité du menu déroulable en haut à gauche est inutile. L'accessibilité aux affordances de la barre en bas à droite est dupliquée dans ce menu, ce qui créer une SURCHARGE de signifiants.
    Dupliquer l'accès à la même fonctionalité à deux endroits distincts d'une même page affecte la CLARTÉ de l'interface.
    Un utilisateur peut assurément se sentir CONFUS à l'idée de perçevoir un bouton inutile sur cet interface.
  2. Exemple 2 : Wayfair
    Figure 4 : Le site Wayfair canada
    1. Il y a trop d'affordances visibles dans la barre de navigation en haut du site web.
    Comme vu en classe, la surabondance de signifiant dans une interface peut grandement affecter la VISIBILITÉ du site web.
    Cette lacune de l'hiérarchisation des affordances a égalment un impact négatif sur la SIMPLICITÉ D'APPRENTISSAGE du site.
    Un utilisateur qui arrive pour la première fois sur ce site peut se sentir PERDU devant cette surabondance de choix.
    2. Il est commun de placer le signifiant "accès à mon compte" en haut à droite de l'écran
    Le positionnement de ce signifiant sur l'interface est problématique, en ce sens qu'il va intuilement à contre-sens des habitudes des utilisateurs
    En effet, un utilisateur peut oublier constamment que l'accès à son compte se situe à cet endroit, ce qui constitue un problème de MÉMORABILITÉ du site web.
Chapitre 4 : À L'horizon
La semaine prochaine, nous nous attarderons plus en détail sur comment améliorer un prototype à partir des erreurs de design détecté sur une interface.
Je vous partage ici l'exemple présenté en classe d'un exemple d'amélioration d'une interface. Il s'agit de l'amélioration du prototype affiché en Figure 1. Plus de détails au TP4.
Avant le méchant changement :
Figure 5 : Page d'admission universitaire à améliorer
Après le méchant changement :
Figure 6 : Page d'admission universitaire améliorée
"Nous sommes des critiques" est FERMÉ