Valider les maquettes de son site : les points à examiner

Pourquoi la validation des maquettes mérite une vraie méthode

Une maquette ne sert pas seulement à montrer les couleurs et la position des blocs. Elle traduit une organisation des contenus, des parcours utilisateur et des choix fonctionnels qui auront des conséquences sur le développement du site. La valider trop rapidement peut donc entraîner des corrections coûteuses, des incompréhensions entre les intervenants ou une expérience confuse pour les futurs visiteurs.

La validation intervient avant l’intégration, mais elle ne consiste pas à demander si la page est jolie. Il faut vérifier si elle répond à son objectif, si les informations importantes sont visibles, si les actions sont compréhensibles et si l’ensemble pourra fonctionner sur différents écrans. Une maquette peut être visuellement réussie tout en présentant des défauts de hiérarchie, de navigation ou d’accessibilité.

Le bon réflexe consiste à examiner les maquettes selon plusieurs angles, puis à consigner les remarques dans un document unique. Chaque observation doit préciser la page concernée, le problème constaté, sa priorité et, si possible, une proposition de correction. Cette méthode évite les retours dispersés dans des courriels ou des conversations difficiles à retrouver.

Commencer par le rôle de chaque page

Avant de juger les détails graphiques, il faut rappeler la fonction de chaque écran. Une page d’accueil, une page de service, une fiche produit, un formulaire de contact et un article ne poursuivent pas le même objectif. La maquette doit rendre cet objectif identifiable en quelques instants.

Pour chaque page, posez les questions suivantes :

• Quel public est susceptible d’arriver ici ?
• Quelle information doit être comprise en premier ?
• Quelle action principale est attendue ?
• Quelles objections ou questions doivent être traitées avant cette action ?
• Vers quelle page l’utilisateur doit-il pouvoir poursuivre sa consultation ?

Une page de présentation d’une prestation peut avoir pour objectif de générer une demande de contact. Dans ce cas, les éléments à examiner ne se limitent pas au bouton final. La maquette doit aussi présenter clairement le besoin traité, le périmètre de l’offre, les conditions importantes et les éléments qui permettent de décider. Une page éditoriale peut, quant à elle, privilégier la lisibilité, la compréhension et la découverte d’autres contenus.

Cette étape révèle parfois un problème de structure plutôt qu’un problème graphique. Si une page essaie de vendre, d’expliquer, de rassurer et de recueillir de nombreuses informations sans hiérarchie, il faudra probablement revoir son contenu avant de finaliser son apparence.

Contrôler la hiérarchie visuelle et la lisibilité

La hiérarchie visuelle guide le regard. Elle doit permettre de distinguer le titre, l’introduction, les informations secondaires, les appels à l’action et les éléments de navigation. Un visiteur ne lit pas toujours une page dans son intégralité. La maquette doit donc rester compréhensible lors d’un balayage rapide.

Examinez notamment :

• la présence d’un titre principal clairement identifiable ;
• la distinction entre les titres de niveaux différents ;
• la longueur des blocs de texte et leur aération ;
• le contraste entre le texte et l’arrière-plan ;
• la visibilité des liens et des boutons ;
• la cohérence des marges, des alignements et des espacements ;
• la place accordée aux informations réellement utiles.

Une maquette peut sembler équilibrée avec du faux texte, puis devenir difficile à lire lorsque les contenus définitifs sont intégrés. Il est donc préférable de tester les écrans avec des titres longs, des paragraphes de longueur réaliste, des listes, des messages d’erreur et des libellés de boutons explicites. Un bouton intitulé En savoir plus apporte souvent moins d’information qu’un libellé décrivant précisément l’action ou la destination.

La typographie doit également être examinée. Vérifiez la taille des textes courants, l’interligne, la largeur des colonnes et la différence entre les caractères. Les contenus destinés à être lus sur mobile nécessitent une attention particulière, car une colonne trop étroite, des titres coupés ou des blocs trop denses peuvent rapidement dégrader le confort de lecture.

Vérifier les parcours et les appels à l’action

Une maquette doit être évaluée comme une étape d’un parcours, pas comme une image isolée. Il faut simuler les actions qu’un visiteur réalisera : arriver sur une page, chercher une information, ouvrir un menu, remplir un formulaire, revenir en arrière ou poursuivre vers une autre rubrique.

Pour chaque parcours important, décrivez le chemin étape par étape. Par exemple :

1. Le visiteur arrive sur une page de service depuis un moteur de recherche.
2. Il identifie la prestation et vérifie qu’elle correspond à son besoin.
3. Il consulte les informations pratiques.
4. Il accède au formulaire ou au moyen de contact.
5. Il sait ce qui se passe après l’envoi de sa demande.

Ce test fait apparaître les liens manquants, les boutons trop discrets et les étapes inutiles. Il permet aussi de contrôler les états intermédiaires, souvent absents des premières maquettes : menu ouvert, champ en erreur, formulaire envoyé, contenu indisponible, chargement en cours ou confirmation d’une action.

Les appels à l’action doivent être cohérents d’une page à l’autre. Une même action ne devrait pas être désignée par plusieurs formulations sans raison. À l’inverse, deux actions différentes ne doivent pas être confondues parce qu’elles utilisent des boutons visuellement identiques. La maquette doit distinguer l’action principale, les actions secondaires et les liens de simple navigation.

Tester les versions mobile, tablette et grand écran

La validation d’une maquette desktop ne suffit pas. Un site doit être examiné dans différentes configurations, car les changements de largeur modifient la navigation, la longueur des lignes, l’ordre des blocs et la visibilité des actions. La version mobile ne doit pas être une réduction mécanique de la version grand écran.

Contrôlez les points suivants :

• le comportement du menu principal et son accès au clavier ou au toucher ;
• la taille et l’espacement des zones cliquables ;
• le passage des colonnes à une seule colonne ;
• l’ordre de lecture des blocs ;
• la présence ou non des éléments masqués sur petit écran ;
• la largeur des tableaux, images et formulaires ;
• la gestion des titres longs et des boutons à plusieurs mots ;
• la lisibilité des fenêtres, bandeaux et messages de confirmation.

Un élément supprimé sur mobile peut contenir une information importante. Dans ce cas, il faut prévoir une autre manière de la rendre accessible, plutôt que de la faire disparaître sans explication. De même, un menu condensé doit rester compréhensible et permettre d’atteindre toutes les rubriques utiles.

Demandez à voir des maquettes à des largeurs intermédiaires, et pas uniquement les formats choisis pour la présentation. Certaines ruptures apparaissent entre deux points de référence : un titre se retrouve sur plusieurs lignes, un bouton passe sous un autre ou une image réduit excessivement l’espace consacré au contenu.

Examiner l’accessibilité dès la phase de conception

L’accessibilité ne se corrige pas uniquement dans le code. Plusieurs décisions prises dans la maquette influencent directement la possibilité de consulter et d’utiliser le site. Il faut notamment porter attention au contraste, à la taille des textes, à la structure des titres, à la compréhension des formulaires et à l’usage de la couleur.

La couleur ne doit pas être le seul moyen de signaler une information. Un champ obligatoire, une erreur ou un état actif doit aussi être identifiable par un texte, une icône accompagnée d’une explication ou une autre indication perceptible. Les liens doivent être repérables sans dépendre exclusivement d’un changement subtil de teinte.

Les formulaires méritent un contrôle spécifique. Chaque champ doit disposer d’un libellé compréhensible, placé de façon cohérente. Les indications d’aide, les formats attendus et les messages d’erreur doivent être prévus dans la maquette. Une personne ne devrait pas avoir à deviner pourquoi une saisie est refusée ni comment la corriger.

Pour structurer cette vérification, il est possible de s’appuyer sur les recommandations WCAG publiées par le W3C et sur les ressources de référence de la Direction interministérielle du numérique. L’objectif n’est pas de déclarer une conformité sur la seule base d’une image, mais d’anticiper les obstacles qui pourront être évités dès la conception.

Contrôler les contenus, les médias et les informations de confiance

Une maquette est souvent présentée avec du texte provisoire. Cette pratique devient risquée lorsque le contenu final est très différent. La validation doit donc porter sur la place réellement nécessaire aux titres, aux descriptions, aux mentions pratiques et aux éléments de réassurance.

Vérifiez en particulier :

• la présence des informations nécessaires à la compréhension de l’offre ;
• la cohérence des intitulés entre le menu, les pages et les boutons ;
• la longueur des titres et des extraits ;
• la présence d’un texte alternatif prévu pour les images porteuses de sens ;
• la distinction entre une image décorative et une image informative ;
• la lisibilité des prix, délais, conditions et limitations éventuelles ;
• l’emplacement des coordonnées et des informations de contact.

Les images doivent être choisies selon leur rôle et non uniquement pour remplir un espace. Une photo décorative ne doit pas détourner l’attention du message principal. Une illustration explicative doit être accompagnée d’un texte permettant d’en comprendre l’information lorsque cela est nécessaire. Il faut également vérifier que les visuels prévus pourront être utilisés dans différents formats sans être recadrés de façon trompeuse.

Les éléments de confiance ne doivent pas être ajoutés en bas de page comme une décoration. Les conditions de commande, les modalités de contact, les informations légales ou les précisions sur le traitement d’une demande doivent apparaître au moment où elles sont utiles. Pour les données personnelles et les traceurs, la conception doit être vérifiée au regard des recommandations de la CNIL et du contexte réel du site.

Préparer le référencement et la qualité technique

Le référencement naturel ne se résume pas à placer des mots-clés dans un titre. La maquette doit prévoir une structure claire pour les visiteurs et pour les outils qui analysent les pages. Les titres de niveaux successifs doivent refléter l’organisation du contenu, sans être choisis uniquement pour leur apparence graphique.

Avant validation, contrôlez que chaque page importante pourra disposer :

• d’un titre principal correspondant à son sujet ;
• d’une adresse compréhensible et stable ;
• d’un titre destiné à l’affichage dans les résultats de recherche ;
• d’une description adaptée lorsque cela est pertinent ;
• d’un contenu suffisamment spécifique par rapport aux autres pages ;
• de liens internes permettant de poursuivre la consultation.

La performance doit également être anticipée. Une maquette très chargée en vidéos, animations ou images de grande taille peut entraîner des temps de chargement élevés. Il faut demander comment les médias seront compressés, comment les contenus apparaîtront progressivement et quelles animations resteront facultatives. L’interface doit conserver sa fonction lorsque les effets visuels sont désactivés ou lorsqu’un appareil dispose de ressources limitées.

Il est aussi utile de prévoir les états techniques moins visibles : page introuvable, absence de résultats lors d’une recherche, erreur de connexion à un service, indisponibilité temporaire d’un contenu ou formulaire interrompu. Ces écrans donnent des indications utiles à l’utilisateur et évitent les impasses.

Organiser les retours et décider ce qui doit être corrigé

Des remarques nombreuses mais non hiérarchisées ralentissent la validation. Classez-les par niveau de priorité. Une erreur qui empêche de comprendre une offre ou d’envoyer un formulaire doit être traitée avant une préférence de couleur ou un ajustement d’alignement.

Chaque retour doit être formulé de manière observable. Écrivez par exemple : Sur la page de contact mobile, le bouton de validation passe sous le clavier et son libellé n’indique pas ce qui sera envoyé. Cette formulation est plus exploitable qu’un commentaire comme Le formulaire n’est pas très pratique.

Lorsque plusieurs personnes participent à la validation, désignez une personne chargée de regrouper les décisions. Sans arbitrage, les demandes contradictoires peuvent s’accumuler et modifier constamment le périmètre. Une validation sérieuse inclut donc une version de référence, une liste de corrections acceptées et les points volontairement reportés.

La checklist finale avant de donner son accord

L’accord final ne signifie pas que le site est définitivement exempt de défauts. Il signifie que les choix essentiels ont été examinés et que les conditions de passage au développement sont suffisamment claires. Utilisez une checklist adaptée au projet, puis conservez-la avec la version validée des maquettes.

1. Chaque page possède un objectif clairement défini.
2. Les parcours principaux ont été simulés jusqu’à leur résultat.
3. Les contenus réels ou représentatifs ont été utilisés.
4. Les versions mobile, tablette et grand écran ont été examinées.
5. Les boutons, liens, menus et formulaires sont compréhensibles.
6. Les états d’erreur, de succès, de chargement et d’absence de résultat sont prévus.
7. La hiérarchie des titres et la lisibilité ont été contrôlées.
8. Les contrastes, libellés et indications de formulaire ont été vérifiés.
9. Les médias, textes alternatifs et informations pratiques sont identifiés.
10. Les besoins liés au référencement et aux performances ont été transmis à l’intégration.
11. Les remarques restantes sont classées, attribuées et datées.

Avant de valider, demandez aussi ce qui n’est pas représenté dans la maquette : comportement au survol, navigation au clavier, message après envoi, adaptation des textes, gestion des erreurs et contraintes techniques. Une bonne maquette ne montre pas tout, mais elle doit permettre de savoir ce qui sera défini ultérieurement et par quel moyen.

FAQ : valider une maquette de site web

Qui doit participer à la validation des maquettes ?

La validation gagne à réunir la personne qui connaît les objectifs du projet, celle qui maîtrise les contenus et, lorsque c’est possible, un intervenant chargé de l’intégration ou du développement. Un regard extérieur peut également repérer des incompréhensions qu’une équipe habituée au projet ne voit plus.

Faut-il valider la version mobile séparément ?

Oui. La version mobile implique souvent une autre organisation des menus, des blocs et des actions. Elle doit être examinée comme un parcours complet, et non comme une simple réduction de la maquette destinée au grand écran.

Peut-on valider une maquette avec du texte provisoire ?

C’est possible pour une première étape, mais l’accord final doit s’appuyer sur des contenus proches de la version publiée. Les textes définitifs peuvent modifier la hauteur des blocs, la longueur des titres, l’équilibre de la page et la position des appels à l’action.

Que faire lorsqu’un désaccord apparaît sur un détail graphique ?

Revenez à l’objectif de la page et aux besoins du public visé. Si le détail ne modifie ni la compréhension, ni l’accessibilité, ni le parcours, il peut être traité comme une préférence secondaire. En revanche, s’il affecte une action ou une information, il doit être arbitré avant la validation.