La plupart des dashboards SaaS sont construits par des ingénieurs qui comprennent les données. Ils sont rarement designés par des personnes qui comprennent ce qu'un utilisateur de première fois voit quand il se connecte, ne trouve rien, et ferme l'onglet.
Ces douze patterns traitent le cycle de vie complet de l'interaction avec le dashboard.
L'empty state est l'écran que voient les utilisateurs quand ils se connectent pour la première fois, avant d'avoir ajouté des données. C'est aussi l'écran avec le taux d'abandon le plus élevé dans la plupart des produits SaaS.
Un bon empty state fait trois choses :
Montre à quoi ressemblera l'état peuplé. Pas une icône triste avec "Pas de données encore." Un aperçu de ce à quoi ressemblera le dashboard une fois des données ajoutées. Les utilisateurs ont besoin de voir la valeur vers laquelle ils travaillent.
Fournit exactement une action. "Connecter votre première intégration" ou "Créer votre premier projet." Une action, un bouton.
Explique pourquoi l'état est vide. "Vos analytics apparaîtront ici une fois que vous aurez installé le snippet de tracking." Le contexte prévient la confusion.
La progressive disclosure signifie : montrez l'essentiel, révélez le détail à la demande.
Une carte récapitulative montre la métrique clé. Un clic dessus se développe pour montrer la décomposition complète, la tendance, et les options d'export. Les utilisateurs qui ont besoin du résumé (la plupart, la plupart du temps) l'obtiennent instantanément. Les utilisateurs qui ont besoin de profondeur l'obtiennent à un clic.
Les overlays (tours modaux) sont appropriés pour les fonctionnalités qui ne sont pas évidentes depuis l'UI. Si vous avez besoin d'expliquer comment utiliser la navigation, la navigation est mauvaise.
Le guidage inline (tooltips contextuels, texte d'aide directement dans l'UI) est meilleur pour un guidage persistant. Un icône "?" à côté d'une définition de métrique complexe est plus utile qu'un tour unique que 70 % des utilisateurs traverseront sans lire.
Métriques primaires (les un ou deux chiffres qui définissent le succès) obtiennent la position du dessus, la plus grande taille, et le poids visuel le plus clair.
Métriques secondaires (facteurs contributifs, décompositions du primaire) apparaissent en dessous, plus petites.
Métriques tertiaires (données diagnostiques, cas limites) appartiennent à une vue détaillée, pas au dashboard principal.
Utilisez des tables quand :
Utilisez des cartes quand :
Beaucoup de dashboards utilisent des cartes quand ils devraient utiliser des tables parce que les cartes ont meilleure allure dans un mockup Dribbble. Les cartes à l'échelle (50+ éléments) sont plus lentes à parcourir et plus difficiles à comparer que les tables.
Un dashboard genuinement responsif redéfinit l'expérience mobile plutôt que de la réduire :
Le mobile montre moins de métriques. La vue mobile devrait afficher les trois métriques les plus importantes par défaut.
Les tables deviennent des cartes. Une table de douze colonnes sur desktop devient une liste de cartes extensibles sur mobile.
Les graphiques utilisent des formats optimisés mobile. Les graphiques linéaires fonctionnent sur mobile. Les graphiques multi-séries complexes ne fonctionnent pas.
Les skeleton screens (formes placeholder dans la taille approximative du contenu qui se charge) réduisent considérablement le temps de chargement perçu par rapport aux spinners.
Les mises à jour optimistes (mettre à jour l'UI immédiatement avec l'état attendu, puis confirmer depuis le serveur) font paraître les interactions instantanées. Appropriées uniquement quand l'action est très susceptible de réussir.
Quatre niveaux d'alerte, avec un traitement visuel distinct :
Critique (rouge, persistant) : quelque chose est cassé et nécessite une attention immédiate.
Avertissement (ambre, dismissable) : quelque chose peut nécessiter une attention bientôt.
Info (bleu, auto-dismissable) : contexte utile mais non actionnable.
Succès (vert, auto-dismissable) : confirmation qu'une action a fonctionné.
N'utilisez jamais le rouge pour quelque chose qui n'est pas vraiment critique.
La recherche doit être universelle et rapide. Une entrée de recherche, réponse sub-200ms, correspondance sur toutes les entités pertinentes.
Les filtres doivent persister. Si je filtre sur "30 derniers jours" et navigue vers une sous-page et reviens, le filtre devrait encore être là.
L'état du filtre doit être encodé dans l'URL. Les vues filtrées doivent être partageables.
Graphique linéaire — tendances dans le temps.
Graphique à barres — comparaison entre catégories.
Donut/camembert — relations partie-à-tout. Uniquement quand la relation proportionnelle est l'histoire. Jamais plus de cinq segments.
Tout le reste est une spécialisation qui appartient à une section analytics spécifique.
Chaque table devrait exporter en CSV. Chaque graphique devrait exporter comme image ou données sous-jacentes. Chaque vue filtrée devrait exporter dans son état filtré actuel.
Ce n'est pas techniquement complexe. Cela signale aux acheteurs enterprise que vous prenez leurs données au sérieux.
Que ne regarde personne ? Quelles cartes, graphiques, et tables n'ont aucune interaction sur les 30 derniers jours ? Supprimez-les.
Que cherchent les gens sans trouver ? Vos logs de recherche de votre propre produit sont une feuille de route produit.
Quoi référencent les tickets de support ? Si les utilisateurs soumettent des tickets sur le même comportement déroutant, le dashboard les échoue.
Vous construisez un dashboard SaaS et voulez un deuxième avis sur les décisions de design ? Démarrez une conversation — nous examinons l'UX du dashboard et vous disons ce qui vous coûte de l'activation.
Nous prenons un nombre limité de projets chaque trimestre. Dites-nous ce que vous construisez.
Hiérarchie typographique, photo stock, incohérence de couleurs, signaux de confiance manquants — huit choses spécifiques qui font paraître les sites de startups amateurs, et comment corriger chacune.
Dix sites marketing avec de vrais scores Lighthouse, données Core Web Vitals, et une analyse de ce que chacun fait bien — de l'au-dessus du fold aux signaux de confiance du footer.