Qu'est-ce qui est le plus important, moins de distance de la souris pour voyager ou la cohérence visuelle?
J'ai une interface sur laquelle je travaille actuellement qui demande à l'utilisateur de choisir un seul élément. Ces articles sont divisés en 3 catégories distinctes et le client a insisté pour que chaque catégorie ait son propre bouton "Continuer", pour aider à leur montrer qu'ils choisissent dans une catégorie particulière.
Dans les 2 premières catégories, il y a 4 options, avec le continuer en bas. Dans la troisième catégorie, il n'y a qu'une seule option.
Nous essayons de déterminer s'il faut aligner le bouton "Continuer" en bas avec les autres (illustré ci-dessous) Option 1 
Ou si nous devons laisser le bouton directement sous la seule et unique option pour la troisième catégorie (illustrée ci-dessous) Option 2 
L'avantage de l'option 1 est la cohérence visuelle du placement des boutons. L'avantage de l'option 2 est moins de distance à parcourir avec la souris pour cliquer ensuite si vous choisissez l'option dans la dernière catégorie.
Je penche vers la première option, qui permet cohérence visuelle, mais il y a eu un certain désaccord sur le fait que la distance ou la distance de la souris soit plus importante.
Un autre point à considérer si vous choisissez l'argument de la distance de la souris la plus faible est que si l'utilisateur choisit la première option dans l'une ou l'autre des premières catégories, il doit quand même parcourir cette distance, donc cela ne semble être qu'un inconvénient léger, si cela est considéré comme un inconvénient. du tout.
Donc, pour réitérer, la question est: Quel est le plus important, moins de distance de la souris pour voyager ou la cohérence visuelle?
Option 1 de loin.
Veuillez leur dire que la distance de la souris n'est qu'un des nombreux facteurs UX qui doivent être pris en compte.
Capacité de numérisation - Savoir que les boutons sont toujours en bas réduira la cognition et le temps de l'utilisateur.
Qui a dit que le curseur des utilisateurs commencerait par le haut? Pensez à l'endroit où se trouve votre curseur en ce moment? est-ce près du sommet? ou le milieu ou le bas?
Propreté visuelle. La symétrie a un effet calmant et l'inverse peut provoquer un encombrement visuel qui provoque du stress et une désorientation qui conduit à une cognition supplémentaire pour l'utilisateur.
- Option 1 d'un mile.
Il semble plus agréable et la vitesse de lecture sera beaucoup plus élevée. Il est beaucoup plus rapide de comprendre que les trois boutons disent exactement la même chose. Il n'y a aucune confusion quant à savoir si le troisième bouton est une option ou un bouton continuer.
Avec une petite cible comme celle-ci, le temps de déplacement de la souris est dominé par le temps d'accélération et de décélération - et non par la distance de déplacement. Réduire de moitié la distance ne doublera pas la vitesse de clic. Les utilisateurs sont également habitués à continuer les boutons au bas d'un formulaire plutôt que quelque part au milieu. Vous êtes plus proche de cette convention avec l'option 1.
Allez avec Design 2
Du point de vue de l'utilisabilité, Design 2 est préféré pour une sélection plus rapide. D'après votre croquis, Fitts Law prédit que Design 1 prendra jusqu'à 80% plus long pour cliquer que Design 2 pour celui - liste d'options lorsque les autres ont au maximum 4 options. Étant donné que l'utilisateur a probablement sélectionné une option juste avant de sélectionner Continuer, vous savez où se trouve le pointeur: au milieu de l'option. C’est ainsi que j’ai effectué le calcul.
Avec certaines mises en garde, je ne m'attends pas à un problème majeur d'utilisation avec cette forme d'incohérence visuelle pour aucun des les incohérences peuvent avoir un impact sur les performances des utilisateurs .
Je ne pense pas qu'il soit plus difficile d'apprendre "le bouton est en bas de la liste" que "le bouton est en bas de la page". (Il s'agit d'un cas où chaque conception est cohérente et incohérente à sa manière).
Les utilisateurs n'auront pas de difficulté à trouver le bouton Continuer car il se trouve à différents endroits avec des listes différentes. Ils choisissent dans une liste et numérisent et trouvent le bouton. Trouver le bouton serait un problème si la tâche impliquait de scanner latéralement parmi les boutons Continuer pour trouver le bon bouton.
Avec votre conception claire et distincte des boutons, les utilisateurs ne vont pas la confondre avec une option. Ils n'ont pas besoin de se fier à la position des boutons sur la page pour connaître leur fonction. Ils peuvent le voir et le lire facilement.
Les utilisateurs peuvent ne pas reconnaître que tous les boutons font la même chose, mais cela n'a pas d'importance. D'après ce que je peux dire de la tâche, une fois que les utilisateurs sélectionnent des options dans une liste, les autres listes ne sont pas pertinentes. En fin de compte, l'utilisateur sélectionne uniquement le bouton Continuer dans la liste choisie afin de ne pas avoir besoin de savoir ce que font les autres.
... Ou peut-être Design 1
La conception 1 pourrait mieux répondre à la mémoire musculaire que la conception 2. Si les utilisateurs utilisent votre application quotidiennement et à plusieurs reprises au point où ils parcourent vraiment cette page, il peut être plus facile pour eux de prendre l'habitude de zipper vers le bas de la page du bouton Continuer, quel que soit le nombre d'options.
Certains trouveront peut-être le design 1 plus esthétique, ce qui pourrait être un autre avantage. Personnellement, je ne le fais pas, mais si les utilisateurs répondent clairement négativement à Design 2, vous pouvez opter pour Design 1. Cela peut valoir une seconde ou deux de plus pour cliquer pour l'utilisateur.
En fait, allez avec Design 3
Bien sûr, si l'utilisateur ne peut faire qu'un seul choix dans une liste, la solution consiste à faire en sorte que la sélection de chaque option fasse avancer l'utilisateur à l'étape suivante et élimine les boutons Continuer. Le clic le plus rapide n'est pas un clic, l'encombrement visuel est réduit, l'apprentissage est plus facile et vous n'avez plus à vous soucier de la cohérence des boutons.
J'ajouterais que la cohérence visuelle est une bonne chose tant que les boutons d'action - s'ils sont loin de la copie qui invoque l'action - sont suffisamment gros pour être facilement cliqués (loi de Fitt). Cela semble être le cas ici.
Donc, dans ce cas, je pense que les deux options fonctionnent, tant que les boutons sont grands.
Ensuite, cela se résumerait à un jugement esthétique sur l'apparence de la page (c'est-à-dire votre préférence).
L'option 1 est la plus logique à la fois du point de vue de la convivialité et de la conception. Côté utilisation, la position cohérente du bouton permet à l'utilisateur d'apprendre la position du bouton et de prendre des mesures avec moins de frais généraux mentaux.
Du point de vue de la conception, cela satisfait aux principes de répétition et d'alignement. Tous les boutons d'action sont alignés en bas et chaque zone de catégorie a une conception répétée avec en-tête en haut, action en bas et options au milieu.
Donc, non seulement il est fonctionnel mais il a l'air bien.
Je voudrais cependant rendre les boutons plus contrastés car tout a l'air d'un gris en un coup d'œil. D'après ce que je vois, s'il n'y avait pas de flou, il serait difficile d'identifier rapidement les boutons d'action.
Placer vos boutons "continuer" en bas vous aide à les distinguer visuellement. Je ne vois pas au-delà de votre flou, mais il semble qu'il soit difficile de faire immédiatement la différence entre le produit et les boutons `` continuer ''. Mais ce n'est pas un problème si le bouton est toujours au même endroit, à chaque fois - je le trouve une seule fois et je n'ai plus besoin de le chercher à nouveau.
Cela dit, le fait d'avoir trois boutons est-il une excellente solution à votre problème d'origine? En tant qu'utilisateur, je m'attends généralement à ce que le bouton "Suivant" dans n'importe quelle interface utilisateur se trouve en bas à droite. Si je vois le bouton "continuer" le plus à droite, je pourrais simplement cliquer dessus avec négligence. Pourquoi exactement le client doit-il voir les sélections des trois catégories simultanément?