Comment visualiser les étapes du curseur sans tiques
Un bon moyen de visualiser les étapes qu'un curseur peut effectuer est de le visualiser avec des ticks comme ceci:
Quelle serait une bonne façon de visualiser un curseur ne peut être réglé dans certaines étapes sans l'utilisation de tiques?
Exemple pratique:
J'ai obtenu 2 curseurs, tous deux avec une plage de 0 à 300. Le supérieur ne peut être réglé que par pas de 30 secondes (11 pas). Celui du bas n'a pas cette restriction et peut être réglé sur n'importe quoi entre 0 et 300 (301 pas).
En général, les curseurs n'offrent une meilleure expérience utilisateur que dans les cas où la valeur exacte n'est pas aussi importante que relative valeur .
L'exemple classique étant un contrôle de volume où le volume sonore augmente ou diminue lorsque le curseur est ajusté à des valeurs comme a little bit of sound, all the way up, no sound, etc.
Si les valeurs relatives génériques étaient correctes dans votre situation, vous ne poseriez probablement pas cette question, alors envisagez une solution qui permet à un utilisateur d'entrer n'importe quelle valeur avec un moyen facile de s'assurer qu'il s'agit d'un montant valide ...
Démo d'une entrée numérique avec des étapes arbitraires
- L'entrée attendue doit être claire dès le départ
- Taper
210ou simplement cliquer sur le lien 210 aura le même résultat
- Une entrée non valide n'est pas empêchée, mais une entrée valide n'est toujours qu'à un clic
Vous pouvez utiliser l'infobulle dynamique à la fois pour visualiser la spécificité du contrôle et pour afficher les commentaires du contrôle de curseur, voir l'image:
Il y a une échelle avec les points fixes dans l'infobulle. Les points gauche et droit suivants sont un peu transparents près des bords et les points traduisent la continuité de l'échelle. Si vous le souhaitez, des graduations "majeures" peuvent être affichées sur le curseur, et l'effet sera similaire à un outil "micrométrique" physique.
Vous pouvez utiliser des animations pour représenter les tiques. Imaginez un type prononcé de courbe d'accélération/décélération de "facilité d'entrée". Le contrôle du curseur ralentirait à mesure que vous vous approchez de l'endroit où se trouverait une coche et accélérerait à mesure que vous vous en éloigneriez. Cela imiterait la construction d'un frottement physique que vous pourriez rencontrer avec un curseur à encoche physique.
Imiter la friction serait plus efficace pour les appareils tactiles que pour les utilisateurs de souris, je pense. Vous pouvez l'utiliser en combinaison avec un flyout comme l'a suggéré Alexy.
Jetez un oeil aux Lignes directrices de conception de matériaux sur l'animation pour des exemples. L'utilisateur de Codepen Ana Tudor en a aussi Bons exemples .