Fermer

novembre 26, 2020

Rendez votre microcopie complète et cohérente, et maintenezla


À propos de l'auteur

Valeriia est un concepteur axé sur les produits et un écrivain certifié UX – avec une passion pour la technologie et les arts. Elle est un défenseur de l'humain centré et…
En savoir plus sur
Valeriia

Copy docs est un cadre qui permet aux concepteurs et 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 d'avoir multiplié vos cadres Figma ou Sketch pour démontrer les changements d'un seul mot? Ou peut-être vous mêler au fichier .json dans le code VS lorsque vous avez besoin de mettre à jour le texte de ce bouton? Et qu'en est-il des fautes de frappe irritantes dues à un manque de plugins de vérification grammaticale dans la plupart des éditeurs graphiques? Je crains qu'appeler des 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 [19659003] L'une des premières mentions publiques de copies 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 largement des documents de copie en tant que concepteur de produit et je me suis basé sur pour le modifier en fonction des besoins des spécialistes UX en général, en particulier dans les petites équipes.

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

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 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 de l'utiliser technique mais toujours sceptique. Vous avez raison: il devrait y avoir une très bonne raison de rendre votre flux de travail plus complexe.

Permettez-moi donc de vous donner un motif.

Copier des documents 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 le nommez.

Vous ne pouvez vous concentrer que sur le contenu

D'une part, l'objectif d'un spécialiste UX est sa ressource la plus chère. De l’autre, l’efficacité de l’environnement dans lequel ils travaillent a un impact considérable sur leurs capacités.

La copie des documents améliore les deux aspects.

Le changement d’environnement permet de se recentrer. 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 un concepteur et un écrivain dans votre équipe.

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

De plus, vous serez plus susceptible 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'un l'interface semble douteuse. 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 inverse. : 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 les «commentaires» et les «annotations» de manière correspondante.

 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.

Collaboration Is Nice And Deep

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

 Démonstration 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 des mots et bien d'autres. ( Grand aperçu )

Et j'ai déjà mentionné les avantages du processus de distribution. Désormais, pour mettre à jour la microcopie dans les composants en direct, vous ne distribuez 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 le conservez dans un document dédié séparé. Inutile de dire que cela améliore les performances.

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

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

Comment créer un document de copie

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

1. Projetez votre interface

Pour commencer à copier des 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 une liste d'éléments nécessaires lors de la conception de l'interface utilisateur.

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

Créer 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
Appliquer des styles et créer un tableau de contenu afin que vous puissiez naviguer dans le document. ( Grand aperçu )

3. Coller des 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 des tableaux

Idéalement, vous voulez créer un tableau 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 travail de copie .

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

Ainsi, 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 un peu de 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.

Quant à votre Fichiers Figma, Sketch ou XD, il est fortement conseillé de refléter également les changements dans la copie, mais maintenant c'est votre deuxième priorité – vous travaillez avec la copie dans un document de copie et ensuite alignez simplement vos fichiers de conception plus tard.

Conseils et pièges

Faites attention à la taxonomie

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

Section / Subsection / Group /… / Item

Table / Head / 1st column

Assurez-vous vous faites 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 pour archiver vos copies de doc Cartes qu'ils ont trouvées dans le fichier de conception, elles doivent être Des cartes, pas des 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.

 Un début page 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:

  • Faits saillants pour les variables
  • Crochets pour les annotations
  • Symboles Emoji ou Unicode pour les états

Et soyez cohérent – utilisez la même mise en évidence méthode 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 des annotations 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 mentionne pas à nouveau mais ne reflète que les changements sur ces pages.

 Une partie d'un tableau avec un élément répété et un lien vers sa première instance
Soit n'inclut pas le 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:

  • Placeholder
  • Typing
  • Filled
  • Null
  • Diverses erreurs

Vous voyez l'idée.

Utilisez-les littéralement comme un 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 - utilisation d'une ligne distincte pour chaque élément en les combinant dans une cellule
Vous pouvez démarrer chaque élément – qu'il s'agisse d'une instance ou d'un élément d'interface standard – avec une nouvelle ligne ou 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. Généralement, il s’agit de la date et de l’heure, des noms d’utilisateurs, des numéros, etc.

Vous les avez probablement déjà pris en compte au stade de l’architecture de l’information ou, en partie, dans la politique éditoriale. Et maintenant, un document de copie est juste l'endroit pour refléter quelles données sont constantes, et quelles données changent selon le 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 tout au long de la copie doc, et comment sa forme de base est indiquée dans la légende
Je montre le format de date courant au début du document et après je le mentionne simplement [Date, default]. ( Grand aperçu )

N'oubliez pas de penser à la valeur minimale et maximale de chaque variable – si vous remarquez qu'elle affecte l'interface utilisateur d'une manière ou d'une autre, 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, répondez à vos besoins. Captures d'écran, description de votre expérience, messages audio ou vidéo – tout sera génial! Je le pense.

Et j'ai préparé un modèle pour vous. Copiez donc votre [Template] Copiez le document – et restez en sécurité!

 Smashing Editorial (ra, il)




Source link