Glass Table : Top 10 des conseils de design pour booster votre carrière

Principe n°1 : les Glass Tables ne sont pas des rapports

Une Glass Table est un tableau qu’une personne regardera souvent et qui donnera lieu à une action rapide. ITSI n’est pas Excel (et pourtant, j’adore Excel).

Principe n°2 : commencez sur du papier

Nous faisons tous cela. Nous commençons à utiliser un nouvel outil (PowerPoint, Photoshop ou Gimp, Excel, Google docs, etc.) et nous voulons utiliser toutes ses fonctionnalités sans nous demander : « Qu'est-ce que je suis vraiment en train de faire ? ». Alors, éloignez-vous de votre clavier et de votre souris, prenez un stylo et du papier, utilisez votre cerveau et commencez à définir vos objectifs.

Posez-vous les questions suivantes :

• Qui va utiliser la Glass Table ?
• De quel type de KPI mon auditoire a-t-il réellement besoin ?
• Mes interlocuteurs comprennent-ils les KPI ?
• Quel format est nécessaire pour rendre les KPI vraiment compréhensibles ?
• Etc.

Restez pertinent (« less is more »), évitez de surcharger votre design et utilisez l'iconographie (le contenu n'est pas limité au texte et aux graphiques). La bonne nouvelle est que l’iconographie peut être réellement comprise par tout le monde de la même manière (pensez aux panneaux de signalisation).

Principe n°3 : tirez parti des couleurs et des polices

Les polices ajoutent une autre dimension… par exemple :

C’est assez clair, vous ne trouvez pas ? ☺

Voici quelques lignes directrices :

• Utilisez une seule police ;
• N’utilisez pas plus de trois tailles ;
• Vous devez créer une hiérarchie visuelle ? Utilisez le gras ou les couleurs ;
• Utilisez des polices sans empattement, car les polices avec empattement sont conçues pour les textes plus longs.

En ce qui concerne les couleurs :

• Choisissez-en quelques-unes et tenez-vous-y (Vous avez des doutes ? Demandez de l’aide à votre équipe marketing) ;
• Exploitez le contraste ;
• Utilisez les couleurs avec parcimonie (chaque couleur peut représenter un objectif de communication particulier) ;
• Faites attention au sens (rouge = danger, vert = tout va bien, etc.) ;
• Adaptez les couleurs à la culture de votre public. Par exemple, le noir symbolise la mort dans les pays occidentaux, alors que c’est le blanc qui l’évoque au Japon ;
• Si vous prévoyez d’utiliser des couleurs, veillez à ce que la couleur de l’arrière-plan soit homogène. De cette façon, les changements de couleurs sont plus contrastés.

Principe n°4 : choisissez la bonne visualisation pour les bonnes données

C’est vrai, tous les graphiques ne sont pas identiques ! Ils n’ont pas le même ratio d’encre informationnelle (Data-Ink Ratio). Voici quelques exemples :

Quelques conseils :

• Vous voulez faire une comparaison statique ? Utilisez des graphiques à colonnes ou à barres ;
• Vous souhaitez faire une comparaison dans le temps ? Utilisez des graphiques en courbes ;
• Vous voulez montrer une composition statique ? Utilisez des diagrammes circulaires ;
• Vous souhaitez montrer une composition évoluant dans le temps ? Utilisez des graphiques à colonnes ou des graphiques à aires empilées.

Principe n°5 : suivez le sens de la lecture

Nous lisons tous selon une hiérarchie naturelle… Nous commençons à lire de gauche à droite et de haut en bas. Mais aussi, en fonction des médias ou du niveau d'attention, certaines personnes « balayent un document » du coin supérieur gauche au coin inférieur droit.

Veillez donc à ce que vos KPI les plus importants soient situés dans le coin supérieur gauche… mais attention… Connaissez votre public ! 

La lecture de gauche à droite est vraie… pour les cultures occidentales. Cependant, certaines langues s’écrivent de droite à gauche (arabe, hébreu, kurde…) et certaines sont encore plus complexes/flexibles comme les écriture idéographiques (chinois, japonais, coréen…) car elles peuvent être écrites de gauche à droite ou verticalement de haut en bas. Parfois, même les deux directions peuvent être combinées sur une seule page.

Principe n°6 : organisez le contenu en blocs

Il s’agit de l’une des directives de tableau de bord les plus subtiles, mais néanmoins indispensable, car tout est une question d’équilibre. L’exemple « proximité » ci-dessous illustre ce principe. En regroupant les KPI et en jouant avec les espaces blancs (ou espaces négatifs - zone vide entre les éléments figurant sur le design d'un tableau de bord), votre auditoire comprendra directement quels KPI font partie du même groupe.

Principe n°7 : exploitez le pouvoir des flux

Ne sous-estimez pas la puissance d’une Glass Table ! Imaginez que vous souhaitez superviser l’état d'un service (une application, un processus métier… ce que vous voulez) dans Splunk ITSI. Vous commencez à afficher tous les KPI dans l’analyseur de service, mais il vous manque une information... Un collègue (qu’on ne nommera pas ☺) d’une autre équipe refuse de vous donner accès à son jeu de données (malheureusement, travailler en vase clos est encore courant). Créez une image d'arrière-plan (nous verrons comment le faire plus tard) qui affiche tous les composants. Importez-la sur ITSI en tant qu’arrière-plan, ajoutez les KPI dont vous disposez et montrez votre tableau à votre manager, directeur, etc. Ces derniers vont rapidement comprendre la valeur que vous apportez, mais ils remarqueront également qu'il manque une information (KPI)… Vous avez maintenant un allié de taille pour vous assurer que ce collègue en question vous donnera accès à son jeu de données… Mais ne révélez cette astuce à personne (c’est un client qui nous l’a apprise !).

Principe n°8 : adoptez l’approche dramatique

Parfois, une présentation « propre » ne suffit pas et une approche « qui fait peur » est nécessaire. En supprimant les exceptions importantes, vous pouvez faciliter la compréhension des points essentiels et la capacité d’action de votre auditoire. Après tout, nous parlons ici de la gestion des incidents. Alors, utilisez des couleurs, des contrastes, des symboles effrayants ☺ et des formes pour mettre l’accent sur les modifications les plus importantes des KPI plutôt que sur l’ensemble des données.

Principe n°9 : utilisez PowerPoint, Google et ITSI

Vous appréciez les principes précédents, mais vous vous demandez : « Comment puis-je les appliquer à Splunk ITSI ? »

C’est simple ! Si vous avez suivi les principes, vous devriez maintenant avoir un prototype sur papier. Il ne vous reste plus qu’à discuter avec votre équipe marketing et à leur demander des conseils en matière de couleurs, d’icônes de l’entreprise, etc.

• Mais vous pouvez également faire ceci :
• Utilisez un moteur de recherche comme Qwant ou Google pour rechercher des images PNG ou des icônes avec un fond transparent (veillez à filtrer celles qui sont étiquetées pour la réutilisation) ;
• Importez-les dans PowerPoint (avec un arrière-plan déjà établi et quelques « encadrés » pour structurer votre Glass Table) ;
• Placez de faux KPI pour que ça ait l’air vrai ;
• Supprimez les KPI et exportez votre diapositive en utilisant le format PNG ;
• Accédez à Splunk ITSI et importez le fichier PNG ;
• Ajoutez vos KPI, et voilà !

Principe n°10 : soyez tendance

D’après Tim Tully, le directeur technique de Splunk, nous entrons dans l’ère de l’expérience utilisateur axée sur le plaisir. Cela signifie que les logiciels d’entreprise (dans notre cas, les Glass Tables) ne doivent pas être ennuyeux. « Un design élégant vous fait avancer » explique-t-il. « Il vous donne un avantage qui vous permet d’accomplir toute tâche qui se présente à vous. Lorsqu’un produit est bien conçu, son utilisation cesse d’être une corvée pour devenir une source de motivation. »

Gardez donc un œil sur les tendances en matière de design pour vous assurer que vos Glass Tables sont modernes et attrayantes. Voici quelques tendances qui pourraient vous intéresser :

• Flat design ;
• Color blocking ;
• Chevauchement.

Si vous avez aimé cet article et que vous souhaitez en savoir plus, consultez la session sur le design que nous avons enregistrée lors de l’événement Splunk .conf 2019. Cette session est disponible à la demande ici : 

• Vidéo : https://conf.splunk.com/files/2019/summit/IT1523.mp4
• Diapositives : https://conf.splunk.com/files/2019/summit/IT1523.mp4

Merci de m’avoir lu !

Stéphane

P.s. Glass Table : les bonnes et mauvaises pratiques

*Cet article est une traduction de celui initialement publié sur le blog Splunk anglais.