Dans quelle mesure est-il convivial de rendre les barres cliquables dans le graphique à barres?
Je conçois un graphique à barres où chaque barre a plus de contenu à explorer. Après le clic dans la barre rouge, je pense afficher la liste de tous les employés (90, 55, 33, ....) qui sont arrivés en retard dans les jours respectifs.
Ma question est "Est-il convivial?
Je ne l'ai vu nulle part comme ça.
Comme il s'agit d'un graphique à barres en HTML, je vais suggérer une implémentation qui devrait être accessible aux utilisateurs de lecteurs d'écran.
Le graphique à barres lui-même est une image unique, incorporée au moyen d'un élément img normal:
<img src="chart.png" alt="distribution of employees who came late to work, by minutes of delay" id="chart" />
(Cela peut éventuellement être enveloppé dans un élément figure avec légende.)
Au-dessus de l'image, vous mettez une instruction telle que "Cliquez sur les barres individuelles dans le graphique pour voir la liste correspondante des employés."
Ensuite, vous ajoutez un image map avec un " area " pour chaque barre du graphique, et vous le connectez au graphique à barres (en utilisant l'attribut usemap on l'élément img):
<p>Click on the individual bars in the chart to see the corresponding list of employees.</p>
<img src="chart.png"
alt="distribution of employees who came late to work, by minutes of delay"
id="chart" usemap="barchartmap" />
<map name="barchartmap">
<area alt="10 minutes late" shape="rect" coords="[fill in coordinates here]"
href="10minuteslate.html" />
<area alt="11 minutes late" shape="rect" coords="[fill in coordinates here]"
href="11minuteslate.html" />
<!--areas for other bars to be added here -->
</map>
Les attributs alt sur les éléments area indiquent aux utilisateurs du lecteur d'écran à quelle barre ils se trouvent, et ils peuvent ensuite décider de suivre ou non le lien. Ceci est essentiellement un exemple de la technique WCAG 2.0 Fournir des alternatives textuelles pour les éléments de zone des images-cartes .
Une question quelque peu connexe sur UX SE est Diagramme d'accès au détail? .
Les gens recherchent depuis longtemps des bibliothèques JavaScript pour les graphiques interactifs, et plusieurs options sont disponibles: Bibliothèque Javascript pour les graphiques à barres cliquables? . Cependant, la technique ci-dessus ne nécessite pas JavaScript.
Le Wall Street Journal a un graphique à barres cliquable représentant ce que la Grèce doit quand ; les barres individuelles ne vous mènent pas à une page différente mais (à proprement parler) à un graphique différent (bien que techniquement, il permute les graphiques en place). Après avoir cliqué sur une barre du graphique, l'instruction "Afficher toutes les années" apparaît au-dessus du graphique.
Je créerais en fait une info-bulle personnalisée montrant une liste de tous les employés qui étaient en retard sur le vol stationnaire. Je montrerais également combien de minutes et autoriserais la recherche.
Je changerais également probablement la couleur de toutes les autres barres de progression qui ne sont pas survolées.
Ce n'est pas le design réel que je suggère, cette image est juste pour montrer mon idée. Vous devrez le concevoir selon vos besoins et vos goûts
Quelques idées supplémentaires:
De plus, en cliquant sur l'un des noms de la liste, j'ouvrirais une autre page avec tous les employés tard dans la journée et montrerais des choses comme:
Nom de l'employé, service, combien de minutes il/elle a été en retard, combien de fois il/elle a été en retard cette semaine/mois + la somme des minutes en retard dans cette période.
Si vous approuvez le retard de seulement 50 minutes par semaine avant d'être sanctionné ou de devoir faire des heures supplémentaires, je créerais également des drapeaux pour ceux qui dépassent cette limite ou se rapprochent de cette limite.
Je pense que vous avez 2 défis distincts ici -
1. Comment rendre les barres suffisamment intuitives pour avoir l'air cliquables/planables? 2. Comment afficher les informations une fois survolées/cliquées?
Pour # 1 , vous pouvez essayer d'ajouter une certaine accessibilité visuelle/verbale (la faire ressembler à un bouton ou à un signifiant verbal "En savoir plus". Alternativement, vous pouvez essayer une animation. Lorsqu'un utilisateur atterrit sur la page, animez l'une des barres pour informer les utilisateurs qu'il peut être survolé/cliqué dessus pour obtenir plus d'informations.
Pour # 2 , je ne suis pas sûr de ce qui se trouve sous les barres, en supposant que vous avez des biens immobiliers là-bas, montrez les données dans le tableau juste en dessous de la barre. Essayez de connecter la barre et le tableau de données avec la couleur. Quelque chose de ce genre -
Bien qu'elle ne soit pas disponible sur certains appareils, cette fonctionnalité est très utile et la fonctionnalité ultime dans Scénarios d'exploration .
À mon avis, il est correct d'ajouter des informations dans les info-bulles, mais pour être plus convivial, vous devez les faire apparaître en survol, pas en cliquant. Sur mobile, l'utilisateur ne peut pas cliquer, alors ne dépendez pas de ces éléments.
Considérez les info-bulles comme fournissant des informations étendues, donc une info-bulle ne devrait pas être le seul moyen pour un utilisateur de voir les informations.
Non, ce n'est pas convivial. En quoi les barres interactives diffèrent-elles des barres à l'intérieur d'une image statique? Mot magique: accessibilité. Vous devez donner des indices aux utilisateurs pour qu'ils sachent qu'ils peuvent cliquer sur les barres