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 ).
Cependant, j'ai les préoccupations suivantes concernant ce type d'entrée:
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:
Après avoir changé (déplacer et pincer/zoomer):
Résumer:
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.
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.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
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