web-dev-qa-db-fra.com

Formulaires à choix multiples avec radio: les choix doivent-ils être disposés horizontalement, verticalement ou dans un carré?

Mon travail consiste à concevoir l'interface pour les questionnaires des étudiants. Lors de la conception de quiz, quelle serait la disposition la plus facile à lire pour mes utilisateurs: horizontale, "carrée" ou verticale? Personnellement, j'aime l'arrangement vertical pour pouvoir parcourir les réponses facilement, mais c'est juste moi.

enter image description here

Exemple de question (comptabilité): enter image description here

17
Daryll Santos

Votre hypothèse est correcte, les éléments commandés dans une liste verticale plutôt que dans une liste horizontale ou sous forme de grille sont beaucoup plus faciles à lire pour les yeux.

La raison est assez simple, les listes horizontales doivent s'étendre sur une plus grande zone et, par conséquent, l'utilisateur doit déplacer sa mise au point sur de plus grandes distances, ce qui est fatigant pour les yeux. Même chose avec les grilles, ici l'utilisateur doit appliquer un motif en Z pour parcourir la liste, se déplaçant de gauche à droite et de retour à gauche avec des mouvements beaucoup plus importants que dans une liste verticale régulière.

Modifier: les listes verticales facilitent également la comparaison des réponses (pour une seule question) en cas de parallélisme dans les réponses possibles (comme un exemple avec des numéros ordonnés) ou d'ajout/modification d'un mot ou d'une clause.

19
AndroidHustle

Personnellement, je pense que cela dépend beaucoup de la relation entre chaque réponse, de la direction de navigation à l'écran utilisée et de la similitude des réponses entre les questions. Pour expliquer cela un peu mieux:

Relation entre chaque réponse

Si vous avez affaire à des valeurs de plage, par exemple 0..10, faible-moyen-élevé. $ 0 .. $ 10000 une mise en page de type curseur qui est acceptée comme étant horizontale est bonne pour la mise en page des réponses. Si chaque réponse est très distincte, une disposition verticale pourrait être meilleure. Étant donné que vous dites que vous avez affaire à des choix multiples, je suppose que la plage n'est probablement pas le cas et donc ce n'est pas vraiment approprié.

Direction de navigation à l'écran utilisée

  • de haut en bas

    si chaque question est affichée l'une sous l'autre, afficher des réponses perpendiculaires à ce flux oculaire incitera l'utilisateur à afficher les réponses dans un balayage oculaire normal.

  • de gauche à droite, de droite à gauche

    disons que vous animez chaque question, que vous la transférez dans la page pour ne pas donner l'impression d'une direction de flux, ou que vous faites défiler ou utiliser un effet de carrousel. Dans ce cas, les réponses seraient acceptables si elles suivaient le déroulement du défilement/carrousel/transition.

Similitude des réponses entre les questions

Si toutes les réponses sont les mêmes, l'utilisateur les balaye simplement sans avoir à les relire, donc une rupture de flux (c'est-à-dire se déplacer horizontalement lorsque le flux de questions est vertical) aurait moins d'impact.

1
Stephen James

Pour les longues questions, la disposition "verticale", sans aucun doute. Dans l'exemple, je mettrais les radios en retrait pour rendre le document plus lisible et pour souligner la dépendance.

OT: Mais pour les "questions" courtes (en fait, les étiquettes), j'utiliserais un quatrième arrangement, avec l'étiquette comme dans les exemples, et les options dans une colonne (comme dans le troisième exemple), mais décalée vers la droite pour que le formulaire ait deux colonnes, une pour les étiquettes et la seconde pour les options.

Il s'agit de la présentation de formulaire traditionnelle à 1 colonne et à 2 colonnes. Dans la disposition à 2 colonnes, les "réponses" ne gênent pas la numérisation des "questions" (étiquettes).
Quelque chose comme ça:

Preferred color   O green
                  O blue
                  O white
Car brand   O Ford
            O Toyota
            O Ferrari
            O Citroën

Notez le non-alignement des colonnes d'options. C'est exprès, car dans les formes longues, un motif très régulier n'est pas utile pour un utilisateur qui l'a vue de l'écran pour voir un papier et doit retrouver sa position.
C'est comme ces formulaires où tous les entrées ont la même taille quelle que soit la longueur de leur contenu et le retour à l'emplacement de travail actuel est difficile et sujet aux erreurs.

0
Juan Lanus

Je ne peux pas encore commenter, mais je vais ajouter ceci comme réponse: ne réinventez pas la roue. Puisque vous concevez spécifiquement un quiz/test, et que chaque test majeur que vous avez déjà effectué a utilisé la disposition verticale (SAT, GRE, ACT, etc.) ne confondez pas l'utilisateur en changeant les choses. Cela a fonctionné bien avant la mise en ligne des tests, et fonctionne toujours aujourd'hui.

Edit: oublié d'ajouter que la réponse d'AndroidHustle explique exactement pourquoi sa toujours été la façon la plus courante de le faire.

0
sn3ll