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

Cet article s'adresse principalement à vous, cher développeur Frontend, qui aime mettre en œuvre interfaces utilisateur, mais a du mal à aligner les attentes sur les concepteurs avec lesquels vous travaillez. Peut-être que vous êtes appelé «développeur d'interface utilisateur» ou «ingénieur UX». Quel que soit le titre que vous portez, votre travail (et le mien) ne consiste pas seulement à insuffler de la vie dans les fichiers de conception. Nous sommes également responsables de combler le fossé entre les flux de travail de conception et de développement . Cependant, lorsque nous traversons 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 concepteurs ces dernières années.

Je crois que c'est notre travail, en tant que développeurs d'interface utilisateur, consiste non seulement à aider les concepteurs à comprendre le fonctionnement du Web, mais également à connaître leur réalité et à apprendre leur langue.

Comprendre le contexte des concepteurs UX

Les concepteurs (également appelés Web Designers ou Product Designers) ont fait leurs premiers pas dans le monde du design grâce à des outils tels que Photoshop et Illustrator. Ils étaient peut-être Graphic Designers : leur objectif principal était de créer des logos et des identités de marque et de concevoir des mises en page pour les magazines. Ils auraient aussi pu Marketing Designers : imprimer des panneaux publicitaires, concevoir des banderoles et créer des infographies

Cela signifie que la plupart des designers UX ont passé leurs débuts à concevoir pour l’impression, un paradigme totalement différent de leur support actuel. , l'écran. C'était leur premier grand défi. S'agissant de l'impression, les concepteurs se préoccupaient de l'alignement des pixels, mais sur une zone fixe (papier). Ils n’ont pas eu à faire face à une mise en page dynamique (écrans). Penser au texte brisé ou aux états d’interaction ne faisait tout simplement pas partie de leur travail. Les concepteurs avaient également une totale liberté sur les couleurs, les images et la typographie sans contraintes de performances.

Heureusement, la communauté des concepteurs autodidactes UX a déployé de nombreux efforts pour enseigner les principes de base du développement . apprenez à coder et à comprendre la meilleure manière de transférer les développeurs aux développeurs . Il en va de même pour le développement (plus de détails dans une minute.) Cependant, des frictions persistent entre les deux domaines.

D'une part, les concepteurs se plaignant chaque fois qu'une mise en œuvre ne correspond pas à leur dessins ou se sentir mal compris lorsque ceux-ci sont rejetés par les développeurs sans explication claire. D'autre part, les développeurs peuvent prendre pour acquis que les concepteurs savent quelque chose de technique, alors que ce n'est peut-être pas le cas. Je pense que nous pouvons tous faire mieux que cela.

Adopter une nouvelle façon de penser

Les sites Web et les applications que nous développons seront affichés sur un large éventail 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 leur voyage.

Lorsque nous, développeurs, pensons que les concepteurs sont pointilleux au sujet de l'alignement des pixels, nous devons comprendre pourquoi. Nous devons reconnaître que cela va 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. L'apprentissage des bases des principes de conception est un bon point de départ . Comprenez l'importance de choisir les bonnes couleurs, le fonctionnement de la hiérarchie et l'importance de l'espace blanc.

Note : 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. Grâce à ces solutions, vous serez en mesure d'implémenter des interfaces utilisateur avec un souci du détail et d'obtenir des résultats significatifs lors de la communication avec les concepteurs.

Agrandir l'image des concepteurs

Vous pouvez penser que les concepteurs connaissent bien le Web. comme tu fais. Eh bien, ils pourraient ne pas. 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 (filtres complexes, nouveau défilement, etc.). des comportements ou des entrées de formulaire personnalisées) sans penser à la compatibilité du navigateur. Ensuite, certains concepteurs ont des hypothèses sur les «faibles limites du Web» et supposent simplement qu’il est impossible d’implémenter quelque chose. Nous devons leur montrer les véritables possibilités de la conception Web et ne pas laisser les limitations freiner leurs compétences.

Enseignez-leur le code, pas comment le code

Cela semble contradictoire, mais supportez-moi: savoir comment coder est au cœur du travail d'un développeur. Nous travaillons dans une industrie en pleine effervescence et de nouvelles choses apparaissent chaque jour. Ce serait une demande hypocrite de notre part de demander aux concepteurs d’apprendre à coder. Cependant, nous pouvons les aider à comprendre le code .

Asseyez-vous à côté du designer avec lequel vous travaillez pendant 15 minutes et expliquez-lui comment il peut voir par lui-même si élément sont corrects et comment les changer. Je trouve que Firefox Page Inspector est extrêmement facile à utiliser pour cela.

De nos jours, c’est un plaisir de visualiser les mises en page, de déboguer les animations CSS et d’affiner la typographie. Montrez-leur un terrain de jeu de code prêt à l'emploi, tel que Codepen à explorer. Ils n’ont pas besoin de connaître toutes les spécifications CSS pour comprendre le fonctionnement du paradigme de disposition. Cependant, ils ont besoin de 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 en stand-up, pour faire partie de l'assurance qualité. processus et de vous asseoir avec vous pendant que vous affinez 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 concepteurs de vous inclure dans leur processus de conception

Vous réaliserez qu'ils font beaucoup. plus que «rendre les choses jolies». Vous en apprendrez plus sur le processus de recherche et sur la façon dont les tests utilisateur sont effectués. Vous découvrirez que pour chaque proposition de conception présentée, plusieurs autres études ont déjà été abandonnées. Lorsque les concepteurs demandent une modification, demandez la raison derrière celle-ci pour en apprendre davantage sur les décisions prises . En fin de compte, vous allez commencer à comprendre pourquoi ils sont difficiles en ce qui concerne les espaces et les alignements, et j'espère que vous le serez bientôt aussi!

Je trouve qu'il est essentiel de considérer le développement front-end comme une partie essentielle du processus de conception. comme une partie essentielle du processus de développement. Le fait de défendre un état d'esprit dans lequel tout le monde a la possibilité de participer au cycle de conception et de développement nous aidera tous à mieux comprendre les défis de chacun et à créer également de grandes expériences.

Nous pouvons utiliser différents outils, Mais nous devons parler la même langue

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

Au-delà de l'éditeur de code

Si vous commencez à faire attention à votre environnement, vous serez mieux armé pour faire face aux problèmes. Apprenez à mieux connaître l'entreprise et soyez prêt à écouter ce que les concepteurs ont à dire. Cela fera de vous un membre de l'équipe avec des contributions plus riches au projet. La collaboration dans des domaines dépassant notre expertise est la clé pour créer des conversations significatives et une confiance mutuelle.

Utilisation des systèmes d'interface utilisateur comme un contrat

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

Vous connaissez peut-être déjà le concept basé sur les composants. Cependant, certains concepteurs pourraient 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 également au revoir à des noms similaires, mais pas identiques: en-tête contre héros, informations sur les prix et sélecteur de prix . Quand une partie de l’interface utilisateur (a.k.a ‘un composant’) est construite, s’engage à utiliser les mêmes noms afin de pouvoir les refléter à la fois dans les fichiers de conception et les fichiers de code. Puis, quand quelqu'un dit, "Nous devons modifier le widget d'invitation à une proposition", tout le monde sait exactement de quoi on parle.

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

Malgré le fait que l'utilisateur L’interface est d’abord créée dans les fichiers de conception, la véritable source de vérité est celle du développement. En fin de compte, c’est ce que les gens voient réellement, non? 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 aide à garder la communication fluide, donc personne (y compris vous) ne s’interroge: « Cela diffère de la version en direct. Est-ce un bug ou si untel n'a pas encore été implémenté? "

Garder la dette sous contrôle

Vous savez donc tout sur la dette technique – ça arrive lorsque le coût de mise en œuvre de quelque chose de nouveau est élevé en raison d'un raccourci que nous avons pris par le passé pour respecter un délai. La même chose peut arriver aussi du côté de la conception et nous l'appelons la dette de conception .

Vous pouvez y penser ainsi: plus l'incohérence UX & UI est élevée, plus l'endettement est élevé (technique et design) . 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 est généralement reflétée dans un mauvais code . En tant que concepteurs et développeurs, il nous incombe à tous de de traiter notre dette de conception sérieusement .

Être accessible ne veut pas dire que ça doit être laid

Je suis vraiment ravi de voir que En tant que développeurs et concepteurs, nous commençons enfin à intégrer l’accessibilité dans notre travail. Cependant, beaucoup d’entre nous pensent toujours 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 juste pour nous-mêmes. Nous créons un produit destiné à tous les utilisateurs y compris à ceux qui l'utilisent de différentes manières. Tenez compte de la manière dont les éléments individuels peuvent être plus accessibles tout en maintenant les flux utilisateur actuels clairs et cohérents.

Par exemple, si un concepteur croit réellement qu'il est nécessaire de créer une entrée de sélection améliorée, restez à ses côtés et travaillez ensemble pour design et implémentent de manière accessible pour un large éventail de personnes aux capacités diverses.

Donner de précieux commentaires aux concepteurs

Il est inévitable que des questions se posent lorsque vous vous présentez à travers les dessins. Cependant, ce n’est pas une raison pour que vous commenciez à vous plaindre des erreurs des concepteurs ou de leurs idées ambitieuses. Les concepteurs ne sont pas là pour vous faire penser, ils ne savent pas toujours intuitivement ce dont vous avez besoin pour faire votre travail. La vérité est que, dans le passé, vous n'étiez pas au courant de ces choses non plus, alors soyez patient et privilégiez la collaboration comme moyen d'apprentissage.

The Earlyly The Feedback, The Better

Le moment choisi pour les commentaires est crucial. . Le flux de travail des commentaires dépend beaucoup de la structure du projet. Il n’existe donc pas de solution unique. Cependant, lorsque cela est possible, j'estime que nous devrions viser un flux de travail avec retour périodique – en commençant par les premières étapes. Avoir cet état d'esprit de collaboration ouverte est le moyen de réduire la possibilité de grandes répétitions inattendues plus tard dans la route. N'oubliez pas que plus vous communiquez ensuite vos premières impressions au concepteur, plus il sera coûteux d'explorer une nouvelle approche si nécessaire.

Expliquez les idées abstraites en termes simples

N'oubliez pas que lorsque j'ai dit que la performance n'était pas satisfaisante. une préoccupation des emplois précédents des concepteurs? Ne paniquez pas quand ils ne savent pas comment créer des SVG optimisés pour le Web . Lorsque vous êtes confronté à une conception nécessitant le chargement de nombreuses polices différentes, expliquez-leur pourquoi nous devrions minimiser le nombre de demandes, voire même tirer parti de Variable Fonts . Outre 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 occasion 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 concernant 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 en fonction de nos hypothèses. S'il vous plait, non. Chaque fois que vous transformez une hypothèse en décision, vous risquez la confiance que l'équipe de conception vous accorde pour implémenter l'interface utilisateur. Chaque fois que vous avez des doutes, tend la main et clarifie vos doutes . Cela leur montrera que vous vous souciez du résultat final autant qu’ils le font.

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

Lorsque vous êtes invité à mettre en œuvre une conception trop difficile, ne dites pas “C'est impossible” ou commencez à implémenter vous-même une version alternative pas chère. 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 d’impensable, en termes simples, et suggérons des approches alternatives. Évitez les comportements dogmatiques et soyez ouvert à collaborer à une nouvelle solution .

Informez-les des techniques de Graceful Degradation et Progressive Enhancement et construisez ensemble un idéal. solution et une solution de secours. Par exemple, nous pouvons améliorer une présentation de flexbox à CSS Grid . Cela nous permet de respecter l'objectif principal d'une fonctionnalité tout en exploitant au mieux les technologies Web.

En ce qui concerne les animations, soyons réalistes: au fond, vous êtes aussi ravi de mettre en œuvre la prochaine . wow animation autant que les concepteurs doivent le créer. La différence entre nous et eux 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 l'utiliser 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 vous-même. Voyez cela comme une opportunité de vous dépasser. 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é.

Pensez au-delà de l’état idéal – Ensemble

En voici l’essentiel: c’est pas tout à propos de vous. L’un des défis des concepteurs est de bien comprendre leurs utilisateurs et de présenter les dessins de la manière la plus attrayante pour les vendre au chef de produit. Parfois, ils oublient ce qui est au-delà de l'état idéal et les développeurs l'oublient aussi.

Pour éviter ces écarts, adaptez-vous aux exigences du scénario:

• Le cas le plus défavorable
  Un scénario où les pires possibilités se produisent. Cela aide les concepteurs à refuser le 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? La même chose s'applique à l'inverse, le scénario vide. Que doit faire l'utilisateur quand la liste est vide?
• Etats d'interaction
  Le navigateur ne se limite pas à faire du vol stationnaire et à cliquer. Il y a beaucoup d'états: défaut, survol, focus, actif, désactiver, erreur… et certains d'entre eux peuvent se produire en même temps. Laissons-leur l’attention voulue.
• L’état de chargement
  Lorsqu’on construit des choses localement, on peut se moquer de nous et oublier qu’il faut du temps pour charger. Informez les concepteurs de cette possibilité également et montrez-leur que ce sont des moyens de faire comprendre aux gens que le chargement ne prend pas autant de temps .

La prise en compte de tous ces scénarios vous fera gagner beaucoup de temps. aller et venir pendant la phase de développement.

Note : Il existe un excellent article de Scott Hurff sur comment corriger les mauvaises interfaces utilisateur qui nous rapprochera davantage

Adoptez les demandes de changement

Les développeurs sont connus pour ne pas être trop heureux de trouver 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 cela, 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 ignorés? Cela se produit lentement, presque comme s’endormir. Petit à petit, puis tout à la fois. Les concepteurs pourraient commencer par dire: « Ce n’est qu’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 concepteur «sélectif» peut être gênant, mais il peut également s'agir d'une interprétation superficielle de la part d'un ingénieur: attention et enthousiasme. Quand quelqu'un vous dit que votre implémentation n'est pas (encore) parfaite, mettez votre ego de côté et montrez-leur comment vous reconnaissez leur dur labeur pour peaufiner le résultat final.

Go Off The Record Once In A While

Nous avons tous tâches à livrer et feuilles de route à terminer. Toutefois, certains des meilleurs travaux sont effectués à titre officieux. Il ne sera pas connecté au tableau TO DO et c’est correct. Si vous trouvez un designer avec qui vous avez des liens, allez furtivement dans son espace de travail et explorez de nouvelles expériences.

Conclusion

Lorsque vous souhaitez apprendre de l’équipe de conception, vous apprenez également différentes façons de penser. Vous ferez évoluer votre mentalité de collaboration avec d’autres domaines en vous aidant de la création d’expériences nouvelles. 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 retours de nombreuses personnes remarquables. Je tiens à remercier sincèrement les concepteurs Jasmine Meijer et Margarida Botelho de m'avoir aidée à partager un point de vue équilibré sur les malentendus entre concepteurs et développeurs.

Related Reading on SmashingMag:

(ra, yk, il)