Interface utilisateur la plus appropriée pour le curseur de la tranche d'âge
Nous créons un curseur pour permettre aux utilisateurs de sélectionner une "tranche d'âge".
La fonction consiste à recruter des utilisateurs en fonction de certains paramètres. Par exemple, je veux que les utilisateurs:
- Qui vit au Royaume-Uni
- Est une femme
- A entre 20 et 35 ans
Les premiers "qui vivent au Royaume-Uni" peuvent être sélectionnés à l'aide d'une liste déroulante. Le second "est féminin" peut être sélectionné par un bouton radio. Que recommanderiez-vous d'utiliser pour "est âgé entre"? Nous pensions à un curseur, mais même alors, c'est problématique.
Quelqu'un at-il une recommandation/des exemples de sélection de plages à l'aide d'un curseur? Même dans ce cas, un curseur est-il l'outil d'interface utilisateur le plus approprié à utiliser?
Je recommanderais deux filateurs avec des étiquettes "De" et "À" (ou "entre"/"et") - cela permet un bon contrôle du clavier, l'accessibilité, la navigation par tabulation/formulaire, mais préserve également la possibilité pour l'utilisateur de saisir des valeurs arbitraires contrairement à une liste déroulante:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Que diriez-vous d'un curseur comme celui-ci en utilisant des flèches pour la tranche d'âge.
Les curseurs ne sont pas aussi intuitifs ou largement utilisés que les listes déroulantes. Je recommande d'utiliser une liste déroulante. Comme vous savez quelle est votre tranche d'âge, vous pouvez le déclarer explicitement comme ceci.
Eh bien, vous pouvez utiliser http://vanderlee.github.io/limitslider/ ou https://api.jquerymobile.com/rangeslider/ qui fournira la fonctionnalité exacte vous cherchez. De plus, si vous regardez le deuxième lien, vous verrez les cases de sélection au début et à la fin du curseur, ce qui conduit à ceci: cherchez-vous à utiliser un curseur pour l'esthétique ou la convivialité. Si vous voulez de l'esthétique, je conviens qu'un curseur peut ajouter un élément ludique et intéressant à votre mise en page. Revenons cependant au deuxième lien:
[start value][--------slider--------][end value]
sémantiquement parlant, puisque nous avons les valeurs au début et à la fin, vous pouvez facilement traduire l'élément curseur en Word en . Nous pouvons donc ajouter une étiquette d'aide ( à partir de ) et maintenant nous avons
from [start value] to [end value]
ou mettez simplement:
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
et voilà: éléments de forme sans friction qui faciliteront également votre processus de filtrage puisque vous avez maintenant une seule valeur au lieu d'une valeur de plage. Ce que je veux dire, maintenant vous pouvez filtrer avec précision les résultats au lieu d'obtenir une plage indéterminée. Nous pourrions tous deux convenir que 16 ans n'est pas la même chose que 50 ans! Jetez un œil ci-dessous:
Comme vous pouvez le voir, le filtrage des données du curseur de plage sur des variables sensibles telles que l'âge pourrait être extrêmement problématique, il est donc préférable d'avoir des valeurs spécifiques même si vous ne percevez pas le besoin maintenant (qui sait pour l'avenir?).
Et si vous avez besoin des plages, vous pouvez toujours combiner les de et à champs facilement si nécessaire