Design UI avec Figma

Introduction au UI Design sprint

Le UI Design sprint est la méthode agile pour transformer les wireframes produits parles UX designers en des interfaces engageantes et intuitives répondant aux besoins des utilisateurs. Ce processus intègre les besoins en accessibilité, d’usabilité et d’écoconception de l'organisation. L'équipe de développement peut ensuite produire digitalement.

Il s'appuie sur les 2 phases du design. Il s'agit avant tout de comprendre les livrables produits par les UX designers, puis de collecter les besoins liés au UI. Ensuite, en itération, il s’agit de concevoir et de tester un Design System si cela est nécessaire dans votre organisation et des maquettes haute fidélité à tester et itérer.

Ce UI Design sprint s’appuie sur ces compétences

• Design System,
• Figma,
• Usabilité avec Fitts, Bastien & Scapin, Hick, Gestalt
• Atomic Research de Tomer Sharon.

‍

Cet apprentissage inclut des fondamentaux de la facilitation de sprint. Il intègre des ateliers et points d'étapes clé en main pour vos projets. Vous les répliquez en les adaptant à votre projet.

Ce sprint fait partie des méthodes agiles.

01 COMPRENDRE Intégrer les livrables de l’équipe de delivery UX

Le Product Design lead ou le Designer UX présente aux Designers UI les livrables du UX Design sprint en précisant les business et design challenges. Cela est fait lors de l’atelier UX transmission. Vous interagissez collaborativement avec Figjam.

02 COLLECTER Collecter et synthétiser les besoins d’usabilité, d’accessibilité et d’éco-conception

Cet échange entre les UX et les UI designers est un point de départ. Si cela n’a pas été transmis, il s'agit de collecter maintenant les besoins liés au UI: l’accessibilité, l’usabilité, l’éco-conception. Cela se fait par des interviews de parties prenantes et un audit heuristique de l’existant.

Un atelier analyse permet de synthétiser toutes les informations collectées.

03 CREER Créer ou mettre à jour le Design System

Vous prenez la décision de concevoir ou d’améliorer un Design System choisissant l’approche de l’Atomic Design pour garantir cohérence, évolutivité et adaptabilité.

Dans la continuité du cadrage fait précédemment, le processus continue avec un audit des éléments visuels et fonctionnels existants, visant à identifier les forces et les lacunes des ressources actuelles.

Créer les tokenset les composants

Les bases du design system s’appuient sur destokensstandardisées, qui couvrent les couleurs, typographies, tailles et espaces. Ces tokens sont essentiels pour établir des fondations solides permettant une personnalisation avancée grâce autheming. Ce dernier permet de répondre à des besoins spécifiques comme lemultibrandou ledark mode, tout en assurant une flexibilité pour différents contextes et identités visuelles.

La conception des interfaces s’appuie sur des principes modernes, tels que la conception responsive. L’utilisation d’Auto-layoutset desConstraintsgarantit que les interfaces s’adaptent de manière fluide aux différentes tailles d’écran et résolutions.

Les master componentsjouent un rôle important et permettent de créer des instances qui sont modulables. Ces dernières peuvent hériter des propriétés avec les nested properties.

Tout cela créé des éléments modulaires, réutilisables et hiérarchisés. Cela favorise la productivité et réduit les incohérences dans la création des interfaces.

Créer un UI Kit

Ces composants modulaires sont ensuite regroupés dans un UI kit, une bibliothèque centralisée qui rassemble tous les éléments nécessaires pour concevoir et développer rapidement des interfaces. Une documentation détaillée accompagne ce kit, expliquant les règles d’utilisation, les bonnes pratiques et les cas d’usage pour chaque composant. Cette documentation est un pilier essentiel pour intégrer le design system dans leworkflowdes équipes, qu’elles soient de design ou de développement.

Définir la maintenance du Design System

Enfin, une stratégie de maintenance continue est mise en place pour garantir que le design system évolue avec les besoins des utilisateurs, les tendances du marché et les avancées technologiques. Cette approche assure une solution durable, efficace et toujours en phase avec les objectifs des projets.

04 CONCEVOIR Analyser les wireframes

Vous commencez par une analyse approfondie des wireframes pour comprendre les besoins fonctionnels, les parcours utilisateurs et les points de contact critiques. Ces éléments servent de base pour intégrer l’accessibilité de manière proactive dans la structure, comme prévoir des espaces suffisants pour une navigation aisée ou des zones interactives adaptées à l’utilisation tactile.

Appliquer les tokensdu Design System

Vous passez ensuite à l’application des tokens du design system, en respectant strictement les critères d’accessibilité. Par exemple, des couleurs conformes aux standards WCAG pour garantir un contraste optimal, des typographies lisibles même pour les utilisateurs malvoyants, et des espacements bien définis pour éviter les surcharges visuelles.

Lors de la création des composants, Figma permet d’utiliser des Auto-layouts et des master components, non seulement pour assurer une conception réactive, mais aussi pour organiser les éléments de manière logique, facilitant l’usage de technologies d’assistance comme les lecteurs d’écran. Les états interactifs (focus, hover, etc.) sont également définis pour une navigation au clavier fluide.

Vérifier l’accessibilité

Vous vérifiez l’accessibilité visuelle et fonctionnelle en permanence grâce à des plugins Figma, qui permettent de tester les contrastes, la hiérarchie et l’ordre des éléments pour une navigation inclusive.

Appliquer les principes d’écoconception

Parallèlement, vous appliquez les principes d’écoconception en limitant les contenus graphiques excessifs, en simplifiant les composants et en minimisant l’utilisation de ressources gourmandes.

05 TESTER Préparer le test

Toutes les étapes précédentes ont comme but le test pour vérifier et améliorer la solution digitale conçue. Elle doit suffisamment répondre aux besoins des utilisateurs et des parties prenantes. La phase de préparation du test est donc essentielle pour être en capacité de vérifier l'adéquation entre le besoin et la solution.

• Définir les objectifs de test associés aux tâches des utilisateurs
• Choisir les méthodes de test les plus appropriées
• Choisir les participants et les modalités
• Développer les scénarios de test, les instructions et les critères de succès
• Créer la grille d'entretien
• Préparer le test en face-à-face et en distanciel avec Maze

Tester le MVP

Cette étape est souvent rapidement faite alors qu'elle est critique. Il vaut mieux parfois itérer pour mieux répondre aux besoins. L'équipe doit être en capacité de recommander la prochaine étape en toute objectivité.

• Mettre en œuvre les tests avec la bonne posture
• Analyser les résultats en termes de besoins de fonctionnalités, d'accessibilitéet d'expérience
• Formuler des recommandations pour la prise de décision par la décisionnaire

06 ITERER Restituer les résultats du sprint

Le MVP a été testé... L'enjeu est à présent de présenter à la décisionnaire et à d'autres parties prenantes internes concernées les éléments clés pour prendre une décision éclairée sur la suite: l'itération avec les ajustements nécessaires issus du feedback des tests ou le développement du MVP en partie ou en totalité. Cela se fait avec le canevas d'aide à la décision.

Transmettre à l'équipe de développement

L'atelier transmission des livrables permet de faire un pont entre l'équipe UX/UI, qui délivre un prototype haute fidélité validé, à l'équipe de développement qui va prendre la relève pour transformer le MVP en produit fini.

07 AMELIORER