web-dev-qa-db-fra.com

curseur vs boîte de sélection / liste déroulante

J'ai une application Web avec deux interfaces utilisateur associées pour ajuster une valeur. Le premier permet à l'utilisateur d'ajouter ou de soustraire jusqu'à 100% du montant. C'est pour une estimation, donc des plages approximatives (par exemple tous les 10%) seraient bien, ou une sélection continue fonctionnerait également. La seconde sélectionne un pourcentage de la plage disponible par étapes discrètes, par ex. 100%, 75%, 50%, 25%, 10%.

J'ai pensé à deux interfaces utilisateur principales - sélectionnez les cases:

select box adjustment UI

et curseurs:

slider adjustment UI

Remarque: dans le curseur de plage, la valeur supérieure sera verrouillée à 100%. De plus, FWIW, il y aura plusieurs lignes de ceux-ci, si cela fait une différence:

enter image description here

Il me semble que les avantages des cases de sélection sont qu'elles sont des contrôles natifs, ce qui apporte toujours une certaine richesse d'interaction, et elles sont peut-être un peu plus explicites dans leur texte. Les curseurs, OTOH fournissent un indicateur visuel, ainsi qu'un indicateur numérique. D'autres avantages et inconvénients de chaque conception? D'autres conceptions que je devrais considérer?

3
sprugman

Une autre option serait les radios.
Si les valeurs sont approximatives, un ensemble de radios associées à des valeurs raisonnables permettrait à vos utilisateurs de choisir leurs choix en un seul clic.
Si le budget le permet, je créerais un contrôle composé d'une bande de radios avec une fonction js pour mettre en évidence toutes les radios jusqu'à et y compris celle sélectionnée.
Cela correspondrait à la sélection en un seul clic avec un retour visuel.
Notez que les radios n'ont pas besoin d'être visibles. Avec un peu de js je les cache, ne montrant que leurs étiquettes. Comme le fait de cliquer sur l'étiquette associée déclenche le bouton, vous n'avez pas besoin qu'il soit visible. Il ne s'affichera que dans les navigateurs incapables d'exécuter votre js et dans les lecteurs d'écran.

1
Juan Lanus