Existe-t-il un élément d'interface utilisateur de contrôle du curseur comme celui-ci - le curseur du joystick?
Un curseur standard, tel qu'un html5 <input type ="range"/> ou ses nombreux frères améliorés par javascript, fonctionne en fournissant une poignée que vous faites glisser entre deux points d'extrémité, généralement avec votre souris ou avec votre doigt sur un appareil tactile. Cela contrôle une valeur en déplaçant cette valeur entre la plage de valeurs définie par les points de terminaison. Surtout, la poignée que vous faites glisser est visuellement proportionnelle à la valeur numérique qu'elle contrôle: si la poignée est visuellement centrée entre les points d'entrée, la valeur qu'elle contrôle sera également exactement à mi-chemin entre eux.
Un problème avec les curseurs standard
Un problème avec ces curseurs est d'ajuster la valeur à un nombre précis. Considérez un curseur de 0 à 100 sur un iPhone typique. Il est assez facile de le déplacer à plus ou moins 3 de votre valeur cible, mais il est difficile de l'obtenir exactement, et vous dépasserez ou dépasserez souvent de quelques points. Même si vous déplacez le curseur vers votre valeur cible exacte, il se déplacera souvent un tout petit peu lorsque vous soulevez votre doigt de l'écran. Une solution à ce problème consiste à ajouter des boutons "+1" et "-1" sous votre curseur, afin que le curseur puisse être utilisé pour se rapprocher de la valeur cible et que les boutons puissent être utilisés pour terminer le travail exactement, comme illustré ici:
Mais cela semble maladroit visuellement et expérimentalement.
Une alternative: le curseur du joystick
J'imagine un contrôle de curseur qui ressemble à un curseur normal, mais fonctionne différemment. Le principe que j'imagine serait analogue à un joystick d'avion télécommandé:
Lorsqu'il est centré, le joystick n'a aucun effet. Déplacé vers la droite ou la gauche, cela augmenterait ou diminuerait votre valeur cible. Plus elle est poussée à droite ou à gauche, plus cette augmentation ou diminution sera rapide. Comme ça:
Des questions
- Pensez-vous que c'est une bonne solution au problème présenté ci-dessus? Sinon, quelles sont les autres alternatives?
- Avez-vous déjà vu un tel élément d'interface utilisateur utilisé sur un site Web ou une application mobile? Pouvez-vous créer un lien vers des exemples?
- Quelle serait une bonne façon d'indiquer visuellement comment un tel contrôle fonctionnait? Par exemple, pour le distinguer d'un curseur standard.
Je pense que les curseurs sont une mauvaise pratique en général lorsqu'il s'agit de sélectionner un nombre précis.
Un curseur est un bon choix lorsque vous savez que les utilisateurs considèrent la valeur comme une quantité relative et non comme une valeur numérique. Par exemple, les utilisateurs pensent à régler leur volume audio sur faible ou moyen, pas sur la valeur 2 ou 5. - Microsoft
Les curseurs sont fonctionnels quand il s'agit de quelque chose comme le volume, où le nombre exact n'a pas vraiment d'importance. Je sais que j'aime le volume sur mon téléviseur entre 10 et 15, ça n'a pas vraiment d'importance.
Mais lors de la sélection d'une quantité, cela devient une toute autre affaire. Une fois, je suis tombé sur une application conceptuelle pour l'épicerie. L'utilisateur peut sélectionner la quantité avec un curseur. Vous voulez normalement acheter un nombre exact de certains articles, pas entre 10 et 15 articles, non, vous voulez exactement 12 œufs.
Le problème avec ce cas particulier était qu'un curseur était facile à utiliser avec une faible plage de nombres. Si la plage allait de 0 à 10, vous pouvez facilement effectuer les étapes dans les grilles afin que le nombre soit facile à sélectionner. Mais lors de la sélection d'une quantité d'articles, où devrait être le maximum? Certaines personnes achètent leur épicerie en vrac, d'autres non.
Vous avez mentionné que certaines personnes ajoutent des boutons +1 en -1 aux curseurs. Cela me donne juste des frissons. C'est comme attacher un ruban autour d'un cochon pour essayer de le rendre plus joli. Vous ne devriez pas aller ajouter des choses à quelque chose qui est déjà cassé en essayant de le réparer. Vous allez simplement faire un gros gâchis.
C'est pourquoi j'aime un peu votre idée. Les alternatives aux curseurs sont un champ de saisie normal ou un champ de saisie numérique avec la flèche vers le haut et vers le bas pour augmenter ou diminuer le nombre. Mais le premier peut être considéré comme lourd et le second ne fonctionne pas sur les appareils tactiles.
Ma seule préoccupation est sa sensibilité. Tenir quelque chose sur un appareil tactile peut être difficile. Je ne sais pas à quel point il est difficile sur le plan technique de détecter l'événement tactile. Mais sur le plan pratique, il pourrait être difficile à utiliser pour l'utilisateur. Les gens ne sont pas toujours assis sur une chaise lorsqu'ils utilisent leur téléphone. Ils marchent ou ils sont dans le bus. Garder la connexion avec votre écran peut être difficile lorsque vous êtes sur une route cahoteuse.
Un concept similaire sans avoir besoin de maintenir votre doigt enfoncé serait un curseur que vous contrôlez en faisant des mouvements de balayage longs ou courts.
Un long geste de balayage (plus de X pixels) déplacera les curseurs plus rapidement et plus loin en fonction de la vitesse du balayage. Des coups courts déplaceront le curseur de +1 ou -1.
Si je me souviens bien, l'application YouTube pour l'iPhone (alors qu'elle était encore développée par Apple) avait un concept similaire pour son curseur temporel: balayer horizontalement déplacerait le curseur et faire glisser verticalement contrôlerait sa sensibilité.
Par exemple, lorsque vous saisissez le curseur du curseur et le faites glisser de 20 pixels vers la droite, il se déplace de 20 pixels (comme tous les autres curseurs). Si, cependant, vous saisissez le pouce vers le haut de 20 pixels (le pouce ne bougera pas) et alors vers la droite de 20 pixels, il déplacerait le curseur de quelques pixels seulement.
Vous auriez besoin d'expliquer cette fonctionnalité aux utilisateurs, car c'est un concept inhabituel au début, mais une fois que vous vous êtes familiarisé avec cela, c'est assez pratique.
Tout d'abord, je dois dire que le curseur n'était pas destiné à une granularité fine. Il est préférable de les utiliser lorsqu'il n'y a que quelques valeurs parmi lesquelles choisir, un curseur entre 1 et 5 par exemple. La granularité tuera un widget comme un curseur. Comme vous l'avez dit, la solution consiste à ajouter un bouton +/- pour donner à l'utilisateur cette granularité, mais ce n'est qu'une expérience pour rendre les choses plus compliquées qu'elles ne doivent l'être.
Les applications de montage vidéo utilisent un concept comme celui que vous avez suggéré lors du nettoyage de la vidéo. C'est génial pour accéder à la zone générale que vous souhaitez atteindre, mais pas utile lorsque vous voulez être précis. c'est pourquoi les éditeurs vidéo parcourent la zone générale, puis utilisent un deuxième contrôle pour se rendre à l'endroit exact dans le temps. De plus, pas très bon avec granularité.
Les curseurs n'offrent pas grand-chose en termes de bonne expérience utilisateur. Vous passez tellement de temps à jouer avec les commandes pour obtenir une valeur exacte que vous finissez par frustrer un grand nombre d'utilisateurs qui ne peuvent pas obtenir ce niveau de granularité en raison d'un manque de dextérité. La section 508 en souffrira également.
Ma question est la suivante: pourquoi ne pas simplement utiliser une zone de saisie de texte? Il semble être beaucoup plus simple et plus rapide de ne taper que 51% dans cette case. Il est plus facile à concevoir, à implémenter et à rendre plus conforme à la norme 508.
Une alternative à une zone de texte, si vous ressentez le besoin d'une certaine sexualité visuelle, est un widget prêt pour le mobile comme mobiscroll. Il permet de feuilleter rapidement pour atteindre la zone générale et le contrôle de glissement pour atteindre la valeur exacte.
Voici un exemple du widget mobiscroll auquel je faisais référence: http://demo.mobiscroll.com/température/température/#