Bonnes pratiques pour concevoir des dashboards

L’idée de cet article est née du webinaire à succès « Designing IoT Dashboards to Amaze Your Customers », présenté par Klaus Borges, Lead Front-end Developer, et David Hall, Customer Success Manager. Le webinaire a rassemblé plus de 100 participants et a livré des conseils précieux pour créer des dashboards IoT efficaces et visuellement attrayants. Vu son succès, nous en avons résumé les points clés.

Point de départ

Pour cette expérience de conception de dashboard, nous allons partir de ce que nous considérons comme un mauvais dashboard jusqu’à en obtenir un que nous jugeons remarquable. Ce premier dashboard peut sembler suffisant si l’on ne s’y attarde pas.

Notre parcours commence avec un dashboard qui peut paraître correct au premier abord, mais qui présente plusieurs problèmes critiques dès qu’on l’examine de plus près. Ce dashboard affiche toutes les données en même temps, ce qui peut submerger les utilisateurs. Voici les 6 problèmes majeurs que nous avons identifiés :

1. Trop de widgets : D’expérience, nous avons accompagné plusieurs dashboards qui contenaient trop de données et trop de widgets. Au-delà d’encombrer l’interface et de risquer de submerger les utilisateurs, cela peut aussi nuire à l’expérience lors du chargement des données, car les widgets peuvent être placés dans différentes « vues » : différents dashboards, onglets d’un dashboard ou une boîte de dialogue modale qui s’ouvre au clic d’un bouton.

2. Absence d’unités de mesure : Les données de température n’avaient pas d’unité, laissant les utilisateurs dans le doute quant à savoir si les valeurs étaient en Celsius ou en Fahrenheit.

3. Table dynamique surchargée : La Table dynamique n° 1 affichait des données serrées, difficiles à comprendre.

4. Alertes confuses : Les widgets qui indiquent le nombre d’alertes ne précisent pas leur gravité. On peut s’y habituer dans l’interface, mais l’expliciter reste toujours préférable dans ce genre de situation.

5. Titres et libellés de widgets génériques : Les titres et libellés des widgets étaient trop vagues et offraient peu de contexte sur les données qu’ils représentaient.

6. Sous-titres de graphique ambigus : Les sous-titres du graphique intitulé « Line #1 » étaient répétitifs et n’apportaient aucune information exploitable.

Plus de contexte

Nous avons amorcé les améliorations en :

• Attribuant des titres et libellés clairs et descriptifs aux widgets, précisant ce qu’ils représentent.

• Ajoutant les unités de mesure de température (par exemple °C ou °F).

• Mettant à jour la table Sensor Log avec des noms de colonnes clairs au lieu de la même variable répétée encore et encore (tout dans la table est récupéré depuis les métadonnées grâce aux Formulas)

• Mettant à jour la table Sensor Log pour remplacer les options (qui peuvent être des IDs illisibles) par des libellés, ce qui se fait avec des champs Dropdown récupérant des options statiques (définies dans le widget) ou dynamiques (stockées dans des enregistrements de données)

• Révisant les sous-titres du graphique pour indiquer les niveaux de gravité et leur importance respective. Par exemple, la gravité 1 a été désignée comme le niveau le plus élevé.

Le dashboard ne paraît toujours pas génial, mais comme ces étapes peuvent être réalisées dans n’importe quel ordre, celle-ci apporte le plus de bénéfices pour réduire la frustration des utilisateurs : il peut sembler fade et surchargé, mais au moins la lecture du texte permet à l’utilisateur de tout comprendre.

Améliorations visuelles

Si la fonctionnalité du dashboard s’est améliorée, son aspect visuel demandait de l’attention.

Nous avons désormais colorisé tous les widgets, ce qui passe parfois pour la tâche la plus importante, mais ajouter du contexte s’est révélé plus efficace pour lever les sources de confusion possibles. La colorisation est assez simple, puisqu’on peut personnaliser les couleurs d’un widget et reporter rapidement la plupart d’entre elles sur les autres widgets du dashboard. Nous avons aussi intégré des icônes pour rendre les alertes plus distinctes visuellement.

Les colonnes des niveaux de gravité et du statut « Vu » ont maintenant des icônes, qui offrent une représentation visuelle rapide sans obliger l’utilisateur à lire un pavé de texte.

Les couleurs sont toutes standardisées ici, si bien que les mêmes couleurs sont réutilisées dans tous les widgets. Si une couleur signifie qu’un élément requiert l’attention de l’utilisateur, tout autre élément qui exige le même degré d’attention utilise la même couleur.

Le graphique a également été modifié pour que les couleurs des courbes correspondent à ce qui précède.

De plus, comme la sélection actuelle des Blueprint Devices concerne l’organisation TagoIO, le logo TagoIO orne désormais le dashboard, indiquant clairement l’organisation ou le bâtiment qu’il représente.

Utilisation efficace de l’espace

Malgré nos itérations précédentes, le dashboard a encore une marge de progression pour exploiter efficacement l’espace disponible. Il est devenu moins surchargé, mais nous pouvons encore réduire l’information à ce qui est nécessaire au dashboard.

Gardez à l’esprit que vous pouvez utiliser d’autres onglets du même dashboard, d’autres dashboards et même des boîtes de dialogue modales qui s’ouvrent au clic d’un bouton placé dans le dashboard (par exemple, le bouton History pour voir le graphique).

Nous nous sommes concentrés sur les données les plus critiques, qui dans ce scénario étaient la température et l’humidité intérieures, pour optimiser l’espace. Nous avons supprimé les informations extérieures et les compteurs d’alertes les moins graves, réduisant ainsi le bruit. Bien que ces informations puissent être utiles dans un onglet distinct, elles ne sont pas essentielles au dashboard principal.

Si l’utilisateur voit quelque chose d’inutile au lieu de ce dont il a besoin, il sera frustré même s’il finit par s’y habituer. Si aucun de vos utilisateurs ne se soucie d’une information du dashboard, elle prend la place de choses plus importantes. Écouter les retours et itérer est donc primordial pour une conception efficace.

Nous avons aussi élargi la table pour une meilleure lisibilité, ce qui est possible parce que nous avons déplacé les graphiques dans une boîte de dialogue modale : dans ce cas d’usage, voir les alertes monter et descendre dans le temps est moins important au premier coup d’œil.

Quand on conçoit des dashboards agréables à utiliser, il faut déterminer quelles sont les données les plus cruciales à placer dans une « vue » (dashboard ou onglet) plutôt que de tout y jeter pour voir ce qui prend.

Les utilisateurs peuvent s’habituer à naviguer dans des dashboards exigus et surchargés, mais cela ne veut pas dire qu’ils n’éprouveront pas une grande frustration, surtout s’ils doivent consulter les données pour prendre des décisions critiques éclairées.

Une expérience utilisateur exceptionnelle

Créer une expérience utilisateur exceptionnelle exige une attention aux détails.

Nous avons réduit l’espace entre les widgets, ce qui permet aux utilisateurs de percevoir les informations liées comme regroupées. Comme nous avons évoqué l’amélioration des unités plus haut, nous avons utilisé les Dynamic Formulas pour vous permettre de convertir entre toutes les unités dont vous avez besoin. Nous avons mis en avant les unités de température, mais vous pouvez offrir une excellente expérience à vos utilisateurs en leur laissant choisir les unités selon leurs préférences, ce qui est très important dans un contexte mondial.

Par ailleurs, certaines choses absentes de cet article relèvent aussi de l’amélioration de l’expérience utilisateur. Côté localisation, nous proposons des Dictionaries parfaits pour rendre votre application utilisable en plusieurs langues.

Lors de la conception des dashboards de cette présentation, le Dictionary a été utilisé dans chaque widget, car des langues peuvent être ajoutées au besoin par la suite.

Pour ce qui est du graphique, cliquer sur le bouton history dans le journal des alertes des capteurs l’affiche, garantissant que les informations non critiques restent accessibles sans encombrer la vue principale. D’autres fonctionnalités peuvent encore améliorer l’expérience, comme l’usage des Color and Icon Conditions pour tirer le meilleur parti des indicateurs visuels et des couleurs.

Sur votre plateforme, une conception de dashboard efficace va au-delà du simple effet esthétique : on l’obtient en changeant les couleurs ou en utilisant la transparence et les images d’arrière-plan.

Nous avons adopté une approche itérative pour montrer que ces étapes peuvent se faire par petites touches, et que chacune peut faire grimper l’expérience utilisateur d’un cran notable.

Encore une fois, cet article a été inspiré par le webinaire « Designing IoT Dashboards to Amaze your Customers », où Klaus Borges et David Hall ont partagé leurs conseils sur la conception de dashboards IoT. Leur expertise, alliée aux retours de plus de 100 participants, nous a motivés à proposer ce résumé. En suivant ces recommandations, vous pouvez créer des dashboards qui présentent les données efficacement et offrent une expérience utilisateur fluide et engageante. Pour d’autres webinaires du même type, visitez la chaîne YouTube de TagoIO.