Découvrez les étapes de conception et des outils pour réaliser les maquettes de votre application.
Vous avez une idée d’application. Cette idée répond à un besoin. Vous avez déjà en tête les fonctionnalités essentielles que vous aimeriez proposer à vos utilisateurs…
Et après ?
Esquisse, wireframe ou mock up, maquette graphique, prototype, entre l’idée et le développement, plusieurs étapes de conception sont nécessaires pour avancer dans la construction de votre application.
A quoi correspondent ces différentes étapes ? En quoi constituent-elles des facteurs-clés de succès pour votre projet ?
———————————–
Pourquoi créer la maquette de votre application ?
Les maquettes graphiques sont des versions statiques de l’application. Elles servent à montrer à quoi l’application va ressembler. Les parties prenantes du projet (client, utilisateurs, développeurs …) peuvent alors mieux se projeter dans votre futur produit.
Chacune des versions successives permet d’expérimenter le « look & feel » de l’application en amont de la phase de développement. Elles donnent une visibilité sur plusieurs éléments :
- Disposition de l’information
- Style graphique
- Images
- Icônes
- Couleurs
- Navigation
En bref, tous les éléments graphiques propres à l’application à développer.
L’intérêt de ces maquettes est évident. De la même manière que vous ne lanceriez pas la construction d’une maison sans avoir établi des plans, vous ne pouvez pas démarrer la conception d’une application sans maquettes.
Créer des maquettes présentent plusieurs bénéfices :
- Se mettre à la place de l’utilisateur final et créer une application intuitive avec une expérience utilisateur optimale.
- Visualiser de façon très intuitive la future application. C’est très utile par exemple s’il reste des parties prenantes à convaincre.
- Faciliter la conception : la maquette permet de réaliser rapidement les changements (graphiques, fonctionnels, ergonomiques) en amont plutôt qu’en plein milieu de la phase de développement.
- Donner une vision précise de ce à quoi ressemblera l’application sur les différents écrans.
En définitive, passer par ces étapes de conception accélère le développement de votre application puisque les équipes de développement disposent d’une vision claire du résultat attendu.
Elles sont donc en mesure de réaliser plus rapidement un MVP (Minimum Viable Product), c’est-à-dire une version simplifiée de l’application destinée à collecter et évaluer les interactions des utilisateurs avec le produit.
———————————–
Les 4 étapes de création d’une maquette d’application
Nos méthodologies de conception s’adaptent au besoin du client. Selon le projet et sa maturité (création d’une interface, refonte et optimisation d’une application, évolution d’un produit existant, …) ou le budget disponible, la méthodologie et le nombre de maquettes peuvent varier.
Ce qui est indiscutable, en revanche, c’est l’utilité de passer par ces étapes de conception avant de se lancer dans le développement.
L’esquisse (ou zoning)
L’esquisse est la première étape dans la création d’une maquette. Elle est souvent réalisée en atelier de conception ou en design sprint avec l’équipe projet.
Le zoning permet de commencer à se projeter dans la conception de l’interface. Cette étape est utile pour hiérarchiser et structurer l’information. Concrètement, on va indiquer les principales zones de l’interface sous la forme d’un schéma simple et minimaliste, avec des blocs dessinés en gris.
Dans l’exemple ci-dessous, on voit bien que le zoning est dessiné à la main. A ce stade, les détails graphiques n’apparaissent pas encore. Il s’agit avant tout d’avoir une vue d’ensemble des blocs et de se concentrer sur les informations à faire figurer sur la page.
Le wireframe
Le wireframe, maquette fil-de-fer ou maquette fonctionnelle, sert à affiner les idées de base et les concepts, mais toujours avec un graphisme simplifié. La maquette fonctionnelle aide les parties prenantes du projet à visualiser la structure de la page, la façon dont l’information est agencée et hiérarchisée, les parcours utilisateurs et les principales fonctionnalités.
Contrairement à l’esquisse, le wireframe offre une version statique de la future interface à échelle réelle. Il permet d’optimiser la conception avec les spécifications fonctionnelles sans faire dévier les échanges vers les éléments visuels.
En général, chez Keleo, nous réalisons le wireframe en atelier avec les clients. Le but est de valider ensemble, dans une logique de co-construction, les concepts en matière d’ergonomie et d’UX.
Les maquettes graphiques
Une fois le wireframe validé avec le client, l’étape suivante est la maquette graphique (ou mockup). C’est seulement à ce stade que les éléments visuels (couleurs, polices, icônes, logos, illustrations, images …) apparaissent pour la première fois. C’est pourquoi on parle aussi de maquette haute-fidélité, par opposition au wireframe qui est une version basse-fidélité. La maquette graphique ressemble visuellement à la future interface.
Selon la maturité et le développement du produit ou du projet, il peut être nécessaire de travailler la direction artistique avec une phase de recherche et de création esthétique (moodboard, couleurs, typographie, illustrations, …).
Lorsque le client a validé l’esprit, le ton graphique, nous pouvons produire les maquettes graphiques des différents écrans, pour mobile et pour desktop, comme dans l’exemple ci-dessous.
Prototype
Le prototypage peut être réalisé après les wireframes ou la phase de maquettage. Nous pouvons faire des prototypes de wireframe afin de tester l’interface, l’ergonomie, les fonctionnalités … grâce à des tests utilisateurs. Dans ce cas, le prototypage intervient avant la réalisation des maquettes graphiques.
Ensuite, nous pouvons concevoir un prototype haute-fidélité après les maquettes graphiques afin que le client et les utilisateurs puissent se projeter pleinement dans le produit. Cela permet aussi de réaliser un scénario d’utilisation du logiciel pour des tests utilisateurs.
Les outils pour créer une maquette
Miro
Miro est une solution de tableau blanc collaboratif en ligne que nous utilisons en réunion ou en atelier. Chez Keleo, nous l’utilisons également pour les esquisses et les wireframes. Ces étapes se font souvent en atelier de co-conception avec l’équipe du projet. L’outil facilite le brainstorming, l’idéation et la collaboration que ce soit à distance ou en présentiel.
D’autres outils de ce type existent comme Mural ou Figjam.
Moqups
Pour la conception de wireframes dynamiques, nous pouvons également utiliser Moqups. C’est une application web avec une bibliothèque d’éléments et des modèles configurables. Cette solution facilite aussi le travail en équipe et permet d’organiser les wireframes et les relier entre eux pour avoir un premier prototype.
D’autres applications peuvent être utilisées comme Balsamiq ou MockFlow.
Figma
Figma est un outil en ligne puissant tout-en-un. L’outil est collaboratif et permet de donner à toutes les parties prenantes une visibilité sur les projets de design.
Nous utilisons de plus en plus Figma pour réaliser nos maquettes graphiques, nos prototypes et parfois des wireframes. Nous nous en servons pour collaborer avec nos clients qui ont déjà leurs maquettes et un design system en place ou sur les projets où tout est à construire. Dans ce cas, nous pouvons partir de zéro sur Figma et créer une librairie de composants, les maquettes graphiques et les prototypes. Figma est aussi un très bon support de collaboration entre les designers et les développeurs.
Adobe XD
Pour les maquettes graphiques et les prototypes, nous pouvons aussi utiliser Adobe XD. C’est également un outil complet qui permet de concevoir des wireframes, des maquettes graphiques et des prototypes.
Nous pouvons travailler indifféremment sur Figma ou Adobe XD. Nous nous adaptons aux besoins du client et du projet. Par exemple, s’il existe des maquettes réalisées sur XD, nous pouvons les reprendre et poursuivre le projet sur cet outil.
Cette liste est bien sûr non exhaustive, il existe d’autres logiciels de maquettage et de prototypage comme : Axure, Sketch, Marvel App, Invision, Justinmind, et bien d’autres…
———————————–
Vous l’aurez compris, passer par ces différentes étapes pour concevoir une UX satisfaisante avec une UI intuitive et graphiquement engageante est un facteur-clé de succès pour votre application. En effet, si vous proposez des fonctionnalités pertinentes mais une expérience qui n’est pas fluide et engageante, le taux d’utilisation de votre application risque de rester très faible.
Les différentes étapes de conception favorisent la collaboration avec les parties prenantes du projet et aident à construire une application qui répond aux besoins et attentes des utilisateurs.
Vous avez un besoin en Design ? Que ce soit un accompagnement en UX Design ou la production d’interfaces (UI Design), nos experts sont là pour vous. N’hésitez pas à nous contacter !