UX, UI et cohérence : comment parfaire son design system

    L'image de marque, les composants de l'interface utilisateur et la gouvernance sont les éléments à privilégier dans votre design system. Pourquoi et comment s'y prendre ?

    ABONNEZ-VOUS À NOTRE BLOG

    Nous avons déjà démontré les avantages d'un design system adapté à votre entreprise. Dans cet article, nous vous présentons les points à contrôler pour mieux valoriser votre investissement. Pour le bon fonctionnement du design system de votre entreprise, concentrez-vous en priorité sur les trois aspects que nous allons détailler ici. 

    1. L'identité de votre marque

    Que l'on parte d'une bibliothèque de composants récents ou d'un guide de style à l'ancienne,   tout commence par le visuel. A ce stade, seuls comptent la couleur, la typographie, le mouvement et l'espace. Ces éléments définissent l'identité de votre marque. Une fois ceux-ci établis, d'autres éléments de base (non interactifs), comme une iconographie ou un logo, peuvent s'y ajouter. 

    Bien souvent, le guide de style en vigueur dans l'entreprise n'est pas (encore) décliné pour l'affichage et les interactions sur écran. Quelques petits ajustements peuvent parfois suffire, comme remplacer un rouge primaire par une nuance plus intense pour renforcer le contraste avec d'autres couleurs affichées à l'écran. 

    La création d'un code visuel peut être longue, fastidieuse et demander de nombreuses itérations. Le directeur artistique doit comprendre qui sont les utilisateurs, pour définir le positionnement actuel de la marque et déterminer ses objectifs d'évolution. L'équipe artistique doit ensuite trouver les visuels qui permettront d'arriver à ce repositionnement. 

    Une fois que la charte graphique est définie et mise en place, il vaut mieux ne plus y toucher, pour asseoir la cohérence du récit de votre marque. Toutefois, comme la signification des couleurs et des formes évolue au fil du temps, il est utile d'apporter des retouches régulièrement (au bout de quelques années), plutôt que d'attendre trop longtemps et se rendre compte que l'identité visuelle de la marque est à revoir en intégralité. 

    2. Les composants de l'interface utilisateur : aspect et ergonomie 

    Tous les éléments interactifs des points d'entrée en ligne de votre marque sont des composants de l'interface utilisateur. Ils permettent d'effectuer des tâches simples, comme lire des contenus, ou des tâches plus complexes, comme filter une liste de produits. Les composants de l'interface utilisateur prennent en charge l'architecture des informations sur vos produits, pour rendre les actions aussi intuitives que possible sur l'écran. 

    La prise en compte de la diversité des appareils et des écrans, sans perdre de vue la charte graphique, est un des défis posés à la construction des composants UI. Ces composants sont intégrés dans une bibliothèque de référence qui les rend accessibles à toutes les équipes, via une plateforme digitale. 

    Contrairement à l'apparence visuelle, les composants de la bibliothèque changent, notamment lorsque les retours utilisateurs impliquent des améliorations. La bibliothèque de composants n'est donc jamais tout à fait finalisée. Elle est complétée et mise à jour régulièrement pour suivre l'évolution des besoins utilisateurs et des appareils. 

    3. La gouvernance 

    La gouvernance n'est certainement pas à négliger. Une fois que votre entreprise dispose d'une bibliothèque de composants performante, elle sert à plusieurs équipes : les rédacteurs web pour la création de pages, les développeurs pour les applications, les marketeurs pour les communications, etc.  Tous ont leur propre perception des interfaces utilisateur. À ce stade, il faut vous assurer que tous les composants sont utilisés à bon escient. Et c'est là qu'intervient l'équipe de gouvernance. 

    Les différents rédacteurs de contenus peuvent par exemple mal utiliser un même composant dans différentes situations. Vous pouvez l'éviter en vous assurant que tous les composants sont bien documentés, avec des règles claires sur leurs conditions d'utilisation. 

    La plupart des bibliothèques de composants intègrent des fonctionnalités permettant d'associer directement des règles et une documentation à un composant donné. Ceci étant, il est possible que ces règles soient mal interprétées et que les utilisateurs se trompent, d'où le besoin pour l'équipe de gouvernance d'effectuer des contrôles qualité à différents stades du développement pour éviter des problèmes futurs. 

    Au fur et à mesure de la mise en œuvre des composants des plateformes numériques, certains besoins de communication peuvent ne plus être satisfaits par les ressources disponibles dans la bibliothèque. Il en découle des demandes d'amélioration, parfois contradictoires lorsqu'elles sont formulées par différentes équipes. L'équipe de gouvernance  joue là aussi son rôle de médiateur pour s'assurer que les règles seront bien appliquées par tous. 

    4. Réunissez toutes les conditions 

    La communication de votre entreprise doit être cohérente, dans son discours comme dans son aspect visuel. La mise en place d'un design system présente de nombreux avantages, tant sur le plan technique que sur le plan de la communication. Mais, comme souvent dans les affaires, les clés du succès sont une bonne maintenance et un plan d'adoption mûrement réfléchi. 

    Pour accélérer sa mise en place et assurer sa promotion, n'hésitez pas à désigner un ambassadeur, au fait de tous les projets concernés. 

    Publié sur    Dernière mise à jour le 29/10/2020

    #Expérience Client, #Gestion de Contenu, #Marketing Digital, #CMS

    À propos de l'auteur

    Niki Lin is a Functional Analyst at Amplexor Belgium. Since 2017, he has been overseeing product development according to specifications, building bridges between the digital platforms’ end users and the technical teams. Niki is passionate about achieving the right balance of human-centered design approaches and agile development methodologies.

    SUBSCRIBE TO OUR BLOG