Note de l'éditeur: Lubos Volkov est un designer expérimenté qui a travaillé à distance avec un grand nombre de développeurs tout au long de sa carrière. En tant que concepteur de _product Chez ApeeScape, Lubos interagit au jour le jour avec les membres de l'équipe de divers départements, y compris le développement, 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 concepteur à développeur, UI et UX qui mèneront à des produits de qualité supérieure livrés avant même la date limite.

Travaillez avec un grand designer o L'équipe de conception peut être une ressource 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 faire, le développeur UX , pour vous assurer que le produit que vous avez construit est livré dans les délais sans sacrifier la qualité de l'interface et l'expérience utilisateur?

comment tester votre code

Ma réponse: laissez vos designers s'impliquer depuis le premier jour et maintenez-les impliqués tout au long du processus de développement UI / UX. Assurez-vous que vous établissez des lignes de communication claires et qu'il existe un processus de messagerie cohérent entre les développeurs et les concepteurs.

Vous avez tout ce dont vous avez besoin?

La pire chose qui puisse arriver lors de la mise en œuvre d'une interface utilisateur est manque de communication entre le concepteur et le développeur (sauf s'il s'agit de la même personne) . Certains designers penseront que leur travail est terminé une fois qu'ils auront soumis le PSD, mais en réalité, c'est faux! Vous devez toujours avoir un processus de communication qui dure tout au long de l'envoi des PSD.

Projets où le designer seul soumet les fichiers de conception et le développeur seul les met en œuvre, ce sont des projets qui simplement échouer.

Dans de nombreux cas, il faudra du temps avant que les concepteurs ne voient une mise en œuvre finale de l'UX / UI. À sa grande surprise, le construire il est souvent complètement différent de la présentation initiale. (Cela m'est arrivé plus d'une fois. J'ai soumis les fichiers originaux avec des descriptions complètes et des prototypes d'interaction, mais quand j'ai finalement vu le projet quelques mois plus tard, il avait une structure différente, des couleurs différentes et aucune interaction en place.)

Certains designers peuvent me détester pour cela, mais ce processus de travail de conception nécessite beaucoup de travail «supplémentaire» de votre part. Cependant, créer et fournir des informations et des ressources de manière organisée est préférable pour le projet et l'équipe à grande échelle.

Si un développeur a tout ce dont il a besoin sous les yeux, le processus s'accélérera. Un PSD propre et organisé ne suffit pas.

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

Ce sont les excellentes ressources qu'un développeur doit attendre d'un concepteur pour implémenter Conception UX / UI :

• Fichier original - Le concepteur doit mettre tous les éléments de l'application dans un seul fichier. Ce fichier doit contenir des boutons, cases à cocher , Styles de entête , polices, couleurs, etc. Fondamentalement, sur la base des informations contenues dans ce fichier, le développeur devrait être en mesure de recréer n'importe quelle interface à partir de zéro. Il est beaucoup plus facile pour un développeur d'exporter un élément d'un seul PSD que de rechercher plusieurs fichiers.

  
  
  

• Ressources - Assurez-vous que les développeurs disposent de toutes les ressources nécessaires, car les fichiers originaux ne doivent plus être touchés.

• Prototypes d'interaction - L'époque des 'écrans statiques' n'est plus. Utiliser des animations et des interactions intelligentes pour fluidifier le processus UX et le mettre en œuvre est une pratique très courante aujourd'hui. Mais vous ne pouvez pas simplement dire 'cela va glisser de la gauche' à un développeur. Le concepteur doit créer le prototype pour cette interaction et doit inclure des informations telles que la vitesse, la vitesse, etc., et le concepteur est censé spécifier chacune de ces valeurs.

  
  
  

• La convention de dénomination - Il faut une structure pour nommer les différents fichiers et les garder organisés. Cela facilitera les choses pour vous deux lorsqu'il s'agira de naviguer dans les fichiers. (Personne n'aime avoir des choses cachées dans un dossier invisible).

• Ressources HDPI - Nous vivons des «temps difficiles», avec la grande densité d'écrans. Assurez-vous que le concepteur fournit les images dans toutes les résolutions requises, afin que votre application soit bonne partout. Remarque: utilisez autant de vecteurs que possible, cela vous aidera beaucoup (svg).

  Grèce crise de la dette expliquée en termes simples

S'il y a quelque chose que vous ne trouvez pas pendant la mise en œuvre, n'ayez pas peur; Parlez au concepteur et demandez-le. Ne sautez ou ne lésinez jamais sur quoi que ce soit! Ils sont membres de la même équipe et leur travail est de fournir le meilleur produit possible. Si le concepteur échoue, vous aussi.

Travail en cours

Faites appel à vos concepteurs lors du processus d'implémentation UI / UX. Ne les mettez pas de côté en espérant qu'ils «pousseront simplement les pixels». Un concepteur voit les innovations possibles avant même que la mise en œuvre ne commence. Profitez-en, tenez-les informés. Donnez-leur un accès pour visualiser et tester les travaux en cours. Je suis sûr que personne n'aime partager des éléments inachevés, mais il est tellement plus facile d'apporter des modifications au milieu de la construire pour le faire une fois que c'est fini. Cela vous fera gagner du temps et évitera des travaux inutiles. Une fois que vous avez donné au concepteur une chance de tester le projet, demandez-lui de dresser 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 changera l'apparence d'une application? Parlez-en avec lui designer et ne permettez jamais à un développeur de modifier la conception sans consulter le concepteur. Ce processus de travail de conception vous aidera à vous mettre sur la bonne voie. Un grand concepteur a une raison pour chaque élément à l'écran, et supprimer une seule pièce sans comprendre pourquoi elle est là pourrait ruiner l'expérience utilisateur du produit.

Conception de gestion de projet UI / UX

Les concepteurs penseront que les développeurs peuvent donner vie à un design en une journée, voire une heure. Mais comme un bon design, un bon développement demande du temps et des efforts. Gardez votre concepteur anxieux juste un peu loin pour lui laisser voir au moins le processus de construire . Utiliser un logiciel externe pour gérer un projet, pour vous assurer que chaque avis a été vu, est un excellent moyen de vous assurer de ne rien oublier d'important ou de toute information qui a été discutée dans une conversation Skype ou par courrier électronique. Et soyons honnêtes: parfois, les changements et les activités ne sont jamais communiqués jusqu'à ce qu'ils se produisent.

Quelle que soit la solution que vous utilisez, assurez-vous de Choisissez un processus de travail que toute l'équipe peut adopter et utiliser de manière cohérente. Dans notre équipe, j'ai essayé de proposer Basecamp car c'est ce que j'utilisais, mais nos développeurs front-end pensaient qu'il avait des fonctionnalités limitées. Ils utilisaient déjà d'autres logiciels de gestion de projet pour suivre Bugs , progrès, etc., comme JIRA, GitHub et même Evernote. J'ai compris que le processus de gestion et de suivi des informations et de la communication devait être aussi simple que possible, j'ai donc dû migrer mon processus de travail de conception d'interface utilisateur vers JIRA. Je voulais m'assurer qu'ils comprenaient mon processus de travail et mes progrès, mais je ne voulais pas qu'ils sentent que le design serait autre chose que du management.

Voici quelques suggestions d'outils de gestion de projet:

• Camp de base - Assure le suivi des tâches de conception et de développement en cours et vous permet de les exporter facilement. Il dispose également d'un client mobile très simple.

• JIRA - Une plateforme entièrement personnalisable où vous pouvez facilement créer des tableaux de bord pour suivre les activités telles que le back-end, le front-end, la conception, etc. Et je pense que même si le client mobile est un peu faible, c'est une excellente solution pour les grandes équipes qui incluent suivi des bogues .

• E-mail - C'est idéal pour démarrer une conversation ou envoyer des images. Mais s'il vous plait, fait attention si vous utilisez des e-mails pour envoyer des critiques ou des 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 industrie sont Basecamp et JIRA. Encore une fois, le plus important est de trouver un système de gestion de projet que tout le monde peut utiliser de manière cohérente, sinon c'est inutile.

Conception et développement UX réunis

Le concepteur et le développeur forment une puissante combinaison. Assurez-vous de partager les idées d'interface utilisateur et d'UX le plus souvent possible. Les développeurs doivent être prêts à aider le concepteur à trouver des idées, tandis qu'un concepteur doit avoir au moins une compréhension de base des technologies utilisées.

Convenez ensemble du processus de travail de conception. Ne vous contentez pas d'implémenter aveuglément ce que vos designers créent. Soyez proactif et créez quelque chose qui a l'air beau mais qui offre une excellente expérience utilisateur en tirant parti de vos deux perspectives différentes. Les concepteurs sortiront des sentiers battus et verront des animations, des idées, des pixels et des boutons fous, tandis que les développeurs verront la technologie, les limites et les vitesses de choc.

points d'arrêt de résolution de conception de sites Web réactifs

D'après mon expérience, chaque concepteur devient fou de pixels et de concepts sympas, mais parfois un concepteur arrive au point où il a une idée, mais le développeur les arrête et dit: «Cela ne fonctionnera pas bien une fois que c'est fait. Il y aura des problèmes de performances de consommation ». Récemment, je pensais implémenter une fenêtre modale avec un arrière-plan flou, mais ce flou a rendu les temps de chargement de l'image très lourds. Pour résoudre ce problème, le développeur a suggéré d'utiliser une simple couche de couleur, qui se chargerait plus rapidement et maintiendrait la qualité de l'image. Les concepteurs font attention: ne compromettez pas l'expérience utilisateur pour la conception .

Le cercle des observations

Les observations des concepteurs sont cruciales et doivent se produire le plus souvent possible. C'est probablement le plus exigeant en temps (et en énergie) de votre part, mais vous devrez l'accepter pour obtenir des résultats parfaits. Voici quelques conseils sur le flux de travail de conception UX et UI pour rendre vos observations parfaites.

• Soyez visuel - Les commentaires et critiques doivent être aussi précis que possible. La meilleure façon de le faire avec précision est de prendre une capture d'écran et de mettre en évidence le problème que vous souhaitez résoudre. Ce serait mieux si vous aviez des photos d'un mise en œuvre actuelle vs à quoi cela devrait ressembler . La communication visuelle éliminera 50% des questions.

• Soyez descriptif - Les observations doivent être exactes. Vous ne pouvez pas simplement dire 'déplacer ce bouton plus haut'. Le concepteur doit toujours spécifier combien de pixels doivent être déplacés vers ledit bouton, quel espacement doit être utilisé, etc. Incluez toujours une explication du problème et la solution appropriée. Cela va prendre beaucoup de temps, mais ça vaut le coup.

• Sois patient - Gardez à l'esprit que le concepteur et le développeur ne partagent pas la même approche. Si les développeurs ne comprennent pas pleinement l'idée d'un concepteur, cela peut conduire à de mauvaises décisions. Dans chaque cas, les deux parties devront être patientes et disposées à aider les autres membres de l'équipe. C'est vraiment difficile parfois, mais c'est une compétence que chaque concepteur et développeur devrait apprendre.

Il est tout à fait évident que ces éléments doivent être combinés pour les rendre plus appropriés à un processus de travail de conception. Mais quel outil pourrait vous aider à soumettre des critiques et des commentaires?

• Email - Je n'ai pas peur de dire que c'est la plateforme la plus courante pour soumettre des commentaires. Vous pouvez l'utiliser si vous suivez quelques règles simples:
  • Tout d'abord, utilisez un seul fil pour les observations. Ne mettez pas chaque modification dans un nouvel e-mail avec un titre différent.
  • Deuxièmement, créez une liste de correctifs. Essayez de vous asseoir et de réfléchir à chaque modification ou correction que vous découvrez.
  • Et enfin, n'envoyez pas de listes groupées à la fois. Essayez de le séparer en petites listes individuelles et allez-y partie par partie.

• Skype (Hangouts) - La voix est vraiment un outil puissant pour offrir une critique constructive. Vous pouvez immédiatement poser et répondre aux questions. Mais assurez-vous de prendre des notes et de les envoyer dans le prochain e-mail après l'appel.

• Outils collaboratifs - Pour être honnête, je ne suis pas un grand fan des outils de collaboration. Mais ils ont un grand avantage: ils vous aident à obtenir des commentaires en place. Poser des questions et y répondre est rapide et y reste pour toujours.

Voici quelques-uns des meilleurs outils:

modèle de document de conception pour le développement de logiciels

Annotations de critiques et observations:

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

Outils de collaboration:

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

conclusion

Établissez un système de processus de travail de conception 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 grandes idées, de prédire 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 ensemble équipe , Pour apprendre ensemble et créer des tutoriels comme celui-ci!