Comment fournissez-vous l'interaction dans les tracés et les graphiques sur les appareils tactiles?
Les graphiques traditionnels comme celui-ci http://dygraphs.com/tests/range-selector.html ou http://www.highcharts.com/products/highstock ont des info-bulles pour indiquer les valeurs à la position du curseur. Puisqu'il n'y a pas de curseur dans un appareil tactile .. cet élément d'interactivité n'est pas disponible.
Le sélecteur de gamme dispose également de deux crochets faciles à verrouiller avec la souris, mais assez difficiles à utiliser au toucher.
Y a-t-il des paradigmes d'interaction à suivre pour les graphiques sur les interfaces tactiles? J'ai utilisé une bibliothèque iOS native comme CorePlot plus tôt, mais ses capacités étaient limitées. C'est ainsi que j'ai commencé à examiner les cadres de traçage basés sur le Web. Beaucoup d'entre eux affirment avoir un support tactile, mais je pense que les modèles d'interaction des graphiques doivent changer.
Même le pincement et le zoom courants .. bien qu'il puisse être utilisé pour zoomer sur un tracé - est très souvent en conflit avec le reste de la page. Cela devient déroutant - vous ne savez pas si vous avez zoomé l'intrigue ou la page entière.
J'ai étudié principalement les bibliothèques de traçage basées sur Canvas comme les dygraphes, jqPlot, mais je suppose que la même chose s'applique également aux bibliothèques basées sur SVG.
Si vous pouviez me citer quelques bons exemples de création de graphiques pour les appareils tactiles ou les meilleures pratiques, cela aiderait beaucoup.
Je regarderais l'application native Stocks d'Apple sur l'iPhone pour trouver l'inspiration avec l'interface utilisateur et UX. L'application permet aux utilisateurs d'afficher un graphique plus grand en faisant tourner leur téléphone en mode paysage, auquel point vous pouvez interagir avec le graphique. Les deux principales interactions qu'un utilisateur peut avoir avec la carte sont les suivantes:
- Appuyer et maintenir avec un doigt donne à l'utilisateur la possibilité d'obtenir des informations sur les prix pour un moment précis (minute, jour, semaine, etc.). Les utilisateurs peuvent se déplacer le long du graphique de manière transparente en faisant glisser leur doigt sur l'écran.
- Taper et maintenir avec un doigt puis taper et maintenir avec un autre doigt donne à l'utilisateur la possibilité de voir le changement de prix du stock sur une période de temps définie (comme indiqué dans cette capture d'écran ). Les utilisateurs peuvent également déplacer les deux points de la plage.
Pour des fonctionnalités supplémentaires, je peux voir que les gestes suivants sont utiles/intuitifs:
- Appuyez une fois pour afficher le graphique en mode plein écran
- Appuyez deux fois pour zoomer sur une section spécifique du graphique
- Appuyez et maintenez pour afficher un point spécifique et sa valeur sur le graphique
- Glisser pour se déplacer le long de l'axe x et de l'axe y
- Touchez avec deux doigts pour effectuer un zoom arrière
- Appuyez deux fois avec deux doigts pour effectuer un zoom arrière sur la zone de vue maximale
- Écartez les doigts pour zoomer
- Pincez vos doigts pour effectuer un zoom arrière
J'espère que cela pourra aider!
En tant que débutant Android, j'ai eu la même inquiétude, mais je n'ai trouvé aucune information à ce sujet. Mais pour résoudre ce problème, j'implémenterais quelque chose comme un " mode curseur "(un bouton à bascule toujours sur l'écran), où l'interaction tactile normale doit être suspendue pour le bien de l'interaction typique d'un curseur , comme celui illustré dans vos exemples.
Ainsi, l'utilisateur glisserait ou toucherait l'écran avec un doigt, et indépendamment de sa position verticale sur l'écran, un indicateur serait situé sur le graphique fournissant la coordonnée horizontale actuelle et sa valeur graphique correspondante, comme cela se produit pour le curseur de la souris dans vos exemples.
Dans cette veine, dans ce même " mode curseur " et lorsque l'utilisateur fait une certaine interaction (peut être tapoté à deux doigts), il/elle pourrait commencer sélectionner une plage, activer un bouton en haut ou en bas de l'écran pour quitter la sélection de plage.
C'est ce que je ferais, mais si vous trouvez une meilleure solution, n'hésitez pas à la poster ici comme nouvelle réponse. Je vous remercie.