Le Processus UI
L'étape du design d'interface est une partie importante dans la conception, c'est là que le projet prend forme. Il fait aussi l'objet de nombreuses passations : entre l'équipe de recherche UX, entre le client puis avec les développeurs. Et qui dit transmission, dit rigueur pour éviter la perte d'informations et les retours en arrière.
1. Rassembler les inputs
Les inputs des projets traditionnels :
- Le cahier des charges
- Les différents courriels échangés depuis
- L'ancien site (dans le cas d'une refonte)
- Un benchmark du secteur
Dans les projets plus axés sur de la recherche UX et design thinking :
- Les wireflows
- Les synthèses des ateliers de co-conception / design studio
- Les Expériences Map
- Un benchmark UX
- Un document de spécification technique issue d'une AMOA
Rassemblez-les dans une page Figma ou Miro, n'hésitez pas à les découper, à les ré-organiser et à les surligner pour mieux vous les approprier.
2. Dessiner les wireframes
Quitter votre clavier et votre souris, vous n'en auriez pas besoin pour les wireframes, il est recommandé de les faire à la main sans outils contraignants. N'utilisez pas non plus de canvas de téléphone prêt à imprimer ou de règle pour tracer de ligne droite, c'est un exercice d'idéation ! Prenez simplement une feuille blanche et un feutre 0.5 mm noir pour pouvoir être bien visible lorsque les wireframes seront scannés.
3. UI Kit et composants
- Choisissez vos tailles de pages, les plus fréquents sont 1440x1024 pour bureau et 360x800 pour le mobile.
- Définissez la grille de votre maquette, 12 colonnes avec des marges de 100px et des gouttières de 20px. Pour le mobile, 4 colonnes, des marges de 25px et des gouttières de 5px.
- Identifiez les différents éléments de votre wireframes et commencez votre UI
Kit :
Style des titres, textes, couleurs et élément (check box, input text, bouton, etc.)
N'hésitez pas à créer des variants et utiliser de l'auto-layout pour gagner du temps sur la mise en place sur les maquettes. - Créer vos composants en utilisant votre UI Kit :
Header, footer, menu, card, blocs spécifiques…
4. Maquettage
Reprenez-les wireframes en utilisant vos composants et votre UI Kit pour créer vos maquettes. Il est fortement recommandé d'utiliser l'auto-layout pour gérer l'espacement vertical de votre page, cela permet d'intervertir facilement vos sections, mais principalement prendre en compte les contraintes d'intégration web (css, flexbox). Pour une bonne harmonie, utilisez les multiples de 8 pour vos espacements : 16px, 32px, 40px, 64px, 72px, 96px, etc.
Il est essentiel de passer les maquettes en revue avec les critères d’accessibilité du RGAA. Les corrections des problèmes d’accessibilités sont plus faciles à régler en amont qu'en aval du développement.
6. Validation par le commanditaire
Avant de partir en production, les maquettes doivent être validées par le commanditaire, ce processus peut s’avérer long :
- Retours tardifs
- Commentaires contradictoires de la part des différentes parties prenantes
- Retours en arrière récurrents
- Les reports de décisions
Pour éviter ces situations bloquantes et garder une fluidité dans le projet, il faut réunir toutes les parties prenantes commanditaires et mener une réunion de discussions et validation des maquettes. L'occasion de mettre en valeur les solutions choisies par les designers, d'échanger, d'écouter et de trancher ou de lancer une phase de test utilisateurs si le projet le permet.
7. Notes pour les développeurs
Un certain nombre d'informations sur les éléments sont déjà documentées automatiquement dans le projet Figma pour aider les développeurs dans l'intégration et le développement des pages. Toutefois, certains éléments nécessitent plus de précisions : quel est le comportement du menu (aux cliques ou au survol, etc.), les fonctionnalités des champs (auto-complétion, option des champs textes, le contenu des listes déroulantes, etc.), les zones cliquables et le contenu des balises d’accessibilité (Aria et Alt).
Retour aux articles