Concevez de superbes tableaux de bord dans AI/BI

Introduction

Chaque entreprise possède une identité de marque qui reflète ses valeurs, façonnée par son logo, ses couleurs, ses polices et son ton. Nos clients les plus emblématiques, comme Rivian et Wineshipping, appliquent cette identité de manière cohérente sur tous les supports : marketing, présentations, sites web et produits. C'est cette cohérence qui instaure la confiance avec leurs clients et partenaires.

Les tableaux de bord sont un moyen essentiel pour les équipes métier de partager des données avec les décideurs et les partenaires externes. Les concepteurs de tableaux de bord façonnent cette expérience pour aider les utilisateurs à comprendre leurs données et à en dégager des insights clés. Pour que les tableaux de bord inspirent confiance et professionnalisme, les concepteurs doivent veiller à ce qu'ils soient cohérents et respectent l'image de marque. Les thèmes de tableau de bord vous permettent de personnaliser l'aspect visuel de chaque tableau de bord pour l'adapter à votre vision.

Les thèmes d'espace de travail vont encore plus loin en appliquant un thème cohérent à l'ensemble des tableaux de bord de l'espace de travail, qui en héritent automatiquement. Celui-ci peut bien sûr être étendu et/ou modifié localement si nécessaire. Dans cet article, nous allons explorer quelques bonnes pratiques de conception et créer un thème personnalisé qui reflète l'image de marque.

Nous utiliserons la charte graphique de la marque fictive Wanderbrick comme exemple pour créer un tableau de bord.

Vous voulez nous suivre ? Wanderbricks est une entreprise fictive de voyage et d'hôtellerie dont le jeu de données d'exemple est disponible dans chaque espace de travail Databricks. Vous pouvez recréer le tableau de bord de toutes pièces en utilisant les invites Genie Code de chaque section, ou simplement lire l'article et appliquer ces idées aux vôtres. Commencez par ouvrir un nouveau tableau de bord et collez-y cette invite. Elle crée une vue de métriques locale basée sur le schéma samples.wanderbricks avec les dimensions et les mesures que nous utiliserons tout au long de cet article.

#1 — Créez une mise en page adaptée aux besoins de vos utilisateurs finaux

Configuration de votre grille

L'objectif de votre tableau de bord doit déterminer le nombre de colonnes de votre grille. AI/BI propose une grille flexible de 12 colonnes que vous pouvez subdiviser en 3, 4 ou 6 colonnes selon vos besoins. Les tableaux de bord techniques et denses comportant de nombreux widgets tirent parti d'une disposition en 6 colonnes, ce qui permet d'afficher davantage de widgets à l'écran. En revanche, un tableau de bord destiné aux dirigeants peut utiliser une disposition en 3 colonnes pour réduire la charge cognitive.

Création d'une hiérarchie

Lors de la lecture d'un tableau de bord, l'œil humain balaie naturellement l'écran pour trouver les informations les plus importantes avant de commencer à lire. Selon la conception de votre tableau de bord, l'œil suivra l'un des deux parcours suivants : un motif en F ou un motif en Z.

Pour les tableaux de bord riches en images et en visualisations, l'œil suit naturellement un motif en Z à travers les éléments visuels, en commençant en haut à gauche avec les titres et les filtres, en descendant en diagonale, pour finir en bas à droite sur les visualisations détaillées et les tableaux.

Pour les tableaux de bord plus denses en texte ou en tableaux, un motif en F peut apparaître. L'œil balaie entièrement la première ligne, puis descend sur le côté gauche. Dans les deux cas, le principe reste le même : placez les éléments les plus importants là où l'œil se pose en premier.

Redimensionner pour mettre en valeur

Si tous les éléments de votre tableau de bord ont la même taille, aucun ne se détache. Les utilisateurs ont besoin de repères visuels pour savoir où porter leur attention en premier. Établissez une hiérarchie claire en agrandissant vos métriques les plus critiques et vos visuels principaux, tout en laissant les éléments secondaires au second plan.

Essayez d'appliquer cela au tableau de bord Wanderbricks. La première invite génère une page de présentation pour les dirigeants qui respecte la hiérarchie que nous venons d'aborder, et la seconde ajoute une page technique plus dense pour montrer comment ces mêmes principes s'adaptent à un public différent.

#2 — Sélectionnez une police pour le ton et la lisibilité

Le choix d'une police pour un tableau de bord est une décision autant fonctionnelle qu'esthétique. Votre identité de marque et votre public cible doivent tous deux influencer ce choix. Un public plus technique appréciera peut-être une police expressive comme Space Grotesk, tandis qu'un tableau de bord pour dirigeants tirera parti d'une police plus familière et classique, comme Arial. L'objectif n'est pas seulement le style, mais aussi de donner le ton.

Les tableaux de bord ont tendance à être denses en informations, la lisibilité est donc la priorité absolue. Nous recommandons les polices sans empattement (sans-serif), car elles réduisent la fatigue visuelle. AI/BI prend nativement en charge quelques options sans empattement compatibles avec le Web, notamment Arial, Tahoma et Verdana.

Si vous souhaitez utiliser votre propre police, vous pouvez désormais ajouter une police locale à votre tableau de bord. C'est particulièrement utile lorsque les tableaux de bord sont intégrés à vos outils internes pour garantir la cohérence visuelle. Pour ce tableau de bord, nous utiliserons une police locale et choisirons Space Grotesk.

Pour garantir la lisibilité, choisissez des couleurs de police qui maintiennent un contraste élevé avec l'arrière-plan du widget. Utilisez un outil d'accessibilité comme l'analyseur de contraste de couleurs d'Adobe pour le vérifier. En mode clair, évitez d'utiliser du noir pur (#000000), car cela peut sembler agressif sur un fond clair (#FFFFFF). En mode clair, un ton légèrement adouci comme #08141A sur un fond #EBEBEB offre souvent une expérience de lecture plus confortable. En mode sombre, vous pouvez essayer d'utiliser #EBEBEB sur un fond #08141A pour éviter un contraste excessif.

AI/BI prend en charge un ensemble de polices compatibles avec le Web et open source que vous pouvez appliquer avec Genie Code. Pour les polices de marque, utilisez l'option de police locale sous Paramètres > Police > Utiliser une police locale. Essayez cette invite pour commencer avec une option open source et définir les couleurs de votre police.

#3 — Définir les couleurs de l'UI

La règle des 60-30-10 est un principe fondamental de la théorie des couleurs pour créer des designs équilibrés et visuellement harmonieux. Les designers utilisent cette règle dans de nombreux contextes, qu'il s'agisse de choisir les couleurs d'une pièce de votre maison ou d'établir l'image de marque d'une nouvelle entreprise. Cette règle de conception vous aide à définir votre palette de couleurs à l'aide de trois catégories de couleurs, et lui donne l'équilibre approprié quant à la proportion d'utilisation de chacune d'elles dans un design global :

• 60 % correspond à votre couleur dominante qui définit le ton général du tableau de bord, et servira de couleur d'arrière-plan pour votre canevas, vos widgets et vos bordures.
• 30 % correspond à votre couleur secondaire qui soutient votre arrière-plan avec du contraste. Dans votre tableau de bord, il s'agira de la couleur de votre police et de votre palette de visualisation des données.
• 10 % correspond à votre couleur d'accentuation, destinée à attirer l'attention là où vous en avez besoin. Utilisez-la pour mettre en valeur les éléments interactifs tels que les filtres, les onglets et les boutons de votre tableau de bord.

Ci-dessous, nous verrons comment appliquer ce principe pour choisir de superbes couleurs pour votre tableau de bord.

Couleurs d'arrière-plan neutres

En gardant des couleurs d'arrière-plan proches de la neutralité, nous permettons aux couleurs de visualisation des données de communiquer avec précision sans introduire de biais involontaire. Pour le mode clair, gardez les arrière-plans des widgets proches du blanc (#FCFCFD) avec une couleur légèrement plus sombre pour l'arrière-plan du canevas (#EBEBEB). Cela crée une séparation sans distraction. Lorsque le contraste est subtil, le tableau de bord se lit comme un tout cohérent plutôt que comme une grille d'éléments isolés. Définir des couleurs de bordure assorties à l'arrière-plan du widget réduit l'encombrement visuel, en particulier dans les mises en page denses.

Personnalisation par widget

Pour mettre en valeur certains widgets et les faire ressortir, vous pouvez remplacer les propriétés du thème pour un widget. Dans les paramètres de style du widget, remplacez la couleur de l'arrière-plan et de la bordure par #1F354B. De plus, remplacez la couleur de la police par #EBEBEB pour garantir un contraste élevé.

Couleur de sélection vive

La couleur de sélection est utilisée pour mettre en valeur les éléments interactifs tels que les filtres, les onglets et les boutons. Choisissez une couleur qui se distingue facilement du texte et des couleurs d'arrière-plan. Vous pouvez facilement les dériver à partir des couleurs de votre marque. En utilisant le #15AFDD de notre marque comme couleur de base dans Adobe Color, nous pouvons essayer de dériver une couleur de sélection en réglant l'harmonie des couleurs sur « carré », ce qui donne des couleurs comme #DE7914 et #3A7689. Choisir une couleur bleue (comme #2272B4) est généralement un choix sûr : elle est analogue à la couleur des liens hypertexte associés aux liens interactifs sur le Web.

Mode sombre

Chaque thème AI/BI prend en charge les modes clair et sombre. Configurez les deux modes en basculant le bouton de mode clair/sombre. Pour configurer le mode clair, vous pouvez utiliser la couleur de marque #1E343F pour l'arrière-plan du canevas et #08141A pour l'arrière-plan du widget. En mode clair, la couleur la plus claire pour le widget est généralement recommandée car elle offre un contraste élevé. Pour la couleur de la police, nous utiliserons #E8EFF1 afin d'assurer une lisibilité optimale.

Essayez d'appliquer le principe 60-30-10 au tableau de bord Wanderbricks. Cette invite définit des arrière-plans de canevas et de widgets neutres, masque les bordures en les faisant correspondre à la couleur du widget et ajoute un bleu complémentaire pour les éléments interactifs.

#4 — Créez une palette de visualisation qui vous ressemble

Une fois les couleurs de l'interface établies pour les modes clair et sombre, la dernière étape consiste à sélectionner la palette de visualisation.

Une palette de visualisation des données bien équilibrée unifie l'ensemble du tableau de bord et lui donne vie. La palette peut inclure les couleurs de la marque, mais des ajustements seront nécessaires car elles peuvent s'avérer inutilisables pour les visualisations. On estime que 4,5 % de la population mondiale souffre d'une forme de daltonisme, il est donc important de concevoir une palette adaptée aux daltoniens. Si vous souhaitez essayer des palettes standard de l'industrie, nous vous recommandons de consulter colorbrewer. Voici quelques éléments clés à prendre en compte lors de la conception de votre propre palette :

1. Selon le cas d'usage, une palette doit comporter de 5 à 9 couleurs. Dans ce tableau de bord, nous allons créer une palette de 5 couleurs à l'aide d'Adobe Color.
2. Les couleurs doivent être distinctes en mode clair comme en mode sombre, évitez donc les couleurs extrêmement claires ou extrêmement sombres.
3. Le daltonisme rouge/vert étant courant, évitez de placer ces couleurs l'une à côté de l'autre dans la palette.

Pour notre palette de visualisation Databricks personnalisée, nous commençons par la couleur de notre marque (#15AFDD) dans Adobe Color. Nous appliquons l'harmonie de couleurs « carré » pour dériver 4 couleurs supplémentaires (#83DE14, #DE7914, #BE14DE, #3A7689) régulièrement espacées sur la roue chromatique. À partir de là, dans Adobe Color, vous pouvez effectuer quelques ajustements supplémentaires :

• Modifiez les teintes en cliquant sur le code hexadécimal de chaque couleur et en déplaçant progressivement le curseur de teinte.
• Ajustez la luminosité des couleurs de la palette en cliquant sur le code hexadécimal de la couleur et en mettant à jour le curseur de luminosité. L'objectif est de maintenir les couleurs distinctes, en particulier pour les paires adjacentes.
• Testez les couleurs obtenues dans le simulateur de daltonisme d'Adobe Color pour voir comment votre palette apparaît dans des conditions courantes, notamment la deutéranopie, la protanopie et la tritanopie.
• Testez dans AI/BI sur de vrais tableaux de bord en mode clair et sombre.

La palette de couleurs finale obtenue est la suivante : #15AFDD, #2375A8, #52A870, #C85070, #C89930.

Une fois que votre palette a passé les contrôles d'accessibilité, appliquez-la pour voir vos graphiques prendre vie. C'est la palette que nous avons choisie après l'avoir passée dans le simulateur de daltonisme d'Adobe Color et l'avoir testée en mode clair et sombre.

Conclusion

Les décisions de conception qui semblent mineures de manière isolée s'accumulent rapidement. Une police cohérente, une palette de couleurs réfléchie et une mise en page conçue pour faciliter la lecture. Ensemble, ces éléments transforment un tableau de bord en un outil de confiance. Les thèmes de l'espace de travail permettent de généraliser cela à l'échelle de votre organisation, de sorte que les bonnes pratiques de conception deviennent le point de départ de chaque tableau de bord.

Le tableau de bord que nous avons présenté est disponible ici si vous souhaitez l'explorer par vous-même. Si vous n'utilisez pas encore les tableaux de bord AI/BI, sachez qu'ils sont intégrés nativement dans Databricks.

Vous avez des idées ou des commentaires ? Partagez-les avec nous.

Téléchargez le tableau de bord pour l'explorer par vous-même

(Cet article de blog a été traduit à l'aide d'outils basés sur l'intelligence artificielle) Article original