Une maquette UX efficace se conçoit en six étapes : clarifier les objectifs, comprendre les utilisateurs, organiser les contenus, dessiner des wireframes, prototyper et tester, puis habiller et documenter pour le développement. L’ordre compte : chaque étape règle sur un simple croquis ce qu’il faudrait sinon corriger sur un site déjà construit.
Voici comment se déroule cette démarche, ce que chaque étape doit produire et les erreurs qui donnent des maquettes séduisantes mais difficiles à utiliser.
Wireframe, prototype, maquette graphique : de quoi parle-t-on.
Le vocabulaire varie d’un prestataire à l’autre, ce qui crée des malentendus dans les devis. Trois livrables sont à distinguer :
| Livrable | À quoi il sert | Ce qu’il ne montre pas |
|---|---|---|
| Wireframe (maquette fonctionnelle) | Placer les contenus, la hiérarchie de l’information, la navigation et les boutons d’action | Les couleurs, les typographies, les photos |
| Prototype | Relier les écrans entre eux pour simuler un parcours et le tester | Le rendu final et le comportement technique réel |
| Maquette graphique (UI) | Appliquer l’identité visuelle : couleurs, typographies, images, icônes | Elle ne prouve pas, à elle seule, que le parcours est clair |
Quand on parle de « maquette UX », on parle surtout des deux premiers : la structure et le parcours. Le graphisme vient ensuite, posé sur une base déjà validée.
Cadrer le projet : objectifs et utilisateurs.
Étape 1 : partir des objectifs et des contraintes
Avant de dessiner quoi que ce soit, il faut pouvoir répondre en une phrase : que doit faire le visiteur sur ce site ? Appeler, demander un devis, réserver, acheter, télécharger une documentation. Ce choix détermine la page d’accueil, la place des boutons et ce que l’on accepte de reléguer au second plan.
- L’action principale attendue, et une ou deux actions secondaires.
- Les indicateurs qui diront si la maquette fonctionne : demandes de contact, réservations, consultation des pages clés.
- Les contraintes : outil de gestion retenu, contenus disponibles, délais, obligations légales ou d’accessibilité.
Ces éléments figurent normalement dans le cahier des charges. S’il n’existe pas encore, notre guide pour rédiger un cahier des charges de site internet vous aide à les poser.
Étape 2 : comprendre qui va utiliser le site
Une interface intuitive pour un acheteur professionnel pressé ne ressemble pas à une interface pour un particulier qui compare tranquillement le soir sur son téléphone. La recherche utilisateur n’a pas besoin d’être lourde pour être utile :
- Interroger les équipes au contact des clients : commerciaux, accueil, service après-vente. Elles connaissent les questions qui reviennent et les incompréhensions fréquentes.
- Lire les données existantes : pages les plus consultées, recherches internes, requêtes qui amènent les visiteurs depuis Google, appareils utilisés.
- Échanger avec quelques clients : comment ils vous ont trouvé, ce qui les a fait hésiter, ce qui les a décidés.
- Parcourir les sites concurrents avec un regard d’utilisateur, pour repérer les habitudes de votre secteur.
On en tire quelques profils types (les personas) et surtout leurs scénarios : « je cherche un tarif », « je veux vérifier que vous intervenez chez moi », « je veux comparer deux modèles ». Ce sont ces scénarios que la maquette devra servir, un par un.
Structurer : arborescence et wireframes.
Étape 3 : organiser les contenus avant de dessiner
L’arborescence est la colonne vertébrale du site : la liste des pages, leur hiérarchie et les intitulés du menu. Une bonne arborescence emploie les mots des clients, pas le jargon interne : « Tarifs » plutôt que « Grille d’offres », « Dépannage » plutôt que « Service technique ». Un tri de cartes, où l’on demande à quelques personnes de regrouper les rubriques comme elles les comprennent, permet de le vérifier rapidement.
Pour chaque page importante, on prépare ensuite un zoning : la liste ordonnée des blocs qui la composent (accroche, preuves, détail de l’offre, questions fréquentes, contact). C’est le moment de vérifier qu’aucun scénario de l’étape précédente ne reste sans réponse. Cette étape prépare aussi le référencement : une page par grande intention de recherche, des titres explicites et des liens logiques entre les pages.
Étape 4 : dessiner les wireframes, mobile d’abord
Le wireframe traduit le zoning en écran. Il reste volontairement en niveaux de gris pour que les échanges portent sur l’essentiel : l’information est-elle au bon endroit, l’action principale saute-t-elle aux yeux ?
Nous commençons en général par la version mobile, car c’est souvent là que se trouvent une grande partie des visiteurs et que les contraintes sont les plus fortes. Une page qui fonctionne sur un petit écran s’élargit facilement ; l’inverse est rarement vrai.
Les points à vérifier sur chaque wireframe
- L’accroche dit clairement ce que vous faites et pour qui, sans avoir à faire défiler.
- Le bouton principal est visible, explicite (« Demander un devis » plutôt que « Envoyer ») et répété aux endroits logiques.
- Les éléments de réassurance sont placés près des décisions : garanties, délais, modalités, avis réels.
- Les formulaires ne demandent que les informations réellement utiles.
- On peut toujours savoir où l’on est et revenir en arrière sans se perdre.
Valider puis finaliser : prototype, tests et habillage.
Étape 5 : prototyper et tester avec de vrais utilisateurs
Le prototype relie les wireframes pour simuler la navigation. Il permet un test simple et très instructif : confier une tâche à quelques personnes qui ne connaissent pas le projet (« trouvez le prix de telle prestation et demandez un rendez-vous »), puis les observer sans les aider ni commenter.
Quelques sessions suffisent souvent à faire apparaître les blocages récurrents : un intitulé de menu mal compris, un bouton que personne ne remarque, une information cherchée au mauvais endroit. Corriger à ce stade prend quelques minutes ; corriger après le développement consomme une part du budget et du calendrier.
Si un test formel n’est pas possible, faites au moins parcourir le prototype par des personnes extérieures à l’entreprise. Les équipes internes connaissent trop bien l’offre pour voir ce qui manque.
Étape 6 : habiller, documenter et transmettre au développement
Une fois la structure validée, le graphiste applique l’identité visuelle. L’enjeu est de ne pas défaire l’ergonomie : un bouton qui perd son contraste, un texte posé sur une photo chargée, un menu élégant mais illisible. Les règles d’accessibilité (contrastes, taille des textes, zones cliquables assez grandes) se vérifient à ce moment-là.
La maquette remise aux développeurs doit décrire les différents états de chaque élément (survol, erreur de saisie, message de confirmation), le comportement selon la taille d’écran et les cas limites : un titre très long, une liste vide, un produit sans photo. Une maquette qui ne montre que la page idéale laisse trop de décisions au moment de l’intégration.
Enfin, le travail ne s’arrête pas à la mise en ligne : les statistiques de visite et les demandes reçues permettent de vérifier que les parcours fonctionnent, puis d’ajuster.
Les erreurs qui rendent une maquette moins intuitive.
- Commencer par le graphisme. On débat de couleurs alors que la structure n’est pas validée, et chaque changement de fond oblige à tout redessiner.
- Dessiner avec du faux texte. Le texte de remplissage cache les vrais problèmes : titres trop longs, informations manquantes. Travaillez avec des contenus réels ou très proches.
- Vouloir tout dire en page d’accueil. Une page qui parle de tout ne guide vers rien.
- Copier un site admiré sans vérifier que ses choix répondent aux besoins de vos propres clients.
- Valider seul. Le décideur n’est pas l’utilisateur type : ses préférences ne remplacent pas un test.
En résumé.
Une maquette UX efficace naît d’une méthode plus que d’un logiciel : des objectifs clairs, une connaissance réelle des utilisateurs, une arborescence dans leurs mots, des wireframes pensés pour le mobile, des tests sur prototype, puis un habillage et une documentation soignés. C’est le cœur de notre accompagnement en UX et UI design, que le projet soit un site vitrine, une landing page ou une refonte de site.
