Catégories
Astuces et Design

Rendez votre microcopie complète et cohérente, et maintenez-la – Smashing Magazine

A propos de l'auteur

Valeriia est une designer axée sur les produits et une écrivaine UX certifiée – avec une passion pour la technologie et les arts. Elle est un défenseur de l'humain centré et…
Plus à propos
Valeriia

Copy docs est un cadre qui permet aux concepteurs et aux rédacteurs de produits de gérer leur copie intégrée au produit de manière intelligente. Dans cet article, Valeriia Panina partage son expérience sur la façon dont la technique de copie de documents s'est avérée changer la donne pour son flux de travail.

Vous vous souvenez de toutes les fois où vous avez dû multiplier vos cadres Figma ou Sketch juste pour pouvoir démontrer les changements d'un seul mot? Ou devoir vous mêler au fichier .json dans le code VS chaque fois que vous avez besoin de mettre à jour le texte de ce bouton? Qu'en est-il des fautes de frappe irritantes en raison d'un manque de plugins de vérification grammaticale dans la plupart des éditeurs graphiques? Je crains qu'appeler les documents de copie (comme tout autre framework) une solution miracle ne soit trop, mais au moins cette technique peut faciliter ces luttes.

Regardons de plus près.

Un peu d'histoire et de crédit

L'une des premières mentions publiques de la copie de documents appartient à Andrea Drugay, alors écrivain UX chez Dropbox. Je l'ai rencontré lors de ma certification en écriture UX à la UX Writing Hub Academy (salut Yuval!) en 2019.

Depuis lors, j'utilise en grande partie des documents de copie en tant que concepteur de produit et je me suis basé dessus pour les adapter aux besoins des spécialistes de l'expérience utilisateur en général, en particulier dans les petites équipes.

Qu'est-ce qu'une copie de document?

C’est un document dans lequel vous conservez et mettez à jour tous vos textes intégrés au produit, leurs instances, et décrivez leur comportement.

Une capture d'écran d'un exemple de document de copie, démontrant ses éléments
Structure commune: un nom de cadre, une capture d'écran de l'interface utilisateur et une table avec deux colonnes, la première étant un espace de noms et la seconde son contenu réel plus les annotations. NB: Ici, je vais démontrer la technique du copy doc sur le site Web de Smashing Magazine comme si j'avais travaillé sur son interface utilisateur à partir de zéro dans Figma; Je l'ai fait pour utiliser une interface qui vous semble familière. (Grand aperçu)

Dans ce flux, Figma ou Sketch est la source ultime d'éléments d'interface utilisateur, tandis que la copie de document est la source ultime de copie intégrée au produit. Cela a plus de sens: vous utilisez des outils de conception pour la conception et des outils d'édition pour travailler avec le contenu (y compris le processus de documentation). Dans l'ensemble, cela amène le travail avec la copie intégrée au produit au niveau supérieur, à la fois pour le spécialiste de la conception et pour toute l'équipe.

Raisons d'utiliser Copy Docs

En ce moment, vous pourriez vous sentir un peu curieux d'utiliser cette technique, mais toujours sceptique. Vous avez raison: il devrait y avoir une très bonne raison de rendre votre flux de travail plus complexe.

Alors laissez-moi vous donner un motif.

Copy Docs peut aller avec n'importe quel outil de conception

Il peut être utilisé avec n'importe quel logiciel que vous aimez. Figma, Sketch, XD – vous l'appelez.

Vous pouvez vous concentrer uniquement sur le contenu

D'une part, l'objectif d'un spécialiste UX est sa ressource la plus chère. D'autre part, l'efficacité de l'environnement dans lequel ils travaillent a un impact important sur leur capacité. Copiez les documents pour améliorer les deux aspects.

Changer d'environnement permet de rafraîchir sa concentration. Et travailler avec du contenu dans un outil de contenu natif signifie moins de distractions.

Pour moi, c'est l'un des avantages les plus précieux de la copie de documents. Surtout lorsque vous êtes à la fois designer et écrivain dans votre équipe.

Une comparaison de deux trajectoires de mouvement des yeux tout en travaillant avec une copie intégrée au produit - dans des environnements graphiques et de contenu
Comparez le chemin que vos yeux font lorsque vous souhaitez vérifier progressivement votre microcopie: lorsque vous êtes à l'intérieur d'une maquette et à l'intérieur d'une copie de document. (Grand aperçu)

De plus, vous aurez plus de chances de ne pas manquer les états «cachés» (retour d'erreur ou de réussite, etc.) et pourrez utiliser divers moyens graphiques pour les annotations. Et il devient plus facile de décrire une logique complexe comme «Si l'événement X se produit… alors la copie du bouton devient Y…» – vous ne changez littéralement que le texte, sans vous mêler au graphique.

Ici, vous pouvez objecter que travailler avec une copie en dehors d'une interface semble douteux. En réalité, dans 9 cas sur 10, vous pouvez clairement dire quelle longueur est raisonnable. En ce qui concerne les cas incertains, vous pouvez toujours essayer une ligne spécifique dans votre interface lorsque vous en avez vraiment besoin.

La cohérence est facile

Alors que dans IELTS, plus vous utilisez de synonymes, mieux c'est, ce n'est pas la même chose dans le domaine UX. Par exemple, si vous utilisez le terme "Supprimer" dans vos conceptions pour désigner une action de suppression d'un élément, mais à un endroit particulier, "Effacer" pour la même action apparaît, cela peut dérouter les utilisateurs: ils pourraient penser qu'une autre action est implicite.

Dans un document de copie, vous pouvez rapidement mettre en évidence toutes les instances d'un mot. Cela devient pratique lorsque vous souhaitez vous vérifier. Et si nécessaire – disons, vous avez effectué des tests d'utilisabilité et découvert que dans votre contexte même «Effacer» fera mieux – vous pouvez rapidement renommer en masse et le remettre aux développeurs ou aligner vos conceptions. En effet, il vaut bien mieux fixer un terme dans un document et ensuite simplement adapter vos cadres Figma ou Sketch que de ramper là-bas à la hâte et de picorer chaque élément avec la peur d'en sauter un.

Et cela fonctionne dans le sens opposé: parfois, vous voudrez peut-être scinder un terme. Par exemple, dans un premier temps, en travaillant avec ma propre copie de document, j'ai utilisé le mot «commentaire» pour désigner deux idées différentes: dans le premier cas, je parlais de l'outil de commentaire natif de Google Docs, et dans le second, j'ai fait référence à mes remarques dans le corps de la copie doc. Essentiellement, ils sont différents: le premier implique une discussion ping-pong avec mon équipe tandis que le second signifie mes seules notes d'information aux développeurs sur le comportement de l'objet. Alors maintenant, j'utilise des «commentaires» et des «annotations» en conséquence.

La différence entre deux termes: un commentaire et une annotation
Si nous distinguons précisément les termes, les discussions futures seront concises. (Grand aperçu)

Les relecteurs sont heureux

La majorité des spécialistes linguistiques travaillent généralement dans des formats de type Word. Et ici, ils peuvent faire une estimation basée sur le nombre de mots.

La collaboration est agréable et profonde

Puisqu'un logiciel d'édition fournit un ensemble d'outils merveilleux conçu pour une coopération spécifique au contenu, votre équipe est maintenant amenée au prochain niveau de collaboration.

Démo des outils de collaboration natifs de Google Doc - tâches et commentaires attribués
Mentionnez des personnes, obtenez des suggestions, attribuez des tâches, comptez les mots et bien d'autres. (Grand aperçu)

Et j'ai déjà mentionné les avantages du processus de distribution. Désormais, afin de mettre à jour la microcopie dans les composants en direct, vous ne distribuez en fait que la copie, organisée et annotée.

Les fichiers sont légers

Avec la copie de documents, vous évitez la redondance lorsque vous copiez-collez des cadres avec uniquement des modifications textuelles – maintenant vous les conservez dans un document dédié séparé. Inutile de dire que cela augmente les performances.

Cela signifie une grammaire «intégrée» pour vos créations

N'en avez-vous pas rêvé chaque fois que vous saisissez une chaîne de texte dans vos maquettes Figma, Sketch ou XD?

Comment créer un document de copie

Voici les étapes que je suis lors de la création de ma copie de documents.

1. Rédigez votre interface

Pour commencer avec la copie de documents, vous avez besoin du squelette de votre interface. Je préfère créer des documents de copie au stade des maquettes, mais vous pouvez commencer au stade du prototypage. Cependant, si vous suivez une approche axée sur le contenu, il est même possible de créer un prototype avec des documents de copie, puis de les utiliser comme liste d'éléments nécessaires lors de la conception de l'interface utilisateur.

2. Créez un aperçu du document de copie

Créez des sections correspondant aux noms de vos écrans.

Un document Google avec des en-têtes pour chaque section de l'interface utilisateur et une table des matières composée de ces en-têtes
Appliquez des styles et créez une table des matières afin de pouvoir naviguer dans le document. (Grand aperçu)

3. Coller les captures d'écran

Vous devez suivre un modèle «En-tête + Capture d'écran + Tableau» pour chaque unité.

Un exemple de capture d'écran collé dans un document Google
(Grand aperçu)

4. Coller les tableaux

Idéalement, vous souhaitez créer une table vide avec des styles prédéfinis sous chaque capture d'écran. Pour cela, créez un tableau pour votre premier écran et remplissez-le. Ensuite, copiez-collez le tableau rempli sous la deuxième capture d'écran, effacez-le, copiez-le à nouveau et collez-le plusieurs fois sous les captures d'écran restantes.

Un exemple de tableau créé dans un document Google à côté de la capture d'écran
(Grand aperçu)

5. Remplissez-le

Tout est prêt pour votre copie de travail.

Travail écran par écran. Commencez par les espaces de noms. Ensuite, remplissez la microcopie même, en évitant les pièges courants que je partage ci-dessous.

6. Gardez votre copie de document à jour

Donc, votre copie de document est prête. Maintenant, vous devez prendre l'habitude de refléter immédiatement toutes les mises à jour de la copie. Chaque fois que votre copie de document est ouverte, elle doit afficher la copie intégrée la plus réelle.

Cela peut nécessiter du travail, mais la bonne nouvelle est que vous n'avez pas besoin de mettre à jour les captures d'écran à moins qu'elles ne subissent des changements dramatiques.

En ce qui concerne vos fichiers Figma, Sketch ou XD, il est fortement conseillé de refléter également les modifications dans la copie, mais maintenant c'est votre deuxième priorité – vous travaillez avec la copie dans un document de copie, puis alignez simplement vos fichiers de conception plus tard.

Conseils et pièges

Faites attention à la taxonomie

L'espace de noms commun pour un élément de contenu ressemblera à ceci:

Section / Sous-section / Groupe /… / Élément

Tableau / Tête / 1ère colonne

Assurez-vous de faire correspondre les noms avec les noms de vos composants d'interface utilisateur.

Une capture d'écran d'une page Composants dans Figma, montrant le nom d'un élément et une capture d'écran d'une copie de document avec un nom d'élément correspondant qui correspond
Dites, si quelqu'un veut archiver vos copies de cartes de document qu'il a trouvées dans le fichier de conception, il doit s'agir de cartes et non de boîtes. etc. (Grand aperçu)

Et, à leur tour, les composants doivent correspondre au cadre de développement. Si vous ne savez pas quel nom choisir, consultez vos développeurs.

Créer la légende

En dehors de l'outil de conception, vous pouvez utiliser une variété de graphiques pour communiquer des idées, pas de l'esthétique.

Une page de départ d'un document de copie avec toutes les marques et explications nécessaires qui seront utilisées tout au long du document
Une légende fonctionne comme l'intégration: elle permet aux autres de naviguer dans le document sans explications supplémentaires. (Grand aperçu)

Par exemple, utilisez:

  • Points forts des variables
  • Crochets pour les annotations
  • Symboles Emoji ou Unicode pour les états

Et soyez cohérent – utilisez la même méthode de mise en évidence pour chaque événement correspondant. Vous vous souvenez des synonymes?

N'oubliez pas non plus l'accessibilité: c'est une bonne idée lorsque différents éléments diffèrent avec plusieurs paramètres.

Une partie d'un tableau avec une annotation et une variable utilisant un langage graphique différent
Je ne marque jamais les annotations avec juste une couleur différente. Au lieu de cela, j'utilise à la fois la couleur et les crochets. (Grand aperçu)

Évitez la redondance et les chaînes en conflit

Ne réutilisez pas des éléments identiques.

Par exemple, si vous avez une page avec un titre et des onglets communs, mentionnez le titre dans la première unité, et plus tard dans les autres unités, ne les mentionnez pas à nouveau mais ne reflétez que les modifications apportées à ces pages.

Une partie d'une table avec un élément répété et un lien vers sa première instance
N'incluez pas la deuxième instance du même élément ou laissez un lien vers son enregistrement initial. (Grand aperçu)

Pensez aux États

Certes, les instances de vos éléments peuvent varier, mais vous trouverez ci-dessous les plus courantes auxquelles vous devez penser.

Commentaires: messages, alertes, notifications, etc.

Entrées et autres:

  • Espace réservé
  • Dactylographie
  • Rempli
  • Nul
  • Diverses erreurs

Vous avez eu l'idée.

Utilisez-les littéralement comme une liste de contrôle pour fournir un contenu exhaustif pour chaque changement d'état de vos éléments.

Quant à leur apparence, vous pouvez soit créer une ligne distincte pour chaque instance, soit les regrouper dans une cellule annotée.

Deux façons d'afficher l'élément - en utilisant une ligne distincte pour chaque élément en les combinant dans une cellule
Vous pouvez commencer chaque élément – qu'il s'agisse d'une instance ou d'un élément d'interface standard – avec une nouvelle ligne ou de les combiner dans une cellule, en ajoutant des annotations. (Grand aperçu)

Pensez aux variables

Les variables sont les parties de la copie qui changent avec le contexte. Il s'agit généralement de la date et de l'heure, des noms des utilisateurs, des numéros, etc.

Vous les avez probablement déjà envisagés au stade de l'architecture de l'information ou, partiellement, en politique éditoriale. Et maintenant, une copie de document est juste l'endroit pour refléter quelles données sont constantes, et quelles données changent en fonction du contexte, et comment.

Mettez en évidence les variables et choisissez leur forme. Suivez la même règle de contre-redondance: indiquez la forme de la variable une fois, de préférence au début, puis faites-y référence dans votre document.

Trois captures d'écran - à quoi ressemble la date dans l'interface, comment elle est référencée dans le document de copie et comment sa forme de base est indiquée dans la légende
J'affiche le format de date courant au début du document et je me réfère simplement à (Date, par défaut). (Grand aperçu)

N'oubliez pas de penser à la valeur minimale et maximale de chaque variable – si vous remarquez qu'elle affecte d'une manière ou d'une autre l'interface utilisateur, vous pouvez laisser une annotation correspondante.

Postface (et un bonus)

C'est à peu près tout. La technique de copie de documents a changé la donne pour mon flux de travail et je serais heureux si elle booste le vôtre aussi!

Et s'il vous plaît, dites-moi comment vous l'utilisez ou, peut-être, adaptez ce cadre à vos besoins. Captures d'écran, description de votre expérience, messages audio ou vidéo – tout sera génial! Je suis sérieux.

Et j'ai préparé un modèle pour vous. Alors, copiez votre (Template) Copy doc – et restez en sécurité!

Éditorial fracassant(rail)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *