Dans cet article nous abordons
1 - Qu’est qu’un design system ?
4 - Comment analyser les résultats ?
Qu’est qu’un design system ?
Un Design System est un référentiel à la fois UX et UI destiné aux designers et aux développeurs. Celui-ci permet d’avoir une bibliothèque commune et harmonisée entre l’ensemble des parties prenantes du design de vos interfaces. Son avantage réside dans la capacité à reproduire rapidement vos interfaces en utilisant des composants prédéfinis. Il est utilisé pour aider à suivre des directives et à rester cohérent collectivement au travers de toutes vos conceptions.
Ses avantages
- Une meilleure harmonisation
- Éviter les incohérences de design
- Allègement des process de création
- Créer un “langage unifié” entre toutes les parties prenantes
Ce socle commun doit être bien mis en oeuvre pour rationaliser le travail et aider les designers à résoudre des problèmes de conception. Cas échéant, un design system mal conçu et peu entretenu peut faire perdre du temps à vos équipes.
Pourquoi le tester ?
L’importance de le tester réside dans l’évaluation du gain de temps apporté par le nouveau design system. Il s’agit de mesurer le temps passé par vos équipes : UX, UI et développeurs.
Le second point, serait de s'interroger sur sa présentation et sa facilité de prise en main par l’ensemble des équipes quelques soit leurs métiers.
Enfin, observer et démontrer ce qu’apporte un design system à votre image de marque, en évaluant la cohérence des designs.
Les insights que vous allez récolter :
✅ Des retours sur l'efficacité globale
✅ Le niveau de compréhension sur la présentation de votre design system
✅ Le niveau de facilité en terme de prise en main
✅ Pouvoir comparer l'intérêt de différentes équipes
Comment le tester ?
- Définir vos objectifs/Problématiques
- Définir d’un protocole de tests identiques pour toutes les équipes (UI, UX et/ou développeurs)
- Définir une durée de test
Selon notre méthodologie, ce test se fera sur 2 sessions.
Session 1
- Étape 1 : Réalisation d’une maquette dans un temps imparti sans aide du design system.
Pour des UI et développeurs : à partir d’un wireframe
Pour des UX designers : à partir d’un brief seulement - Étape 2 : Réalisation d’un débrief à l’aide de questions
Exemples :
- Durant la conception de la maquette, quels ont été les éléments les plus difficiles à concevoir ? - Étiez-vous à l’aise pour réaliser la maquette à partir du wireframe proposé ?
- Selon vous, combien de temps vous aurait-il fallu pour réaliser intégralement la maquette ?
- Que vous aurait-il fallu pour accélérer la conception ?
- Qu’avez-vous pensé de la librairie et de la documentation du design system mises à votre disposition ?
- Étape 3 : Estimer le temps passé sur l’exercice
Session 2
Pour la seconde session, utiliser la même structure que la première session, mais cette fois en partageant votre design system.
- Étape 1 : Réalisation d’une maquette dans un temps imparti avec l'aide du design system par les équipes UI/Dev
- Étape 2 : Débrief à l’aide de questions
- Étape 3 : Estimer le temps passé sur l’exercice et l'utilisabilité du design system
Comment analyser les résultats
Plusieurs résultats peuvent être analysés en fonction de vos propres objectifs.
1. Évaluer le temps : Prendre en compte l’état d’avancement des designs après 1h d'exercice.
2. Vérifier la cohérence / conformité du design par rapport à la charte graphique :
Cohérence des items, taille des logos, design des CTA….
3. Analyser les retours verbaux ou écrits : prendre en compte l’opinion des testeurs sur votre design system en fonction des questions que vous avez posé à la fin de votre test.