La qualité des livrables UX/UI dans un projet web

Qu’est-ce qu’un livrable ?

Un livrable est un élément spécifique à “livrer” à une date donnée lors d’un projet (audit, charte graphique ou encore prototype…). La qualité des livrables est une base fondamentale pour un projet réussi.

Un designer UX/UI produit une variété d’éléments destinés à la fois au client lors des phases de validation, et aux développeurs pour la concrétisation du projet. Ces éléments ont un rôle important pour allier la conception et les exigences techniques, assurant ainsi la réussite du projet dans son ensemble. Dans cet article, nous nous pencherons spécifiquement sur les livrables essentiels au processus UX/UI : les maquettes et leurs spécifications fonctionnelles.

Comment délivrer des livrables de qualité ?

En tant que UI/UX designer, nous sommes chargés de veiller à plusieurs aspects dans nos livrables pour favoriser une collaboration harmonieuse entre les différents intervenants d’un projet :

1. Maintenir un fichier organisé

Comment organisez-vous votre fichier de travail dans Figma ? Avez-vous des difficultés à retrouver rapidement les écrans ou éléments souhaités, ce qui vous fait perdre un temps considérable ? Si c’est le cas, il est peut-être temps d’opérer un ménage de printemps et d’adopter de meilleures habitudes pour vos prochains projets. L’organisation est la clé d’un document de qualité.

Une structure claire et méthodique facilite la compréhension, la navigation et la présentation des informations. Elle permet de trouver rapidement les éléments recherchés, réduit les risques d’erreurs et favorise la cohérence du projet. Une bonne organisation est essentielle pour que toute personne extérieure au projet soit capable d’en avoir une vision globale rapidement.

Organisez votre fichier en créant des sections de pages pour ordonner votre fichier de travail. Dans un projet avec peu d’écrans, des sections plus générales telles que « Workflow », « UI », ou « Styleguide » peuvent être suffisante. Si vous travaillez sur un projet plus conséquent, envisagez de créer des sections spécifiques à chaque type d’écran comme « Tunnel d’achat », « Page CMS », etc. N’hésitez pas non plus à diviser un projet en plusieurs fichiers pour éviter d’avoir des fichiers trop lourds et donc moins fluides à utiliser.

*TIPS*

L’utilisation d’emoji est un excellent moyen de rendre visuels vos fichiers de conception. Les inclure en complément des titres des sections est une bonne alternative pour indiquer une catégorie ou un statut, par exemple : Validé : ✅ 🟢 ; Archivé : ⌛ ⛔️ ❌, En cours 🔵 ou Composants ⚙️. Cependant, n’en abusez pas. Il est essentiel de les employer avec modération, uniquement si cela est réellement nécessaire, sous peine de saturer visuellement votre espace de travail et d’altérer leur impact attendu, surtout pour les calques et les noms de composant.

2. Concevoir des maquettes avec des specs fonctionnelles

Un autre élément fondamental d’un livrable de qualité : la précision et le détail des maquettes. La qualité des maquettes va bien au-delà de leur aspect visuel ; leur aspect fonctionnel et tout aussi important et impacte la fluidité du projet. Accompagner vos maquettes de specs fonctionnelles réduit les révisions et les incompréhensions, et garantissent une vision cohérente. Elles évitent les interprétations et diminuent les allers-retours répétés et chronophage avec les développeurs.

Les specs fonctionnelles sont généralement rédigées dans un document distinct des maquettes. Notion est l’outil parfait pour centraliser les spécifications de vos projets. Il est possible d’y intégrer n’importe quel artboard Figma en insérant un simple lien et d’avoir un aperçu du projet en un coup d’oeil. Une fonctionnalité très pratique !

Il est aussi important d’inclure quelques spécifications dans les maquettes pour apporter une précision sur certaines fonctionnalités ou interactions attendues.

*TIPS*

Utilisez la fonction de commentaire intégrée à Figma ou des plugins de notes tels que Sticky Notes. N’hésitez pas à intégrer en début de note une information type [Front-End] ou [Back-End] afin de permettre de mieux dispatcher les notes entre les différents développeurs.

L’organisation de vos artboards est aussi fondamentale. Classifiez-les par types de pages et attribuez-leur des noms précis, accompagnés d’un code unique pour faciliter les échanges : plutôt que “fiche produit version 3” → “B1 – Fiche produit – Produit complexe – Desktop”. Cette formulation est plus logique et spécifique. La communication lors des reviews avec le clients ou les développeurs en sera facilité. Vous y gagnerez un temps précieux.

*TIPS*

Pour suivre l’avancement de chaque page du projet, précisez le statut de chaque écran. Certains plugins facilitent l’attribution de statuts aux pages comme Status Management.

3. Alimenter le styleguide et maintenir à jour les librairies

Le styleguide et la librairie sont deux éléments fondamentaux dans la conception de votre projet.

Le styleguide défini un ensemble de règles concernant l’aspect visuel du projet : l’utilisation des couleurs, des typographies, des icônes ou sur des style de mise en page. L’avantage du styleguide est qu’il garanti une cohérence visuelle de toutes les interfaces. Un styleguide bien élaboré sert de langage commun entre les équipes, et facilite la communication et la collaboration. En consolidant les règles visuelles et fonctionnelles, il contribue à la qualité des livrables finaux.

La librairie regroupe tous les composants que vous utilisez dans vos maquettes : des boutons, des styles de texte, des cards ou autres éléments graphiques. Elle permet de rendre le processus de création plus rapide grâce à la réutilisation des composants déjà existant. Une librairie est une base commune à l’ensemble de l’équipe et favorise la collaboration.

Point important et souvent oublié, ces deux livrables sont en constante évolution. Il est important de mettre à jour régulièrement les fichiers d’un même projet, dès modification ou évolution pour éviter des problèmes de compréhension et la création de nouveaux éléments non conformes sur le long-terme.

*TIPS*

À ce sujet, Goodpractices est un site à ajouter dans ses favoris si vous ne le connaissez pas. Ils vous donne les grandes lignes directrices pour savoir comment nommer vos éléments ou encore comment concevoir la structure de vos composants et l’organisation de votre styleguide. 

4. Fournir un dossier avec des assets conformes

“Possible d’avoir l’image en x2 ?“  “Pourrais-tu exporter toute la carte en svg ?”

Vous arrive-t-il de recevoir ce type de demandes un peu trop souvent ? Cela pourrait indiquer qu’il est peut-être temps d’organiser vos assets de manière plus efficace. Les assets sont fondamentaux dans la conception finale de votre projet pour garantir un rendu de qualité.

Ce sont tous les éléments et ressources utilisés dans la phase de développement de vos interfaces : images, vidéos, icônes, polices, etc. La constitution d’un dossier soigneusement organisé, contenant tous les assets nécessaires, s’avère essentielle. Il est recommandé de solliciter les développeurs pour obtenir des précisions sur les formats requis de certains éléments. Fournir un dossier d’assets complets, bien structurés et de qualité optimale favorise une collaboration harmonieuse entre les équipes de conception et de développement.

Les bénéfices

Produire des livrables de qualité nécessite quelques efforts au quotidien mais cela apporte beaucoup de bénéfices :

• Une vision globale, une communication plus claire entre les différentes équipes ou futurs collaborateurs
• Une cohérence visuelle et fonctionnelle à chaque étape du projet
• Une phase de développement plus fluide avec des instructions précises
• Une facilité de créer nouvelles itérations ou mises à jour avec des livrables bien documentés et de qualités
• Un gain de temps et de coûts grâce à une réduction significative des allers-retours superflus.

Des livrables de qualité représentent bien plus que de simples fichiers. Ce sont les fondements d’une collaboration fluide et efficace entre différents membres d’un projet et joue un rôle important dans sa réussite.