Sélectionner une page

Le maquettage UX est le processus de conception et réalisation d’une interface utilisateur. Ces travaux sont menés de front par les équipes UX et les équipes métiers.

Exemple de maquettage UX

On distingue jusqu’à 4 phases de conception : 

Etape 1: Le Zoning

Etape 3: Le Prototype

Etape 2: Le Wireframe 

Etape 4: La Maquette

Etape 1: LE ZONING

C’est quoi ? Ça sert à quoi ? 🎯

Le zoning est une phase de préparation qui va servir à lister et prioriser les différents éléments qui seront constitutifs de l’interface utilisateurs. C’est une schématisation dans les grandes lignes de ce que sera le projet. Cette première brique est essentielle à un travail de maquettage UX cohérent !

Comment et par qui ? 👩‍💼

Le but du zoning est avant tout d’identifier les blocs principaux qui seront sur l’interface. Pour cela, nous vous recommandons d’inviter des équipes pluridisciplinaires qui, fortes de leurs expertises spécifiques, construiront ensemble cette première priorisation.  

Le zoning : première étape du maquettage UX

Quels outils ? ⚒️ 

Pour le zoning, nul besoin de technicité. Seuls les blocs et leurs titres seront représentés. Ainsi, vous pouvez travailler avec un stylo et une feuille ou formaliser ce travail avec n’importe quel outil digital qui permet de représenter des formes géométriques.

Etape 2: LE WIREFRAME

 

C’est quoi ? Ça sert à quoi ? 🎯

Seconde étape du maquettage UX, le wireframe est un processus créatif ! 

C’est une représentation statique de l’interface de votre site web. On cherche à décrire les bases du site : Que contient-il ? Quelles informations sont présentes ? Comment sont-elles mises en avant ? 

En dessin, on commence toujours par tracer les traits de base : en UX Design, on commence toujours par construire un wireframe ! Et surtout, on garde une approche “mobile first” en déclinant ses maquettes sur plusieurs devices : en Desktop et en mobile. N’oubliez pas de vous mobiliser aussi sur du responsive design !

 

Comment et par qui ? 👩‍💼

La règle fondamentale du wireframe est d’adopter une vision user centric. L’important c’est de se concentrer sur l’expérience de votre utilisateur : vous devez réfléchir à comment répondre à ses besoins.

Il vous faudra donc réaliser en amont une étude précise de votre utilisateur : nous vous conseillons de collecter et consolider le plus de données possibles avant de vous lancer dans le prototypage. C’est sur ces bases que vous pourrez développer un wireframe user centric !

Une fois ces informations identifiées et communiquées aux équipes, vous pouvez vous lancer dans des ateliers de prototypage. Rapid Prototyping, Crazy 8 ou encore Roadmapping, nombreux sont les ateliers visant à mettre l’intelligence collective au cœur du travail de prototypage !

Pour qu’un atelier de prototype soit efficace, les équipes UX design seront en lead sur cette phase du projet, elles rassembleront des équipes pluridisciplinaires afin de réaliser ces ateliers de prototypage. Le wireframe est une phase d’exploration, il est donc important de rassembler tous les intervenants ayant des informations différentes et complémentaires sur les besoins des utilisateurs. 

Retrouvez ici, les ateliers proposés par Imagine pour vous accompagner dans ce travail de conception !

Le wireframe

Quels outils ? ⚒️ 

Pour réaliser un wireframe, vous pouvez simplement utiliser un papier et un crayon et laissez s’exprimer vos idées. Vous pouvez aussi formaliser vos wireframe grâce à des logiciels comme Balsamiq, Sketch ou Figma

Etape 3: LE PROTOTYPE

 

C’est quoi ? Ça sert à quoi ? 🎯

Le prototype est une représentation dynamique. C’est l’étape qui vous permet de tester votre solution, grâce à un empilement dynamique de vos wireframes. 

En effet, contrairement aux précédentes étapes qui sont statiques, le prototype est interactif.

 

Comment et par qui ? 👩‍💼

Il sert notamment à tester les différentes fonctionnalités. Il est cliquable et doit ainsi permettre de tester les différents parcours utilisateurs possibles, de vérifier qu’il répond exhaustivement aux besoins des utilisateurs et d’identifier les éventuels problèmes d’usabilité.

Les équipes UX utilisent les wireframes réalisées pour constituer le prototype. 

 Puis, l’ensemble des parties prenantes à même de simuler la prise en main utilisateur seront sollicitées pour tester les interfaces. Dans l’idéal, vous pouvez même tester votre prototype avec des utilisateurs « early adopters » pour avoir des retours aussi pertinents que possible.

Pourquoi réaliser un prototype avant de créer des maquettes ? Cela vous permet de tester votre création en gardant le focus sur l’organisation de la solution, les parcours utilisateurs imaginables, la validité de votre approche par rapport aux besoins utilisateurs, indépendamment du design de vos interfaces. Vos testeurs répondront “Mais comment j’accède à cet onglet ?”, “Ah ! Je pensais qu’il fallait cliquer ici !” et non “Je ne suis pas sûr… Pour ce bleu, il est un peu agressif!

Après ces phases de tests, les parties prenantes vont ensemble valider les prototypes des interfaces et ce premier travail d’UX.

 

Quels outils ? ⚒️

La réalisation d’un prototype nécessite l’utilisation d’un logiciel spécifique. Il existe aujourd’hui différentes solutions de prototypage comprenant des outils de simulation tout à fait réalistes, on peut citer Invision ou Mockplus.

Etape 4: LA MAQUETTE

 

C’est quoi ? Ça sert à quoi ? 🎯 

La maquette est un élément statique comme le wireframe mais elle intègre les premiers travaux de design réalisés 

La maquette donne un aperçu du potentiel rendu final. On peut alors étudier les incohérences graphismes, les éléments perfectibles et ce qu’il manque. 

 

Comment et par qui ? 👩‍💼

Les UI designers sont les acteurs clés de cette phase de création ! Lors de la construction de cette maquette, ils prendront les principales décisions concernant les éléments graphiques utilisés, comme les formes, les couleurs, les typographies. Ils devront toutefois suivre les règles de construction ayant été définies préalablement par les wireframes.

Une fois les premières maquettes réalisées, il est important de coopérer. A nouveaux, des équipes pluridisciplinaires seront mobilisées afin de consolider les retours les plus précis possibles ! S’enchaîneront alors plusieurs phases d’aller retours entre les équipes UX et les équipes métiers afin de cocréer le design de ces interfaces !

Le maquettage UX : étape finale !

Quels outils ? ⚒️

Les maquettes sont réalisées avec des logiciels de design généralistes comme Sketch ou directement à l’aide de logiciels spécialisés pour les maquettes comme Mokflow. La conception de maquette nécessite des compétences avancées en design

 

Et, c’est bon, vous êtes le roi du maquettage UX, votre solution est prête à passer en prod 😊