Amélioration de la sensibilité des curseurs de plage
Le contexte ici est une application hybride Android (v 4.4.x +). J'ai commencé avec le code de la plutôt bien écrite et documentée noUISlider que j'ai modifiée pour le faire ressembler plus à un curseur "Material". Mon choix de ce contrôle a été dicté par le fait que j'ai besoin de curseurs linéaires et logarithmiques qui sont également faciles à contrôler via un script. Jetez un œil à l'image ci-dessous
La plage du curseur doit être modifiée par incréments d'une demi-heure. Cela fonctionne très bien lorsque j'utilise le code sous-jacent dans une application Web et que j'utilise une souris pour déplacer le curseur. Cependant, dans l'application de téléphone Android Android (écran tactile, par exemple)), il est pratiquement impossible de déplacer le curseur avec précision - non sans quelques expériences ratées lorsqu'il obtient une valeur trop faible/trop élevée. la seule façon dont je peux penser à résoudre ce problème est de placer des boutons + & - plutôt gros, à chaque extrémité du curseur, ce qui serait au mieux maladroit et laid. Peut-être que quelqu'un ici pourrait suggérer des alternatives plus fonctionnelles et esthétiques?
Je suggère de ne pas utiliser de curseur. Nielsen Norman a publié un article à ce sujet:
https://www.nngroup.com/articles/gui-slider-controls/
Voici leur résumé, qui pourrait vous dire tout ce que vous devez savoir:
La sélection d'une valeur précise à l'aide d'un curseur est une tâche difficile nécessitant une bonne motricité, même si le curseur est bien conçu. Si le choix d'une valeur exacte est important pour l'objectif de l'interface, choisissez un autre élément d'interface utilisateur.
Cela dit, le meilleur curseur de "contrôle fin" que j'ai vu se trouve sur les longues vidéos de Youtube.
Tout en maintenant le pouce du curseur enfoncé, vous pouvez déplacer la souris vers le haut et la vue de la personne sur le curseur effectue un zoom avant. Cela signifie que la même plage de mouvement vers la gauche et vers la droite est désormais sélectionnée dans une plus petite section de la plage de valeurs globale.
Si vous souhaitez l'essayer, trouvez une vidéo Youtube d'une heure (sur le site Web du bureau), cliquez et maintenez le curseur sur le curseur et faites glisser la souris vers le haut. Le curseur se développera verticalement.
Ce n'est pas idéal, cependant: personne ne sait qu'il existe parce qu'il n'y a pas de signifiants, et vous rencontrerez probablement le même problème.
Si le pas dans la plage est trop petit pour le doigt, vous pourriez:
- Utilisez une étape plus élevée : une option pourrait être de casser le curseur en deux
- Supprimez la plage : utilisez un élément différent ou supprimez l'étape
- Supprimez l'étape pendant que l'utilisateur interagit : il est difficile de dire sans interagir et le tester, mais je suppose que le problème est que le curseur "saute" entre les étapes prédéfinies. Si tel est le cas, vous pouvez supprimer l'étape "jump" pendant que l'utilisateur traîne tandis que les chiffres continuent d'afficher les valeurs par étapes (de 30 minutes à 30 minutes).
Vous pourriez envisager d'ajouter un plus ou un moins au curseur afin que le doigt puisse sélectionner l'heure exacte avec moins d'effort.
Une autre option consiste à fournir un autre contrôle qui détermine les incréments que le curseur déplace. Cela peut prendre un peu de temps pour s'y habituer, mais fournira les fonctionnalités dont vous avez besoin.
L'idée ici est que le "30" correspond aux incréments que le curseur déplace et que le bouton à droite du nombre permet de modifier les incréments du curseur. Pour le temps, je pourrais faire les incréments 1, 5, 15, 30 et 60. Déplacez le bouton d'étalonnage vers le haut et les incréments du curseur augmentent, vers le bas pour diminuer.
Ou tout cela pourrait être exagéré et ne pas fonctionner du tout - je n'ai pas testé cela.
Si vous souhaitez l'essayer, faites-le moi savoir s'il fonctionne ou non pour vous.