Ajout d'une option «aucune des réponses ci-dessus» à une liste de cases à cocher
Je travaille sur une série de formulaires d'assurance vie complexes et j'essaye d'optimiser en utilisant les conventions standards ...
J'ai cette liste désagréable de maladies médicales et une option mutuellement exclusive, "Aucune de ces réponses".
Dans le cas où l'utilisateur n'a aucune condition, le client demande aux utilisateurs de le déclarer explicitement pour des raisons légales.
Aucun conseil?
Ma première idée était la même que dans la réponse d'Izhaki, mais plus tard, j'ai pensé à cela, qui semble atteindre votre objectif et réduire (au moins un peu) le besoin d'interaction utilisateur sans inconvénients.
(EDIT: grâce à @dennislees pour l'amélioration de la conception des couleurs pour le contraste. Si cela va bien avec le reste de votre interface utilisateur, IMO cela améliorera la cohérence de cette approche)
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Modifier
Je pense que dans ce cas il sera préférable de définir le premier bouton radio par défaut , car l'action "explicite" nécessaire est la 2e, et définir la première comme valeur par défaut économisera 1 clic et probablement éviter au maximum les chances de "que se passe-t-il si les utilisateurs décident de cliquer simplement sur le premier bouton radio?" Btw, IMO cette situation serait la même que l'utilisateur laissant toutes les cases à cocher vides (dans une conception sans boutons radio), une validation ultérieure sera de toute façon nécessaire. Je pense que plusieurs réponses se concentrent principalement sur le comportement des utilisateurs (basé sur l'interface utilisateur présentée) et perdent une certaine attention sur la remise en question de la conception visuelle qui joue un rôle énorme dans l'UX modifiant/induisant la perception et le comportement des utilisateurs lors de l'utilisation de l'application .
Le point clé
Pour moi, la chose la plus importante ici est de rendre la dichotomie entre "Aucune des réponses ci-dessus" et toute autre option aussi explicite visuellement que possible .
Une façon de le faire est d'utiliser des boutons radio comme dans la première maquette.
BAISER
Il s'agit d'une approche plus simple, qui rend également cette différenciation claire:
(btw, Keavon a posté un design très similaire avec la même idée pendant que je commençais à éditer ma réponse)
D'accord, mais alors pourquoi ne pas utiliser cette dernière approche?
Récemment, j'ai vu cette question sur l'accessibilité qui m'a fait prendre conscience de choses comme les niveaux de contraste dans les entrées. L'approche "plus simple" ne prendra pas en charge cette nécessité à moins que vous ne commenciez à placer des messages d'information partout ou à supposer que les utilisateurs comprennent/sont à l'aise avec le comportement de l'application.
Ainsi, en particulier dans ce cas, si le formulaire contient une option comme "Conditions de vue", ne serait-il pas approprié (et cohérent) de prendre en compte le problème de contraste ?
Réponse de Rewobs est bon, mais cela implique deux niveaux de complexité: en cliquant d'abord sur l'un des deux boutons de rapport, puis en cochant les cases. L'expérience utilisateur de cette conception peut être améliorée en ayant simplement une boîte None of the above Visuellement séparée en bas.
Quelqu'un a suggéré d'effacer les choix des utilisateurs, mais c'est mauvais car la case à cocher accidentelle effacera votre progression. Au lieu de cela, grisez simplement les autres choix, mais rendez-les toujours sélectionnables. Si l'utilisateur coche ou décoche l'une des cases grisées, il doit décocher la case None of the above Pour les rendre à nouveau visibles.
Si l'utilisateur essaie de soumettre le formulaire sans aucune des cases à cocher sélectionnées, pas même la case à cocher None of the above, Alors il sait que l'utilisateur a oublié de sélectionner quelque chose afin qu'il puisse y revenir et résoudre le problème.
Les cases à cocher ne sont pas idéales dans votre cas car elles sont utilisées pour la multi-sélection (en théorie, on peut choisir none of the above et une autre option - bien que Javascript puisse "corriger" cela, ce n'est pas exactement évident pour les utilisateurs).
Je ne réponds peut-être pas directement à votre question, mais considérez plutôt ce format:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je pense que cela servira mieux votre client car il oblige les utilisateurs à dire explicitement no à chaque élément (si vous souhaitez que cela se fasse en un seul clic, ajoutez le tick all bouton).
Les commandes sont des boutons radio et par ligne, une seule peut être sélectionnée. Vous pouvez commencer sans cocher pour forcer l'action de l'utilisateur, en disant non.
Décochez la case "Aucune des réponses ci-dessus" Toutes les autres
Conservez l'interface utilisateur que vous avez, mais ajoutez un peu de JS qui fait que la case à cocher "Aucune des réponses ci-dessus" (NoTA) désactive également toutes les autres cases déjà cochées
Si l'utilisateur clique simplement sur NoTA, le formulaire se comporte exactement comme prévu. S'ils cliquent d'abord sur quelques autres options, puis sur "Non", ils remarqueront que vous avez ignoré le formulaire ou non:)
Je ne peux pas penser à un exemple pour le moment, mais l'expérience de cliquer sur une option dans un groupe qui affecte d'autres parties en raison de la logique différente n'est guère inhabituelle. Vous construisez essentiellement dans un type de validation. Alors ne vous inquiétez pas si la police de l'interface utilisateur vous tire vers le haut pour le non-conventionnalisme.
Concernant les objections sur la base du "modèle mental" et de la "complexité"
L'ajout d'une fonction d'effacement à une case à cocher ne perturbe pas tellement le modèle mental de l'utilisateur et ses attentes pour le faire s'effondrer. D'après ce que nous voyons ici, les alternatives semblent impliquer l'ajout de plus d'interface utilisateur et d'instructions, une diminution de la clarté et une complexité accrue.
Cela me semble mettre le chariot de la théorie devant le cheval de la pratique.
tl; dr Faites en sorte que le formulaire se comporte comme si l'utilisateur remplissait une feuille de papier pendant que quelqu'un se tenait à côté d'eux pour les harceler lorsqu'ils faisaient des erreurs.
Je garderais votre conception en ajoutant une validation en temps réel:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Si quelque chose ne va pas, changez la dernière ligne:
Si l'utilisateur réussit, la dernière ligne peut simplement disparaître (l'utilisateur penserait "d'accord, il a cessé de se plaindre"):
Bien entendu, la même validation doit se produire lors de la soumission du formulaire. Si quelque chose ne va pas, arrêtez-vous là, affichez une erreur (le même message affiché en temps réel est préférable, par souci de cohérence) et faites défiler automatiquement vers la ou les questions qui doivent être corrigées.
N'utilisez pas de cases à cocher.
J'essaierais de le diviser en deux questions:
Au cours des 3 dernières années, avez-vous eu des maladies désagréables?
○ oui
○ nonLesquels?
○ maux de tête
○ rhume
○ grippe
○ arthrite
etc.
Ne montrez la question 2 qu'une fois qu'ils ont répondu "oui" à la question 1.
L'inconvénient est que l'utilisateur a peut-être eu une maladie qui ne figure pas sur votre liste, alors il choisirait "oui", puis ... serait décontenancé quant à la réponse à la question 2.
Dans ce cas, vous pourriez peut-être ajouter une dernière option (fourre-tout) "autre" à la question 2. Peut-être que votre logique métier ne le permet pas, je ne sais pas.
TL; DR Basé sur une étude de convivialité informelle menée sur un besoin similaire (mais dans un domaine de problème différent):
- Séparez l'option "aucune des autres options" de la liste des autres options.
- Placez les deux listes côte à côte, de sorte que la liste la plus courante soit la première.
- L'option "aucune des autres options" doit être une case à cocher, comme toutes les autres.
- Les cases à cocher doivent agir comme une bascule: si "aucun" est sélectionné, les autres sont désactivés. Si l'un des autres est sélectionné, "aucun" est désactivé.
- Utilisez la couleur du texte/le poids de la police/le style de police pour séparer "aucun" des autres.
Nous avons été confrontés à un problème similaire avec une longue liste de problèmes d'état des installations (moisissure, fenêtres cassées, peinture écaillée: vous ne croiriez pas la minutie des problèmes catégoriques qu'une pièce pourrait avoir). Lorsqu'une personne effectue un examen de l'état de la pièce, elle doit vérifier explicitement quelque chose pour affirmer qu'elle a réellement examiné l'état de la pièce.
Le problème d'utilisation signalé: alors que toutes les chambres peuvent avoir beaucoup de problèmes, plus de 95% des chambres ont zéro, un ou deux problèmes. De loin, l'option la plus courante est "aucune", les deuxièmes options les plus courantes sont "une" et "deux" avec une probabilité à peu près égale. Les chambres avec trois conditions négatives ou plus n'existent presque jamais.
J'ai mené une étude de convivialité informelle avec quatre scénarios différents:
- Une longue liste des options avec une case "aucune de ces" en bas.
- Identique à 1, mais avec un bouton "aucun de ceux-ci" au lieu d'une case à cocher.
- Une longue liste, mais avec une case à cocher "aucun de ceux-ci" décalée hors du flux.
- Identique à 3, mais le bouton est décalé.
Le contrôle et l'implémentation d'origine étaient n ° 1. Tous les scénarios ont été présentés avec une mise en forme similaire: même police, même interligne, etc. Si l'option "aucun" était sélectionnée, il n'y avait pas de "grisonnement de la liste". (Si vous vous en souciez, les statistiques de la population: 62 utilisateurs, 37 ans en moyenne, 59% ont déclaré être des femmes, 5% ont déclaré avoir une forme de daltonisme.)
Ma théorie était que # 4 recevrait la plus grande facilité d'utilisation parce que l'option "none" était à la fois visuellement décalée et un élément visuellement distinct.
Dans l'art ASCII, ces scénarios ressemblaient à:
#1
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
[ ] No negative conditions
#2
[ ] Mold, walls
[ ] Paint, chipped
[ ] Paint, faded
[ ] Window, glass, cracked
[ ] Window, frame, broken
...
+----------------------+
| No negative conditions |
+----------------------+
#3
[ ] Mold, walls |
[ ] Paint, chipped |
[ ] Paint, faded | [ ] No negative conditions
[ ] Window, glass, cracked |
[ ] Window, frame, broken |
#4
[ ] Mold, walls |
[ ] Paint, chipped | +----------------------+
[ ] Paint, faded | | No negative conditions |
[ ] Window, glass, cracked | +----------------------+
[ ] Window, frame, broken |
À ma grande surprise, les utilisateurs ont préféré # 3. L'utilisation d'un bouton à côté de la liste était "non intuitive", "déroutante" et "perturbatrice". D'autres commentaires ont suggéré de créer trois listes côte à côte: une avec zéro options, une avec les plus courantes et une avec les moins courantes (et, de façon intéressante, plus urgentes). Ainsi:
NO PROBLEMS IN ROOM COMMON DEFICIENCIES URGENT NEEDS
---------------------------- ------------------------ --------------------------
[ ] No negative conditions | [ ] Paint, chipped | [ ] Uncommon problem 1
| [ ] Paint, faded | [ ] Uncommon problem 2
| | [ ] Uncommon problem 3
| | [ ] Uncommon problem 4
Des essais ultérieurs ont indiqué que la condition d'erreur à deux états (aucun négatif et un autre choix tous deux sélectionnés) ne s'est produite que pendant les modifications. Les retours nous ont conduit à mettre en place un schéma de mise en évidence:
- Lorsqu'aucune condition négative n'est sélectionnée, marquez-la en vert gras et désactivez les autres entrées. Cela en fait en fait un bouton à bascule, mais reste visuellement stylisé comme une case à cocher.
- Lorsqu'une autre lacune est vérifiée, marquez-la en rouge italique et désactivez la case à cocher "Pas de conditions négatives"
Vous ne pouvez probablement pas pondérer vos options le long des lignes les plus courantes/moins courantes, ce qui vous limiterait à deux listes. Selon la longueur de cette liste, vous devrez peut-être étudier les formes de commande in situ . Alphabétique peut suffire, mais il peut être préférable de classer par système fonctionnel (maladies du cœur, maladies du foie, maladies du poids, etc.) en utilisant des en-têtes.
Je suis un grand fan des tests d'utilisabilité coordonnés et des tests A/B. Si vous avez le temps et le budget, optez pour l'un d'entre eux. Sinon, allez avec ce que dit votre instinct!
Une option que j'ai rencontrée aujourd'hui est de faire de l'option "rien de ce qui précède" un bouton radio, comme ceci:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Lorsque le bouton radio est sélectionné, les cases à cocher sont désélectionnées et lorsque les cases à cocher sont sélectionnées, la radio est désélectionnée.
Séparez la case "Aucune des réponses ci-dessus" de la liste des cases à cocher avec une règle horizontale ou une autre aide à la séparation.
Cela aidera l'utilisateur à comprendre que cette option est différente des options normales présentes dans la liste.
Je suggère également que la sélection de cette option désactivera ou supprimera tous les éléments cochés de la liste ci-dessus.
. ce qui précède' ?"