Un design system pensé pour un site vitrine ne tient pas longtemps dans un SaaS B2B. Les utilisateurs y passent leurs journées, manipulent beaucoup de données et attendent de l’efficacité plus que de l’effet. Les composants qui comptent le plus sont aussi ceux qu’on oublie de concevoir : tableaux, filtres, états vides, messages d’erreur métier.
Cet article fait partie de notre guide complet du design system.
C’est souvent le composant le plus utilisé, et le plus complexe. Il faut prévoir le tri, la sélection multiple, les actions groupées, la pagination ou le défilement, les colonnes figées, la densité d’affichage et le comportement sur petit écran. Chaque option doit être décidée une fois dans le design system, plutôt que réinventée à chaque écran.
Filtres simples, filtres combinés, filtres sauvegardés : leur logique doit être la même partout. Nous détaillons cette question dans Filtres, tableaux, exports : penser les vues utilisateur d’un SaaS.
Saisie en plusieurs étapes, enregistrement automatique, validation en direct, champs conditionnels : ce sont des comportements à standardiser.
Un écran B2B n’est presque jamais dans son état « idéal ». Le design system doit prévoir :
Les utilisateurs experts veulent voir beaucoup d’informations à la fois, les nouveaux ont besoin de repères. Une bonne pratique consiste à prévoir plusieurs niveaux de densité, et à révéler les fonctions avancées progressivement. C’est l’approche que nous avons suivie sur la plateforme B2B de Dédale, avec une navigation multi-niveaux qui masque les couches avancées tant que l’utilisateur ne les sollicite pas.
Pour aller plus loin sur l’UX des produits complexes : Design UX pour SaaS : concevoir des workflows complexes. Pour un diagnostic de votre interface : notre audit UX de logiciels SaaS.
Vous construisez ou faites évoluer un SaaS B2B ? Nous concevons des design systems qui couvrent aussi les composants métier : tableaux, filtres, états et erreurs.
👉 Découvrir l’offre design system de Wolfox
