Améliorez la communication entre les développeurs et les designers

Ce n’est pas toujours l’entente cordiale entre l’équipe de développement et l’équipe d’UI/UX et il est parfois difficile de les faire travailler ensemble de manière efficace.

Mon objectif avec cet article est de vous proposer 5 axes d’améliorations qui, selon mes expériences passées, devraient vous aider à faire collaborer plus efficacement ces deux équipes.

Avant de commencer petit Disclaimer ! Je suis #TeamDeveloppeur et cet article pourrait donc être un peu biaisé dans ce sens. Néanmoins, je suis évidement ouvert à tout retour venant de la #TeamUiUx pour l’améliorer.

1. Expliciter les limitations techniques

Il n’est pas rare que l’équipe UI/UX ignore les limitations techniques que rencontrent les développeurs lors de l’intégration des maquettes. Elles sont souvent liées au langage de programmation, à un framework, à des bibliothèques ou à un objectif de performance et elles peuvent changer d’un projet à l’autre. Il est donc important que les développeurs communiquent à l’équipe UI/UX quelles sont les limitations techniques à prendre en compte lors de la conception des maquettes.

Exemples :

• Taille et format des images
• Quantité et qualité des animations
• Composants pré-existants / éléments non-modifiables
• Etc …

2. Expliciter les besoins

De quelles informations à besoin l’équipe de développement ? La plupart du temps, l’équipe d’UI/UX va fournir les maquettes représentants les différents écrans de l’application. Malheureusement il n’est pas rare que celles-ci ne suffisent pas. Si c’est le cas, l’équipe de développement doit lister de manière exhaustive les ressources qu’elle attend de l’équipe d’UI/UX.

Exemples :

• Vidéo présentant les animations (ou des maquettes avant/après)
• Palette de couleurs
• Images sources (Bannières sans le texte, logo, favicon, etc …)
• Etc …

Dans le cas d’un site web dont le contenu pourra être modifié par un utilisateur qui ne dispose pas de connaissance en développement il peu même être nécessaire de préciser jusqu’à la taille des marge de chaque élément de contenu (titre, sous titre, paragraphe, blocs spécifiques, etc …). Ceci afin qu’il n’y ait pas de différence de comportement entre deux contenus identiques mais présents sur des pages différentes.

Parfois ce qui semble évident peut être réalisé de plusieurs manières par des personnes différentes et, au fil des modifications/contributions, ces infimes différences vont finir par se voir au seins d’un même site.

3. Faire valider les maquettes par l’équipe technique avant de les faire valider par le client

C’est un point qui peut paraître contre intuitif mais qui, d’après mon expérience, fonctionne bien.
L‘objectif est de permettre à l’équipe de développement de faire des retours sur les maquettes avant que celles-ci ne soient validées. Ainsi les équipes de développement ont la possibilité de demander des ajustements si certains éléments sont techniquement trop complexes ou trop long à mettre en place par rapport à leur valeur ajoutée.

Par exemple, il peut-être pertinent de conserver le design d’un widget pre-existant afin d’éviter de le re-développer de zero.

Il s’agit ensuite de trouver un compromis acceptable entre l’aspect voulu par les graphistes et les contraintes techniques et temporelles.

S’organiser de cette manière permet également de montrer au client une véritable version finale de la maquette, qui intègre directement les différentes contraintes de développement et qui sera donc bien plus proche du rendu réel de l’application. De cette manière, il n’est plus nécessaire de se justifier sur les quelques changements opérés lors de la phase d’intégration, ceux-ci sont déjà présents dans la maquette.

4. Mettre en place une boucle de retours

Cela vient en complément du point précédent. Il s’agit de mettre en place des points hebdomadaires ou bi-mensuels permettant aux deux équipes de partager des retours. Ces points peuvent permettre de mettre en avant certains éléments qui ne seraient pas remontés via les autres processus décrits ci-dessus.

Il n’est pas nécessaire que ces réunions soient trop longue, 10–15 minutes peuvent suffire dans la plupart des cas. En revanche, la communication doit impérativement être bi-directionnelle afin qu’aucune des deux équipe ne se sente lésée par rapport à l’autre. Un simple envoi de mail est donc à éviter.

Ajouter de la communication entre les équipes va également permettre à chacune d’avoir un bref aperçu du travail de l’autre et ainsi diminuer les frictions et les incompréhensions.

5. Préparer une charte graphique / standardiser les composants

Enfin, ce dernier point vient s’ajouter au n°2.

La charte graphique devrait se présenter sous la forme d’une démo exhaustive de tous les composants génériques que l’on va retrouver dans l’application :

• Boutons
• Champs de formulaires
• Format de textes (titre, inter-titre, paragraphes, libellés de formulaires …)
• Icones et logo
• etc …

Mettre en place une charte graphique claire et la fournir de manière séparée des maquettes permet de simplifier le travail des développeurs — qui peuvent accéder rapidement au design de tous les éléments basique — et de rapidement relever certaines incohérences (tailles des polices, couleurs…) qui autrement seraient passées inaperçues, noyées dans le contenu des maquettes.

Cela permet également de se passer de nouvelle maquette pour les petites évolutions. S’il faut simplement ajouter un champs texte avec un bouton “valider”, il suffit de suivre la charte graphique pour obtenir le bon rendu.

De plus, avec un peu de chance vous pourrez réutiliser totalement ou en partie cette charte graphique pour vos prochaines applications. Sur le long terme, elle peu donc se révéler être un net gain de temps

Ces quelques points ne grattent que la surface de ce qu’il est possible de mettre en place et j’ai volontairement évité de proposer des solutions logicielles afin que ces conseils soient le plus accessible possibles. Néanmoins vous avez maintenant de solides base d’organisation que vous pouvez adapter à vos contraintes internes afin que vos équipes puissent fournir le travail le plus efficace possible.

N’hésitez pas à me faire des retours sur cet article où même à me proposer des organisations que vous avez mises en places et qui fonctionnent bien.