Comment gérer la «cohérence» lorsque le sens de la Parole n'est pas… cohérent?
Nous testons actuellement la version bêta ne nouvelle conception de barre supérieure sur la méta pour le réseau Stack Exchange.
Il est une discussion en cours sur la "cohérence" et le comportement de la barre supérieure lorsque l'on clique sur un élément. Essentiellement, nous avons cinq types d'éléments différents:
- Un logo qui, normalement, devrait être lié à la page d'accueil, mais qui est plutôt une liste déroulante
- Icônes qui entraînent une liste déroulante lorsque vous cliquez dessus
- Une grande zone cliquable qui comprend l'avatar et également des numéros qui fait office de lien
- Liens texte qui agissent comme des liens
- Un lien texte qui agit comme une liste déroulante (non ajouté, mais l'aide aura trois choix lorsque vous cliquez dessus)
Ma solution actuelle définit la cohérence comme entraînant une action à laquelle on s'attend.
- Étant donné que le logo renvoie souvent à la page d'accueil, je pense qu'il est nécessaire d'avoir un triangle pour indiquer qu'il s'agit plutôt d'un menu déroulant
- Les icônes cliquables se comportent comme les icônes de notification de boîte de réception de tout autre site Web, donc n'ont pas besoin d'un triangle
- La grande zone d'avatar cliquable, comme de nombreux sites, conduit à être dirigée vers la page de profil. Encore une fois, conformément à ma définition.
- Étant donné que la zone d'avatar est grande et cliquable et agit comme un lien, le lien de révision doit se comporter de la même manière, et ne
- Enfin, le lien d'aide n'a pas de triangle. Je ne veux pas en mettre un ici, et je pense que cela a du sens, car en cliquant sur l'aide, vous avez le choix (bientôt) de trois options d'aide. On ne peut pas s'attendre à la liste déroulante, mais il est essentiellement hors de propos.
Le problème ici est que nous avons un conflit entre la cohérence visuelle, la cohérence du type et la cohérence du comportement. Comment gérer ces conflits s'ils sont différents de ceux ci-dessus?
Répondre aux attentes des utilisateurs est un bon objectif, mais il ne vous mènera que jusqu'à présent. Les résultats inattendus ne sont pas eux-mêmes mauvais. Parfois, ils sont même délicieux ("Surprise!"). Cependant, des choses inattendues dans une interface utilisateur sont un signe d'un problème d'utilisation. Pour résoudre les conflits entre les types de cohérence, vous devez analyser la situation pour les impacts de la violation des attentes et choisir la conception qui minimise l'impact négatif.
Considérez votre cas d'utilisation incohérente des flèches déroulantes. Quels sont les impacts sur l'utilisateur?
Coût de la réorientation. Si je vous comprends bien, les utilisateurs doivent cliquer sur le contrôle pour accomplir leur tâche prévue quoi qu'il arrive. Une fois qu'ils l'ont fait, ils ne s'attendaient peut-être pas à une liste déroulante, mais ils se dirigent vers leur objectif et savent quoi faire ensuite. L'incohérence est apparente une fois que l'utilisateur clique sur le contrôle, ce qu'il doit faire de toute façon. Il n'y a pas d'erreur. Il s'agit d'une incohérence plus ou moins auto-documentée. Le coût est la brève réorientation mentale que l'utilisateur doit faire à l'apparition inattendue d'une liste déroulante. Je pense que nous convenons que c'est un impact assez mineur.
Erreur de navigation. Cependant, jusqu'à présent, nous examinons uniquement l'utilisation du contrôle déroulant lui-même. Et les autres contrôles? Le problème de l'exclusion de la flèche déroulante est que vous apprenez aux utilisateurs que les listes déroulantes n'ont pas de flèches. Les utilisateurs peuvent donc cliquer sur un lien qui ne l'est pas une liste déroulante s'attend à ce qu'il en obtienne un. Vous avez créé une "contradiction" - deux choses qui se ressemblent (pas de flèche) mais qui signifient quelque chose de différent (peuvent ou non tomber). C’est généralement une forme grave d’incohérence. Dans ce cas, vous pouvez faire en sorte que les utilisateurs cliquent sur des éléments non déroulants en pensant qu'ils obtiendront une liste déroulante (par exemple, ils peuvent cliquer sur Chat en pensant qu'ils obtiendront un rapide coup d'œil sur les options de chat ou qui chat), mais à la place, ils seront déplacés vers la page ils ne voulaient pas. Votre interface utilisateur a maintenant induit une erreur dont la récupération prend du temps et des efforts.
Charge de mémoire. Rien de tout cela ne serait si mauvais si l'utilisateur pouvait utiliser le contexte pour définir les attentes (comme "X signifie que c'est un contrôle déroulant sur ce site) ”). Cependant, comme les contrôles de même apparence agissent différemment sur la même page, le contexte est très peu utile. L'utilisateur doit mémoriser pour chaque contrôle, qu'il s'agisse d'une liste déroulante ou non. Vous introduisez une incohérence "interne" (incohérence au sein d'une application ou d'un site), qui est généralement plus grave qu'une incohérence externe (incohérence avec un autre site, convention ou métaphore).
Pour plus d'informations sur la réalisation de cette analyse, voir Atteindre et équilibrer la cohérence dans la conception de l'interface utilisateur .
Les impacts sont donc les coûts de réorientation, les erreurs de navigation et les charges de mémoire. En somme, ils n'ont pas d'énormes impacts (l'utilisateur ne devrait pas perdre de données, par exemple), mais ils ne sont pas non plus triviaux. Quels sont les avantages d'une utilisation incohérente des flèches déroulantes? Franchement, je n'en vois pas.
Vous parlez de "cohérence visuelle", par laquelle je pense que vous voulez dire "faites en sorte que les choses se ressemblent juste pour qu'elles soient belles et soignées". Autrement dit, c'est pour l'esthétique. Par exemple, vous ne voulez pas que l'aide ait une flèche de liste déroulante car aucun des autres contrôles à côté n'a une flèche de liste déroulante (car ils ne s'affichent pas). Si c'est l'avantage d'une utilisation incohérente des flèches déroulantes, je ne pense pas que les avantages en valent la peine:
Tout d'abord, une petite flèche ici ou là ne va pas trop briser votre symétrie.
Deuxièmement, les utilisateurs ne remarqueront pas ou ne se soucieront pas à quel point il est "mauvais" car ils sont trop occupés à utiliser le site. Ils ne sont pas comme vous, le designer, qui regardent longtemps une maquette, comme si c'était une peinture dans une galerie, essayant de décider combien vous l'aimez.
Troisièmement, la conception graphique offre suffisamment de souplesse pour qu'avec un peu d'imagination, vous puissiez trouver un moyen agréable de gérer l'utilisation cohérente des flèches déroulantes. Peut-être pouvez-vous même transformer l'asymétrie en quelque chose de visuellement positif, comme l'a fait le Raymond Loewy avec le capot du Studebaker Avanti.
Je vous félicite, ainsi que les autres concepteurs de Stack Exchange, d'avoir retravaillé la conception en veillant à la cohérence. La conception actuelle regorge d'incohérences gênantes qui sont gênantes pour ce site dédié à l'UX.