Fermer

mai 24, 2020

Un guide du concepteur pour créer des tableaux de bord efficaces


Sprint: Saviez-vous que nous organiserons une conférence en ligne sur la conception des produits? SPRINT expliquera comment les concepteurs et les propriétaires de produits peuvent garder une longueur d'avance en ces temps sans précédent.

Les tableaux de bord sont un moyen unique et puissant de présenter l'intelligence basée sur les données en utilisant des techniques de visualisation de données qui affichent des informations pertinentes et exploitables. ainsi que des statistiques de suivi et des indicateurs de performance clés (KPI). Les tableaux de bord doivent présenter ces données dans un format rapide et facile à numériser avec les informations les plus pertinentes compréhensibles en un coup d'œil.

Le terme est né du tableau de bord automobile traditionnel, et ils ont évolué pour servir la même fonction dans le numérique Dans son livre Stephen Few le dit le mieux:

Un tableau de bord est un affichage visuel des informations les plus importantes nécessaires pour atteindre un ou plusieurs objectifs;

Conception de tableau de bord mobile par Mason Yarnell pour Mixpanel

Dans cet article, nous décrivons des stratégies stratégiques. , des exemples analytiques, opérationnels et informatifs ainsi que les principes fondamentaux qui sont au cœur de toute conception de tableau de bord réussie, quel que soit son type.

Avoir la bonne approche pour visualisation des données est un élément clé pour jeter les bases d'un tableau de bord réussi. La visualisation des données est la présentation de données via des graphiques et des images – son objectif principal est d'aider les décideurs à identifier des modèles ou à comprendre des concepts difficiles qui peuvent passer inaperçus dans des applications basées sur du texte.

Dans leur livre Visualisation des données Noah Iliinsky et Julie Steele déclarent:

Le but du concepteur dans la conception d'une visualisation de données est de créer un livrable qui sera bien reçu et facilement compris par le lecteur. Tous les choix de conception et implémentations particulières doivent servir cet objectif.

Caractéristiques clés des grands tableaux de bord

Un tableau de bord efficace affiche des informations exploitables et utiles en un coup d'œil. Il simplifie la représentation visuelle de données complexes et aide les parties prenantes à comprendre, analyser et présenter des informations clés.

 Éléments dans la conception d'un tableau de bord
Tableau de bord Contractbook par Toptal Designer Wojciech Dobry

De grands tableaux de bord sont clair, intuitif et personnalisable.

  • Ils communiquent rapidement les informations.
  • Ils affichent les informations de manière claire et efficace.
  • Ils montrent les tendances et les changements dans les données au fil du temps.
  • Ils sont facilement personnalisables.
  • Le

Une personnalisation initiale des données et informations visuelles selon les besoins des utilisateurs contribuera à améliorer la convivialité et à éliminer le besoin de différents personnages d'utilisateurs.

 Représentation des éléments de tableau de bord personnalisables
Éléments de tableau de bord personnalisables – Contractbook par Toptal Designer Wojciech Dobry

De superbes tableaux de bord fournissent tout sur

  • Toutes les informations essentielles sont immédiatement accessibles.
  • Les données sont classées par ordre de priorité.
  • Les informations sont affichées clairement dans une hiérarchie visuelle sur un seul écran.
  • La conception fournit une vue d'ensemble cohérente qui comprend des informations clairsemées et claires les données initiales avec des opportunités supplémentaires pour explorer plus en détail.
  • Les éléments (graphique, tableau, formulaire) sont affichés dans une vue réduite avec la possibilité d'afficher plus de détails dans une fenêtre modale ou d'accéder à une page avec plus de détails. [19659021] La conception améliore la convivialité avec des filtres permettant aux utilisateurs de personnaliser la façon dont les données sont affichées et de filtrer le contenu à l'aide d'étiquettes, de catégories et d'indicateurs de performance clés. Designer Miklos Philips

    La ​​complexité réduite apporte de la clarté

    Dans un monde débordant de données, fournir des informations claires est l'une des choses les plus difficiles à accomplir. Il est essentiel de ne présenter que les données les plus pertinentes sur les tableaux de bord: plus nous affichons d'informations, plus il est difficile pour les utilisateurs de trouver ce dont ils ont besoin.

    Face à trop de données à sélectionner, designers [19659041] ne devrait afficher que le sous-ensemble le plus pertinent.

    Les décisions efficaces de conception de tableau de bord doivent être guidées par:

    • les objectifs du projet
    • la nature des données
    • les besoins des utilisateurs

     Conception de tableau de bord éléments
    Conception de tableau de bord par Toptal Designer Stelian Subotin

    Lors de la lecture d'une visualisation (ou de tout autre type de communication), votre lecteur a une quantité limitée de cerveaux à consacrer au problème. Une partie de ce cerveau sera consacrée au décodage de la visualisation; tout cerveau restant peut alors être utilisé pour comprendre le message (si le lecteur n'a pas encore abandonné sa frustration). – Noah Iliinsky et Julie Steele (Visualisation des données)

    L'objectif central d'un tableau de bord est de rendre les informations complexes accessibles et faciles à digérer. Par conséquent, l'interface présentant les données doit être propre et simple afin de minimiser la charge cognitive des utilisateurs et le temps passé à rechercher.

    L'architecture de l'information doit présenter les données essentielles en premier tout en permettant l'accès aux mesures de soutien ou secondaires.

     Conception de tableau de bord mobile pour iOS
    Conception de tableau de bord mobile par Janv. Un système d'exploration en amont progressif doit être conçu qui commence par une vue d'ensemble générale, puis va plus en détail – il facilite la hiérarchisation des données et crée de la clarté. Losert

    Détermination des objectifs du tableau de bord et affichage des données appropriées

    Les conceptions de tableau de bord réussies commencent par un ensemble bien défini d'objectifs se concentrant sur le problème à résoudre et l'apprentissage clé à retirer de l'ensemble de données. La définition de ces objectifs repose sur une compréhension claire des tâches que l'utilisateur doit effectuer.

    De bons objectifs de conception favorisent une exécution efficace et précise. L'utilisation du cadre SMART pour la définition d'objectifs met l'accent sur spécifique mesurable [19659058] actionnable réaliste et ti basé sur moi objectifs.

    Quelques questions clés à demander lors de la détermination des objectifs de conception du tableau de bord:

    • Combien d'étapes les utilisateurs doivent-ils effectuer pour atteindre un objectif spécifique?
    • L'interface est-elle suffisamment intuitive pour que l'utilisateur atteigne son objectif par lui-même?
    • Quelles informations le

    Pour déterminer quel peut être l'objectif d'une conception de tableau de bord spécifique, définissez-le en demandant: "Quel problème spécifique cette conception va-t-elle résoudre pour l'utilisateur?" La réponse fournira des informations sur les métriques, les propriétés, les valeurs, les visuels et les données qui sont importants.

     Utilisation de graphiques en anneau dans une conception de tableau de bord
    Conception de tableau de bord par Toptal Designer Miklos Philips

    La conception centrée sur les objectifs se concentre sur les solutions aux problèmes réels et constitue le fondement de toute conception de tableau de bord exceptionnelle. Commencez par une compréhension claire des objectifs de l'entreprise, tenez compte des objectifs des utilisateurs, puis transmettez les informations clés qui doivent être communiquées.

    Contexte de la conception du tableau de bord

    L'un des plus grands défis de la conception du tableau de bord est de servir plusieurs personnes. Une fois que chaque rôle d'utilisateur est défini, il devient essentiel de comprendre où leurs besoins se chevauchent et où ils divergent.

    Une communication efficace est le principe sous-jacent de toute conception de tableau de bord réussie. La prévision de scénarios potentiels dans lesquels les utilisateurs peuvent se retrouver contribuera à une meilleure compréhension de la situation de l'utilisateur.

    Gardez toujours à l'esprit le contexte des utilisateurs lors de la conception: identifiez leurs connaissances techniques, leur familiarité avec le système dans son ensemble, leurs objectifs, etc. .

     Éléments contextuels dans une conception de tableau de bord
    Conception de tableau de bord par le concepteur Toptal Miklos Philips

    Assurez-vous de poser les questions suivantes lorsque vous essayez de déterminer le comportement et le contexte de l'utilisateur:

    • la conception considère-t-elle la direction dans laquelle le visiteur est habitué à lire?
    • L'interaction avec le tableau de bord nécessite-t-elle des connaissances techniques?
    • Les utilisateurs parviendront-ils à accomplir la plupart des actions en quelques clics?
    • contexte utilisateur en créant des menus détaillés; utilise-t-il une iconographie suggestive et des palettes de couleurs?

    La palette de couleurs utilisée dans la conception d'un tableau de bord doit également être considérée comme un contexte. De nombreux tableaux de bord de produits SaaS interentreprises sont conçus dans une interface utilisateur à thème sombre car ils sont utilisés pendant plusieurs heures d'affilée.

    Les interfaces utilisateur à thème sombre peuvent aider à réduire la fatigue oculaire et à favoriser la clarté visuelle au sein de l'interface. Cependant, adopter cette approche nécessite une évaluation minutieuse de la direction de la conception — les avantages, les inconvénients et les pièges potentiels tels que décrits dans un précédent article de blog de conception: À faire et à ne pas faire dans l'interface utilisateur sombre .

     Conception de l'interface utilisateur du tableau de bord analytique
    Les conceptions, les analyses et les infographies de l'interface utilisateur du tableau de bord fonctionnent bien sur une interface utilisateur sombre, mais doivent toujours être «manipulées avec soin» pour assurer un contraste suffisant (par Alex Gilev ).

    Mieux conception de tableau de bord avec recherche d'utilisateurs

    La recherche d'utilisateurs aide à créer un environnement dans lequel les utilisateurs sont présentés avec des données pertinentes, claires et concises. Cela les aide à réfléchir au contenu et aux données qu'ils recherchent, plutôt qu'à la façon de les utiliser et d'y accéder.

    Certains tableaux de bord doivent fonctionner – ou être facilement personnalisables pour les utilisateurs de différents rôles qui consultent le même tableau de bord de base. La recherche des utilisateurs est importante car elle permet de déterminer les objectifs, les modèles mentaux, le contexte environnemental et les points douloureux de l'utilisateur. Ce sont des facteurs qui influencent grandement la conception finale du tableau de bord.

     Présentation d'une conception de tableau de bord
    Conception du tableau de bord par le concepteur de Toptal Stelian Subotin . qu'il s'agit «du processus de compréhension de l'impact du design sur un public».

    Un concepteur doit définir les différents types d'utilisateurs et comprendre où leurs objectifs sont les mêmes et où ils diffèrent. Quelles informations sont les plus exploitables pour un type d'utilisateur par rapport à un autre? Ils doivent se demander s'il doit y avoir une mise en page différente d'un type d'utilisateur à un autre, ou s'il existe une solution pour un cas d'utilisation plus général.

    Compte tenu de cela, c'est une bonne idée de commencer par des trames filaires rudimentaires et de déplacer sur des prototypes qui peuvent être testés avec des utilisateurs réels au cours d'une phase de recherche d'utilisateurs. Des informations vraiment précieuses peuvent découler d'une courte phase de recherche d'utilisateurs avec seulement cinq utilisateurs, et cela permettra d'économiser énormément de temps sur la ligne.

     Conception de tableau de bord filaire basse fidélité
    Filaire de tableau de bord d'ici Aaron Sananes

    Divulgation progressive dans la conception de tableaux de bord

    Divulgation progressive est une technique utilisée pour maintenir l'attention d'un utilisateur en réduisant l'encombrement. La création d'un système de divulgation progressive aide à créer un environnement centré sur l'utilisateur, ce qui permet de hiérarchiser l'attention de l'utilisateur, d'éviter les erreurs et de gagner du temps. Il permet également aux utilisateurs de se concentrer sur les fonctionnalités clés qui comptent pour eux et de ne pas être obligés de passer par toutes les fonctionnalités, y compris celles dont ils n'ont pas besoin ou qui ne les intéressent pas.

    La divulgation progressive est la meilleure conception de tableau de bord. une pratique qui réduira également considérablement les taux d'erreur; il améliorera l'efficacité et aidera les utilisateurs à améliorer leur compréhension des tableaux de bord lorsqu'un système est basé sur la hiérarchisation des fonctionnalités.

     Conception de l'interface utilisateur du tableau de bord et visualisation des données
    Conception du tableau de bord par Jan Losert

    La divulgation progressive reporte les fonctionnalités avancées ou rarement utilisées à un écran secondaire, ce qui rend les applications plus faciles à apprendre et moins sujettes aux erreurs. – Jakob Nielsen

    L'animation est un excellent moyen de satisfaire une variété de besoins des utilisateurs tout en remplissant plusieurs fonctions. C'est une excellente option à utiliser pendant le chargement des données et des visuels et est une solution avancée de divulgation progressive.

    L'animation est le processus de création de l'illusion du mouvement; c'est une dynamique qui crée un sentiment de progrès et de rétroaction constante, réduisant ainsi l'incertitude de l'utilisateur et augmentant les performances perçues.

     Animation de l'interface utilisateur du tableau de bord
    Tableau de bord de Virgil Pana

    Avantages de l'utilisation de la divulgation progressive dans les tableaux de bord:

    • Réduire l'incertitude et l'anxiété des utilisateurs (en affichant des signes de progrès, les utilisateurs sont assurés que tout fonctionne comme prévu)
    • Fournir aux utilisateurs quelque chose à regarder (affichage partiel des données) plutôt que les faire attendre
    • Fournir aux utilisateurs une attente claire des étapes à venir et comprendre la façon dont l'information est présentée de manière hiérarchique

    Les problèmes potentiels liés à la divulgation progressive et au chargement des données comprennent:

    • Utilisation d'indicateurs et de divulgations dans d'une manière inappropriée.
    • Un retard dans la récupération des données sans indicateur clair de progrès peut entraîner une incertitude pour l'utilisateur et des taux de rebond plus élevés.
    • L'utilisation d'indicateurs de progression statiques est un solution avec peu de sens et n'offrant pas suffisamment d'informations sur les progrès, ce qui peut également conduire à l'incertitude des utilisateurs et à des taux de rebond plus élevés.

     Conception de l'interface utilisateur et de l'UX du tableau de bord
    Conception du tableau de bord par Mason Yarnell

    Résumé [19659016] Les tableaux de bord sont un moyen puissant de communiquer des données et d'autres informations, en particulier avec une conception centrée sur l'utilisateur et axée sur les objectifs qui suit les meilleures pratiques de conception de tableau de bord et une visualisation appropriée des données. Bien que chaque tableau de bord soit différent et ait ses propres objectifs, exigences et limites, le respect de ces principes fondamentaux aidera à créer des conceptions exceptionnelles, quelles que soient les spécificités:
    • Tout d'abord, faites preuve d'empathie avec vos types d'utilisateurs et comprenez leurs objectifs. [19659021] Transmettre une histoire claire aux utilisateurs en utilisant des visuels suggestifs, des étiquettes, des techniques de divulgation progressive et des animations.
    • Rendre les choses complexes faciles en appliquant des techniques de recherche d'utilisateurs.
    • Révéler des données et des informations au moment opportun, dans
    • Utilisez la visualisation des données pour exprimer les informations de manière significative.

    Le Toptal Design Blog est une plaque tournante pour les études de conception avancées par concepteurs professionnels du réseau Toptal sur toutes les facettes de la conception numérique, allant des didacticiels de conception détaillés à une couverture approfondie des nouvelles tendances, outils et techniques de conception. Vous pouvez lire la pièce originale écrite par Stelian Subotin ici . Suivez le blog Toptal Design sur Twitter Dribbble Behance LinkedIn Facebook et Instagram .

    Couverture Corona

    Lisez notre couverture quotidienne sur la façon dont l'industrie technologique réagit au coronavirus et abonnez-vous à notre newsletter hebdomadaire Coronavirus in Context .

    Pour des conseils et des astuces astuces pour travailler à distance, consultez nos articles Growth Quarters ici ou suivez-nous sur Twitter .




Source link