Le Design System, bien plus qu’une mode

Définition du Design System

A première vue, un Design System ressemble à une boite à outils où l’on rassemble tous les composants, les visuels et les règles d’agencement d’un site web ou d’une application. Mais le Design System va plus loin et tout l’intérêt de son utilisation réside à la mise en place de règles de cohésion dans la création des interfaces d’une application métier afin de limiter la dette technique et la dette de design et permettre ainsi d’économiser du temps et de l’argent pour les différents services concernés. Cette cohésion retrouvée permettra d’améliorer, entre autres, l’expérience utilisateur.

Le Design System : bien plus qu’un effet de mode

La mise en place d’un Design System n’a d’intérêt que si l’on veille à sa cohérence tant dans sa phase de création que dans celle de son utilisation afin d’éviter toutes ruptures graphiques et/ou logiques qui seraient préjudiciables au le parcours client. Prendre en compte l’expérience utilisateur (UX) est primordial car c’est par ce biais qu’il sera possible de mettre en place un dispositif qui aura du sens pour l’utilisateur final et qui renforcera l’identité de la marque et devenir ainsi une référence pour l’entreprise.

Photo by Mimi Thian on Unsplash

Outre les utilisateurs et leurs précieux retours d’expérience, les premières personnes concernées sont également tous les graphistes, les designers et les développeurs qui vont devoir – et pouvoir ! – mutualiser leurs travaux. Ce n’est pas toujours facile et nécessite donc parfois de trouver de nouvelles façons de travailler. Mais cette approche offre une garantie certaine : celle de simplifier à postériori les étapes de création et de développement de nouveaux sites internet ou de nouvelles applications. C’est cette collaboration interdisciplinaire qui permettra de mettre en place un Design System robuste et souple à la fois, un Design System qui répondra aux besoins des utilisateurs finaux. Robuste car s’appuyant sur des règles fondamentales par son approche UX et les règles ergonomiques du sous-domaine de l’UI et souple car le Design System se doit d’être un système qui évolue dans le temps et qui suit les besoins de ces utilisateurs.

Un Design System qui tient compte de l’existant 

Concevoir de nouvelles applications en suivant le guide du nouveau Design System ne posera pas de problème autre que celui de devoir changer d’habitudes. Ce qui n’est déjà pas rien, il faut bien l’admettre. Mais le pli peut prendre rapidement, ce n’est qu’une question de volonté et surtout d’accompagnement pour que cela se passe de la meilleure manière possible. Là où cela se complique c’est pour le stock existant. Et il est courant de trouver au sein des grosses entreprises des dizaines, voire des centaines d’applications métiers, conçus sur plusieurs CMS et outils différents les uns des autres, le tout étalé sur des dizaines d’années de dev. C’est avec un tel système hétéroclite qu’il faut interagir.

Toujours est-il qu’il n’est jamais trop tard pour repartir du bon pied et travailler à l’harmonisation du Système d’Information. Et comme il n’est pas possible ni même envisageable de tout changer du jour au lendemain, il est nécessaire de faire une étude utilisateurs pour voir quelles applications métiers doivent être migrées en priorité afin d’améliorer l’expérience client et éviter toutes ruptures graphiques et fonctionnelles. Même si cela demande de prendre en compte l’ensemble des parcours client, interne ou externe, il sera probablement nécessaire de faire des arbitrages et de choisir quels applicatifs il faut faire évoluer en priorité pour coller au nouveau Design System.

Mettre en place un Design System et assurer sa pérennité

La définition du périmètre d’application du nouveau Design System implique de prendre des décisions qui dépassent largement les attributions de l’équipe en charge de la création et de l’administration de celui-ci. Mais une bonne communication accompagnée d’une évangélisation efficace sur l’intérêt de disposer d’un Design System unique peut aider à ce que ce que celui-ci s’impose dans les esprits, puis dans les process de développement. Le secret de la réussite de sa mise en place dépend du modèle de gouvernance qui sera mis en place à ce sujet et de la bonne coopération entre équipes.

Une fois en place, il sera nécessaire de mettre en place des KPI afin de mesurer le niveau d’adoption du nouveau Design System, mais aussi de suivre finement les bénéfices en interne que cela procure : réduction du temps de développement et de recette, retour sur l’expérience utilisateur, etc… des résultats qu’il faudra communiquer pour appuyer l’évangélisation relative aux avantages d’utiliser un Design System unique.

Conclusion

Non, l’adoption d’un Design system n’est pas un effet de mode. C’est une nécessité pour les entreprises qui souhaitent réduire les coûts de création et de développement de leurs applications métiers et de leurs sites Web, qui désirent une harmonisation de tous leurs supports numériques, qui rêve d’une uniformisation de la communication gage d’une entreprise stable, solide et parlant d’une seule et même voix.

Adobe XD : une mise à jour majeure

On peut reprocher à Adobe sa politique tarifaire ou les défauts de certains de ces produits qui existent pourtant depuis de nombreuses années, on devra tout de même lui accorder ceci, c’est le soin apporté par cette société à mettre tous les mois des mises à jours de ces logiciels phares. Ce qui pourrait paraitre une faiblesse (quoi ? Ce logiciel n’est pas parfait au prix où je le paye ?) devient une force lorsque l’idée est vendue comme une amélioration constante qui prend en compte les avis des utilisateurs. Et ça marche ! Moi qui était un utilisateur inconditionnel de Sketch sur Mac, je me prend à trouver enfin du plaisir à travailler avec XD et à découvrir mois après mois les nouvelles fonctionnalités. Et ce mois-ci, avec la version MAX 2019, c’est du lourd !

Pour « rendre les choses de César à César », je précise que cet article s’inspire très largement de celui écrit par Andrew Shorten dans son Blog Adobe. Lisez-le sans hésiter si la langue de Shakespeare ne vous rebute pas. Pour les francophile – ou les anglophobe – voici une sélection des points clés de cet excellent article. Au programme et en vrac nous avons des améliorations notables du travail en équipe dans la création et la co-édition, la prise en compte des interactions au survol de souris (hover) et une gestion des plug-ins améliorée.

En avant pour le travail collaboratif !

Même si ce n’est qu’une fonction en version Bêta, on peut enfin travailler à plusieurs sur le même document ! Je me souviens de la frustration il y a plusieurs mois quand je me suis rendu compte que cette fonction n’existait pas et que lorsque ma collègue et moi-même étions sur le même doc, seule la première personne ayant ouvert le doc pouvait enregistrer son travail. Je vous laisse imaginer le choc lors de cette découverte après plusieurs heures de travail perdues… Maintenant il est enfin possible de travailler de manière collaborative !
Cela nécessite que le document soit sauvegardé dans le Cloud et que vous invitiez les membres de votre équipe (disposant d’un compte Adobe Cloud évidemment) à se connecter sur le doc que vous voulez partager. Et c’est magique ! Vous voyez en direct les changements opérés par les personnes avec qui vous avez partagé le document. Comme c’est une fonction encore en Bêta, il risque d’y avoir des ralentissements mais cela présage que du bon, une fois la fonction stabilisée.

Gestion de l’historique

Il est maintenant possible de gérer jusqu’à 30 jours d’historique sur tous vos documents et de marquer des jalons importants de votre production, notamment en renommant ces étapes importantes dont vous voulez garder la trace.

Mode Partage optimisé

Le mode partage permet, comme son nom l’indique, de partager vos productions aux différentes intervenants de la chaine de production, développeurs, testeurs, graphistes et autres, etc… et de permettre à chacun d’eux d’interagir en laissant des commentaires à l’image de la WebApp d’Invision. A noter que ce partage est illimité jusqu’à Avril 2020. Quelle sera la politique tarifaire d’Adobe par la suite ? Wait and See…

Amélioration des interactions

Le composant dans tous ses états

Les composants d’Adobe XD, largement inspirés des Symboles du logiciel Sketch, permettent de réutiliser des éléments communs à plusieurs planches d’un projet, voir de plusieurs projets. Cette nouvelle mise à jour va plus loin et prend en compte l’état de ces composants, par exemple les différents états d’un bouton comme les états « cliqué », « non cliqué » et le survol de la souris. Puissant. La vidéo ci-dessous détaille cette nouvelle fonction.

Pour bien comprendre l’utilité de ces nouvelles fonctions, Adobe c’est associé à Danksy pour créer le kit XD Fresh UI. A tester d’urgence !
De plus la liste des déclencheurs c’est enrichie permettant de gérer les tapotement sur écrans, les entrées du clavier ou d’une manette de jeu, les commandes vocales.

Gestion d’interactions multiples

Fini la multiplication d’un même écran pour afficher le résultat des différentes action possibles d’un écran maitre. Ce cas de figure est géré de manière plus intuitive dans cette nouvelle mouture d’XD, comme le montre la vidéo ci-dessous en prenant comme exemple les différentes interactions que l’on peut avoir avec un carrousel : glisser, tapoter, etc…

Fini la multiplication d’un même écran pour afficher le résultat des différentes action possibles d’un écran maitre. Ce cas de figure est géré de manière plus intuitive dans cette nouvelle mouture d’XD, comme le montre la vidéo ci-dessous en prenant comme exemple les différentes interactions que l’on peut avoir avec un carrousel : glisser, tapoter, etc…

Compatibilité

Outre une meilleure intégration des outils graphiques de la suite Adobe Cloud (modification à la volée dans Illustrator ou Photoshop), XD intègre d’une manière plus poussée la création et le partage des ressources via les bibliothèques Creative Cloud. Mais surtout il améliore la conversion des fichiers et bibliothèques Sketch. On comprend sans peine l’intérêt pour Adobe d’améliorer cette fonctionnalité.

Gestion améliorée des Plug-ins

Le nombre de plug-ins ne cessant de croître, Adobe a réorganisé la gestion des plug-ins dans XD pour la simplifier et permettre une recherche plus aisée et facilitée par les avis des utilisateurs.

Le mot de la fin

Cette mouture d’XD est majeure. Et même si certaines fonctions sont en encore en Bêta version, notamment le mode collaboratif, XD devient enfin suffisamment fiable et solide pour être utilisé de manière professionnelle, au grand dam des éditeurs de Sketch qui n’ont pas la puissance de feu d’Adobe pour le suivre sur son terrain.