3 astuces pour préparer une meilleure documentation UX

La documentation UX consiste essentiellement à suivre les détails spécifiques de votre conception pour s'assurer que la mise en œuvre se déroule sans heurts. Après toutes les itérations de conception, les recherches et les critiques, il est important de ne pas négliger cet important passage du code de conception au code fonctionnel.. 

Voici comment structurer vos spécifications de conception légères et vous assurer que le résultat final est aussi poli que vous l'avez imaginé!

Composants de la documentation UX

De quoi les développeurs ont-ils besoin pour mettre en œuvre vos conceptions? Cela peut dépendre de votre relation de travail et de la complexité de votre projet. Quoi qu’il en soit, sachez qu’un dessin contient plusieurs couches d’informations, il est donc préférable de: plus de-communiquer que de laisser les choses ouvertes à l'interprétation. 

1. Maquettes de conception: indiquant les spécifications de style telles que les lignes rouges pour le positionnement, la couleur, la palette, la police de caractères. 
2. Les interactions: montrant comment cela fonctionne, que ce soit par un flux ou par un clic. 
3. Spécifications supplémentaires: tout ce qui peut manquer dans les catégories précédentes. Cela peut inclure des dépendances d’autres équipes, tout élément susceptible de changer dans un avenir proche, ou des détails spécifiques à la mise en œuvre.. 
4. Les atouts: ressources utilisées dans la conception, telles que les icônes, les images / audio / vidéo optimisées, la copie, etc..

Outils

De nos jours, plusieurs outils de conception ont des spécifications intégrées, en tant qu’intégrations ou en tant que partie intégrante du flux de travail. Consultez-les pour voir ce qui fonctionne le mieux pour votre équipe.. 

uxtools.co/tools/handoff

Figma 

Semblable à InvisionApp, il existe une vue qui donne aux développeurs la possibilité d'inspecter, de copier et d'exporter des actifs de conception. Un outil Web qui permet de créer des sites Web et des applications mobiles et de collaborer en temps réel avec des coéquipiers.. 

Adobe XD 

Maintenant libre. Une solution UX / UI tout-en-un pour la conception de sites Web, d'applications mobiles, etc. Génère un lien externe pour les spécifications, inclut une fonction de protection par mot de passe. 

InvisionApp

Conception de produits, flux de travail et plateforme de collaboration. Inclut le mode Inspect pour générer des mesures, des couleurs et des ressources de conception en un tournemain. Parcourez et accédez aux dimensions de l'écran, y compris la position, la palette, la police, les polices, le code, la prévisualisation des ressources, la fonction de téléchargement des ressources.

Zeplin

Outil de transfert de conception, avec des intégrations à Slack et Sketch (Mac uniquement) pour faciliter votre collaboration avec les développeurs. En outre, vous pouvez exporter vos fichiers de conception à partir de Figma, Photoshop ou XD directement vers Zeplin. Les fonctionnalités de commentaires sont utiles et se trouvent sur la même page que les spécifications réelles. 

En savoir plus sur les outils UX

• uxtools.co: un site informatif de comparaison d'outils de conception
• Une liste de contrôle pour les transferts de conception par InvisionApp