Le vocabulaire du wireframing et du prototypage en anglais
Wireframe, user flow, click-through prototype, sign off... Le vocabulaire anglais indispensable pour structurer une interface et la faire valider par un client ou une équipe de développeurs.
Du low-fidelity au sitemap : poser la structure avant l'esthetique
Avant de choisir une seule couleur, un designer UX doit d'abord poser la structure d'une interface. C'est le rôle du wireframe, cette maquette filaire en niveaux de gris qui montre uniquement la disposition des blocs, des boutons et des zones de texte. On distingue généralement le low-fidelity, un simple croquis rapide utile pour un premier échange avec un client, du high-fidelity, une version plus détaillée qui se rapproche déjà du rendu final.
Sur un projet de plusieurs pages, le sitemap vient completer cette structure : c'est le plan d'ensemble qui montre comment chaque page se relie aux autres, un peu comme un plan de metro pour un site ou une application. Présenter d'abord un sitemap clair à un client anglophone permet d'aligner tout le monde sur la portée du projet avant même de dessiner le premier écran.
Donner vie au parcours utilisateur
Une fois la structure posee, il faut penser au mouvement : c'est le user flow, la succession d'étapes qu'un utilisateur suit pour accomplir une action précise, de la première visite jusqu'à la confirmation finale. Documenter clairement chaque user flow en anglais évite les malentendus avec une équipe de développeurs basee à l'étranger, ou chaque étape doit être nommée sans ambiguite.
Pour tester ce parcours avant le développement, rien ne remplace un click-through prototype : une série d'écrans relies entre eux qu'un utilisateur peut parcourir en cliquant, sans une seule ligne de code. Pensez aussi à intégrer un breadcrumb, ce fil d'Ariane qui indique en permanence à l'utilisateur ou il se trouve dans l'arborescence du site — un détail que les clients anglophones remarquent très vite lors d'une revue.
Anticiper les cas limites et valider avec le client
Un bon prototype ne montre pas seulement le chemin idéal. Il faut aussi designer l'empty state, cet écran affiche quand il n'y a encore aucun contenu (un nouveau compte, une liste vide), et anticiper chaque edge case, ces scenarios limites qu'on oublie facilement mais qui arrivent en production : que se passe-t-il si un champ reste vide, ou si un utilisateur n'a aucune notification ?
Enfin, avant de transmettre le travail aux développeurs, un designer freelance ou en agence a besoin du sign off du client : cette validation formelle, souvent un simple email de confirmation en anglais, qui officialise le passage à la phase suivante et protège des allers-retours sans fin une fois le développement lance.
Vocabulaire de l'article
9 termes“We validate the wireframe before adding any color.”
“A low-fidelity sketch is enough for the first client call.”
“The sitemap shows how every page connects to the homepage.”
“The user flow maps every click from signup to checkout.”
“We tested the click-through prototype with five users before development.”
“Add a breadcrumb so users always know where they are.”
“Don't forget to design the empty state for a new user's dashboard.”
“What's the edge case if a user has zero notifications?”
“We need the client's sign off before handing this to developers.”