Un didacticiel sur le workflow de conception pour les développeurs : offrez une meilleure interface utilisateur/expérience utilisateur à temps

Note de l'éditeur : Lubos Volkov est un designer expérimenté qui a travaillé à distance avec de nombreux développeurs tout au long de sa carrière. En tant que concepteur de produits chez Toptal, Lubos interagit quotidiennement avec les membres de l'équipe de divers départements, notamment l'ingénierie, la communauté et le contenu. C'est un designer talentueux dont les compétences en communication contribuent à son succès. Dans ce didacticiel, Lubos partage ses expériences et ses moyens d'optimiser les flux de travail UI et UX concepteur-développeur qui conduisent à des produits de qualité livrés dans les délais ou avant.

Travailler avec un grand designer ou une équipe de conception peut être un atout inestimable pour n'importe quelle équipe. Avec des canaux de communication clairs et une coopération fluide, le concepteur doit vous donner tout ce dont vous avez besoin pour accélérer le processus de construction et limiter autant que possible les questions et la confusion.

Que pouvez-vous, le développeur UX, faire pour vous assurer que le produit que vous avez construit est livré en temps opportun sans sacrifier la qualité de l'interface utilisateur et de l'expérience utilisateur ?

Ma réponse : impliquez vos concepteurs dès le premier jour et maintenez-les impliqués tout au long du processus de développement UI/UX. Assurez-vous d'établir des lignes de communication claires et des messages cohérents entre les développeurs et les concepteurs.

Avez-vous tout ce dont vous avez besoin ?

La pire chose qui puisse arriver lors de la mise en œuvre d'une interface utilisateur est __ le manque de communication entre le concepteur et le développeur __ (à moins qu'il ne s'agisse de la même personne). Certains concepteurs pensent que leur travail est terminé une fois le PSD envoyé. Mais, c'est juste faux ! Vous devez créer un flux de travail de communication permanent qui dure au-delà de la livraison des PSD.

Dans de nombreux cas, il faudra du temps avant que les concepteurs ne voient la mise en œuvre réelle de la conception UI/UX. À leur grande surprise, la construction est souvent complètement différente de la soumission initiale. (Cela m'est arrivé plus d'une fois. J'ai envoyé des fichiers source avec des descriptions complètes et des prototypes d'interaction, mais quand j'ai finalement vu le projet, des mois plus tard, il avait une mise en page différente, des couleurs différentes et aucune interaction en place.)

Certains designers pourraient me détester pour cela, car ce flux de travail de conception nécessite beaucoup de travail « supplémentaire » de leur part. Cependant, créer et fournir des ressources et des informations complètes, de manière organisée, est préférable pour le projet et l'équipe dans son ensemble.

Si un développeur a tout ce dont il a besoin devant lui, cela accélérera le processus. Un PSD propre ne suffit pas.

De quoi avez-vous besoin pour faire le travail de manière efficace et efficiente ?

Voici les atouts qu'un développeur doit attendre du concepteur pour mettre en œuvre une conception UI/UX :

• Fichier de ressources - Le concepteur doit placer chaque élément de l'application dans un seul fichier. Ce fichier doit contenir des boutons, des cases à cocher, des styles d'en-tête, des polices, des couleurs, etc. Fondamentalement, sur la base des informations contenues dans ce fichier, le développeur doit pouvoir recréer n'importe quelle interface à partir de zéro. Il est beaucoup plus facile pour un développeur d'exporter n'importe quel élément à partir d'un seul PSD, que de le rechercher dans plusieurs fichiers.

• Actifs - Assurez-vous que les développeurs obtiennent tous les actifs requis, car les fichiers source ne doivent plus être touchés.

• Prototypes d'interaction - L'époque des « écrans statiques » est révolue depuis longtemps. L'utilisation d'interactions et d'animations intelligentes pour faciliter le flux de travail et la mise en œuvre de la conception UX est désormais une pratique courante. Mais, vous ne pouvez pas simplement dire "cela va glisser de la gauche" à un développeur. Le concepteur doit créer le véritable prototype de cette interaction. Le prototype doit inclure des informations telles que la vitesse, la vélocité, etc., et le concepteur doit spécifier chacune de ces valeurs.

• Convention de nommage - Demandez une structure de nommage de fichier pour garder les choses organisées. Cela facilitera la navigation dans les fichiers pour vous deux. (Personne n'aime avoir des choses cachées dans un dossier d'arrière-plan.)

• Ressources HDPI - Nous vivons des « temps difficiles », avec l'énorme densité des écrans. Assurez-vous que le concepteur fournira des images dans toutes les résolutions requises, afin que votre application soit nette partout. Remarque : utilisez autant de vecteurs que possible ; ça va beaucoup t'aider (svg).

Si vous constatez qu'il manque quelque chose d'autre lors de la mise en œuvre, n'ayez pas peur ; ping le concepteur et demandez-le. Ne sautez jamais et ne lésinez jamais ! Vous êtes membres de la même équipe et votre travail consiste à fournir le meilleur produit possible. Si un designer échoue, vous échouez également.

Travail en cours

Utilisez vos concepteurs pendant le processus de développement UI/UX. Ne les gardez pas à l'écart en vous attendant à ce qu'ils « poussent les pixels ». Un concepteur voit les innovations possibles avant même que la mise en œuvre ne commence. Pour en profiter, tenez-les au courant. Fournissez-leur un accès pour voir et tester le travail en cours. Je suis bien conscient que personne n'aime partager des projets inachevés. Mais, il est beaucoup plus facile d'apporter des modifications au milieu d'une construction qu'à la fin. Cela peut vous faire gagner du temps et éviter des travaux inutiles. Une fois que vous avez donné au concepteur l'occasion de tester le projet, demandez-lui de compiler une liste de problèmes et de solutions, et de suggérer des améliorations.

Que faire lorsqu'un développeur a une idée qui changerait l'apparence d'une application ? Discutez-en avec le concepteur et ne laissez jamais un développeur modifier le design sans consulter le concepteur. Ce flux de travail de conception garantira que la construction reste sur la bonne voie. Un grand designer a une raison pour chaque élément à l'écran. Retirer une seule pièce, sans comprendre pourquoi elle est là, pourrait ruiner l'expérience utilisateur du produit.

Gestion de projet de conception UI/UX

Les designers pensent que les développeurs peuvent donner vie à un design en une journée, voire en une heure. Mais, comme un bon design, un bon développement demande du temps et des efforts. Gardez votre concepteur anxieux à distance en lui permettant de voir la progression de la construction. L'utilisation d'un logiciel de gestion de projet externe, pour s'assurer que chaque révision est prise en compte, est un excellent moyen de s'assurer que vous ne manquez pas d'informations importantes discutées dans une conversation par e-mail ou une session Skype. Et soyons honnêtes : parfois, les changements et les activités ne sont même pas communiqués avant qu'ils ne se produisent.

Quelle que soit la solution que vous utilisez, assurez-vous de choisir un processus de flux de travail que toute l'équipe adoptera et utilisera de manière cohérente. Dans notre équipe, j'ai essayé de pousser Basecamp parce que c'est ce que j'utilisais, mais nos développeurs frontaux pensaient qu'il avait des fonctionnalités limitées. Ils utilisaient déjà d'autres logiciels de gestion de projet pour suivre les bogues, les progrès, etc., tels que JIRA, GitHub et même Evernote. J'ai compris que le suivi et la gestion de projet devaient rester aussi simples que possible, j'ai donc migré mon flux de travail de conception d'interface utilisateur vers JIRA. Je voulais m'assurer qu'ils comprenaient mon flux de travail et mes progrès, mais je ne voulais pas qu'ils aient l'impression que le design était une autre chose à gérer.

Voici quelques suggestions pour un outil de gestion de projet :

• Basecamp - Suit la progression des tâches liées à la conception et au développement et vous permet facilement d'exporter des tâches. Il dispose également d'un simple client mobile.
• JIRA - Une plate-forme entièrement personnalisable où vous pouvez facilement configurer des tableaux personnalisés pour différents domaines. Par exemple, organisez des tableaux pour suivre les activités telles que le back-end, le front-end, la conception, etc. Je pense que le client mobile est un peu faible, mais c'est une excellente solution pour les grandes équipes et inclut une fonction de suivi des bogues.
• E-mail - C'est idéal pour mettre en place une conversation ou envoyer des images. Mais s'il vous plaît soyez prudent si vous utilisez le courrier électronique pour les commentaires. Les choses peuvent facilement se perdre.

Vous pouvez également essayer Trello et d'autres logiciels de gestion de projet, mais les plus utilisés dans notre secteur sont Basecamp et JIRA. Encore une fois, la chose la plus importante est de trouver un système de gestion de projet que tout le monde peut utiliser de manière cohérente, sinon c'est un point discutable.

La conception et le développement UX se rejoignent

Le concepteur et le développeur sont une combinaison puissante. Assurez-vous de réfléchir ensemble à l'UI et à l'UX aussi souvent que possible. Les développeurs doivent être disposés à aider un concepteur à concevoir des idées, tandis qu'un concepteur doit avoir au moins une connaissance de base de la technologie utilisée.

Déterminez ensemble le flux de travail de conception. Ne vous contentez pas de mettre en œuvre aveuglément ce que vos concepteurs créent. Soyez proactif et créez quelque chose qui est beau et qui offre une excellente expérience utilisateur, en tirant parti de vos deux perspectives différentes. Les concepteurs sortent des sentiers battus et voient des animations, des idées, des pixels et des boutons fous, tandis que les développeurs voient la technologie, les ralentisseurs et les limites.

D'après mon expérience, chaque designer est fou de pixels et de concepts intéressants. Mais parfois, un concepteur arrive à un point où il a une idée, mais le développeur repousse et dit : « Cela ne fonctionnera pas bien une fois qu'il sera implémenté. Il y aura des problèmes de consommation de performances ». Récemment, je cherchais à implémenter une fenêtre modale avec un arrière-plan flou, mais ce flou entraînait des temps de chargement importants. Pour résoudre ce problème, le développeur a suggéré d'utiliser une superposition régulière en couleur, qui se charge plus rapidement et conserve la qualité de l'image. Concepteurs, faites attention : ne compromettez pas l'expérience utilisateur pour la conception.

Boucle de rétroaction

Les commentaires du concepteur sont cruciaux et doivent se produire aussi souvent que possible. C'est probablement la chose qui vous prendra le plus de temps (et d'énergie). Mais, vous devez l'adopter pour être en mesure de fournir des résultats parfaits. Voici quelques conseils de conception UX et UI sur la façon de rendre vos commentaires parfaits.

• Soyez visuel - Les commentaires doivent être aussi précis que possible. La meilleure façon de le rendre précis est de prendre une simple capture d'écran et de mettre en évidence un problème que vous souhaitez résoudre. Ce serait encore mieux si vous aviez des photos d'une implémentation actuelle par rapport à ce à quoi elle est censée ressembler . La communication visuelle éliminera 50% des questions.

• Soyez descriptif - Les commentaires doivent être précis. Vous ne pouvez pas simplement dire "déplacez ce bouton vers le haut". Le concepteur doit spécifier de combien de pixels un bouton doit se déplacer, quel rembourrage doit être utilisé, etc. Incluez toujours une explication du problème et la solution appropriée. Cela prendra beaucoup de temps, mais cela en vaut la peine.

• Soyez patient - Gardez à l'esprit que le concepteur et les développeurs ne partagent pas le même objectif. Si les développeurs ne comprennent pas entièrement l'idée d'un concepteur, cela peut entraîner de la confusion et de mauvaises décisions. Dans tous les cas, les deux parties doivent être patientes et disposées à aider les autres membres de l'équipe. C'est parfois très difficile, mais c'est une compétence non technique que chaque concepteur et développeur devrait acquérir.

Il est assez évident que ces éléments doivent être combinés pour en faire un flux de travail de conception approprié. Mais, quel outil peut réellement vous aider à fournir les commentaires ?

• E- mail - Je n'ai pas peur de dire qu'il s'agit toujours de la plate-forme la plus courante pour transmettre les commentaires. Il est tout à fait acceptable de l'utiliser, si vous suivez quelques règles simples.
  • Tout d'abord, utilisez un fil de discussion unique pour vos commentaires. Ne mettez pas chaque modification individuelle dans un nouvel e-mail avec un sujet différent.
  • Deuxièmement, créez la liste des correctifs. Essayez de vous asseoir et de réfléchir à chaque modification ou correction que vous avez remarquée.
  • Et enfin, n'envoyez pas une liste énorme à la fois. Essayez de le décomposer en listes individuelles plus petites et allez-y partie par partie.

• Skype (Hangouts) - La voix est un outil vraiment puissant pour les commentaires. Vous pouvez immédiatement poser des questions et y répondre. Mais, assurez-vous de prendre des notes et d'envoyer le message de suivi (e-mail) après l'appel.

• Outils de collaboration - Pour être honnête, je ne suis pas un grand fan des outils de collaboration. Mais, ils ont un gros avantage. Ils vous aident à maintenir la rétroaction en place. Poser et répondre aux questions est rapide, et il y reste pour toujours.

Voici quelques-uns des excellents outils :

Annotation des commentaires :

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Outils de collaboration:

• http://www.invisionapp.com/
• https://basecamp.com/

Conclusion

Établissez un flux de travail de conception système et UI/UX qui maintient les lignes de communication ouvertes tout au long du processus de conception et de développement. Cela vous permettra de mettre en œuvre de bonnes idées, de prévoir les problèmes potentiels et de hiérarchiser les problèmes importants.

Le développeur et le concepteur peuvent créer de grandes choses ensemble tant qu'ils sont prêts à travailler en équipe . Apprenez les uns des autres et concevez des tutoriels comme celui-ci !