web-dev-qa-db-fra.com

Lors d'une étape de l'assistant de formulaire, quel (s) type (s) d'entrée dois-je utiliser lorsqu'il y a deux options?

Ok, j'ai donc deux options sur une étape de l'assistant, par ex. Option 1: passez à l'étape A, option 2: passez à l'étape B.

Quelle est la meilleure méthode d'entrée à utiliser dans cette situation?

L'assistant a généralement des étapes plus compliquées et utilise un bouton suivant. Dans cet esprit, dois-je continuer à utiliser le bouton suivant et proposer deux options de bouton radio et un bouton suivant. Cette méthode conserve la disposition des boutons suivante, mais signifie que l'utilisateur doit sélectionner une option de bouton radio, puis cliquer sur suivant (2 actions).

Ou comme il s'agit d'une étape simple, dois-je laisser tomber le bouton suivant et proposer deux boutons, chacun allant à leur étape respective. Cette version bénéficie du fait de garder l'étape à une seule action.

Voir la maquette ci-dessous quant aux deux options que j'ai mentionnées (veuillez ignorer le style): enter image description here

5
Dave Haigh

Cela dépend vraiment de ce à quoi vos utilisateurs sont habitués.

J'ai eu une situation similaire dans un projet récent qui impliquait également une disposition d'assistant avec un bouton suivant en bas. Pour un formulaire sur l'une des étapes de l'assistant, l'utilisateur devait choisir l'un des 4 choix. Une fois que l'utilisateur a choisi l'option, nous avons décidé entre:

  1. Déplacer automatiquement l'utilisateur à l'étape suivante de l'assistant, ou
  2. Montrer à l'utilisateur que le choix a été sélectionné et le laisser cliquer sur le bouton "Suivant" au bas de la disposition de l'assistant.

Intuitivement, l'option 1 semblait meilleure car elle réduisait un clic pour l'utilisateur. Cependant, il y avait une suspicion persistante que l'option 1 pourrait être source de confusion pour les utilisateurs car cela était au milieu de l'assistant et ils étaient habitués à cliquer sur 'Suivant' pour passer à l'étape suivante.

Finalement, nous avons fait des tests utilisateur à ce sujet et les résultats ont évidemment montré que l'option 2 était plus intuitive pour l'utilisateur.

Pour l'option 1, les utilisateurs du test étaient clairement confus lorsqu'ils ont cliqué sur un bouton (pour sélectionner l'un des choix) et ont été amenés automatiquement à l'étape suivante. Les rediffusions ont montré qu'ils étaient momentanément désorientés lorsque la page suivante s'est chargée automatiquement et il leur a fallu un certain temps pour comprendre ce qui s'était passé. Les utilisateurs de l'option 2 n'ont pas rencontré un tel problème.

Si vos utilisateurs sont habitués à la disposition de l'assistant, passez à l'option 2. Si c'est le début de l'assistant, l'option 1 pourrait être la meilleure option. Comme toujours, pour être sûr, rien ne vaut certains tests utilisateurs pour voir comment les utilisateurs y réagissent.

6
Zach

Quelques suggestions.

  1. Le modèle de l'assistant suppose d'avoir < Back et Next > boutons.
  2. Les radios donnent une compréhension claire des options, tandis que les boutons ne le disent pas.
  3. Ne comptez pas les clics, mais fournissez une interface cohérente et familière aux utilisateurs. Votre objectif est de réussir la tâche, pas de sauver la souris.

tilisez donc des radios (Option 2).

4
Alexey Kolchenko

Il existe une différence significative entre ces deux options. Wizard est assez simple, mais l'aspect le plus important pour les utilisateurs est la possibilité de changer d'avis, de sélectionner une option différente et de continuer lorsqu'il est sûr que le choix est bon.

L'option n ° 1 supprime cette capacité, qui peut être dangereuse et faire paniquer l'utilisateur. Je suggérerais de suivre le concept par défaut et d'avoir des phases:

  1. l'utilisateur fait quelques modifications/sélections
  2. l'utilisateur accède à une autre page lorsqu'il se sent prêt

enter image description here

3
Renat Gilmanov

Les boutons radio et le bouton Suivant explicite sont perceptibles, exploitables, compréhensibles et robustes ( principes POUR - WCAG 2. ). Cette approche fonctionnera avec les utilisateurs de lecteurs d'écran (même VoiceOver sur iOS et JAWS sur Windows). Il s'aligne également avec les modèles mentaux car il s'agit d'un modèle d'interface utilisateur très familier. Cette interface utilisateur serait un bon modèle par défaut dans la plupart des situations .

L'alternative avec de grands boutons tactiles cibles serait idéale dans un kiosque à écran tactile à condition qu'elle ne soit jamais connectée à un lecteur d'écran/clavier externe.

1
vfowler

Je préfère l'option 1 en raison des avantages suivants: 1. L'utilisateur voit une grande cible à cliquer 2. Il y a une seule action de clic 3. Ses 2 choix seulement, donc l'utilisateur peut aller de l'avant et cliquer sur le choix pour continuer 4. L'utilisateur devrait être en mesure de changer sa décision après avoir quitté cette page. Il devrait y avoir un moyen de revenir sur cette page pour effectuer ce changement.

0
Raj Radhakrishnan