web-dev-qa-db-fra.com

Évaluez les préférences de l'utilisateur grâce à quatre options

Je cherche à concevoir un contrôle utilisateur efficace mais élégant qui permettra à un utilisateur de fournir sa contribution à une question où il pourra choisir combien il aime les réponses fournies comme options.

L'utilisateur n'a pas à en choisir un parmi les autres. Ils peuvent aimer beaucoup l'une des options et l'une des autres options moins.

Un exemple

Dans quelle mesure êtes-vous confiant quant aux perspectives de performance de ces sociétés en bourse?

L'une des façons dont j'ai pensé à le faire est d'utiliser des curseurs circulaires (avec la permission de jQuery Knob ).

enter image description here

Cependant, j'ai les préoccupations suivantes concernant ce type d'entrée:

  1. Il est raisonnable d'estimer que l'utilisateur aurait besoin de 4 pressions ou clics (1 pour chaque option) pour indiquer sa confiance. La valeur par défaut pour une option donnée est de 50%, de sorte que l'utilisateur n'aurait pas besoin de taper s'il a entre 50 et 50 ans sur les perspectives d'une option.
  2. Il peut être difficile de taper ou de cliquer sur un nombre exact. Ce n'est pas super important parce que la question essaie simplement de mesurer les préférences relatives, mais cela peut néanmoins être déroutant pour l'utilisateur.

Pour répondre à ce qui précède, je recherche un contrôle qui peut minimiser le nombre d'appuis ou de clics nécessaires pour indiquer leur préférence entre quatre options.

Une autre pensée:

L'utilisateur peut faire glisser le cercle dans la zone qu'il préfère, puis pincer/zoomer pour ajuster les pourcentages.

Avant de changer:

enter image description here

Après avoir changé (déplacer et pincer/zoomer):

enter image description here

Résumer:

  • Quel est le verdict sur les idées ci-dessus? Quels sont leurs défauts et leurs points forts?
  • Quels autres contrôles de l'interface utilisateur satisferaient:

Je cherche à concevoir un contrôle utilisateur efficace mais élégant qui permettra à un utilisateur de fournir sa contribution à une question où il pourra choisir combien il aime les réponses fournies comme options.

Remarque: on peut supposer que le contrôle/l'interface soit orienté bureau [~ # ~] ou [~ # ~] orienté mobile.

3
karancan

Je déconseille d'utiliser le concept actuel. C'est intelligent, mais ça devrait être évident.

De plus, si vous supposez qu'il sera utilisé à la fois sur ordinateur et sur mobile, la façon dont les utilisateurs interagiront avec lui sera incohérente.

Enfin, redéfinir un modèle très commun (pincement et propagation) pour autre chose que le zoom avant et arrière va nécessiter beaucoup d'éducation.

J'ai inclus une solution potentielle ci-dessous. Les visages souriants sont ringards, mais ils sont clairs. Si vous devez utiliser le motif du pouce, vous pouvez le faire pivoter entre les pouces vers le haut et vers le bas (pouces vers l'utilisateur dans les sentiments tièdes). Alternativement, vous pouvez simplement jeter les pouces vers le haut à droite et les pouces vers le bas à gauche.

Quelle est la granularité du sentiment? 1%? dix%? Si ce n'est pas super granulaire, le curseur doit s'accrocher aux points souhaités.

mockup

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

3
SwankyLegg

Vous pouvez utiliser jQuery roundSlider plugin qui est similaire au bouton jQuery, mais le curseur rond a été créé avec des éléments div. Nous pouvons donc facilement personnaliser l'apparence générale, l'apparence du contrôle.

Pour plus de détails, consultez la page démos et documentation .

Exemple de différentes formes: jsFiddle

Un exemple d'interface utilisateur comme ceci: jsFiddle

circle slider with 4 quarter sliders

0
Soundar R