Comment les développeurs frontaux peuvent optimiser le travail des concepteurs

Cet article s'adresse principalement à vous, cher développeur frontend, qui aime implémenter des interfaces utilisateur mais qui a du mal à aligner les attentes avec les concepteurs avec lesquels vous travaillez. Peut-être êtes-vous appelé «développeur UI» ou «ingénieur UX». Quel que soit le titre que vous portez, votre travail (ainsi que le mien) ne consiste pas seulement à donner vie aux fichiers de conception. Nous sommes également chargés de combler l'écart entre les workflows de conception et de développement . Cependant, en traversant ce pont, nous sommes confrontés à de multiples défis.

Aujourd'hui, j'aimerais partager avec vous des conseils pratiques qui m'ont aidé à collaborer plus efficacement avec les designers ces dernières années.

Je crois que c'est notre travail, en tant que développeurs d'interfaces utilisateur, non seulement d'aider les concepteurs dans leur cheminement pour apprendre comment fonctionne le Web, mais aussi de connaître leur réalité et d'apprendre leur langage.

Comprendre le contexte des concepteurs UX

La plupart des concepteurs UX (également appelés concepteurs Web ou concepteurs de produits) ont fait leurs premiers pas dans le monde du design grâce à des outils tels que Photoshop et Illustrator. Peut-être étaient-ils des graphistes : leur objectif principal était de créer des logos et des identités de marque et de concevoir des mises en page pour des magazines. Ils auraient aussi pu être Marketing Designers : imprimer des panneaux publicitaires, concevoir des bannières et créer des infographies.

Cela signifie que la plupart des concepteurs UX ont passé leurs premiers jours à concevoir pour l'impression, ce qui est un paradigme totalement différent de leur support actuel, l'écran. C'était leur premier grand défi. Lorsqu'il s'agissait d'impression, les concepteurs se souciaient de l'alignement des pixels, mais sur une zone fixe (papier). Ils n'ont pas eu à composer avec une mise en page dynamique (écrans). Penser à la rupture de texte ou aux états d'interaction ne faisait tout simplement pas partie de leur travail non plus. Les concepteurs avaient également une liberté totale sur les couleurs, les images et la typographie sans contraintes de performances.

Heureusement, de nombreux efforts ont été déployés par la communauté des concepteurs UX autodidactes pour enseigner les principes fondamentaux du développement, déterminer si les concepteurs doivent apprendre à coder et comprendre comment effectuer au mieux le transfert aux développeurs. Il en va de même pour le côté développement (plus à ce sujet dans une minute). Cependant, il y a toujours des frictions entre les deux domaines.

D'une part, les concepteurs se plaignent chaque fois qu'une implémentation ne correspond pas à leurs conceptions ou se sentent incompris lorsque celles-ci sont rejetées par les développeurs sans explication claire. D'un autre côté, les développeurs pourraient tenir pour acquis que les concepteurs connaissent quelque chose de technique alors que cela pourrait ne pas être vrai. Je crois que nous pouvons tous faire mieux que cela.

Adopter une nouvelle façon de penser

Les sites Web et les applications que nous construisons seront affichés sur une large gamme de tailles d'écran. Chaque personne les utilisera sur plusieurs appareils. Notre objectif commun est de créer une expérience familière tout au long de leurs voyages.

Lorsque nous, en tant que développeurs, pensons que les concepteurs sont pointilleux sur les alignements de pixels, nous devons comprendre pourquoi. Nous devons reconnaître que c'est au-delà de la fidélité et de la cohérence. Il s'agit de la somme de toutes les parties travaillant ensemble. C'est la cohésion. Nous devons l'accepter et faire de notre mieux pour l'accomplir. Apprendre les bases des principes de conception est un bon point de départ . Comprenez l'importance de sélectionner les bonnes couleurs, le fonctionnement de la hiérarchie et l'importance des espaces blancs.

Remarque : Il existe un cours en ligne appelé "Design for Developers" et un livre intitulé "Refactoring UI" - les deux sont parfaits pour vous aider à démarrer. Avec ceux-ci, vous serez en mesure de mettre en œuvre des interfaces utilisateur avec un sens aigu du détail et d'obtenir un effet de levier significatif lors de la communication avec les concepteurs.

Magnifier la notoriété de vos designers

Vous pourriez tenir pour acquis que les concepteurs connaissent le Web autant que vous. Eh bien, ils pourraient ne pas le faire. En fait, ils n'ont pas à le faire ! Il est de notre responsabilité, en tant que développeurs, de les tenir informés de l'état actuel du Web.

J'ai travaillé avec les deux côtés de ce spectre : les concepteurs qui pensent que tout peut être construit (comme des filtres complexes, de nouveaux comportements de défilement ou des entrées de formulaire personnalisées) sans se soucier de la compatibilité du navigateur. Ensuite, il y a des concepteurs qui ont des hypothèses sur les « faibles limites du Web » et supposent simplement par eux-mêmes que quelque chose est impossible à mettre en œuvre. Nous devons leur montrer les véritables possibilités de la conception Web et ne pas laisser les limitations freiner leurs compétences.

Apprenez-leur à coder, pas à coder

Cela semble contradictoire mais soyez patient : savoir coder est au cœur du métier de développeur. Nous travaillons dans une industrie en évolution rapide avec de nouvelles choses qui apparaissent chaque jour. Ce serait une demande hypocrite de notre part d'exiger des designers qu'ils apprennent à coder. Cependant, nous pouvons les aider à comprendre le code.

Asseyez-vous à côté du designer avec qui vous travaillez pendant 15 minutes et apprenez-lui comment il peut voir par lui-même si les spécifications d'un élément sont correctes et comment les modifier. Je trouve Firefox Page Inspector remarquablement convivial pour cela.

De nos jours, c'est un plaisir de visualiser les mises en page, de déboguer les animations CSS et de peaufiner la typographie. Montrez-leur un terrain de jeu de code prêt à l'emploi comme Codepen pour qu'ils l'explorent. Ils n'ont pas besoin de connaître toutes les spécifications CSS pour comprendre le fonctionnement du paradigme de mise en page. Cependant, ils doivent savoir comment les éléments sont créés et se comportent afin de renforcer leur travail quotidien.

Inclure les concepteurs dans le processus de développement

Invitez les concepteurs à vous rejoindre lors de la réunion debout, à faire partie du processus d'assurance qualité et à s'asseoir avec vous pendant que vous peaufinez les détails visuels de vos implémentations. Cela leur fera comprendre les contraintes du Web et, assez tôt, ils comprendront pourquoi une fonctionnalité prend du temps à mettre en œuvre.

Demandez aux designers de vous inclure dans leur processus de conception

Vous vous rendrez compte qu'ils font bien plus que « rendre les choses jolies ». Vous en apprendrez plus sur le processus de recherche et sur la façon dont les tests utilisateurs sont effectués. Vous découvrirez que pour chaque proposition de conception qu'ils vous présentent, plusieurs autres études ont été précédemment abandonnées. Lorsque les concepteurs demandent une modification, demandez-en la raison, afin d'en savoir plus sur les décisions prises . En fin de compte, vous commencerez à comprendre pourquoi ils sont pointilleux sur les espaces blancs et les alignements, et j'espère que vous le serez bientôt aussi !

Je trouve qu'il est crucial de traiter le développement frontend comme une partie essentielle du processus de conception, et la conception comme une partie essentielle du processus de développement. Promouvoir un état d'esprit où chacun a la chance d'être impliqué dans le cycle de conception et de développement nous aidera tous à mieux comprendre les défis de chacun et à créer également de belles expériences.

Nous pouvons utiliser différents outils, mais nous devons parler le même langage

Maintenant que nous commençons à comprendre un peu mieux le flux de travail de l'autre, il est temps de passer à l'étape suivante : parler le même langage.

Regarder au-delà de l'éditeur de code

Une fois que vous commencerez à prêter attention à votre environnement, vous serez mieux équipé pour faire face aux problèmes. Apprenez à mieux connaître l'entreprise et soyez prêt à écouter ce que les designers ont à dire. Cela fera de vous un membre de l'équipe avec des contributions plus riches au projet. Collaborer dans des domaines au-delà de notre expertise est la clé pour créer des conversations significatives et une confiance mutuelle.

Utilisation des systèmes d'interface utilisateur comme contrat

Demandez aux concepteurs de partager leur système de conception avec vous (et s'ils n'en utilisent pas, il n'est jamais trop tard pour commencer). Cela vous évitera d'avoir à choisir les couleurs utilisées, à déterminer les marges ou à deviner un style de texte. Assurez-vous de bien connaître le système d'interface utilisateur autant qu'eux.

Vous connaissez peut-être déjà le concept basé sur les composants. Cependant, certains designers peuvent ne pas le percevoir de la même manière que vous. Montrez-leur comment les composants peuvent vous aider à créer des interfaces utilisateur plus efficacement. Diffusez cet état d'esprit et dites adieu aux noms similaires mais non égaux : en-tête contre héros, informations sur les prix contre sélecteur de prix . Lorsqu'une partie de l'interface utilisateur (alias « un composant ») est construite, utilisez les mêmes noms afin qu'ils puissent être reflétés dans les fichiers de conception et de code. Ensuite, lorsque quelqu'un dit : "Nous devons modifier le widget d'invitation à la proposition", tout le monde sait exactement de quoi il est question.

Reconnaître la vraie source de la vérité

Malgré le fait que l'interface utilisateur est d'abord créée dans les fichiers de conception, la véritable source de vérité se trouve du côté du développement. En fin de compte, c'est ce que les gens voient réellement, n'est-ce pas ? Lorsqu'une conception est mise à jour, c'est une bonne idée de laisser une note sur son état de développement, en particulier dans les projets impliquant un grand nombre de personnes. Cette astuce permet de maintenir une communication fluide, de sorte que personne (y compris vous) ne se demande : " C'est différent de la version en direct. Est-ce un bogue ou n'a-t-il pas encore été implémenté ? ”

Garder la dette sous contrôle

Donc, vous savez tout sur la dette technique - cela se produit lorsque le coût de mise en œuvre de quelque chose de nouveau est élevé en raison d'un raccourci que nous avons pris dans le passé pour respecter un délai. La même chose peut se produire du côté de la conception et nous appelons cela la dette de conception .

Vous pouvez y penser comme suit : plus l'incohérence UX et UI est élevée, plus la dette (technique et de conception) est élevée. L'une des incohérences les plus courantes consiste à avoir différents éléments pour représenter la même action. C'est pourquoi une mauvaise conception se traduit généralement par un mauvais code . C'est à nous tous, en tant que concepteurs et développeurs, de prendre au sérieux notre dette de conception.

Être accessible ne signifie pas qu'il doit être moche

Je suis vraiment ravi de voir que nous, en tant que développeurs et designers, commençons enfin à intégrer l'accessibilité dans notre travail. Cependant, beaucoup d'entre nous pensent encore que concevoir des produits accessibles est difficile ou limite nos compétences et notre créativité.

Permettez-moi de vous rappeler que nous ne créons pas un produit uniquement pour nous-mêmes. Nous créons un produit destiné à être utilisé par toutes les personnes , y compris celles qui utilisent le produit de différentes manières que vous. Tenez compte de la façon dont les éléments individuels peuvent être plus accessibles tout en gardant les flux d'utilisateurs actuels clairs et cohérents.

Par exemple, si un concepteur croit vraiment que la création d'une entrée de sélection améliorée est nécessaire, restez à ses côtés et travaillez ensemble pour la concevoir et la mettre en œuvre de manière accessible afin qu'elle soit utilisée par un large éventail de personnes aux capacités diverses.

Donner des commentaires précieux aux concepteurs

Il est inévitable que des questions surgissent lors de l'examen des conceptions. Cependant, ce n'est pas une raison pour commencer à vous plaindre des erreurs des designers ou de leurs idées ambitieuses. Les concepteurs ne sont pas là pour vous rendre fou, ils ne savent pas toujours intuitivement ce dont vous avez besoin pour faire votre travail. La vérité est que, dans le passé, vous ne connaissiez pas non plus ce genre de choses, alors soyez patient et adoptez la collaboration comme moyen d'apprentissage.

Plus tôt les commentaires, mieux c'est

Le moment de la rétroaction est crucial. Le flux de travail de rétroaction dépend beaucoup de la structure du projet, il n'y a donc pas de solution unique pour cela. Cependant, lorsque cela est possible, je pense que nous devrions viser un flux de travail de rétroaction périodique - en commençant dès les premières étapes. Avoir cet état d'esprit de collaboration ouverte est le moyen de réduire la possibilité de grandes réitérations inattendues plus tard dans la route. Gardez à l'esprit que plus tard vous donnerez votre premier retour au concepteur, plus il lui en coûtera d'explorer une nouvelle approche si nécessaire.

Expliquez les idées abstraites en termes simples

Vous souvenez-vous quand j'ai dit que la performance n'était pas une préoccupation des emplois précédents des designers ? Ne paniquez pas s'ils ne savent pas comment créer des SVG optimisés pour le Web. Face à un design qui nécessite le chargement d'un grand nombre de polices différentes, expliquez-leur pourquoi nous devrions minimiser le nombre de requêtes, voire profiter des polices variables. En plus d'un chargement plus rapide, il offre également une expérience utilisateur plus cohérente. À moins que les concepteurs ne souhaitent apprendre, évitez d'utiliser trop de termes techniques pour expliquer quelque chose. Vous pouvez voir cela comme une opportunité d'améliorer vos compétences en communication et de clarifier vos pensées.

Ne laissez pas les hypothèses se transformer en décisions

Certaines questions sur une spécification de conception n'apparaissent que lorsque nous nous salissons les mains dans le code. Pour accélérer les choses, nous pourrions être tentés de prendre des décisions basées sur nos hypothèses. S'il vous plaît, ne le faites pas. Chaque fois que vous transformez une hypothèse en décision, vous mettez en péril la confiance que l'équipe de conception vous accorde pour implémenter l'interface utilisateur. En cas de doute, tendez la main et clarifiez vos doutes . Cela leur montrera que vous vous souciez autant qu'eux du résultat final.

Ne faites pas de solutions de contournement par vous-même

Lorsqu'on vous demande d'implémenter une conception trop difficile, ne dites pas "C'est impossible" ou ne commencez pas à en implémenter une version alternative bon marché par vous-même. Cela provoque immédiatement des frictions avec l'équipe de conception lorsqu'elle constate que ses conceptions n'ont pas été mises en œuvre comme prévu. Ils peuvent réagir avec colère ou ne rien dire mais se sentir vaincus ou frustrés. Tout cela peut être évité si nous leur expliquons pourquoi quelque chose n'est pas possible, en termes simples et suggérons des approches alternatives. Évitez les comportements dogmatiques et soyez ouvert à la collaboration sur une nouvelle solution .

Faites-leur connaître les techniques de dégradation gracieuse et d'amélioration progressive et construisez ensemble une solution idéale et une solution de repli. Par exemple, nous pouvons améliorer une mise en page de flexbox à CSS Grid. Cela nous permet de respecter l'objectif principal d'une fonctionnalité tout en tirant le meilleur parti des technologies Web.

En ce qui concerne les animations, soyons réalistes : au fond de vous, vous êtes aussi ravi de mettre en œuvre la prochaine animation wow que les concepteurs le sont de la créer. La différence entre nous et eux, c'est que nous sommes plus conscients des contraintes du web. Cependant, ne laissez pas cela limiter vos propres compétences ! Le Web évolue rapidement, nous devons donc utiliser cela en notre faveur.

La prochaine fois qu'on vous demandera de donner vie à un prototype, essayez de ne pas le rejeter d'emblée ou de le faire tout seul. Voyez-le comme une opportunité de vous surpasser. Les animations sont l'une des parties les plus difficiles du développement Web, alors assurez-vous d'affiner chaque image clé avec votre concepteur - en personne ou en partageant un lien synchronisé privé.

Penser au-delà de l'état idéal — Ensemble

Voici la chose: ce n'est pas tout à propos de vous. L'un des défis des designers est de bien comprendre leurs utilisateurs et de présenter les designs de la manière la plus attractive pour les vendre au Product Manager. Parfois, ils oublient ce qui est au-delà de l'état idéal et les développeurs l'oublient aussi.

Afin d'aider à éviter que ces lacunes ne se produisent, alignez avec les concepteurs les exigences du scénario :

• Le scénario du pire
  Un scénario où les pires possibilités se produisent. Cela aide les concepteurs à dire non au contenu fixe et à le laisser fluide. Que se passe-t-il si le titre comporte plus de 60 caractères ou si la liste est trop longue ? Il en va de même pour l'inverse, le scénario vide. Que doit faire l'utilisateur lorsque la liste est vide ?
• États d'interaction
  Le navigateur fait plus que survoler et cliquer. Il y a un tas d'états : par défaut, survol, focus, actif, désactivé, erreur… et certains d'entre eux peuvent se produire en même temps. Accordons-leur l'attention qu'il faut.
• L'état de chargement
  Lors de la construction de choses localement, nous pouvons utiliser des simulations et oublier que les choses prennent en fait du temps à se charger. Informez également les concepteurs de cette possibilité et montrez-leur que ce sont des moyens de faire comprendre aux gens que les choses ne prennent pas si longtemps à se charger.

La prise en considération de tous ces scénarios vous fera gagner beaucoup de temps dans les allers-retours lors de la phase de développement.

Remarque : Il existe un excellent article de Scott Hurff sur la façon de corriger les mauvaises interfaces utilisateur qui nous rapprochera d'un produit accessible.

Accepter les demandes de changement

Les développeurs sont connus pour ne pas être très heureux que quelqu'un trouve un bogue dans leur code, en particulier lorsqu'il s'agit d'un bogue de conception signalé par un concepteur. Il y a beaucoup de mèmes autour de lui, mais avez-vous déjà réfléchi à la façon dont ces bogues peuvent aggraver la qualité de l'expérience ainsi que votre relation lorsque ces bogues de conception sont rejetés avec désinvolture ? Cela se produit lentement, presque comme s'endormir. Petit à petit, puis tout à la fois. Les concepteurs peuvent commencer par dire : « C'est juste un tout petit détail », jusqu'à ce que l'indifférence et le ressentiment s'accumulent et que rien ne soit dit. Le mal est alors déjà fait.

Cette situation est double : à la fois pour vos pairs et pour votre travail. Ne laissez pas cela arriver. Travaillez sur ce qui colore votre réaction. Un designer qui est « pointilleux » peut être gênant, mais cela peut aussi être une interprétation superficielle de l'attention et de l'enthousiasme par un ingénieur. Lorsque quelqu'un vous dit que votre mise en œuvre n'est pas (encore) parfaite, mettez votre ego de côté et montrez-lui à quel point vous reconnaissez son travail acharné pour affiner le résultat final.

Sortez de l'enregistrement de temps en temps

Nous avons tous des tâches à livrer et des feuilles de route à terminer. Cependant, certains des meilleurs travaux se produisent de manière confidentielle. Il ne sera pas connecté au tableau TO DO et ce n'est pas grave. Si vous trouvez un designer avec qui vous avez une relation, allez vous faufiler dans son espace de travail et explorez ensemble de nouvelles expériences. Vous ne savez jamais ce qui peut venir de là !

Conclusion

Lorsque vous êtes prêt à apprendre de l'équipe de conception, vous apprenez également différentes façons de penser. Vous développerez votre état d'esprit de collaboration avec d'autres domaines de votre expérience tout en affinant votre œil pour créer de nouvelles expériences. Soyez là pour aider et soyez ouvert à l'apprentissage, car le partage est ce qui nous rend meilleurs.

Cet article ne serait pas possible sans les commentaires de nombreuses personnes formidables. Je tiens à remercier chaleureusement les designers Jasmine Meijer et Margarida Botelho pour m'avoir aidé à partager une perspective équilibrée sur les malentendus entre designers et développeurs.

Lecture connexe sur SmashingMag :

• "Conception pour les développeurs" par Mason Gentry
• "Travailler ensemble : comment les concepteurs et les développeurs peuvent communiquer pour créer de meilleurs projets" par Rachel Andrew
• "Comment les développeurs frontend peuvent aider à combler le fossé entre les concepteurs et les développeurs" par Stefan Kaltenegger
• "Quels podcasts les concepteurs et développeurs Web devraient-ils écouter ?" par Ricky Onsman