Conception d’un tableau de bord d’analyse des relations

Vue d’ensemble du tableau de bord des contacts mutuels

Cet exemple officiel d’application desktop OpenDesign présente un tableau de bord d’analyse des relations sous la ligne « YOUR DATING LIFE, MEASURED BY THE COMPANY YOU KEEP ». La page associe une barre de navigation à gauche à un large espace de métriques, ce qui permet de passer du contexte du compte aux mesures actuelles, puis à l’activité historique.

Le tableau de bord est conçu par OpenDesign et utilise des données d’exemple illustratives. Les chiffres, noms, affirmations relationnelles et interprétations visibles décrivent la composition du design, et non des analyses personnelles vérifiées ni un service connecté.

01

Instantané actuel

Les neuf blocs de métriques forment un inventaire en une seule vue de nombres, pourcentages, durées et catégories relationnelles.

02

Lecture éditoriale

Des notes en italique comme « the people who'd text back within a day » transforment les valeurs brutes en point de vue conçu.

03

Prolongement historique

Les panneaux inférieurs prolongent les métriques instantanées par des barres quotidiennes et une explication plus longue du taux de match.

De l’état au contexte

La première rangée de l’espace de travail réunit « MUTUALS ON FILE », « REPLIES IN 24H » et « COMMUNITIES ». Les rangées suivantes ajoutent « MATCH RATE », « 2ND DATES » et « EXES IN YOUR CIRCLE », puis « SHARED BLOCKS », « AVG RESPONSE » et « LOGGED-OFF HRS ». Cet ordre va de la taille du réseau et de la réactivité vers l’historique relationnel et les comportements.

Chaque métrique combine un libellé, une valeur en évidence et une courte interprétation en italique. Par exemple, « 1,842 » est associé à « ↑ 41 this wk · healthy growth », tandis que « 14% » est associé à « above median for your cohort ». Cet appariement donne au panneau l’allure d’une évaluation éditoriale, mais les jugements qui l’accompagnent font partie du contenu d’exemple et n’établissent pas la manière dont un vrai produit les calculerait.

Une barre latérale discrète comme point d’ancrage

La barre latérale garde visibles « mutuals. », le marqueur de profil @signals, « RATIO 22.9 · TIER III » et les sections « TODAY », « YOU » et « ARCHIVE » à côté de l’espace de travail. « your stats » est mis en avant par un fond rouge pâle, tandis que des pastilles distinguent specimen, inbox, queue et notifications. La page dispose ainsi d’une colonne vertébrale de navigation stable, bien que la capture seule ne prouve pas que ces éléments soient interactifs ni liés à des états réels.

Lire les contacts mutuels et le taux de match

Le panneau « mutuals — last 30 days » utilise des barres verticales quotidiennes avec des repères de dates à « MAR 18 », « MAR 25 », « APR 1 », « APR 8 », « APR 15 » et « TODAY ». La plupart des barres sont noires, tandis que deux, vers la fin, sont rouges. L’annotation indique « ↑ TRENDING UP · +3 CLOSE MUTUALS THIS MONTH · TWO VIA THE SAME OFFSITE », reliant les barres mises en avant à un événement récent sans exposer de définition détaillée des données sous-jacentes.

La conséquence visuelle est une lecture directionnelle rapide : la hauteur des barres suggère la variation, le rouge isole un intervalle notable et le titre fournit l’interprétation. En contrepartie, le graphique n’affiche ni axe des ordonnées, ni valeurs quotidiennes explicites, ni légende ; il communique donc plus facilement une tendance et une emphase qu’une mesure précise.

L’affirmation sur douze semaines

Le titre suivant est « match rate — last 12 weeks ». Le texte d’appui indique « STEADY CLIMB FROM 8% → 14%. ATTRIBUTABLE TO ONE COMMUNITY JOIN (FOUNDERS WHO POST, WK 4). » En dessous, la phrase plus grande commence par « A real climb, not a vibe. » et oppose une adhésion à une communauté à quatre mois de modifications de profil.

Cela crée un récit causal à côté du libellé de tendance, mais la capture ne fournit ni points hebdomadaires tracés, ni méthode de calcul, ni source corroborante. Pour le lecteur, cette section sert donc d’exemple de la façon dont un design analytique peut mettre une explication au premier plan, tandis que les chiffres et l’attribution restent du contenu d’exemple illustratif.

De la barre latérale aux panneaux de tendance

Le parcours dans l’espace de travail est séquentiel plutôt que fondé sur des écrans. Le lecteur entre par la barre latérale, voit l’état sélectionné « your stats », parcourt la grille de métriques sur trois colonnes, puis atteint plus bas les panneaux d’activité et de taux de match. Le CSS confirme une grille à trois colonnes, une largeur de texte maximale de 56ch pour les métadonnées des panneaux et des SVG de panneau en pleine largeur ; ces contraintes soutiennent une large surface de lecture desktop sans exiger que chaque libellé tienne sur une seule ligne.

Le principal compromis est la densité. Neuf métriques tiennent au-dessus des graphiques parce que chaque bloc se limite à un libellé, une valeur et une note, mais la page demande au lecteur de retenir de nombreuses définitions différentes. Les titres de panneaux et les repères de dates assurent les transitions qui gardent ce long canevas lisible.

Ce qui change d’une zone à l’autre

La vue d’ensemble utilise des blocs de métriques répétés et des filets horizontaux pour faciliter la comparaison. Le panneau d’activité passe à des barres répétées et à de rares libellés de dates, puis le panneau du taux de match passe à un énoncé éditorial. Ce sont des modes de lecture distincts : comparer, balayer, puis interpréter.

Le rouge rouille marque la navigation sélectionnée, les deux barres d’activité mises en avant et les deux valeurs d’exemple de 4 pour les ex et les heures hors ligne. Le vert marque 47 réponses, le taux de match de 14 % et l’indicateur en ligne. L’exemple ne définit pas de système de statuts universel derrière ces couleurs.

Design visible et limites fonctionnelles

Cet artefact illustre une composition visuelle de tableau de bord : une barre latérale, une grille de métriques, un graphique en barres, un système typographique, des accents de couleur et un texte explicatif. Les captures fournies n’établissent ni récupération de données en direct, ni stockage persistant, ni notifications, ni état de compte, ni interaction avec le graphique, ni modèle relationnel de production. Tout comportement recréé doit donc traiter ces éléments comme un comportement proposé tant qu’il n’a pas été implémenté et vérifié séparément.

L’exemple contient aussi des énoncés volontairement précis comme « above median for your cohort », « two are now friends » et « one community join moved your match rate ». Ils donnent à l’interface un caractère affirmé et concret, mais ils doivent être présentés comme du contenu illustratif plutôt que comme des résultats mesurés. L’enseignement le plus transposable du design est la relation entre une valeur, sa fenêtre temporelle et l’interprétation qui l’accompagne.

Adapter ce modèle avec prudence

Une nouvelle version peut conserver le rythme de métriques sur trois colonnes, la séquence de barres sur trente jours et le récit distinct sur douze semaines, tout en remplaçant les valeurs d’exemple par des données clairement définies. Gardez la période dans chaque titre, définissez ce que compte chaque mesure et distinguez une mise en évidence visuelle d’un statut vérifié.

Pour l’implémentation, la capture soutient des techniques visuelles locales comme la mise en page CSS, la typographie, les changements de couleur et le rendu de graphiques. Elle n’établit ni services connectés ni efficacité. Une recréation peut utiliser la mise en page observée comme référence visuelle tout en définissant ses propres données et son propre comportement.