web-dev-qa-db-fra.com

Utiliser le curseur pour répondre à une question du sondage avec des options

Je suis en train de développer une enquête où mon client souhaite utiliser un curseur afin qu'il puisse avoir une échelle de 7 points mais ne fournir que 3 options explicites et 4 options vides/intermédiaires sur chaque question.

enter image description here

J'ai proposé le prototype ci-dessous, mais je ne suis pas sûr qu'il soit suffisamment intuitif pour que les utilisateurs donnent un sens aux options intermédiaires. Comment amélioreriez-vous cela?

https://jsfiddle.net/miracc/eL7arpte/3/embedded/result/

-- Éditer --

Les crédits vont à Bootstrap Slider pour l'implémentation du curseur.

3
miracc

Il y a quelques problèmes avec l'approche et la mise en œuvre. L'utilisation d'un élément de curseur n'est pas une mauvaise idée en soi, en fait, c'est juste une implémentation du test Différentiel sémantique .

Maintenant, jetez un œil aux problèmes de mise en œuvre:

enter image description here

ici, vous pouvez voir qu'en redimensionnant simplement la fenêtre, j'ai perdu le focus des options et je n'ai aucune idée de ce que je sélectionne.

Allons plus loin: enter image description here

ici, j'ai sélectionné l'une de vos options, qui colore le texte (joli détail), mais tout est superposé et non seulement j'ai perdu le focus, maintenant je vois qu'il y a encore plus d'espace en haut, même si j'ai sélectionné la meilleure option.

Que faire?

  • Eh bien, tout d'abord, vous ne devriez avoir que 5 spots (ou 7 avec 2 entre les deux sélections), et les "entre" les spots doivent être dans positions 2 et 4. Avoir une option "par-dessus" n'a pas beaucoup de sens, et ajoute non seulement un degré énorme de subjectivité, mais aussi une certaine friction. En tant qu'utilisateur, je n'ai aucune idée s'il s'agit d'une erreur de développeur, si je suis censé choisir des choix vides ou quoi.

  • le chemin de "connexion" : en ce moment, vous avez un chemin de connexion entre les choix, ce qui ajoute un sentiment de connectivité à toutes les options. Donc, en ce moment, il me semble que vous communiquez que Mike la nouvelle embauche est mauvaise, donc tellement bien en même temps. Peut-être qu'il était mauvais et maintenant est super? Peut-être qu'il était génial et maintenant il est mauvais? Ou encore pire que mauvais puisque vous avez une option en dessous? Si vous me demandez, je me débarrasserais du chemin de connexion et je laisserais simplement les options. Pense radio input éléments, vous ne pouvez en sélectionner qu'un, pas tous!

  • les visuels: alors que vous avez fait un excellent travail dans la mise en œuvre de cette demande, j'irais avec quelque chose de plus proche des boutons radio. Quelque chose comme ça (pas nécessairement, juste à titre d'exemple):

enter image description here

Bien sûr, si vous voulez continuer sur un chemin plus skeuomorphic, vous pouvez le faire, tant que les options sont facilement identifiable. Ici, vous avez quelques options que vous pouvez utiliser pour des idées:

enter image description here

  • orientation: étant donné que vous aurez beaucoup de problèmes avec le redimensionnement comme indiqué ci-dessus, qu'en est-il de le placer sur le dessus et de le changer en vue horizontale qui peut facilement être redimensionné en mode réactif?

  • Et enfin, j'ajouterais quelques instructions , que vous utilisiez juste un simple bloc de texte, coachmarks ou tout autre type d'orientation, il améliorera la convivialité de votre mise en œuvre, ne laissant aucun doute

3
Devin

En tant que personne qui prend beaucoup d'enquêtes, voici un schéma que j'ai vu fréquemment:

Dans quelle mesure êtes-vous intéressé par X?

mockup

télécharger la source bmml - Wireframes créés avec Balsamiq Mockups

J'ai généralement vu du texte à chaque extrémité appelé les "descripteurs extrêmes", celui du milieu étant l'option neutre. Bien qu'une étiquette pour chacun soit une autre option courante, je pense que tous les deux étiquetés et seulement partiellement étiquetés seraient tous deux désignés comme un élément Likert, partie o f une échelle Likert . De cet article:

Un élément Likert est simplement une déclaration que le répondant est invité à évaluer en lui donnant une valeur quantitative sur tout type de dimension subjective ou objective, le niveau d'accord/désaccord étant la dimension la plus couramment utilisée.

Suivant ce schéma commun, je suggère de placer les déclarations à chaque extrémité, avec une au milieu.

enter image description here

1
AlannaRose