Tout ce que vous devez savoir sur l'esquisse UX

Si vous avez fait un travail créatif sérieux, vous n'êtes que trop familier avec le blocage créatif. C'est comme se heurter à un mur de briques : aucune des idées que vous pouvez visualiser n'est assez bonne ou ne peut pas fonctionner dans la vraie vie.

Pour les concepteurs, le sentiment n'est que trop familier. Cependant, comme tout problème compliqué sans solution claire, un processus intelligent peut faire toute la différence. C'est là que l'esquisse UX entre en jeu.

L'esquisse UX est un aspect crucial, mais souvent négligé, de la conception de l'expérience utilisateur. L'esquisse est un moyen très efficace de communiquer la conception tout en permettant aux concepteurs d'essayer une multitude d'idées et de les itérer avant d'en choisir une.

Dans cet article, j'ai l'intention de couvrir tout ce que vous devez savoir sur l'esquisse UX, y compris les points suivants :

• Introduction aux croquis UX et aux wireframes
• Bases, outils et techniques d'esquisse UX
• Clarifier les croquis avec des notes, des annotations, des chiffres
• Trucs et astuces de croquis UX
• Des mini-méthodes conçues pour booster la qualité et la productivité
• Tout ce que vous devez savoir sur les Wireflows
• Un guide rapide pour l'esquisse de flux UX

L'esquisse UX est un processus en deux étapes

De nombreuses options doivent être considérées dans la conception, ce qui se traduit par le choix et l'exécution de la meilleure. Les concepteurs examinent leurs options, puis procèdent à l'élaboration des détails, faisant ainsi de la conception UX un processus en deux étapes :

• La génération d'idées

Dans la première étape, plusieurs idées sont générées, mais comme elles ne peuvent pas être entièrement mises en forme, il n'est pas rare que certains éléments soient incomplets ou manquants. L'essentiel est d'envisager différentes approches et de décider laquelle est la plus efficace dans le contexte de votre tâche et des différentes contraintes du projet.

• Ajout de détails et de raffinement

Pas à pas, vous vous fixez sur quelques variantes prometteuses et procédez à l'élaboration des spécificités, rendant ainsi certaines idées inadaptées.

Esquisses UX et wireframes : introduction et classification

Vos wireframes peuvent différer en fonction de facteurs tels que le niveau de détail, les couleurs et le style souhaités, si vous allez les montrer à quelqu'un, etc.

J'ai distingué les types de croquis suivants :

• Esquisse : Génération d'idées

Ce sont des croquis initiaux. Les détails de niveau inférieur sont simplement notés. Un nombre limité de couleurs est utilisé.

Je dessine beaucoup de croquis de base pour considérer le problème sous différents angles et envisager différentes solutions. En dessinant de tels croquis, je m'efforce également de générer autant de variantes de solutions que possible.

À cette étape particulière, l'incomplétude libère mon esprit, c'est pourquoi il est si important d'éviter de s'enliser dans des détails à ce stade. Mon objectif est de générer un maximum d'idées et de choisir les plus prometteuses.

• Wireframe : spécification, phase détaillée

Je sélectionne généralement des croquis prometteurs et passe en revue les détails, après quoi je choisis la meilleure variante et je la travaille plus en détail.

Cependant, cela ne signifie pas chaque détail . Les choses évidentes peuvent simplement être notées. De plus, certains aspects seront difficiles à décrire sur papier.

A cette étape, je dessine tous les détails importants , mais je ne dessine pas encore de wireframes dans Balsamiq. Une fois que tout est fait sur le papier, je commence à dessiner dans Sketch.

Les outils numériques offrent beaucoup plus de liberté créative que le papier et vous pouvez facilement vous concentrer sur des choses mineures. Par exemple, vous pouvez vous concentrer sur le « polissage des pixels » plutôt que sur la conception.

• Ébauche de conception visuelle

C'est une approche rarement utilisée, mais elle peut parfois être utile. Diverses solutions visuelles sont envisagées à un stade précoce du projet, mais la création de croquis numériques pour chacune d'entre elles peut prendre beaucoup de temps. C'est pourquoi je dessine d'abord des croquis de conception sur papier, pour envisager différentes options et choisir une direction de conception visuelle.

• Répartition des composants/éléments

Je trouve cette technique utile lorsque j'ai déjà une idée générale et que je réfléchis à une fonctionnalité de page particulière ou aux parties intégrantes des composants de l'interface. Je dessine différents éléments de page, en entrant dans les détails, puis je dessine différentes positions possibles des éléments de page.

Les éléments, même les plus simples, doivent avoir un état ; un bouton peut être pressé et il a un bloc de texte de survol qui peut ou non être vide. Plus il est complexe, plus il a d'états.

Commencer avec les bases

• Préparez vos outils. Trouvez l'endroit le plus pratique possible, une grande table avec beaucoup d'espace. Prenez beaucoup de papier et préparez des stylos et des marqueurs.
• Réchauffer. Afin de vous préparer, je vous recommande de dessiner des lignes, des cercles, des modèles de base et des icônes.
• Définissez vos objectifs. Décidez ce que vous voulez dessiner. Définissez votre objectif et décidez quelle histoire vous avez à raconter. Déterminez le niveau de détail souhaité. Décidez si vous êtes prêt à dessiner beaucoup.
• Définissez votre public cible. Si vous faites cela pour vous-même, vous n'avez pas à vous soucier de l'apparence de votre croquis. Cependant, si vous avez l'intention de montrer vos dessins à un client, assurez-vous de prévoir un peu plus de temps pour ajouter plus de détails à votre croquis.
• Fixez-vous un laps de temps. Le fait d'avoir décidé du temps que vous êtes prêt à consacrer au dessin, disons 30 minutes, vous aidera à vous concentrer sur votre travail.

Maintenant, vous êtes prêt et vous pouvez commencer :

• Dessinez les bords. Dessinez les cadres, une fenêtre de navigateur ou de téléphone, une partie de l'interface, etc.

• Ajoutez les éléments les plus importants ou de base : menu, pied de page, contenu principal.

• Ajoutez des détails. Ajoutez des détails pertinents, mais restez simples à ce stade.

• Ajouter des annotations et des notes. Ceux-ci ne sont requis que si vous prévoyez de partager les croquis. Cependant, ils peuvent être utiles même si vous ne les faites que pour vos yeux.

• Alternatives d'esquisse. Esquissez quelques alternatives rapides à votre solution.

• Choisissez la meilleure solution. Choisissez les meilleures options.

• Ajoutez de l'ombre et du biseau. Ceci est particulièrement important à des fins de partage. Ajoutez une ombre pour rendre votre croquis visuellement attrayant, ce qui est important si vous prévoyez de le partager avec des membres de l'équipe et/ou des clients.

• Enregistrez le croquis. Prenez une photo ou placez-la dans un dossier. J'ai quelques bacs à papier sur ma table pour les croquis.

• Partager. J'utilise généralement l'une des méthodes de partage suivantes :
  • Numérisez des croquis via Evernote et fournissez un lien permanent aux autres membres de l'équipe ou aux parties prenantes.
  • Prenez une photo et téléchargez-la sur InVision.
  • Téléchargez et mappez des images sur Realtimeboard.
  • Ou envoyez simplement une photo par e-mail.
• Passez en revue les croquis et ajoutez des notes. Faites une pause et revenez à vos croquis un peu plus tard. Jetez-y un coup d'œil à nouveau. Le croquis a-t-il encore un sens pour vous ? Un bon croquis doit être facile à suivre.

Clarification des esquisses avec des éléments supplémentaires

Trouvez ou dessinez un croquis approprié, puis ajoutez-y les détails suivants :

1. Titre. Parfois, ajouter un titre est une bonne option. Écrivez une description et une date, si nécessaire, en haut du croquis. Le titre vous aidera à comprendre ce que vous regardez et si le croquis est pertinent ou non. Ceci est particulièrement utile si vous avez beaucoup de croquis ou si vous allez les montrer à d'autres.

2. Annotations. Les annotations sont des noms et des notes placés près d'un élément, pour expliquer son contenu ou d'autres attributs. Ils ajoutent des détails qui clarifient d'autres éléments et sont généralement difficiles à dessiner. Par exemple, il peut s'agir du nom du bloc, de certains détails d'interaction, d'une explication d'une image, de quelques idées pour de futures variantes de conception, etc. Vous pouvez consulter l'un de mes exemples pour voir à quoi ressemble une esquisse d'annotation.

3. Nombres. Numérotez les éléments de votre croquis ou les croquis eux-mêmes. Vous pouvez décider comment les classer (par exemple, par flux d'interaction, l'ordre dans lequel vous les avez créés, etc.). Cela peut également être utile lors des discussions (en particulier des discussions à distance), car vos collègues et clients peuvent simplement indiquer le numéro du croquis dans leurs commentaires et vous comprendrez à quoi leurs commentaires se réfèrent.

4. Flèches. Vous pouvez utiliser des flèches pour indiquer les transitions d'écran. Ils peuvent également être utilisés pour relier différentes parties de croquis, pour indiquer une séquence d'actions, etc. Étant donné que la signification d'une flèche peut varier, juste au-dessus de la flèche, vous pouvez ajouter une description ou une explication de ce que la flèche est censée signifier. Voici un exemple de croquis de base montrant une transition et plusieurs états différents.

5. Remarques. Tout comme les annotations, les notes sont utilisées pour expliquer les concepts. Cependant, les notes diffèrent des annotations dans leur placement. Ils ne sont pas attachés à un élément ou situés à proximité de l'élément décrit, comme dans cet exemple. Les notes peuvent être placées en haut ou en bas de la page. Ils peuvent même décrire des éléments qui ne sont pas inclus dans la conception, des questions que vous pourriez avoir, des explications générales, des idées non esquissées, etc.

6. Gestes. Les gestes sont pertinents dans le cas de la conception d'appareils tactiles. Dessiner un geste de la main peut nécessiter de la pratique. Il existe plusieurs variantes de gestes utilisés pour indiquer différents types d'actions, il est donc préférable de décider à l'avance comment vous désignez une action particulière (si elle n'est pas évidente, bien sûr) et de vous entraîner à la dessiner.

7. Retour d'information. Vous pouvez recevoir des suggestions pour corriger ou améliorer le croquis après l'avoir montré à d'autres ou après l'avoir revu vous-même. Il est souvent utile de marquer ces commentaires dans une couleur différente afin d'aider à différencier les commentaires de l'esquisse originale.

Vous pouvez utiliser différentes couleurs pour différents types d'éléments. Parfois, j'utilise le noir pour les dessins, le bleu pour les liens, le vert foncé pour les notes, le rouge pour les titres et les commentaires. Essayez d'utiliser différentes couleurs dans vos croquis, mais assurez-vous que votre choix de couleurs est cohérent !

Trucs et astuces plus spécifiques

1. Ne vous inquiétez pas de la qualité. Ne regardez pas les croquis sur Dribbble ; ils parlent de quelque chose de complètement différent . Gardez à l'esprit que le but principal des croquis est de vous aider à réfléchir plus clairement, à trouver de meilleures solutions et à gagner du temps.

2. Entraine toi. Pour commencer, vous pouvez essayer de dessiner quelques applications. Ouvrez une application Web ou mobile et essayez de copier l'écran en décrivant les éléments dans les notes. Chaque fois que vous avez du temps libre, entraînez-vous à dessiner les éléments de base de vos conceptions. En général, la pratique rend parfait. Dans un moment, cela fera partie de votre personnalité de designer.

3. Achetez un dossier. Souvent, je ne travaille pas depuis mon bureau, mais plutôt depuis un café ou chez moi. Les croquis sur papier sont très susceptibles d'être endommagés, alors achetez un simple dossier pour les garder sains et saufs.

4. Apportez des outils avec vous partout où vous allez. Cela permet de garantir que vous pouvez capturer votre idée sur papier à tout moment, sinon vous risquez de perdre la pensée ou de ne pas pouvoir vous en souvenir avec suffisamment de détails. J'ai toujours un bloc-notes, quelques feuilles A4 et des stylos avec moi.

5. Partagez avec les autres. Il est très important d'engager d'autres personnes et de communiquer avec votre équipe. Impliquer les autres et obtenir leurs commentaires, surtout au début, permet d'économiser du temps et des ressources à long terme. Vous pouvez également encourager les autres à dessiner comme ils envisagent le design.

6. Bacs à papier. Pensez à placer des bacs à papier sur votre table de travail. Par exemple, j'en ai trois : pour les tâches entrantes, pour les croquis et les feuilles de papier propres.

7. Expérimentez et personnalisez. Mes recommandations sont basées sur mon expérience. Avec le temps, vous découvrirez ce qui vous convient le mieux; quelles méthodes, quelle séquence d'étapes, qu'est-ce qui remplit exactement votre potentiel créatif. Vous n'y arriverez que si vous essayez constamment quelque chose de nouveau, c'est pourquoi il est important d'expérimenter différents formats, styles et d'essayer de nouveaux modèles.

8. Utilisez des modèles. Les modèles feront gagner du temps et prendront implicitement en compte les restrictions de format, libérant ainsi plus de temps pour se concentrer sur ce qui est important.

Mini-méthodes supplémentaires pour améliorer vos croquis

Ce ne sont pas nécessairement des trucs et astuces, mais c'est un ensemble de méthodes, d'outils et de suggestions qui devraient augmenter votre productivité ou améliorer la qualité de vos croquis.

1. Créer une planche à croquis. L'un des plus grands avantages de l'utilisation d'un stylo et de papier au lieu d'un outil de dessin numérique est que vous pouvez le coller sur un mur. Tous les membres de votre équipe peuvent le voir et y participer (bien que je recommande de mettre en place des sessions de révision).
   
   • Vous verrez vous-même vos croquis, ce qui stimulera votre réflexion et vous permettra d'avoir une vue d'ensemble, pas des pièces isolées, mais l'ensemble du système. Vous verrez les interactions entre les pièces et la façon dont elles s'emboîtent.
     
   • Créez le tableau de croquis - joignez vos croquis de tableau blanc. S'il n'y a pas de tableau blanc dans votre bureau, vous pouvez utiliser du ruban adhésif double format ou des feuilles de post-it pour coller vos croquis au mur. Si vous ne voulez pas coller au mur, vous pouvez trouver un gros morceau de papier cartonné à la place. Je recommande fortement d'utiliser des planches à croquis, car elles sont l'un des meilleurs outils de conception.
2. Utilisez un tableau blanc. Un tableau blanc est un excellent outil de dessin. Il a un certain nombre d'avantages :
   • C'est collaboratif et il est facile d'impliquer d'autres membres de l'équipe dans la discussion et dans le dessin également. Même si leurs idées ne correspondent pas bien, vous comprendrez leur façon de penser et cela vous aidera à être sur la même longueur d'onde.
     
   • Les marqueurs ne vous permettent pas de vous concentrer sur les détails, vous devez penser aux choses générales. Les croquis sont ouverts à interprétation.
     
   • Un tableau blanc est facile à nettoyer et à corriger.
     
   • Il y a beaucoup d'espace et vous pouvez facilement réfléchir à l'ensemble du flux du système.
     
   • Vous pouvez joindre des croquis, des impressions et des documents de référence à l'aide d'aimants.

3. Prototypes. Créez un prototype cliquable pour évaluer votre conception. Essayez d'obtenir des commentaires sur certains éléments. Cela fonctionne particulièrement bien lorsque vous utilisez des modèles - vos croquis sont de la même taille. Évidemment, il sera beaucoup plus facile de dessiner des croquis de même taille si vous utilisez un modèle. Je vais essayer de vous faciliter la tâche en vous fournissant quelques modèles que vous pouvez télécharger et utiliser : Mobile, Navigateur multi-fenêtres, Navigateur défilant, Personas.

   

4. Utilisez votre imprimante et votre scanner. Dessinez le cadre à la main (vous pouvez utiliser une règle pour dessiner plus précisément), puis scannez-le simplement à l'aide d'un scanner ou d'une application mobile, et imprimez-le. Vous pouvez modifier votre modèle dans le rédacteur d'image avant l'impression. Vous pouvez supprimer des détails inutiles ou dupliquer certains éléments. Vous pouvez également imprimer une page de site prête à l'emploi, des photos et d'autres éléments descriptifs. Vous pouvez coller les découpes dans votre croquis.

5. Utilisez Evernote pour la numérisation. Evernote est un excellent outil de conception. Vous pouvez y conserver et partager vos croquis, créer des thèmes et utiliser des balises pour organiser vos croquis. Les capacités du mode "Scanner" sont particulièrement impressionnantes. Vous placez votre croquis devant et il le "scanne", de sorte que vous obtenez la copie du croquis. Ensuite, vous pouvez inviter vos collègues à Evernote et leur donner le lien de votre note. Comme il existe une application mobile pour tablettes et téléphones, vous pouvez toujours avoir vos croquis à portée de main.

6. Esquisse hybride. Pour donner un peu de vie et de réalisme à vos croquis, vous pouvez les combiner avec des photos. Cela signifie que vous devez prendre une photo, puis dessiner une histoire avec des éléments d'interface dessus. Cela peut également vous aider à remarquer certains problèmes d'interaction et certains détails.

7. Traçage du monde réel. Si vous devez créer un storyboard, illustrer une expérience dans un contexte spécifique (par exemple, une personne utilisant un smartphone à une gare routière), vous devez inclure des représentations de personnes, de lieux et de divers objets réels. Ceux-ci peuvent être difficiles à dessiner, surtout si vous ne maîtrisez pas les compétences en dessin, mais voici une astuce simple : prenez une photo de l'objet ou de la situation, puis obtenez le contour des objets clés à l'aide d'un éditeur d'images. Vous pouvez utiliser le contour résultant dans vos croquis par la suite. Bien sûr, si vous avez une tablette et un stylet , ce sera encore plus simple.

Wireflow : décrire le flux et les ramifications du système

Le wireflow est essentiellement une séquence du flux du système, écran après écran, avec des branches et des points de décision. Nous devons considérer la façon dont un utilisateur aborde sa tâche, la façon dont il passe d'un écran à l'autre et son expérience globale du produit au fil du temps.

Wireflow, ou ce que vous dessinez et la façon dont il est connecté, pourrait être organisé selon les approches suivantes :

• Séquence. Une séquence est un voyage en ligne droite, écran après écran. Cela peut aussi être une histoire avec des points de décision ; vous montrez non seulement le parcours, mais également les points de décision et les différents chemins que l'utilisateur peut choisir. Vous pouvez afficher la structure de l'interaction à l'écran.
• Changements d'état. Décrivez différents états d'écran d'un élément et les conditions ou actions qui provoquent les transitions entre ces états.
• Écran contre éléments d'écran. Vous pouvez dessiner les écrans entiers ou envisager des micro-interactions et des interactions.
• Plateformes. Vous pouvez envisager une expérience de plateforme ou plusieurs plateformes.
• Portée. Décrivez-vous une partie du parcours de l'utilisateur ou l'ensemble du parcours ? Interaction d'un utilisateur avec le système ou interactions de plusieurs utilisateurs ?

J'essaie généralement de définir les types de wireflow suivants, en fonction de l'organisation et de l'utilisation pratique :

1. Cartographier le flux global et le flux de haut niveau. Esquissez rapidement les changements d'écran et dessinez le parcours général de l'utilisation de votre produit. Ici, vous pouvez inclure un contexte et vous pouvez éventuellement montrer une interaction de l'utilisateur. Par exemple, un service d'achat en ligne est un parcours assez long qui peut inclure de nombreuses étapes : comment l'utilisateur a trouvé la boutique, les étapes qu'il a parcourues pour commander le produit, comment il a payé, etc.

2. Flux d'écran. Cela se concentre sur un flux fonctionnel spécifique à travers le système. Il peut s'agir d'une petite séquence droite d'écrans ou d'un parcours avec embranchements. Par exemple, un utilisateur téléchargeant des photos ou une vidéo.

3. Schéma de navigation. Dessinez votre écran et les options qu'il contient. Ce n'est pas censé tracer le parcours. Cette étape comprend des informations qui montrent les options qu'un utilisateur peut choisir, les directions des utilisateurs et diverses parties de l'application. Je crée généralement un schéma de navigation au début d'un projet. Il permet de comprendre comment la navigation doit être structurée (quels points doivent être inclus, combien de niveaux sont nécessaires).

4. États de l'écran. Dessinez l'écran ou les états des éléments (un exemple pourrait être une boîte de dialogue de téléchargement de fichier). Dans ce cas, par exemple, l'écran aura les états suivants :

   • Vierge
   • Un utilisateur tire le fichier dans la zone active
   • Le fichier est en cours de téléchargement
   • Le fichier est téléchargé
   • Il y a une erreur

Esquisse du flux UX : un guide pratique rapide

Le processus de conception du wireflow est similaire à celui du wireframe. De nombreuses étapes sont similaires ou identiques, mais il existe quelques différences importantes :

Définissez ce que vous devez dessiner. Décidez exactement ce que vous voulez dessiner (par exemple, l'histoire générale ou un fragment de votre dessin). Voulez-vous générer différentes options ou réfléchir aux détails d'un voyage ? Décidez si vous allez montrer vos croquis à quelqu'un d'autre ou non.

Définissez les images clés et les transitions que vous devez inclure dans votre dessin. Si vous ajoutez tous les écrans et décalages, votre flux de travail sera très long et complexe. Réfléchissez aux écrans clés que vous devriez afficher pour transmettre l'essence de l'interaction qui aide à accomplir votre tâche. Il en va de même pour les changements d'écran. Vous devez choisir les quarts de travail qui seront les plus utiles pour exprimer votre idée. Consultez cet exemple pour référence.

Définissez le point de départ. Quel sera le point de départ de votre voyage ? Vous pouvez commencer par le point d'entrée, c'est-à-dire le début du parcours, par exemple, ce qu'un utilisateur voit lorsqu'il se connecte à votre application. Alternativement, vous pouvez commencer au milieu ou avec les écrans ou étapes de processus les plus intéressants/difficiles/importants. Ou vous pouvez commencer par la fin, avec le résultat final obtenu par un utilisateur, et décrire les étapes que l'utilisateur a suivies pour en arriver là.

Décidez de ce qui vient ensuite. Après avoir dessiné les étapes de départ, décidez de la suite en répondant aux questions suivantes :

• Dans quelle direction cette étape mène-t-elle les utilisateurs ?
• Dans quelle direction voulez-vous qu'ils aillent ?
• Que doivent-ils faire pour y arriver ?

Dessinez des itinéraires alternatifs, des entrées. Pensez à d'autres moyens par lesquels l'utilisateur peut accéder à chaque étape :

• Que se passera-t-il si la connexion Internet de l'utilisateur tombe en panne ?
• Quelles autres options ont-ils ?
• Qu'est-ce qui peut mal tourner en cas d'erreur de l'utilisateur ou de l'application, que se passera-t-il ?
• Que se passera-t-il si l'utilisateur ferme l'application à cette étape ?
• Par où l'utilisateur commencera-t-il la prochaine fois qu'il lancera l'application ?

Pensez aux flux alternatifs. Analysez l'historique, concevez un flux alternatif et esquissez-le.

Ajouter des annotations, des notes, des détails. Ajoutez les éléments explicatifs qui permettront de clarifier des détails non évidents.

Sauvegarder. Faites une copie numérique du croquis.

Partager. Partagez le croquis (par exemple, via Evernote ou InVision).

Trucs et astuces essentiels pour l'esquisse de flux UX

Rédigez d'abord un wireflow. Si vous envisagez un long voyage, vous feriez mieux de faire un croquis rapide afin de comprendre l'espace dont vous avez besoin et de ne pas manquer certaines étapes ou détails importants. Il serait difficile de les ajouter au croquis papier par la suite.

Ne créez pas une carte énorme avec trop de détails. Les croquis papier n'ont pas de bouton d' annulation , il sera donc difficile d'apporter des modifications. Vous pouvez dessiner les détails avec trop de précision et cela détournera votre imagination de la génération de différentes variantes de haut niveau. Au lieu de créer un énorme schéma qui illustrerait l'ensemble du système, essayez de vous concentrer sur les scripts clés et essayez de dédier une page individuelle à chaque script.

Supprimez les détails inutiles et combinez différents niveaux de détail. Il n'est pas nécessaire de dessiner toutes les descriptions des interactions, essayez donc de n'utiliser que les éléments clés de votre parcours. Lorsque vous dessinez une énorme carte d'interactions, vous n'avez pas besoin de travailler chaque écran en détail. Certains écrans pourraient être simplement représentés par plusieurs carrés, et d'autres, des écrans clés, pourraient être élaborés en détail.

Essayez différents formats de papier. Essayez différents formats de papier, A3 ou A5. La taille de la feuille de papier vous limitera et affectera votre processus de différentes manières. Une petite feuille de papier ne vous permettra pas d'ajouter beaucoup d'écrans ou de détails, mais elle peut vous aider à vous concentrer sur les idées principales. À l'aide d'une grande feuille de papier, vous pouvez dessiner un grand voyage, beaucoup de détails et des notes supplémentaires. Alternativement, vous pouvez y placer un certain nombre de petits trajets.

Les post-it peuvent aussi aider. Vous pouvez également essayer d'utiliser des post-it. Vous pouvez dessiner des écrans séparés ou des notes de bas de page dessus, ou vous pouvez dessiner des états supplémentaires des éléments de votre croquis. Leur avantage est qu'ils peuvent être facilement remplacés, vous pouvez aussi simplement déplacer la note ailleurs. Par exemple, si le flux a changé, vous pouvez simplement modifier l'ordre de vos post-it.

Utilisez des modèles. Essayez d'utiliser des modèles. Ils vous feront gagner du temps et vous permettront de créer des prototypes plus cliquables et de haute qualité.

Essayez d'utiliser un tableau blanc. Un tableau blanc présente de nombreux avantages. Il devient de plus en plus populaire car il permet de tracer un immense parcours avec beaucoup de branches. Vous pouvez dessiner de nombreux composants d'application sur papier, puis les fixer simplement au tableau blanc à l'aide d'aimants, en les ajoutant au voyage.

Dessiner une ombre. Les ombres peuvent vous aider à marquer des éléments importants et elles ajoutent un attrait visuel à votre croquis. J'utilise trois types d'ombres différents :

• Lignes suivant la direction de la lumière - cela n'est pas toujours beau, mais vous pouvez utiliser la graduation et ramasser les objets à différentes « hauteurs ».
• Décrire une partie avec une couleur plus foncée (uniquement le bas ou le bas et le côté droit)
• Utilisation du Pro-marker (ou son équivalent dans l'application que vous utilisez pour dessiner)

Composants de dessin. Une objection comme « Je ne sais pas si bien dessiner » peut étouffer votre initiative. C'est en fait plus facile qu'il n'y paraît. Même les croquis les plus complexes sont généralement composés d'un certain nombre de blocs de base, comme dans cet exemple. Si vous pouvez dessiner un point, une ligne, un triangle, un carré et un cercle, alors vous avez les éléments de base dont vous avez besoin pour dessiner n'importe quoi pour votre croquis.

Mettre tous ensemble. Les éléments de base, les boutons, les boutons radio et les listes déroulantes sont composés d'éléments de base. Après avoir appris à dessiner ces éléments, vous pouvez les combiner et dessiner des blocs et des composants complexes.

Emballer

Le but de cet article n'était pas de créer le guide ultime et unique pour l'esquisse UX, ou l'esquisse en général, car les concepteurs ont des besoins et des préférences personnelles différents.

Comme vous pouvez le voir, c'est beaucoup à couvrir. Les concepteurs utilisent une myriade d'outils, de techniques et d'approches pour produire des croquis UX, et c'est plutôt subjectif. Certaines techniques peuvent ou non fonctionner pour différentes personnes travaillant sur différents projets. Si vous débutez, vous devez absolument expérimenter. La pratique et l'expérimentation constantes vous aideront à trouver ce qui fonctionne pour vous.

A vous de choisir les astuces et techniques qui conviendront le mieux à votre projet et à votre approche du design. Avez-vous des conseils de croquis supplémentaires pour les autres UXers ? N'hésitez pas à les partager dans la section des commentaires.

• • •

Pour en savoir plus sur le blog Toptal Design :

• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• L'importance de la conception centrée sur l'humain dans la conception de produits
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants
• Principes heuristiques pour les interfaces mobiles
• Conception anticipative : comment créer des expériences utilisateur magiques