26 étapes pour perfectionner la conception du produit
Au cours des quatre dernières années, j'ai conçu des tableaux de bord et des applications, et j'ai appris à traiter avec différents services et à utiliser leurs connaissances pour rendre la conception des produits plus efficace.
Aujourd'hui, je vais partager toutes les étapes que j'ai construites dans ma routine quotidienne et qui, je pense, ont fait de moi un meilleur concepteur.
Pré-traitement
1. Obtenez autant d'informations que possible (demandez trois exemples)
Pour moi, rien ne fournit plus de clarté que de voir un exemple concret. Lorsque je travaille avec un nouveau client ou sur une toute nouvelle page de destination pour un produit, je trouve que le point de départ le plus simple est de demander au client de fournir trois ou quatre pages inspirantes, car cela aide vraiment les deux parties. Amener votre client à mettre des idées sur la table vous permet de comprendre facilement ce qu’il aime et ce qu’il attend de la conception finale.
Si vous travaillez avec plusieurs équipes, vous devriez essayer de passer autant de temps avec les développeurs sur un produit que vous le faites avec vos collègues designers. Ce que j'ai appris, c'est que la clé pour prendre une décision de conception efficace est de vous assurer de parler avec l'équipe de développement autant que possible. Dans mon cas, il y a eu des cas où une solution à un problème a été trouvée, que je n'ai pas pu trouver par moi-même.
L'objectif est d'éliminer autant de questions que possible avant de passer au développement.
2. En savoir plus sur les personas
Au début, je dois dire que j'étais sceptique à propos des personas, mais maintenant tout cela a du sens pour moi.
Donc, contrairement à mon ancien processus, je peux voir à quel point les personas sont très importants lorsque vous travaillez sur les fonctionnalités du produit, en particulier lorsque la solution comporte de nombreux cas extrêmes. Cela vous aide à comprendre pour qui vous concevez vraiment. Je vise à avoir environ quatre à cinq personnes.
3. Établissez des objectifs précis - que devrions-nous suivre exactement?
Je pense que la plupart des concepteurs / clients ignorent cette étape, mais l'un des aspects les plus importants de la conception pour les deux parties est de comprendre les objectifs du produit que vous concevez. Nous avons tendance à sauter directement dans les pixels et à étoffer rapidement l'interface utilisateur du projet. S'il s'agit d'un tout nouveau site Web ou d'une nouvelle fonctionnalité, veillez à définir clairement les objectifs que vous souhaitez atteindre en premier.
Puisque tout est traçable, parlez des points exacts que vous allez suivre. Par exemple, cela peut aller de nouvelles inscriptions à un certain nombre de clients utilisant Paypal plutôt que des achats avec des cartes de crédit. Assurez-vous toujours de savoir à quelle hauteur vous visez au début!
(Vous en aurez de toute façon besoin pour configurer des entonnoirs sur Mixpanel plus tard dans ce processus.)
4. Configurez un dossier de projet et commencez à créer un moodboard
Il y a beaucoup de sites d'inspiration - Dribbble , Behance , Pttrns etc. Il est très facile de trouver des projets similaires à celui sur lequel vous travaillez. De plus, il existe peut-être déjà une solution à un problème que vous rencontrez et que vous essayez de résoudre.
Lorsque je commence à travailler sur un nouveau projet, je configure toujours un dossier avec des dossiers nommés - Fichiers source , Écrans et Export , Inspiration et ressources . Je sauvegarde tout ce que je trouve sur Internet dans le dossier Inspiration pour pouvoir l'utiliser plus tard pour créer des moodboards de base. Ce dossier peut être rempli de tout, des plug-ins, des échantillons ou même des études de cas complètes de Behance.
Va bas fidélité
5. tableau blanc
Si nous voulons ajouter une nouvelle fonctionnalité ou redéfinir un processus, nous nous réunissons et tout le monde à la réunion commence à dessiner des idées sur un tableau blanc, un papier ou même un iPad. Cette action nous permet de mettre tout le monde dans l’équipe dans la position du concepteur. Plus tard, nous nous retrouvons avec deux options de conception pour voir laquelle fonctionne le mieux.
Nous essayons toujours de parcourir toute l'expérience et de discuter de la plupart des cas extrêmes au cours de cette partie du processus. Il est vraiment crucial de s’y attaquer maintenant plutôt que pendant la phase de conception, ou pire encore, pendant la phase de développement. C'est quand vous pouvez perdre beaucoup de temps et d'énergie.
6. Tracez tous vos écrans (quelles données un utilisateur doit-il saisir)
C'est le moment d'aller au-delà du tableau blanc et de répertorier toutes les entrées et les histoires de l'utilisateur. Ecrivez exactement ce que l'utilisateur doit insérer dans un écran particulier et comment un utilisateur peut atteindre ses objectifs.
7. Notez tous les états possibles
Étant donné que tous les tableaux de bord, applications ou sites Web ont des états différents, c'est une autre étape importante à ne pas oublier.
Lors de la conception, nous devons être sûrs de les aborder tous. Il est intéressant d'avoir des graphiques brillants et des images de profil sympas dans nos fichiers Sketch ou PSD. Cependant, il est fort probable que les utilisateurs verront le côté opposé de votre application. Surtout quand ils viennent sur votre produit. Il faut être préparé. Vous trouverez ci-dessous un exemple de la manière dont nous traitons les états vides dans l'un de nos composants de données.
8. Préparez votre premier diagramme
Tout cela conduit à la dernière partie de la faible fidélité. Grâce aux résultats de la tâche du tableau blanc, nous connaissons maintenant tous les états possibles, les entrées et les objectifs des utilisateurs. Pour résumer toutes les interactions, je crée un diagramme et pour être honnête, j'ai souvent changé le style: passer des fichiers d'esquisse avec des mises en page tramées à des rectangles symbolisant chaque page avec leurs noms ci-dessous. Cela étant dit, le processus a toujours été douloureux, je me retrouve généralement dans une situation où nous voulons changer ou ajouter quelque chose ultérieurement. Avec ces solutions, je suis généralement obligé de faire beaucoup plus d'étapes; comme changer la position des lignes, des flèches et des images.
Récemment, j'ai utilisé Camunda Modeler , qui n'est pas exactement un outil de conception; c'est une application simple pour créer des diagrammes techniques. Ce qui semble étrange, mais cette application est développée pour vous aider à construire des diagrammes de base. Plus important encore, tout ce qui est créé est complètement évolutif. Vous pouvez facilement faire glisser et déposer n'importe quel point et cela créera automatiquement des lignes et des flèches pour vous. Vous pouvez également choisir parmi différents types de points qui peuvent être utiles pour mettre en évidence, par exemple, lorsqu'un utilisateur reçoit un courrier électronique d'Intercom. Camunda exporte vers SVG, ce qui facilite la coloration des points traçables dans Sketch.
La conception du travail
9. Moodboard
Je suis capable de commencer avec la création de mood board, tout en collectant toutes les images dans mon dossier Inspiration. J'utilise des tableaux d'humeur principalement pour discuter de mes pensées avec des collègues et décrire certaines des idées visuelles avant de commencer par le processus de pixels.
10. Premier projet
La conception est toujours un processus continu. Vous allez beaucoup parcourir votre chemin vers un excellent résultat. La première ébauche est également un moyen de recueillir des commentaires. Vous n'avez pas à venir au pixel de conception parfaite pour commencer à recevoir des commentaires de vos coéquipiers, clients ou utilisateurs potentiels. Pour avoir leurs premières réflexions et lancer une discussion, je mélange généralement les écrans de nos designs actuels. Cela nous permet de commencer à jouer avec des designs réalistes en moins d'une journée. Vous pouvez faire un premier prototype simple pour tester si les choses se connectent bien ensemble.
11. Écrivez votre copie
La copie est l'un des aspects clés des décisions des utilisateurs et je le considère comme un élément crucial de la conception. Il n'y a rien de pire qu'un beau design avec des dialogues confus où les utilisateurs ont du mal à trouver la prochaine étape.
12. Premier test interne
Avec votre première ébauche, vous pouvez rapidement créer un prototype dans merveille ou Invision . C'est quelque chose que j'ai commencé à faire récemment et il s'avère que c'est un autre aspect de validation incroyable. Avec un prototype, vous pouvez désormais facilement passer un appel avec 3 ou 4 personnes de votre équipe et partager le prototype avec eux et essayer de poser quelques questions tout en testant des flux / scénarios particuliers.
De cette façon, vous pouvez facilement tester vos compétences en matière de questions et évidemment tester vos décisions de conception sur des utilisateurs réels sans vous soucier du gaspillage de ressources et de temps. J'ai tendance à choisir des personnes peu impliquées dans le développement de tableaux de bord. Essayez également d'éviter de regarder quelqu'un qui a déjà eu la chance de jouer avec le prototype auparavant.
13. étiquette
Nous savons tous combien il est difficile de rester rangé. Comment livrer une autre fonctionnalité? Cela conduit généralement à un désordre Sketch ou fichiers PSD. J'ai beaucoup appris sur les différences entre travailler en tant que designer unique dans une startup, travailler en équipe ou travailler sur mes propres produits numériques.
Lorsque vous travaillez en équipe, pensez à vos PSD comme si vous les créiez pour quelqu'un d'autre. J'utilise la règle selon laquelle si vous avez plus de 8 couches dans un dossier, vous devez en créer une nouvelle.
J'ai trouvé un excellent plugin pour Sketch, ce qui m'a permis d'économiser des heures pendant que je travaillais sur mes kits d'interface utilisateur: Le renommer .
Astuce: Mettez tout sur la toile. J'ai toujours eu du mal à concevoir de belles têtes alors que le reste de la toile était blanc. Tout en concevant, j'ai appris à mettre tout le contenu en place en premier - il suffit de jouer avec la mise en page et la typographie. Il est beaucoup plus facile de concevoir de jolis détails et de jouer avec le concept dans son intégralité.
14. Créez des éléments d'interface utilisateur et commencez à jouer avec Lego
Je suis probablement en retard à la fête et cela sonnera déjà dépassé pendant que je l'écris. La raison pour laquelle nous n’avons pas fait de wireframing lors de notre voyage est simple. Sketch 39 vient avec quelque chose que j'ai trouvé incroyable et qui est "des formes avec des propriétés de redimensionnement". C'est quelque chose qui facilite la conception pour tout le monde dans l'équipe. Notre fichier Sketch est un simple glisser-déposer. Vous pouvez facilement donner à chacun de vos coéquipiers une toile vierge et créer des brouillons quasi-fidèles. Grâce à cela, nous pouvons sauter tous les outils de wireframing et commencer avec des pixels presque réels.
Cela va de pair avec le fait que nous sommes en mesure de convertir des wireframes en conceptions réelles. Tout PM peut créer une structure filaire, puis je peux facilement le reprendre et me transformer en haute fidélité.
Actifs & Livraison
Lorsque vous en avez fini avec la conception et l'itération en fonction des premiers commentaires, vous n'avez pas encore terminé. Maintenant vient le temps de remettre vos conceptions à vos ingénieurs / développeurs.
15. Spécifications
L'un de mes principaux objectifs est de pouvoir toujours communiquer mes décisions avec l'équipe et de réduire autant que possible les difficultés pour nos développeurs afin de leur fournir les meilleures ressources possibles. C'est pour moi la partie la plus importante de mon travail en tant que designer.
Comme nous avons documenté toutes les interactions et que tout est prêt depuis le début de notre processus, la création de spécifications est un jeu d'enfant. J'ai tendance à écrire des spécifications dans Google Docs ou sous les écrans des fichiers Sketch. Il est intéressant de manipuler vos conceptions avec des explications sur toutes les fonctionnalités pour que tout le monde puisse récupérer votre fichier ultérieurement.
16. diagramme
Cette technique est pratique pour imprimer des dessins et en discuter avec l'équipe. Mais aujourd'hui, je pense qu'il y a de meilleures options. Comme avoir préparé le prototype final.
17. Prototype final
Une des choses clés pour moi est de toujours avoir toutes les interactions prêtes dans le prototype. Je finis généralement par avoir 3-5 prototypes en route vers le final pour ces petites sessions avec des coéquipiers ou pour montrer des flux particuliers. J'ai tendance à préparer tous les états de Sketch dans une planche graphique, puis à reproduire ces plans pour que chaque état soit prêt lors de l’exportation.
Il est bon d'ajouter des commentaires à certaines parties de vos conceptions pour étendre vos spécifications, de sorte que même un rédacteur puisse facilement vérifier les pixels et les flux réels si chaque copie et chaque boîte de dialogue fonctionnent correctement.
18. Quicktime Video> Notes
Lorsque je ne présente pas des éléments à Hangout à l'équipe ou à un client, je vous envoie une vidéo de partage d'écran sur le prototype et m'expliquant tout ce que j'ai conçu. C'est une bonne confirmation pour moi avant toute présentation que je connaisse la réponse à toute question et les interactions fantaisistes possibles que j'ai décidé de concevoir. Pourrait également être bien utilisé lorsque vous travaillez dans des équipes distantes. Tout le monde a la possibilité de rejouer l'intégralité de l'interaction en pensant à tout moment.
19. Animer
Comme une touche finale agréable, vous pouvez utiliser Effets secondaires ou Principe . Il est bon d’expliquer comment vous voulez que cela bouge ou non.
20. Guide de Style
Un autre point crucial pour les ingénieurs est de savoir comment les choses vont réagir dans différents scénarios. Pensez aux états d'erreur de l'entrée ou à l'endroit où afficher les messages d'erreur. De la même façon, l’état désactivé d’un bouton d’envoi apparaîtra, où placer un spinner, etc.
Il est très facile pour les ingénieurs de parcourir les éléments de style et de planche graphique de Symbols un par un avant même de commencer à coder tous les écrans grâce à un fichier Sketch en tant que blocs Lego.
Test final
Comme nous en avons fini avec nos ingénieurs, nous pouvons nous concentrer sur la dernière partie du processus - tester nos décisions!
21. Inspection / HotJar
Une fois que les conceptions sont transformées en code de travail, n'oubliez pas d'inclure votre Inspection ou HotJar Extraits JS. Je suis toujours excité (ou frustré) de voir comment les utilisateurs naviguent dans notre tableau de bord ou ce qu'ils font sur ma page de portfolio. Inspectlet est génial pour capturer toute votre session utilisateur. Fonctionne très bien pour les projets plus importants.
Il est livré avec un filtrage "/ page" simple qui vous permet de regarder des sessions d'une fonctionnalité ou d'un flux particulier.
22. Mixpanel
Mixpanel fonctionne parfaitement pour valider nos objectifs (ceux que nous avons mis en place au tout début de notre processus). Mixpanel permet de voir combien d'utilisateurs remplissent des flux particuliers. Combien d'utilisateurs ont abandonné avant de configurer le compte. Combien de personnes sont passées de la page de destination principale au magasin et à notre produit le plus précieux.
23. Google Analytics
Je ne suis pas capable de coder de grandes choses, mais au moins je suis capable de travailler avec des fichiers CSS et avec du code simple. Dernièrement, j'ai été intéressé de voir où les utilisateurs cliquent et en regardant les cartes de chaleur Hotjar, j'ai donc décidé d'installer également un outil de suivi des clics de base dans Google Analytics. Vous pouvez facilement suivre tous les clics des utilisateurs sur votre site Web.
Cela m'aide à tracer facilement le comportement des utilisateurs. Par exemple, j'ai découvert que les utilisateurs utilisaient la navigation supérieure sur mon site 5 fois plus que le lien mis en surbrillance dans le texte d'introduction. Malheureusement, il ne compte pas les clics des utilisateurs avec AdBlock.
24. Intercom
Lorsque nous avons convenu de nos flux initiaux, nous parlions d'une partie des flux où l'utilisateur reçoit un email de Interphone . Notre responsabilité ici est de s’assurer que toute copie et le message lui-même ont un sens et sont réellement utiles pour le visiteur. Assurez-vous que vos e-mails guident votre utilisateur vers vos résultats optimaux et essayez toujours de fournir des articles de support et des informations spécifiques sur la manière de continuer dans le flux.
Les derniers mots
25. Laisser Dribbble derrière
De ce que j'ai appris et de la façon dont mon design a changé au cours des 4 dernières années, j'ai atteint le point où Dribbble n'est pas forcément l'endroit où vous voulez créer vos créations. J'ai toujours cherché à avoir de beaux pixels avec des photos de profil sexy, mais ce n'est pas ce dont les utilisateurs réels ont besoin et vont utiliser.
Voici un exemple, à gauche, vous verrez quelque chose que j'ai conçu pour Dribbble. À droite, vous verrez quelque chose que j'ai conçu une fois que j'ai passé du temps à regarder les gens éditer leurs profils et réalisé que ma vision ne livrait pas ce dont ils avaient besoin.
Vous pouvez recevoir 500 «J'aime» pour une animation d'une pomme de terre ou d'une pizza glissante, mais ce qui compte vraiment, c'est que vos utilisateurs trouvent comment gérer la fréquence des emails de l'entreprise ou filtrer leurs analyses de performance.
[- Cet article a été publié à l'origine sur médium , republié avec la permission de l'auteur. -]