twltr/ux-copy

UX Copy (Texte d'Interface)

Compétence feuille en Design ; accessible par son domaine ou par son nom.

Le texte d'interface est lu en passant, en pleine tâche, souvent sous pression. Il fonctionne quand la personne sait ce qui va se passer et quoi faire ensuite ; des mots génériques comme « Envoyer », « OK » ou « Une erreur est survenue » la forcent à deviner. Rédigez à partir de la situation de l'utilisateur et du résultat réel de l'action, dans la langue de l'interface.

Exemple concret

Demande (produit fictif) : « Les gens suppriment des projets par accident. Revoyez ce dialogue : Êtes-vous sûr ? [OK] [Annuler] »

Supprimer « Lancement T3 » ?
Ses 14 tâches et tous les fichiers sont supprimés pour tous les membres de l'équipe.
Cette action est irréversible.
                                   [Annuler]  [Supprimer le projet]

Le titre nomme l'action et l'objet, le corps énonce la conséquence qui rend l'action sérieuse, et le bouton destructeur répète le verbe pour qu'il soit compréhensible seul. « Annuler » reste : c'est la sortie familière, et le renommer n'apporte rien.

Partir de la situation

Identifiez l'écran ou le flux, ce que la personne essaie de faire et comment elle se sent probablement, la voix du produit et les termes existants, ainsi que les contraintes telles que les limites de caractères, les conventions de la plateforme et les langues cibles. Le texte passé en argument est celui à réviser. Lorsque des détails manquent, rédigez avec des hypothèses explicites plutôt que d'envoyer un questionnaire ; ne posez des questions que lorsque la réponse change le texte, comme le choix entre le tutoiement et le vouvoiement.

Les sections marquées ~~ nomment une catégorie d'outil, pas un produit : ~~outil de conception (par exemple Figma) ou ~~base de connaissances (par exemple Notion). Utilisez l'outil connecté de cette catégorie fourni par l'hôte ; ignorez l'étape si aucun n'est disponible.

Avec une ~~base de connaissances, lisez d'abord la charte éditoriale, le guide de style et la terminologie. Avec un ~~outil de conception, examinez l'écran dans son flux et relevez les limites de caractères de la maquette.

Texte dans d'autres langues

Rédigez nativement dans la langue de l'interface ; un texte rédigé en anglais puis traduit conserve la structure anglaise et sonne étranger. Répondez dans la langue de la demande, mais rédigez les chaînes dans la langue de l'interface — les deux peuvent différer, comme dans une question en anglais à propos d'une application allemande. Les patrons ci-dessous s'appliquent dans toutes les langues ; ces conventions modifient leur expression :

• Forme d'adresse. De nombreuses langues choisissent entre un « vous » formel et un « tu » informel (allemand, français, espagnol, néerlandais). Suivez le choix existant du produit ; en l'absence de choix, proposez-en un et appliquez-le partout, y compris dans les erreurs.
• Forme verbale sur les contrôles. Les interfaces en allemand, français et espagnol utilisent conventionnellement l'infinitif pour les boutons et les entrées de menu, et non l'impératif. Suivez la convention de la plateforme et du produit.
• Casse. La phrase en minuscules avec majuscule initiale est une règle anglaise. L'allemand met une majuscule à tous les noms, où qu'ils soient dans la phrase ; n'appliquez jamais la casse de titre anglaise à une autre langue.
• Typographie et formats. Utilisez les guillemets, la ponctuation (le français met une espace avant ! ? : ;) et les formats de nombres, de dates et de devises de la langue.
• Longueur. L'allemand et le français sont généralement un tiers plus longs que l'anglais, et les chaînes courtes encore plus ; les mots composés longs ne passent pas à la ligne. Vérifiez la largeur réelle et activez la césure avec l'attribut lang correct.

Lors d'une révision, vérifiez ces points pour la cohérence sur l'ensemble des chaînes, pas seulement une par une.

Patrons

Élément	Ce qu'il doit faire	Exemple
Bouton, CTA	Verbe plus objet ; nommer le résultat ; garder le nom tout au long du flux	« Publier » → toast « Publié »
Erreur	Ce qui s'est passé et comment le corriger ; la cause seulement si elle aide à la correction ; ne jamais blâmer, jamais un simple code	« Votre banque a refusé cette carte. Essayez une autre carte ou contactez votre banque. »
Erreur de champ	Dire ce qui est nécessaire, pas ce qui ne va pas	« Saisissez une date postérieure à aujourd'hui »
État vide	Ce qui apparaîtra ici et comment commencer ; si aucun résultat, suggérer de modifier la recherche	« Aucune facture pour l'instant. Créez-en une ou importez-en depuis un fichier CSV. »
Confirmation	Nommer l'action et l'objet, énoncer la conséquence, libeller le bouton avec le verbe	Voir l'exemple concret
Infobulle	Ajouter ce que le libellé ne peut pas dire ; ne jamais répéter le libellé	—
Chargement	Dire ce qui se passe ; donner une attente réaliste pour les longues durées	« Importation de 2 400 contacts. Cela peut prendre une minute. »
Succès	Confirmer le résultat spécifique	« Facture envoyée à Dana » plutôt que « Succès ! »
Onboarding	Un concept par étape, lié à une action que la personne réalise	—

La voix reste celle du produit ; le ton s'adapte au moment. Les erreurs sont calmes et précises : l'empathie signifie reconnaître l'impact et aider à le corriger, pas s'excuser par réflexe ou plaisanter. Le succès est bref, les avertissements sont directs.

Format de sortie

Pour un élément, donnez la recommandation et une phrase expliquant pourquoi elle correspond à la situation de la personne. Proposez des alternatives seulement lorsque le choix est réellement ouvert, comme un compromis de ton ou de longueur :

## UX copy : [contexte]

**[Élément] :** [texte]
[Pourquoi cela fonctionne pour la personne à ce moment]

| Option | Texte | Idéal pour |
|---|---|---|
| A | [texte] | [quand l'utiliser] |

**Notes de localisation :** [uniquement si le texte est traduit ou diffusé en plusieurs langues : expressions à éviter, extension, forme d'adresse, contexte culturel]

Pour une révision de plusieurs chaînes, utilisez un tableau pour que chaque modification soit traçable :

| Emplacement | Actuel | Proposé | Pourquoi |
|---|---|---|---|
| Paiement, erreur de carte | « Erreur 402 » | « Votre banque a refusé cette carte. Essayez-en une autre. » | Dit ce qui s'est passé et la prochaine étape |

La mise en page, la typographie et la hiérarchie visuelle sont hors du champ de cette méthode ; de même que les textes marketing longs, les articles et les e-mails, qui nécessitent une méthode d'écriture plutôt que des patrons de microcopie.