Chien avec des lunettes devant un écran

Comment prendre du recul sur sa maquette quand on a le nez dedans

Publié le

Trois heures dans Figma. Un bouton déplacé de 4 pixels à gauche, puis à droite, puis à gauche. Une couleur de CTA changée six fois. Comment on fait quand on n'a plus le recul nécessaire pour savoir si ce qu'on fait est utile ou non ?

Revenir aux objectifs de départ

Avant de toucher au moindre pixel, trois questions à se poser : à qui s'adresse cette page, quel est le message principal, quelle action doit faire l'utilisateur ? Si on ne sait pas y répondre en une phrase, c'est sûrement qu'il y a un problème de cadrage ou de compréhension du besoin.

✓ Écrire ces trois éléments (audience, message, action) sur un post-it, collé à côté de l'écran. Et si on arrive pas à le formuler, on clarifie tout ça avant de continuer.

Changer d'échelle

Regarder la page à 10-25 % de zoom. Plisser les yeux. Passer en noir et blanc.

Si l'action principale ne ressort pas, c'est qu'il y a un problème de hiérarchie.

Sortir de Figma

Regarder son projet dans un navigateur, sur mobile, en plein écran. L'imprimer si possible.

Dans un navigateur, sur mobile, l'écran ne se lira pas pareil. Les problèmes de contraste, de lisibilité ou d'espacement apparaîtront plus vite.

⚠ Figma, c'est un cadre parfait, avec un fond neutre et un zoom confortable. Dans la vraie vie, l'utilisateur est sur mobile, dans le métro, avec une luminosité médiocre. Ne pas oublier de tester aussi dans de mauvaises conditions.

Le test des 5 secondes

Montrer son design à quelqu'un pendant 5 secondes et demander : « C'est quoi ce site ? On fait quoi ici ? Où cliquerais-tu pour t'inscrire ? »

Si la personne ne sait pas répondre (ou répond à côté de la plaque), le problème est dans la page : le message doit être immédiatement compréhensible.

Scénariser un parcours utilisateur

Prendre un scénario concret : « J'arrive sur le site, je veux acheter un produit. Je clique où ? Je comprends quoi ? Je bloque où ? » Dérouler le parcours mentalement, étape par étape, et noter ce qui gêne.

Souvent, on se rend compte que le parcours qu'on avait en tête n'est pas celui que la maquette suggère. Le bouton qu'on croyait évident est noyé dans une masse d'éléments. La navigation qu'on pensait claire demande un effort de réflexion.

Demander un feedback ciblé

L'idée ici est de poser des questions dont les réponses seront vraiment utiles pour valider ou adapter la maquette, parce qu' « j'aime bien » c'est cool, mais ça n'aide pas vraiment.

  • Qu'est-ce qui te paraît le plus important sur cette page ?
  • Qu'est-ce qui te gêne ou te semble confus ?
  • Que ferais-tu ensuite, naturellement ?
  • Où cliquerais-tu pour contacter quelqu'un ?

Comparer sans copier

Regarder 2-3 sites concurrents ou inspirants. Pas pour copier, mais pour comprendre ce qui fonctionne pour leur audience. Pourquoi ce bouton est-il si visible ? Pourquoi cette navigation est-elle si simple ? Qu'est-ce qui rend leur message si clair ?

Regarder ce que font les autres, c'est utile. Recopier, beaucoup moins.

Faire une pause

Arrêter. Fermer Figma. Aller marcher. Dormir. Revenir 24 heures plus tard.

Au bout d'un moment, on ne voit plus rien. Il faut arrêter.

Les points à vérifier

  • Le message principal est-il clair en 5 secondes ?
  • L'action principale est-elle évidente ?
  • La navigation est-elle compréhensible ?
  • Les contrastes et la lisibilité sont-ils suffisants ?
  • Le design est-il cohérent dans ses espacements, ses couleurs, ses typographies ?
  • Le responsive est-il pensé, pas juste constaté ?
  • Les états vides, erreurs et chargements sont-ils prévus ?
  • L'accessibilité est-elle prise en compte (focus, labels, alternatives) ?

Conclusion

Une maquette, ça sert à montrer quoi faire. Pas besoin d'être parfaite pour ça. Elle peut être belle et ne servir à rien. Elle peut aussi être imparfaite et très bien fonctionner.

Besoin d'un regard extérieur ?

Audit UX, revue de design, feedback ciblé...

Contactez moi
Développeur avec une tasse de café
Une chaîne de production industrielle Arrêtez de vouloir tout automatiser (certaines choses doivent rester manuelles)

L'automatisation est devenue un dogme. Pourtant, certaines choses perdent leur valeur dès qu'on les automatise. Retour sur ce qu'on gagne, ce qu'on perd, et pourquoi le manuel n'est pas toujours une dette.

Une personne en train de taper sur le clavier d'un ordinateur portable Minifier le CSS : Accélérez votre site avec un code optimisé

Découvrez comment et pourquoi minifier votre CSS pour améliorer les performances de votre site. Apprenez les bonnes pratiques pour un code CSS optimisé et performant.

Une main avec un sticker du logo Git 20 Commandes Git Indispensables pour les Développeurs

Maîtrisez Git en 20 commandes ! Découvrez les commandes essentielles pour gérer vos projets, collaborer efficacement et optimiser votre workflow de développement.