Nous y avons tous été. Vous avez créé un design et vous souhaitez le partager avec les bonnes personnes, probablement des développeurs. Mais les conceptions en elles-mêmes ne sont pas explicites, même si nous pensons parfois qu'elles le sont. Combien de fois avons-nous constaté que le résultat final n'était pas construit exactement comme nous l'avions imaginé ? Ou qu'il y a eu une mauvaise interprétation des dessins ? Ou que les développeurs n'ont pas réussi à trouver les bons designs ?

Les conceptions doivent être documentées de manière à ce qu'elles soient accessibles, faciles à lire et claires pour tout le monde afin de limiter les risques d'erreurs et de manque de clarté. Dans cet article, je veux vous guider à travers le processus de documentation de conception.

Tu vas apprendre..

1. Pourquoi il est essentiel d'utiliser la documentation de conception.
2. Comment utiliser une bibliothèque d'annotations de conception impressionnante.
3. Comment utiliser la bibliothèque d'annotations dans Figma (et d'autres outils)
4. Et comment vous pouvez fournir un cahier des charges aux développeurs.

Tout d'abord : nous documentons les conceptions pour expliquer comment la conception fonctionne , pas à quoi ressemble la conception. Vous l'utilisez pour expliquer les interactions et les flux. Mais aussi par exemple comment fonctionne la copie, ou les métriques.

Une partie du travail d'un designer consiste bien sûr à réaliser des designs. Généralement des fonctionnalités, des améliorations ou tout autre type de conception. C'est ainsi que nous façonnons une application et que nous définissons l'apparence et le fonctionnement de quelque chose. Expliquer le fonctionnement de la conception est une étape essentielle du processus de conception. C'est ce qu'on appelle la documentation de conception et pour cela nous utilisons un cahier des charges .

Cahier des charges

Le cahier des charges est LE dossier partagé entre les concepteurs et les principaux intervenants. Pour n'en nommer que quelques-uns : développeurs, propriétaires de produits, ingénieurs de données, spécialistes CRO, concepteurs, gestion, etc.

Il contient une représentation visuelle des conceptions d'écran + des annotations qui expliquent tous les détails nécessaires à un développeur pour développer correctement les écrans. Un brief bien spécifié est explicite et devrait donner aux développeurs suffisamment de conseils pour construire les conceptions.

Pourquoi est-il si important d'avoir un cahier des charges ?

• Efficacité - Un cahier des charges réduit les questions des développeurs et accélère la livraison. Cela évite les séances de raffinement et les erreurs de développement.
• Qualité - Cela vous aide en tant que concepteur à réfléchir réellement à la façon dont vos conceptions devraient fonctionner. Combien de fois avez-vous reçu une question d'un développeur, alors que vous ne saviez pas comment l'interaction devrait fonctionner ?
• Récupération - Cela vous aide à vous rappeler plus tard pourquoi vous avez pris certaines décisions. Surtout lors de la création d'applications complexes, vous avez tendance à les oublier. Non seulement pour vous-même, mais aussi pour le reste de la communauté du design.
• Accessibilité — Une manière unifiée d'annoter vos conceptions vous aide à créer une norme partagée dans la documentation. En d'autres termes : chaque partie prenante peut et doit pouvoir lire n'importe quel brief facilement. Par exemple : lors du référencement dans les backlog stories, ou pour les présentations.
• Visibilité — Non seulement vous pouvez utiliser le cahier des charges pour les développeurs, mais d'autres parties prenantes peuvent également accéder aux cahiers des charges.

Au sein de Randstad, nous livrons nos cahiers des charges à l'aide de Confluence. La raison en est que toutes les principales parties prenantes de l'organisation l'utilisent et qu'elles le connaissent bien. Un grand avantage de Confluence est que tout le monde peut faire des commentaires, modifier des pages et utiliser également la fonctionnalité de recherche. Quel que soit votre choix de plate-forme, gardez toujours à l'esprit que pour fournir un cahier des charges, il est important de maintenir un seuil bas pour vos principales parties prenantes.

Ci-dessous, vous documentez les conceptions réelles. Ci-dessous, vous pouvez voir à quoi pourrait ressembler un cahier des charges. Comme vous pouvez le voir, j'ai tout copié et collé dans la colonne des séparations. Les sections clés que vous pouvez voir sont :

1. Résumé - il s'agit des personnes impliquées, d'un lien vers le fichier Figma et d'une table des matières. Pensez à toutes les choses pratiques qui sont utiles.
2. Justification de la conception — Explication des principales justifications des décisions de conception. Ils aident tout le monde à être conscient du POURQUOI vous avez pris certaines décisions. Cela améliore la récupérabilité.
3. Flux — Si nécessaire, fournissez un flux sur le fonctionnement et le comportement de la fonctionnalité. Souvent, un flux est fondamental pour une fonctionnalité et donne une compréhension de haut niveau de la fonctionnalité.
4. Écrans - Ces captures d'écran de conception provenant de votre outil de conception et comportant des marqueurs. Il existe des colonnes pour les mobiles et les ordinateurs de bureau.
5. Descriptions - C'est ici que vous expliquez chaque élément de ce qui est à l'écran afin qu'il soit clair pour votre lecteur.

Maintenant que vous savez ce qu'est un cahier des charges, passons aux annotations de conception.

La bibliothèque d'annotations de conception

Je veux d'abord vous donner un exemple simple . Cet exemple lo-fi - conçu dans Figma - contient presque tous les types d'annotations. Cela vous donne une idée du contexte et de la façon de l'aborder d'un point de vue holistique. Pour cet exemple, j'explique comment une sélection de calendrier fonctionne sur mobile. Voici à quoi cela ressemblerait :

Il se passe beaucoup de choses, mais permettez-moi d'abord de dire ceci : la conception des annotations est horriblement moche. C'est exprès. Nous ne voulons pas que les annotations aient l'air trop fantaisistes et interfèrent avec la conception réelle. Il y a de grandes chances que vous n'utilisiez pas ces couleurs dans votre conception visuelle, donc elles se distinguent bien. Cela dit, vous pouvez utiliser des annotations pour expliquer à la fois les concepts lo-fi et les conceptions hi-fi.

Passons en revue les types d'annotations les plus importants.

ID d'écran

Chaque écran doit avoir un ID d'écran. Ces ID d'écran vous aident à discuter des écrans avec n'importe quelle partie prenante. Vous pouvez placer un ID d'écran au-dessus d'un tableau d'art de conception. Assurez-vous également de donner le même nom au tableau d'art.

Jetons un coup d'œil à l'exemple ci-dessus. Si ces écrans n'avaient pas d'identifiant, nous parlerions probablement de "l'écran avec le calendrier non sélectionné". Cela pourrait fonctionner, mais au moment où vous avez un autre écran avec un état non sélectionné, il pourrait y avoir un désalignement. Les ID d'écran évitent cela.

La convention de dénomination d'un ID d'écran est la suivante : <device-FLOW INITIALS-unique number>. Dans nos exemples, l'appareil est mobile et les initiales sont CV, ce qui signifie : Calendar View.

Les chiffres vous donnent une fourchette. L'objectif est de laisser suffisamment d'espace entre les deux pour ajouter des écrans supplémentaires ultérieurement. Donnons quelques exemples :

• Gamme AB-0010 - J'ai de la place pour 9 écrans avant d'atteindre AB-0020. Si j'avais déjà commencé un jeu d'écrans avec AB-0020, je serais bloqué.
• Gamme AB-0100 - J'ai de la place pour 99 écrans avant d'atteindre AB-0200. Cela me donne beaucoup d'espace.

Marqueurs

Il existe 3 types de marqueurs. Étant donné que les marqueurs sont des calques qui se chevauchent, vous souhaitez qu'ils soient bien positionnés. C'est pourquoi vous pouvez choisir de les laisser pointer dans toutes les directions. Cela donne une flexibilité dans leur positionnement. Génial n'est-ce pas !?

Tous les marqueurs sont liés à des notes. Plus sur cela plus tard. Permettez-moi d'abord d'expliquer les types de fabricants.

ID d'explication

Utilisez les ID d'explication pour expliquer le fonctionnement de l'interaction et des états. Ils sont remplis à l'aide de lettres. Chaque marqueur a un numéro unique, mais la même lettre peut être affichée sur plusieurs écrans si elle explique la même chose. Dans l'exemple ci-dessus, vous pouvez trouver 'C'. Ce marqueur explique l'état de l'appel à l'action principal. Expliquer cela couvre 2 écrans, donc j'ai 2 C.

ID de texte

Champs de marque ou zones de texte de Text ID. Ils peuvent être utilisés pour dire quelque chose de spécifique sur le texte. Habituellement, ils sont très utiles lors de l'utilisation de traductions. Vous pouvez marquer un morceau de texte avec un ID, afin de pouvoir vous y référer dans n'importe quel autre fichier.

ID des métriques

Les ID de métriques peuvent être utilisés pour expliquer les métriques spécifiques que vous souhaitez appliquer au flux. Dans notre exemple, nous voulons connaître les dates moyennes sélectionnées par session.

Remarques

Les notes vous permettent d'expliquer le fonctionnement de la conception à l'aide de texte. Vous placez les notes où vous voulez, mais mon conseil serait de les placer sur le côté des planches d'art afin que vous ayez toujours une vue claire sur les dessins. Voir l'exemple ci-dessus.

5 types de notes

1. Idée (vert) — Utilisez pour écrire une idée que vous ou l'équipe devez examiner. Il peut être retiré lors de la livraison d'un transfert de conception.
2. Question (bleu) — C'est une question qui est posée. Utilisez ce type de note comme espace réservé pour vous rappeler (ou rappeler à l'équipe) de répondre à cette question.
3. Point d'action (rouge) — Il s'agit d'un type de note que vous pouvez utiliser pour noter un point d'action. Cela peut être quelque chose à étudier, ou simplement quelque chose qui doit être ajouté à la conception.
4. Note (jaune) — Utilisez une note pour expliquer quoi que ce soit. Ces notes sont liées à des repères numérotés ou alphabétiques.
5. Alternative (orange) — Cette note peut être utilisée pour expliquer un flux ou une option alternative dans la conception.

Bon à mentionner : lorsque nous commentons, nous avons deux façons de procéder :

Commentaires dans Figma — Nous ne les utilisons qu'entre designers, pas avec d'autres parties prenantes. Cela fonctionne bien lorsque vous travaillez ensemble sur un projet de conception.

Commentaires dans Confluence - Trouver des commentaires dans Figma peut être difficile pour les principales parties prenantes. Ils devraient chercher des commentaires et ils pourraient manquer l'aperçu. Les commentaires dans Confluence sont une chose à laquelle ils sont habitués et ils ne seront pas distraits par des fonctionnalités Figma non pertinentes.

Les flux

Les flux sont utilisés pour expliquer le déroulement d'une série d'écrans. Ils vous aident à expliquer les choix dans le flux et à montrer l'action et la réaction.

3 types de flux

1. Flèches — Utilisez des flèches pour connecter visuellement des écrans, des modaux ou des sections. Dans l'exemple, j'ai utilisé une flèche pour connecter deux écrans.
2. Booléens — Avec un booléen, vous pouvez ajouter des logiques au flux en ajoutant des choix.
3. Actions — Utilisez une action pour indiquer quand une action digne d'être mentionnée est effectuée.

Les gestes sont utilisés pour montrer l'interaction réelle de l'utilisateur, à l'aide d'une main ou d'un curseur. Avec cela, vous pouvez montrer visuellement ce qui se passe lorsqu'un utilisateur survole un composant. Ou cliquez ou appuyez sur un composant.

Vous pouvez également utiliser la zone de surbrillance pour expliquer quelque chose sur une zone spécifique.

Comment utiliser dans Figma

Maintenant que vous savez en quoi consiste la bibliothèque, il est temps de commencer à les utiliser.

Dans Figma, nous vous conseillons de regrouper toutes les annotations de conception dans un méga cadre plus grand que toutes vos collections de plans de travail, afin qu'il puisse être au-dessus de tout et caché en un seul clic si vous en avez besoin. Dans ce cadre nous regroupons tous les types d'annotations. Ce cadre se trouve au-dessus de vos planches d'art Figma. Le mettre en place comme ça a quelques avantages :

1. Nettoyer les plans de travail — Les annotations n'interfèrent pas avec les conceptions. Ils ne feront pas partie des planches d'art de l'écran, donc les planches d'art restent propres.
2. Activer/désactiver les annotations — Vous pouvez activer et désactiver toutes les annotations à l'aide de l'icône en forme d'œil dans le panneau des calques à gauche. Ceci est utile si vous souhaitez uniquement vous concentrer sur le design.
3. Facile à copier et coller - Copier et coller les planches d'art avec ou sans annotations est facile. (Maintenez la commande enfoncée et faites glisser une sélection)
4. Vue d'ensemble — Regrouper tous les types d'annotations donne une vue d'ensemble rapide.

Ci-dessous, vous pouvez voir un exemple de toutes les annotations regroupées dans un cadre et sélectionnées. Sur la gauche, vous voyez les groupes : titres, marqueurs, notes, flux et gestes et ID d'écran. Le cadre des annotations est en haut et activé.

Ci-dessous, vous pouvez voir un exemple de l'apparence du fichier de conception lorsque le cadre d'annotations est masqué. Cela vous permet de concevoir plus facilement.

Quel que soit l'outil que vous utilisez pour concevoir vos expériences, le principe d'utilisation des annotations de conception reste le même.

Fermeture

J'espère que ce guide vous a aidé à comprendre l'importance et qu'il vous guidera dans l'utilisation de la bibliothèque d'annotations.

La meilleure partie est que la bibliothèque d'annotations de conception est également disponible pour vous !

Vous pouvez télécharger votre propre copie dans la communauté Figma ICI .

As-tu aimé cet article? N'hésitez pas à commenter ou à applaudir ! Un grand bravo à David Güiza Caicedo pour avoir créé cette bibliothèque d'annotations ! Si vous voulez lire plus de mes articles, je peux vous recommander celui ci-dessous.

Comment faire évoluer votre système de conception dans le bon sens