Graphique d'accessibilité descendante?
Je me demande si quelqu'un a des suggestions pour améliorer la convivialité de l'exploration des graphiques?
Plus précisément, imaginez que nous ayons un graphique à barres (ou toute autre visualisation) où un utilisateur peut sélectionner une barre et mettre à jour le graphique pour ne voir que ses enfants (par exemple, cliquez sur la barre pour le Canada et faites afficher le graphique par province du Canada) ).
J'ai fait quelques recherches et j'ai trouvé les ressources suivantes:
Abondance d'exploration:
Une approche courante et typique est la modification du curseur couplée à des changements visuels lorsque le curseur se déplace sur l'élément.
Si vous deviez déplacer le curseur sur un élément qui vous permettrait d'explorer, vous pouvez changer le curseur en conséquence, comme nous le faisons avec un lien. Ajoutez à cela un changement visuel au premier plan ou une autre modification esthétique et je crois que l'utilisateur comprendra rapidement que le curseur et les changements visuels définissent une zone où une action supplémentaire peut transpirer. ( http://ux.stackexchange.com/a/14951 )
Un autre article utile: https://www.fusioncharts.com/charting-best-practices/drill-down-interface/
Pour l'article ci-dessus, leur suggestion de simplement mettre des instructions en haut du graphique ("cliquez sur une colonne pour explorer") semble être un raccourci un peu bon marché - nous ne pouvons pas simplement mettre du texte d'instruction partout où nous le souhaitons communiquer une opportunité! Je pense qu'un changement de curseur sur la main "sélection de lien" avec un surlignage de l'objet graphique est bon, mais il ne dit toujours pas à l'utilisateur ce qui se passera une fois qu'il aura cliqué. Ce serait formidable d'inclure une info-bulle au survol, mais dans mon cas, ce n'est pas une option car nous utilisons déjà des info-bulles pour afficher des informations de graphique supplémentaires.
Pour la cible de zoom avant, j'inclurais à la fois l'objet visuel du graphique (barre, graphique à secteurs, etc.) ainsi que les étiquettes (étiquette d'axe par exemple) afin que l'utilisateur puisse facilement explorer en détail de très petites tranches de gâteau ou de minuscules barres (qui serait un objectif trop petit).
Navigation descendante: Je pense que le fil d'Ariane est la meilleure solution pour naviguer dans la hiérarchie descendante, affichée en haut à gauche sous le titre du graphique.
Que pensez-vous de l'utilisation du fil d'Ariane pour afficher à la fois le "niveau" de la hiérarchie et le membre de la hiérarchie parent réel? Par exemple, le niveau du fil d'Ariane pourrait être le suivant:
- Continents> Pays> États/Provinces> Villes> Quartiers
tandis que le fil d'Ariane du membre de la hiérarchie pourrait être:
- Amérique du Nord> Canada> BC> Vancouver> Gastown
En ce qui concerne la navigation, un autre effort de développement élevé, mais une excellente approche, serait de réelles animations d'exploration, où toutes les barres, à l'exception du membre sélectionné, s'estompent, puis le membre sélectionné se développe pour montrer ses enfants.
La meilleure option pour examiner/explorer un graphique est de rendre les données interactives. Les utilisateurs sont habitués à utiliser des étiquettes/légendes pour trouver les informations qui les intéressent et la réponse naturelle pour trouver plus de détails sur un champ est de cliquer sur les données. L'info-bulle fournit la valeur réelle et confirme que l'utilisateur a sélectionné le bon coin barre/colonne/tarte.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Les étiquettes soulignées en bleu (lien hypertexte) sont l'un des moyens les plus simples de permettre la cliquabilité. Si vous rendez les étiquettes sous le graphique à barres cliquables, cela attirera le curseur vers le graphique; avoir un peu de vol stationnaire sur les barres elles-mêmes, comme vous l'avez décrit, scellera l'accord.
télécharger la source bmml - Wireframes créés avec Balsamiq Mockups
Je suis d'accord qu'un effet d'animation pour faire la transition du graphique à barres serait formidable, mais cela ressemble certainement à une perspective coûteuse.
L'inconvénient de cette suggestion est que le texte est alors fixé en couleur; indiquer des catégories avec du texte en couleur n'est plus une option. Les liens multicolores ne ressemblent plus à des liens ... ils ressemblent à du texte souligné. De plus, bien que le Web soit omniprésent, les liens peuvent sembler incongrus dans une interface d'application. Ils sont toujours bons pour indiquer la cliquabilité, mais ils semblent souvent hors de propos.
Très bonne question. Et je dois convenir que mettre des instructions en haut du tableau peut sembler bon marché. Mais cela peut être un bon compromis et voici pourquoi.
Les choses sont faciles et directes lorsque nous traitons uniquement avec des navigateurs/applications de bureau: les fenêtres contextuelles, les légendes, les changements de curseur en réponse aux événements de survol peuvent faire des miracles. Les clics simples, les doubles clics, les clics et maintiens ajoutent plus de puissance. Mais le problème est que nous voulons probablement que notre solution fonctionne sur les appareils mobiles et nous voulons que l'UX soit cohérent sur toutes les plateformes. Et il n'y a pas de vol stationnaire sur les plateformes mobiles. Et les doubles clics peuvent être réservés à autre chose (comme le zoom) sur certaines plateformes.
Nous avons beaucoup expérimenté différentes approches et nous avons fini par utiliser:
- survolez les événements sur le bureau et appuyez sur les événements sur les tablettes pour afficher des légendes avec des informations supplémentaires sur l'élément visuel;
- cliquez et maintenez les événements sur toutes les plates-formes pour lancer des explorations.
Il existe une autre alternative pour les appareils mobiles: lors des événements tactiles, affichez la fenêtre contextuelle/légende avec un bouton "Exploration vers le bas". Mais cette approche:
- coûtera aux utilisateurs un effort supplémentaire par rapport au tap-and-hold;
- introduit une incohérence entre les plates-formes;
- semble pas cher aussi.
Donc, c'est toujours une question ouverte. En ce qui concerne le fil d'Ariane avec hiérarchie descendante: sonne bien, mais faites attention à l'immobilier graphique, ce qui est précieux.