Ici archive

Catégorie : Factory

Alors que les exigences des utilisateur·rice·s et les fonctionnalités en UX/UI sont en constante évolution, cela nous invite à rester à jour sur les dernières tendances de ce domaine. L’avènement de la AR/VR et l’intelligence artificielle promet des évolutions intéressantes en 2023. Notre équipe de designers à la Factory vous a concocté 7 tendances UX/UI à suivre de près cette année.

1 – Les dégradés

Longtemps considéré comme démodé avec sa connotation 90’s, l’effet dégradé fait son grand retour depuis quelques années. Les designers l’utilisent pour :

  • Avoir plus de liberté créative car il offre des possibilités infinies de palettes de couleurs. Il est ainsi utilisé pour créer des designs attrayants et des visuels mémorables ;
  • Il peut donner de la profondeur et dimension à un design. Les dégradés résolvent le problème du flat design (manque de volume ou contraste).
Les dégradés sont une grande tendance cette année. Ici, un mesh gradient (une combinaison en fondu de plusieurs couleurs).

2 – Le design inclusif

Si les directives d’accessibilité au contenu Web (WCAG) guident déjà les designers pour créer des produits conformes aux normes d’accessibilité numérique, nous nous attendons à voir cette année une diffusion et sensibilisation accrue au design inclusif.

Par exemple, Il est probable que de plus en plus d’entreprises intègreront des interfaces vocales dans leurs sites web applications, ce qui permettra aux utilisateur·rice·s – en situation de handicap ou non – d’accéder plus facilement aux informations ou d’accomplir des tâches en gardant les mains libres.

Le design inclusif peut s’appuyer sur les règles WCAG qui dressent les grands principes d’accessibilité numérique.

3 – Le glassmorphisme

Alors que le neumorphisme a connu ses grandes heures il y a quelques années, la tendance est aujourd’hui au glassmorphisme, dont il se distingue par l’utilisation de :

  • La transparence (effet de verre avec un flou en background)
  • Plusieurs couleurs associées à des objets flottants
  • Un contour fin et net
  • Des couleurs vives

Le but du jeu ? Créer une hiérarchie de l’information à l’aide de la profondeur de l’interface. Plus un élément est transparent, moins il est important. L’utilisateur·rice peut ainsi trier et sélectionner les éléments qui l’intéresse plus facilement.

Le glassmorphisme est un jeu de transparence en design visant à mettre en valeur les éléments principaux d’une page.

4 – Les visuels 3D

Les illustrations 3D sont toujours très populaires, d’autant plus depuis l’arrivée des intelligences artificielles artistiques. Elles ajoutent de la profondeur et dimension à un design, le rendant plus engageant et immersif. En 2023, attendez-vous à voir davantage de designers utiliser des éléments 3D pour créer des designs qui sortent du lot.

Exemple d’une illustration 3D pour dynamiser une homepage.

5 – L’AI Design

L’intelligence artificielle étant de plus en plus sophistiquée, elle s’intègre aujourd’hui pleinement partie du process de création UX/UI. Par exemple, les interfaces alimentées par l’IA peuvent nous en apprendre plus sur le comportement des utilisateur·rice·s en s’adaptant automatiquement à leurs besoins, en personnalisant et en adaptant l’expérience utilisateur à leurs exigences spécifiques.

Nous pouvons nous attendre à voir un nombre croissant de sites web et applications utiliser l’IA pour offrir aux utilisateur·ice·s une expérience plus intuitive et personnalisée.

Exemple de design créé par une intelligence artificielle. Ce visuel a été créé grâce à plusieurs prompts sur Mid-Journey.

6 – Le design immersif

L’utilisation du motion design pour créer une expérience de scroll immersive se répand largement, et à juste titre. Créer des animations fluides n’a jamais été aussi simple à l’aide de Javascript, des bibliothèques d’animation ou des implémentations natives.

L’expérience utilisateur s’en trouve boostée : les designers ont encore plus de contrôle sur le contenu que les utilisateur·rice·s voient, comment et quand il apparaît sur leur écran. L’avantage : la possibilité de faire du storytelling et présenter plus stratégiquement le contenu. Avec l’avènement du défilement immersif vient une pléthore de possibilités pour raconter des histoires captivantes.

Exemple de design immersif : l’effet parallax. En scrollant, l’arrière plan bouge moins vite que le texte inséré par dessus.

7 – Les micro-interactions

Déjà répandues, les micro-interactions sont d’autant plus tendances car elles améliorent la navigation d’un site web : elles facilitent l’interaction en fournissant à l’utilisateur·rice un feedback d’informations instantané sur une action réalisée – par exemple, une barre de progression qui indique l’état d’avancement d’une action. Elles prodiguent également des conseils à vos utilisateur·rice·s et dirigent leur attention sur les éléments que vous souhaitez mettre en avant.

Le résultat : une expérience de navigation beaucoup plus enrichissante.

Les micro-interactions sont des animations qui servent à améliorer et dynamiser l’expérience utilisateur.

Vous souhaitez en savoir plus ? Contactez notre équipe de designers à la Factory !

Contactez-nous

Rédigé par Manon Trusgnach, UX Designer à la Factory chez Saegus

Favoriser la collaboration, faciliter la communication et augmenter l’efficacité des collaborateurs : l’intranet se trouve à la croisée des enjeux de l’expérience employé. S’il existe depuis plus de deux décennies, il s’est largement transformé au cours des dernières années pour devenir un lieu de travail numérique à part entière. Pourtant, 72% des collaborateurs déclarent que leur intranet n’est peu voire pas adapté à leurs besoins quotidiens et 22% d’entre eux indiquent qu’une mauvaise expérience utilisateur impacte l’utilisation qu’ils en ont (source).

Avant d’en voir les tenants et aboutissants, revenons à l’essentiel. Qu’est-ce qu’un intranet ?

L’intranet, au cœur de l’expérience employé

Définir un intranet par le terme de réseau social d’entreprise serait, à notre sens, réducteur. L’intranet fait partie intégrante de l’expérience globale vécue par un collaborateur au sein de son entreprise. Il se doit d’accompagner et mettre à disposition, sur une plateforme unique et partagée, l’ensemble des informations et outils utiles aux collaborateurs.

Comment le rendre désirable ? Quels contenus et parcours utilisateur proposer ? Quels sont les leviers d’adoption existants ? L’idée n’est pas de comprendre comment le rendre indispensable, mais plutôt comment donner envie à ses utilisateurs de l’utiliser et à terme, assurer son adoption.

Un espace faisant co-exister les besoins des collaborateurs et ceux de l’entreprise

Un intranet désirable est un intranet qui répond aux besoins de vos utilisateurs et réunit toutes les parties prenantes autour d’une même vision. Ces besoins peuvent être nombreux et différer d’un collaborateur à un autre, et d’une entreprise à une autre. On peut considérer que plus l’entreprise est grande, plus les besoins seront divers et variés.

Pour les collaborateurs

Véritable plateforme d’expérience employé, votre intranet doit permettre aux collaborateurs de trouver facilement et rapidement les informations dont ils ont besoin (actualités, outils RH…), ainsi que les ressources qu’ils utilisent au quotidien (bibliothèque de documents, charte graphique, veille…). C’est donc un outil clé en faveur de la communication interne.

Il permet également aux salariés de mieux connaître leur entreprise (histoire, valeurs, activités…) et découvrir la variété de ses départements, notamment pour les très grandes entreprises.

Ne l’oublions pas : l’intranet est un vecteur d’engagement. En améliorant l’expérience employé, il renforce le sentiment d’appartenance. Les collaborateurs deviennent ainsi les ambassadeurs de leur entreprise.

Pour l’entreprise

Un intranet est un excellent moyen de fédérer et faire adhérer les collaborateurs d’une entreprise aux projets internes. Puisqu’il est commun à tous, c’est un outil excellent pour favoriser la culture d’entreprise et renforcer le sentiment d’appartenance. Les contenus choisis seront également le reflet de l’image de l’entreprise ; l’intranet est ainsi une vitrine de la marque employeur et donc, de la notoriété d’une entreprise, qui dépend en partie des témoignages positifs ou négatifs de ses collaborateurs.

Créer une plateforme sur-mesure

Recueillir les besoins

Adopter une approche user-centric est essentiel : qui de mieux placés que vos end-users pour vous aider à définir les besoins auxquels doit répondre votre intranet ? Le maître mot : co-concevoir

Commencez par rédiger un plan de recherche détaillé qui dictera la méthodologie employée en phase de recherche. Impliquez vos utilisateurs dès le début du projet pour échanger avec eux et ainsi, mieux concevoir pour eux. Par exemple, vous pouvez organiser des entretiens semi-directifs : ils permettent aux utilisateurs de décrire leur quotidien, leur utilisation des services existants et leurs points de frustration et/ou de satisfaction ; c’est aussi la première occasion pour eux de définir les éléments qu’ils ont besoin de retrouver sur la plateforme. Plus le nombre de personnes interviewées est important, plus l’on peut se faire une idée claire et exhaustive des fonctionnalités que devra proposer la plateforme.

Par la suite, conviez-les à vos ateliers de conception de personas ou sitemap ; cela permet de diversifier les points de vue et assure que toutes les voix sont entendues. Les personae sont définis par les entretiens menés : ils regroupent sous un ou plusieurs personnes types tous (ou bon nombre) les traits et besoins des utilisateurs interviewés.

Le contenu du site

Un intranet se doit d’être plus qu’un espace de stockage commun à tous les collaborateurs. Ce doit être le premier outil auquel pense un utilisateur pour trouver une réponse à sa demande ; c’est pourquoi la diversité des contenus de la plateforme doit offrir un élément de réponse à un maximum de questions ou besoins.

Voici quelques idées de typologies de contenus indispensables à y inclure :

  • Le partage d’actualités internes sous la forme de publications régulières témoignant de la vie interne de l’entreprise, comme l’arrivée d’un nouveau collaborateur ou la célébration d’un projet abouti. C’est également un bon espace pour mettre en avant les événements internes : ils seront vus par le plus grand nombre et le taux de participants s’en fera ressentir ;
  • Un annuaire des collaborateurs de l’entreprise ou des personnes clés à contacter (helpdesk, ressources humaines, responsables de l’intranet…) : cela facilite la communication entre les collaborateurs mais permet aussi aux utilisateurs d’avoir plus d’informations sur les rédacteurs de la plateforme et, potentiellement, de susciter l’envie d’en devenir également contributeur ;
  • Un plan de gestion de carrière : pour les nouveaux arrivants, les informations liées à l’onboarding ; pour les collaborateurs pleinement intégrés, les éventuelles formations auxquelles ils sont éligibles.

Les bonnes pratiques d’UX Designer à retenir

Nous l’avons vu, un intranet peut rapidement devenir riche en contenus. Il est alors primordial que les utilisateurs puissent facilement naviguer sur le site. L’information doit rester accessible, en un nombre réduit de clics ; la nomenclature doit être claire.

Chaque entreprise a ses éléments de langage : un intranet ne déroge pas à la règle. Les mots utilisés doivent être minutieusement choisis par l’équipe projet pour faciliter le parcours utilisateur et leur permettre ainsi de trouver rapidement l’information dont ils ont besoin. Il convient de limiter le nombre d’informations proposées à l’utilisateur pour qu’il comprenne facilement le choix qui lui est proposé et de favoriser des formulations explicites. En une seule lecture, les utilisateurs doivent comprendre à quelle typologie de contenu ils ont à faire et s’ils sont sur la bonne voie pour accéder à l’information qu’ils cherchent. Vous pouvez éviter les mots courants comme « ressources » ou « outils » qui donnent peu d’informations sur ce que la page contient réellement ; préférez un wording autour des cas d’usages – se traduisant par des verbes d’action –, comme « poser mes congés » ou « trouver une formation ».

Récolter l’avis des end-users est encore une fois fortement recommandé : plus vous connaitrez votre cible, plus vous pourrez employer un lexique adapté et compréhensible par tous. Privilégiez par exemple un onglet « feedback » donnant la parole aux utilisateurs pour qu’ils puissent y partager leurs ressentis et points de frustration sur l’outil et suggérer des améliorations.

Un intranet doit aussi être accessible à tous : les critères d’accessibilité numérique doivent donc être pris en compte. La taille des polices, les couleurs ou les textes de remplacement des images, entre autres, et doivent être constamment vérifiés et mis à jour afin d’assurer qu’ils rentrent dans ces critères.

Enfin, des maquettes jusqu’au développement du site, il est essentiel de considérer la diversité des devices : desktop, tablette ou mobile, les utilisateurs doivent pouvoir accéder à une plateforme 100% responsive.

Des contraintes peuvent exister

Il arrive que certaines politiques d’entreprise aillent à l’encontre des besoins émis par les utilisateurs. Plusieurs raisons peuvent pousser une entreprise à ne pas appliquer ce qui a été remonté par les utilisateurs : confidentialité de la donnée, démultiplication des outils… Dans ce cas, il peut être intéressant de proposer des tests utilisateurs complémentaires pour trouver une solution adaptée à la fois aux contraintes de l’entreprise et aux besoins des utilisateurs.

Faire connaître l’intranet

Une fois votre intranet construit sur-mesure, il vous reste une dernière étape : le faire connaître auprès de ses (futurs) utilisateurs, leur expliquer ses fonctionnalités et ainsi à terme, assurer son adoption.

Quels sont les bons leviers pour susciter leur curiosité ? Votre plan de communication peut être structuré en plusieurs actions :

  • Évènement de lancement auprès de votre population cible
  • Vidéo teasing
  • Newsletter
  • Goodies, easter eggs et cadeaux à la clé…

Par la suite, pour maintenir l’intérêt de vos collaborateurs, vous pouvez y partager à intervalles réguliers des contenus nouveaux et exclusifs : une newsletter des meilleurs articles du mois, créer des communautés pour inciter à la discussion, partager des bonnes pratiques, proposer des challenges avec récompense à la clé pour l’utilisateur le plus actif… Les possibilités sont infinies.

Enfin, retenez qu’un site évolue avec ses utilisateurs : continuez donc à recueillir les retours de vos end-users. Vous pouvez par exemple créer un espace de sondage dédié pour leur offrir la possibilité de proposer de nouveaux sujets ou fonctionnalités dont ils pourraient avoir besoin.

Conclusion

L’intranet prend pleinement part à l’expérience employé ; il se doit d’être fait pour et par les collaborateurs. Chaque étape de sa construction et vie doit donc être pensée pour son utilisateur. La clé de la réussite ? Être à l’écoute de vos collaborateurs, leur proposer des contenus exclusifs et créatifs à l’appui d’un « look and feel » singulier, soutenus par un plan d’engagement et communication pour accélérer l’adoption.

C’est la valeur ajoutée que soutient notre équipe de designers à la Factory chez Saegus. Vous souhaitez en savoir plus ?

Contactez-nous

Rédigé par Adèle Linguet et Marceau Gerardin, UX/UI Designers à la Factory chez Saegus

Qu’est-ce que ChatGPT ?

ChatGPT est un chatbot développé par Open AI, une organisation spécialisée dans la recherche en intelligence artificielle co-fondée par Sam Altman et Elon Musk, également à l’origine de DALL-E. La version de ChatGPT actuellement proposée est la 3.5, plusieurs versions ayant été mises en ligne précédemment.

ChatGPT est un modèle entraîné sur des milliards de données qu’il puise dans le web pour générer une conversation similaire à celle d’un humain. Il utilise des techniques de machine learning pour améliorer ses prédictions selon les données d’entraînement qu’il a reçues. En d’autres mots : plus le modèle a reçu de requêtes, plus il s’entraîne sur un large corpus de textes et est donc capable de générer des réponses cohérentes en autonomie. Il se nourrit également des retours que l’utilisateur·rice lui fait sur la pertinence ou non de ses réponses.

Essayons-le !

Exemple d’une requête en temps réel

Ce que j’aime

  • ChatGPT est gratuit et disponible en français ;
  • Développement : le chatbot offre une infinité de possibilités. Et notamment, en une simple requête, il peut générer des lignes de code ;
  • L’outil se prête facilement à mes utilisations personnelles : c’est une aide précieuse pour mon travail quotidien de designer (rédaction de documents, traduction, réponse à des questions techniques…). Le plus ? ChatGPT livre du contenu pertinent et utilisable plutôt que du lorem ipsum.

Ce que j’aime moins

  • Biais : ChatGPT peut délivrer des informations incorrectes voire discriminantes. Ce ne sera pas le premier cas de ce fait constaté. Parce que l’intelligence artificielle est entraînée sur des données fournies par des humains – soit donc, l’interprétation du monde par les êtres humains – elle comporte des biais, par exemple racistes ou sexistes ;
  • Subjectivité : si une question n’est pas posée distinctement et directement, ChatGPT peut mal l’interpréter et fournir une réponse erronée.
Exemple de l’une des limites de l’outil : la question comporte deux facteurs impliquant de faire preuve de logique, face à laquelle le chatbot échoue. Toutefois, il prend en compte la réponse qui lui est faite pour corriger la sienne.
  • L’outil répond à certaines questions inappropriées et illégales. Pour cette raison, OpenAI a doté ChatGPT d’un outil de modération de contenus qui classe les demandes selon des catégories types (violence, haine…).

Ce que j’ai apprécié en tant que Designer

“Le mieux est l’ennemi du bien.” Pourquoi faire compliqué quand on peut faire simple ? En deux clics, je suis redirigé vers le chatbot et peux commencer à poser mes questions. L’interface est simple et claire. Une inscription et connexion par mail suffisent.

Sur la colonne de gauche, je retrouve l’historique de mes conversations avec le chatbot. Je peux également les reprendre où je les ai laissées. J’apprécie particulièrement la possibilité de passer le chatbot en dark/light mode pour le confort des yeux.

Dans un effort de transparence, OpenAI donne un certain nombre d’informations utiles à l’utilisateur dès son arrivée sur le chatbot : à la première utilisation, plusieurs explications apparaissent à l’écran (l’outil est en cours de développement, les informations peuvent être erronées, collecte de la data, importance du feedback pour améliorer l’outil…). Plusieurs ressources détaillant le fonctionnement du chatbot (sources d’information, amélioration continue…) sont également disponibles sur la première page du site.

Si l’on étudie le motion, on constate que l’apparition des informations se fait progressivement, donnant l’impression que l’intelligence artificielle “réfléchit” pour donner une information exacte. Ce temps de réflexion animé n’est pas gênant, bien au contraire : il permet aux lecteur·rice·s de digérer les informations livrées au compte-gouttes. Si elles étaient données d’un seul tenant, elles pourraient être indigestes ; l’expérience utilisateur en souffrirait.

Conclusion

Une intelligence artificielle reste une machine. Le contenu généré par ChatGPT est une bonne base pour gagner du temps et accélérer certains travaux (la rédaction d’un article par exemple), mais ne peut être utilisé tel quel. Nous conseillons de relire et vérifier l’exactitude et la véracité de ce qui a été produit.

À votre tour de tester l’outil ! Par ici : https://openai.com/blog/chatgpt/

Rédigé par Marceau Gerardin, UX/UI Designer à la Factory chez Saegus

Résumer ce qu’est l’expérience collaborateur en un seul paragraphe est une tâche bien trop ambitieuse… bien trop ambitieuse tant le sujet est vaste.

Mais j’aime les défis, alors je m’y risque quand même !

Avant de m’y risquer, je me permettrai quelques anglicismes pour plus de facilité et je parlerai dans cet article d’EMEX pour définir l’expérience collaborateur (EMployee EXperience).

Lorsque nous avons parlé pour la première fois d’EMEX, celle-ci est venue se mettre en miroir de l’expérience client. Nous avons alors évoqué l’EMEX comme l’ensemble des interactions et expériences vécues par un collaborateur au sein de l’entreprise, dans les moments clés de son parcours comme dans son quotidien professionnel, de son recrutement (onboarding) jusqu’à son départ (offboarding).

Depuis, cette définition s’est enrichie. Plusieurs autrices et auteurs ont affiné cette analyse et cette description.

L’un des plus inspirants est, selon moi, Jacob Morgan. Il est d’ailleurs biographié comme un conférencier, auteur, mais aussi futuriste. Son dernier ouvrage, The Employee Experience Advantage*, donne de nombreuses pistes pour documenter l’EMEX et définir une stratégie ambitieuse pour offrir la meilleure expérience possible à tous les talents de votre entreprise.

L’avantage du point de vue de Jacob Morgan est d’enrichir la réflexion en positionnant 3 environnements pour définir ce que représente l’expérience d’un collaborateur.

Pour chaque environnement, il y a des briques et sujets à adresser pour garantir que l’EMEX est bonne. Tout l’intérêt de sa vision réside dans la connexion de ces 3 environnements. Dès lors, on ne peut traiter de l’EMEX qu’en s’attachant à investiguer les 3 environnements.

Pourquoi je vous parle de ce contexte ?

Parce que s’il y a bien un sujet qui parcourt les 3 environnements, c’est le Learning.

Car oui, offrir des programmes de développement de carrière est une décision nécessaire pour avoir des collaborateurs fidèles et plus performants. Donner des perspectives d’évolution permet de créer une culture d’entreprise saine, dans laquelle la strate managériale comprend mieux les besoins et aspirations des personnes sous leur responsabilité.

Saviez-vous par exemple que Sephora a créé une plateforme entièrement dédiée à la formation ?

Les bénéfices de telles initiatives sont nombreux :

  • Les personnes formées se sentent valorisées
  • Les personnes formées améliorent leur performance
  • Les personnes formées apprennent de nouvelles choses et enrichissent leur domaine de compétence
  • Les entreprises formatrices nourrissent leur image de marque employeur
  • Les entreprises formatrices retiennent leurs Talents
  • Les entreprises formatrices génèrent de l’attraction candidat

C’est vous dire à quel point ce sujet devient stratégique pour le People Management.

Une question majeure se pose alors ; quel est le point d’entrée pour les contenus dédiés au Learning ? Car oui, pour offrir aux collaborateurs une expérience sans couture, il convient de se poser la question de leur parcours. Comment accéder aux contenus ? Comment les partager ? Comment adapter ces contenus au profil de chaque collaborateur·rice ?

Tadam !

C’est là qu’entre en scène la plateforme d’expérience employé (nous avons définitivement décidé de stopper l’utilisation du mot “intranet”).

Il y a un fort intérêt aujourd’hui à considérer une plateforme d’EMEX comme un Hub et un point d’accès unique pour accéder à des contenus multiples. L’offre de Learning est évidemment une part importante des contenus que les organisations devraient être en mesure de proposer de façon simple.

Je vois plusieurs avantages à positionner les contenus Learning sur les plateformes d’EMEX.

Un point d’entrée unique

Je crois fortement que nos entreprises de demain seront toutes digitalisées. Ceux qui auront fait le pari de considérer une plateforme performante aujourd’hui seront les entreprises innovantes de demain. Évidemment, quand je parle de point d’entrée unique, je pense aussi aux populations frontline qui, encore aujourd’hui, se trouvent trop peu adressées et embarquées dans ces sujets.

Un contenu adapté

Si votre plateforme a été provisionnée et profilée à partir d’une source de vérité unique, vous pourrez alors personnaliser votre contenu en fonction de vos utilisateurs. Ce souhait ne devrait pas être un rêve inaccessible. Nos talents internes méritent une expérience unique et immersive.

Une communication facilitée

Puisque tous vos contenus se trouvent sur une seule interface, vous aurez tout à gagner à créer des points de communication multiples pour promouvoir vos contenus de formation : dans vos communautés, sur vos pages froides, dans des news chaudes… Vous aurez même la possibilité de créer des campagnes de communication spécifiques et des push de notification pour garantir aux utilisateurs la possibilité de trouver la bonne information au bon moment.

Une conception unifiée

En disposant d’une plateforme unique, nous pouvons également harmoniser les prises de parole. Cela permet à nos utilisateurs de développer une relation plus étroite avec la marque employeur et renforcer leur sentiment d’appartenance – étant l’un des enjeux ultimes de l’EMEX.

J’ai travaillé récemment sur plusieurs sujets de plateformes d’expérience employé et ai eu à résoudre ces problématiques. Bien heureusement, certains éditeurs prennent déjà une longueur d’avance en adressant dès à présent le volet Learning et en le valorisant comme un cas d’usage majeur.

C’est le cas de LumApps, qui considère le site d’une organisation comme une Digital Workplace à part entière. Au-delà des traditionnelles attentes en termes de communication interne et partage communautaire, on constate une forte attente concernant l’accès à des contenus de formation et développement. En intégrant ces contenus à une plateforme LumApps, nous réussissons le challenge de mettre à disposition de l’utilisateur toutes les informations qui lui seront utiles.

Vous serez alors en mesure de promettre “une plateforme unique pour des expériences infinies”.

Et c’est alors que la magie opère…

Vous vous souvenez de mon illustre compagnon de lecture Jacob Morgan ? En positionnant le Learning sur une plateforme d’expérience collaborateur, nous aurons réalisé un travail sur :

  • L’environnement physique puisque nous aurons mis ces contenus à disposition sur une Digital Workplace ;
  • L’environnement technologique puisque nous offrirons à nos utilisateurs une interface sans couture qui facilitera leur accès à l’information ;
  • L’environnement culturel puisque nous aurons renforcé notre image de marque employeur et, plus globalement, nous aurons soutenu notre EVP (employee value proposition).

Je vais donc clôturer cet article en citant Jacob Morgan (in English of course, ses livres n’étant pas encore traduits… What a pity !) :

Learning and development is designed to make sure that employees never stop learning and adapting to the changing world. Learning and development helps make sure that we continue to grow as individuals. Instead of taking learners to great learning, you should be taking great learning to your learners. This means that you can be anywhere in the world and get access to a top-notch learning infrastructure.

Que vous soyez à la DSI, la RH, la Com, en équipe de LMS, que vous fassiez du People Management, emparez-vous de ce sujet, et vite !

Vous souhaitez en savoir plus ou être accompagnés par nos équipes de la Factory ?

Contactez-nous

Rédigé par Charlotte Zekraoui, Manager Factory

*Source : The Employee Experience Advantage – Jacob MORGAN – 2017

La Factory, notre département de designers et développeur·se·s, prend la parole pour vous : aujourd’hui, Julie, Motion Designer chez Saegus, nous présente une mission récemment menée auprès de notre client Ip Directions.

À partir de 2023, la loi française obligera tous les opérateurs à transmettre à leurs clients des appels et sms certifiés, c’est-à-dire non-usurpés. Cette législation est une réponse aux sollicitations intrusives par téléphone qui se sont multipliées au cours de la décennie.

Dans ce cadre, Ip Directions propose aux opérateurs un service de certification d’appels propres et certifiés. L’entreprise a développé un système automatisé pour sécuriser les appels en bloquant ceux qui ne sont pas validés en amont.

C’est dans ce contexte qu’Ip Directions a fait appel à Saegus. L’objectif : créer une vidéo de présentation de ce nouveau service pour adresser les opérateurs, informer les consommateurs et favoriser l’engagement sur les webinaires informatifs proposés par l’entreprise.

Le Motion Design pour communiquer sur une notion technique

Par nature, nos interlocuteurs principaux étaient ingénieurs de formation. Ils utilisaient donc un langage très technique, qu’il fallait rendre compréhensible à un large public. C’est là tout l’avantage du Motion Design : simplifier et illustrer une notion complexe pour faciliter la réception d’un message clé à une audience cible, à l’appui du storytelling.

Par ailleurs, la nécessité de créer deux vidéos s’est imposée pour adresser la diversité des publics cibles : une première présentant le contexte existant et les enjeux ; et une seconde plus technique sur le processus de la clarification de la donnée.

Après avoir défini le contexte, le processus de création de chaque vidéo a été découpé en plusieurs étapes :

  • Le script : il permet de choisir et valider les éléments écrits de la vidéo (wording, ton of voice). Le challenge était de traduire une terminologie technique en un langage compréhensif par le grand public ;
  • Le storyboard : ou la mise en image. C’est à cette étape que le propos est animé pour illustrer les propos complexes. Nous avons également choisi de faire intervenir un speaker pour favoriser la pédagogie et faciliter la compréhension du propos.
  • La musique de fond : le choix de musique intervient à cette étape car le tempo des animations est désormais défini ;
  • La voix-off : pour la cohérence de la vidéo, nous avons gardé une même voix pour l’ensemble de la vidéo ;
  • L’animation : soit la symbiose entre ce qui a été composé (illustrations, musique, voix-off) ;
  • Le sous-titrage : cette étape assure l’accessibilité de la vidéo.

Découvrez les livrables

Ce deuxième livrable mixe des compétences multiples (After Effects, Premiere Pro, Powerpoint…). Pour faciliter la co-édition des éléments de vocabulaire avec le client, nous avons choisi d’utiliser PowerPoint. Cette souplesse était d’autant plus nécessaire pour ce projet : parce que le contexte technique et les éléments de vocabulaire évoluent rapidement, notre client pourra mettre à jour la vidéo en autonomie dès qu’il le souhaitera.

Conclusion

Les formats que nous avons créés ont été visionnés plus de 8 000 fois et partagés une centaine de fois ; 130 personnes se sont inscrites sur l’ensemble des six webinaires. “C’est un plaisir de découvrir de nouveaux univers professionnels, comprendre les rouages d’un domaine pointu et ouvrir ces connaissances au grand public grâce à des méthodes d’écriture et des illustrations graphiques ludiques”, indique Julie, Motion Designer chez Saegus.

Vous souhaitez en savoir plus ou être accompagnés par nos équipes de la Factory ?

Contactez-nous

La conférence annuelle d’Adobe, au cours de laquelle l’entreprise présente ses innovations pour le Creative Cloud, s’est tenue du 18 au 20 octobre dernier. Pour cette édition hybride, l’événement proposait plus de 200 sessions et labs pour les participants sur site à Los Angeles et plus d’une centaine d’ateliers gratuits pour ceux à distance.

Une thématique était au cœur des innovations annoncées : inventer le futur de la création collaborative et immersive en s’appuyant sur l’intelligence artificielle.

Les innovations à retenir

Notre équipe de designers à la Factory revient pour vous sur les grandes nouveautés à retenir :

  • Rachetée par Adobe à la mi-septembre pour 20 milliards de dollards, Figma se pare de nouvelles fonctionnalités : on notera notamment l’arrivée promise d’Adobe Fonts sur la plateforme et la possibilité d’intégrer prochainement des vidéos dans les prototypes. Pour asseoir l’intégration de l’outil dans l’écosystème Adobe, il est désormais possible – en version bêta pour l’instant – de copier un travail destiné à être commenté par d’autres personnes sur Photoshop et Illustrator. Une bonne nouvelle pour nos équipes, Figma étant très prisé par nos designers : permettant de centraliser les retours sur un projet, ces nouvelles fonctionnalités entraîneront un gain de temps et une facilité d’organisation considérables ;
  • Substance 3D : le logiciel dédié à la création de textures de haute qualité (jeux vidéos, effets spéciaux…) se tourne vers le métavers en collaborant avec Meta. L’outil sera intégré à la plateforme Quest pour permettre la création et le partage d’expériences immersives dans les casques de réalité virtuelle du géant américain ;
  • Photoshop :
    – Lancement de “Content Credentials” : la fonctionnalité bêta permet aux abonnés d’ajouter des détails d’attribution à leurs images exportées (modifications, activité et nom du créateur). Ces informations sont ensuite associées à l’image en tant que données d’attribution et d’historique inviolables ;
    – La fonctionnalité “Sélectionner un sujet” sait maintenant reconnaître automatiquement les personnes, animaux et objets – et corriger seul les détails.
  • Premiere Pro : “Project Instant Add” permet maintenant de retoucher en post-production le contenu d’une vidéo comme cela est possible sur une image. Les utilisateurs choisissent une image ou texture sur laquelle ils souhaitent ajouter du texte ou des images, puis l’IA répercute ces modifications sur l’ensemble de la vidéo ;
  • L’entreprise a également présenté une technologie en cours de développement : “Project Artistic Scenes”, visant à faciliter la création de contenus 3D immersifs. Derrière cette innovation, une intelligence artificielle transformant des illustrations 2D en scènes 3D ; les créateurs pourraient ainsi développer simplement du contenu pour créer des expériences en réalité virtuelle et en réalité augmentée.

Nos designers ont hâte de tester ces nouveautés qui annoncent de belles perspectives pour l’avenir de la collaboration. À suivre !

Vous souhaitez en savoir plus ou être accompagnés par nos équipes de la Factory ?

Contactez-nous

Qu’est-ce que Pika ?

Pika (prononcé pi-kuh) est une petite application open-source pour pipeter les couleurs. Le concept défendu par son créateur, Charlie Gleason, est de donner à l’utilisateur·rice la possibilité d’instantanément pipeter une couleur sur son écran dans le format de son choix. L’application est exclusive à MacOS.

Comment accéder à Pika et l’utiliser ?

En bonne application open-source, le code de Pika est disponible sur la page Github de son créateur. Pour ce qui est de l’accès direct à l’application téléchargeable, visitez ce site-ci. L’installation et la prise en main est quasi immédiate et c’est ce qui fait son charme :

  • Téléchargez le fichier de l’application ;
  • D’un double-clique, installez Pika ;
  • Dans la foulée, configurez un raccourci clavier pour pouvoir l’activer quand vous le souhaitez ;
  • Et vous êtes paré•e !

Les avantages ?

  • La rapidité de manière générale : le lancement de l’application, la sélection de votre couleur et la consultation des résultats se font sans temps de chargement. Dans votre flow de travail quotidien, ce gain de temps est vraiment appréciable ;
  • Il vous est possible de sélectionner une couleur de premier plan et une couleur de second plan. Très utile pour les comparer ou en analyser le ratio de contraste et la conformité WCAG, propres aux bonnes pratiques de l’accessibilité numérique ;
  • Vous pouvez également choisir d’un clic le format des couleurs : HEX, RGB, HSB et même HSL. Chaque couleur apparaîtra alors avec son code et son nom. Exemple : Blanc, #FFFFFF.

Les inconvénients ?

Même si son créateur a – dès le départ – ouvertement clamé son amour pour MacOS et l’ensemble de son écosystème, il est vraiment regrettable que cette application si pratique ne soit pas accessible aux utilisateur·rice·s de Windows et Linux. Croisons les doigts quand même !

Ce que j’ai apprécié en tant que Designer

En tant que Designer, j’ai beaucoup apprécié le gain de temps notable qu’offre Pika. Pas de tergiversation, d’un simple clic l’outil s’active en mode pipette prêt à l’action. Ce qui est encore mieux, c’est que cette application ne s’adresse pas uniquement aux Designers, bien au contraire ! Chacun·e est en capacité d’employer cet outil dans son travail quotidien pour monter en compétences et veiller au bon respect de l’accessibilité numérique par exemple. Enfin, il est possible de remonter des commentaires et suggestions au créateur afin de l’aider à faire évoluer le produit.

Alors, qu’attendez-vous pour le tester ?

Rédigé par Joseph Deffayet, Consultant Senior Factory

Le cerveau mémorise plus facilement un contenu lorsqu’il est illustré par un visuel et accompagné par du son : nous retenons 10% de ce que nous lisons, 20% de ce que nous entendons et 60% de ce que nous lisons et entendons simultanément.

Un format alliant ces deux éléments sera donc plus impactant. C’est là qu’intervient le motion design : l’art de mettre en mouvement des éléments (schémas, images, typographies, illustrations) synchronisés sur une musique, voire une voix-off. L’objectif : simplifier et illustrer une notion complexe pour faciliter la réception d’un message clé à une audience cible.

Il peut être diffusé sur tout support pouvant accueillir un format vidéo : réseaux sociaux, YouTube, télévision, cinéma, écran publicitaire… Il est donc particulièrement adapté pour :

  • Faire de la pédagogie : vulgariser un propos auprès du grand public ;
  • Une présentation produit : en montrant ses atouts et cas d’usage par exemple ;
  • Animer un live event : en s’appuyant sur une identité visuelle définie, les animations encadrent les différentes séquences (animer le logo, créer un carton pour les questions ou le nom de l’intervenant·e) d’une émission télévisée ou un webinaire par exemple ;
  • Brander une marque ou œuvre : on pense par exemple aux génériques de films, celui créé dans les années 1960 pour la série de films James Bond étant considéré comme le premier motion du cinéma.

Les entreprises utilisant la vidéo comme contenu marketing obtiennent un taux de clics et de conversion web étant respectivement 27% et 34% plus importants que celles qui ne l’utilisent pas (source : Vidyard). L’explication est simple : une présentation produit en motion design, plutôt qu’une image packshot, met l’accent sur l’émotion à l’appui du storytelling. Parce qu’il·elle pourra mieux se projeter dans l’utilisation du produit, le·la consommateur·rice sera plus enclin·e à passer à la phase d’achat.

Le format vidéo est aujourd’hui l’allié du référencement naturel (SEO) : par exemple, une vidéo publiée sur YouTube intégrée dans un site web générera plus de vues, les deux algorithmes travaillant ensemble pour créer de l’engagement.

Les étapes de création d’une vidéo en motion design

  • Le contexte : quel est le message clé de la vidéo ? Quelle est sa cible ? Où sera-t-elle diffusée ? Quelle est la direction artistique de la marque ? Quelle ambiance recherche-t-elle ? Une maison de luxe recherchera par exemple des transitions douces, alors qu’une marque d’art discount préférera des effets plus rapides ;
  • Le script : c’est ici que commence le storytelling. Uniquement écrit, le script définit le fil conducteur de la vidéo et les mots clés à introduire. Il est essentiel de verrouiller ici le « ton of voice » et les tournures de phrase avec les parties prenantes ;
  • Le storyboard : ou la mise en image. C’est à cette étape que le propos est illustré (animation, personnage…) en accord avec la charte graphique de la marque. Notre astuce : pour aider un client à se projeter, créez votre storyboard en haute fidélité sur Illustrator – la hiérarchisation des informations, les couleurs et les animations seront proches du rendu final ;
  • La musique de fond : le choix de musique intervient à cette étape car le tempo des animations est désormais défini ;
  • (Optionnel) La voix-off : pour trouver celle qui sera le mieux adaptée à une vidéo, enregistrez-en plusieurs aux timbres différents et testez-les ;
  • L’animation : soit la symbiose entre ce qui a été composé jusqu’ici (illustrations, musique, voix-off) ;
  • Le sous-titrage : cette étape assure l’accessibilité de la vidéo.
Exemple de storyboard

Les 5 principes du motion design

Voici quelques conseils non-exhaustifs que nous appliquons dans la création de nos vidéos :

  • Une vitesse de lecture confortable : le danger étant d’être trop rapide. À force de travailler sur une vidéo, nous finissons par en connaître le contenu par cœur. Ce n’est pas le cas du·de la spectateur·rice qui regarde la vidéo pour la première fois et essaie d’absorber le maximum d’informations. Tip : faites tester votre vidéo à différentes personnes ;
  • Choisir une typologie d’animations : à conserver tout au long de la vidéo pour créer de la linéarité et cohérence. Créez des points de repères avec des effets de répétition – par exemple, une typologie pour des questions. Choisissez des animations en accord avec la hiérarchisation des informations et évitez celles étant trop originales (par exemple, un titre apparaissant en tourbillon à l’écran) – sauf si c’est l’effet recherché ! ;
  • Pensez à l’accessibilité : en évitant les animations rapides et brusques pour les personnes épileptiques, les aplats de couleurs similaires pour les personnes daltoniennes… ;
  • Synchronisez : vos animations avec le tempo de la musique ;
  • Ne craignez pas le vide ! Favorisez un ensemble épuré et séquencez les mises en page.

Les logiciels couramment utilisés

Il existe de nombreux logiciels couramment utilisés pour les différentes étapes du motion design (Potoon, Animate…). Nous nous concentrerons sur Illustrator et After Effect, qui sont ceux que nous utilisons le plus chez Saegus.

Illustrator est particulièrement utile pour l’étape de création du storyboard. Il permet de travailler sur des formations vectorielles. Un bémol : les graphismes manquent parfois de texture, donnant un rendu un peu froid.

After Effect est un logiciel aux possibilités infinies pour la création d’animations sur-mesure. Le logiciel est régulièrement mis à jour et de nouvelles fonctionnalités sont proposées chaque année. La seule limite : votre créativité !

Un·e bon·ne motion designer saura…

  • Faire une veille pour connaître les bonnes pratiques, tendances, idées d’animations… ;
  • Comprendre et s’adapter au tone of voice d’une marque ;
  • Donner un mouvement fluide et naturel aux animations.

Les projets de motion design chez Saegus

Chez Saegus, nous travaillons principalement sur des projets d’animation de marques ou produits. En voici quelques exemples :

Hololens 2 : à travers un cas d’usage, cette vidéo montre le pain point que résout cette technologie et comment l’utiliser concrètement sur le terrain.

Accompagner l’adoption des outils de collaboration comme Office 365 : ce type de vidéo met en avant les nouveaux usages et les fonctionnalités des outils correspondants. Il est ici nécessaire de bien comprendre les besoins de chaque client et créer une vidéo qui leur est spécifique, selon leur niveau de maturité digitale.

Animer la marque Saegus : en illustrant notre positionnement, nos offres, nos événements…

Vous souhaitez être accompagnés par nos designers à la Factory ou en savoir plus ?

Contactez-nous

Rédigé par Julie Ramier, Designer à la Factory

TypeScript est un langage de programmation fortement typé qui s’appuie sur JavaScript, qu’il enrichit de nouvelles fonctionnalités.

Développé par Microsoft en 2012, TypeScript connaît une grande popularité dès 2017. À l’époque, Microsoft souhaite créer un langage de programmation pouvant assurer une meilleure gestion des projets à grande échelle. Jusqu’ici, JavaScript est utilisé seul car il l’est l’un des seuls langages acceptés par les navigateurs – mais il est mal adapté aux grands projets (trop complexe, pas de typage, pas d’interface…).

Comment TypeScript intervient-il dans le processus de codage ? Comment fonctionne-t-il ? Quels sont ses avantages ?

Qu’est-ce que TypeScript ?

TypeScript est transcompilé en JavaScript, c’est-à-dire qu’il traduit le code TypeScript vers du code JavaScript afin qu’il soit interprété par tous les navigateurs.

Le grand avantage de TypeScript, comme son nom l’indique, est qu’il permet de typer son code, soit d’attribuer un type aux éléments du code source (variables, fonctions…). En conséquence, chaque élément joue un rôle identifié.

Par exemple :

  • En TypeScript : sur la ligne de code “let count : number = 2”, il est indiqué que count est obligatoirement un nombre ;
  • En JavaScript : sur la ligne de code “let count = 2”, count peut être un autre type par la suite, puisqu’il n’est pas référencé comme nombre ;
  • Si l’on considère la ligne de code “count = “hello world”” : en TypeScript, cette ligne sera erronée (puisqu’elle ne correspond pas au typage précédemment effectué), ce qui ne sera pas le cas en JavaScript.

Ses points forts

Parmi ses autres avantages, nous pouvons citer :

  • L’autocomplétion : par exemple, si l’on souhaite créer un array, TypeScript suggère automatiquement les fonctions liées au type référencé en amont (filter, map, find…) ;
  • La documentation : même s’il est essentiel de documenter son code, pour soi-même comme un·e futur·e développeur·se qui reprendrait un projet, TypeScript permet d’éviter les commentaires à l’intérieur du code, comme “//version doit être nombre” ;
  • La propreté : JavaScript est souvent jugé permissif voire incohérent ; TypeScript pallie ce problème grâce aux détails qu’il est possible d’y ajouter, le rendant plus facile à lire et comprendre ;
  • La gestion d’erreurs : les erreurs commises en TypeScript, qui empêcheraient la compilation du code, sont signalées par un liseré rouge – ce qui n’est pas le cas en JavaScript. Jusqu’alors, ce travail était fait par des bibliothèques ou éditeurs de texte ;
  • La maintenabilité : puisque le code est typé, il est plus facilement maintenable. Les futures mises à jour seront plus simples et rapides, entraînant un gain de temps et d’argent.

TypeScript condense donc de multiples fonctionnalités en un seul outil.  À l’inverse, certain·e·s développeur·se·s estiment qu’il alourdit le code, puisqu’il l’alimente avec de nouvelles fonctionnalités – ce qui est compréhensible à l’échelle de petits projets.

Toutefois, nous pouvons considérer que TypeScript est adapté à tous les types et échelles de projets ; nombreux sont les petits projets qui prennent par la suite de l’ampleur !

Cas pratique

Conclusion

TypeScript a définitivement révolutionné la manière de coder. Il est de plus en plus adopté, pour les nouveaux comme les anciens projets – de nombreux sites ont mis à jour leur code avec TypeScript. Le choix revient bien sûr aux développeur·se·s d’utiliser ce langage, selon leurs habitudes et sensibilités personnelles, mais il ne fait aucun doute que TypeScript continuera son ascension : il est déjà aujourd’hui parmi les 10 langages de programmation les plus utilisés (source).

Vous souhaitez en savoir plus ?

Contactez-nous

Rédigé par Diesen Nwoumga, Consultant Factory

Un Design System est une bibliothèque de guides et références au service de la construction de standards d’expérience utilisateur de produits d’une marque. Il est propre à chaque marque et permet de garder une cohérence à travers les supports qu’elle développe. C’est une référence essentielle pour les parties prenantes d’un projet ou les membres chargés du développement d’un produit.

Constitué d’éléments qui se répondent les uns aux autres, le Design System doit être pensé comme un ensemble cohérent. Selon la méthode de l’atomic design théorisée par Brad Frost en 2015, les caractéristiques (forme, couleurs, typographie…) d’un premier élément (une “molécule”) définissent un style (l'”atome”) déclinable pour créer l’ensemble des composants. C’est en imbriquant ces composants que l’on peut créer des templates complexes (formulaires, menus…), jusqu’à la création complète d’une maquette.

S’il n’y a donc pas de règles précises à suivre pour la création d’un Design System, quelques étapes clés se dessinent :

  • Déterminer les enjeux et objectifs liés à la conception du Design System ;
  • Faire l’audit de l’existant (s’il y a un existant) ;
  • Concevoir le Style Guide : principes visuels de typographie, palettes des couleurs et règles associées, grilles de structuration des éléments ;
  • Définir les principes de communication de la marque, soit la charte éditoriale (langage, ton…) ;
  • Prioriser puis créer les composants de l’interface ;
  • Assurer la maintenabilité du Design System.

Se posent alors les questions : comment créer un bon Design System ? Quels en sont les avantages ? Comment le maintenir à travers le temps ?

Faire l’audit de l’existant (facultatif)

Lorsqu’une marque est bien implantée, son identité visuelle est souvent déjà existante. Il est alors nécessaire de faire l’inventaire de l’existant : si elle dispose d’une charte graphique – plus techniquement, d’un Style Guide –, quels sont les codes graphiques, les logos, les guidelines qui y sont inclus ? S’il n’y en a pas, quels sont les composants existants de l’identité visuelle de la marque ?

C’est en dressant cet inventaire qu’il est possible de déceler les incohérences et les manquements dans l’expérience utilisateur : par exemple des boutons d’actions, des styles de titres démultipliés ou des ombres qui ne seraient pas similaires. À partir de ce constat, il est possible de proposer des axes d’amélioration qui seront la base du Design System.

La définition des rôles et process

Si elle fait gagner du temps sur les projets développés par la suite, la création d’un Design System prend du temps et de la réflexion, en amont puis en production. Pour faciliter les nombreux échanges entre les parties prenantes, il est nécessaire de définir clairement les process et les rôles de chacun·e – cela favorisera la création d’un Design System pertinent et cohérent et donc, les interactions futures liées à la création d’une interface.

D’abord, en créant une nomenclature commune. Y a-t-il déjà un langage partagé et quelles en sont les définitions actuelles ? Varient-elles d’une BU à une autre ? Établir un langage commun facilitera la création des interfaces et évitera des potentielles confusions ou malentendus, les équipes étant mieux alignées. Il peut être nécessaire de définir des fondamentaux communs (par exemple, un banner = une bannière), puis de simplifier certains termes s’il y a lieu.

Par exemple : m-banner-hover
> M pour molécule (atome > molécule > organisme) ;
> Banner pour bannière, soit le type d’élément ;
> Hover pour l’état ou la variation de l’élément.

Cet exemple va faciliter le dialogue entre les designers et les développeurs, accélérant ainsi leur temps d’exécution. Ce gain de temps leur permet à terme d’affiner des détails poussés comme les micro-interactions. Enfin, une nomenclature commune permettra de vite identifier l’élément autant dans la maquette que dans le code source.

Concevoir le Style Guide

Avant tout, un Design System doit être composé d’un guide de style (Style Guide). Celui-ci se rapproche de la charte graphique d’un produit.

Le guide de style va permettre de recenser ce qu’on appelle les “perceptual patterns” qui font référence aux éléments suivants : couleurs, typographies, espaces, formes, icônes, illustrations, photographies, animations, sons.

Ces éléments vont être utilisés comme atomes dans la conception globale des composants.

Définir les principes de communication de la marque

La charte éditoriale est une composante clé du Design System. C’est le travail de l’UX Writer : en travaillant les éléments de langage (ton, mots-clés, informations…) en accord avec l’image de la marque, il·elle harmonise les principes de communication pour accompagner au mieux les utilisateur·rice·s tout au long de leur parcours. Par exemple : pour une interface médicale, il est préférable d’utiliser des mots simples à un vocabulaire scientifique – c’est ce que préconise Oxygen, le Design System de Doctolib.

Nous ne vous en disons pas plus, car vous pouvez retrouver notre article détaillé sur l’UX Writing ici !

Prioriser puis créer les composants

Quels sont les composants (header, bouton, card…) les plus fréquents dans l’interface développée ? Lesquels sont les plus utilisés ? Ce sont eux qu’il faudra développer en premier. Ensuite, il faudra se demander : quels sont les composants propres à l’entreprise ? Comment développer des micro-interactions cohérentes ?

Le milieu de l’UX étant en constante évolution, et les nouvelles tendances étant nombreuses, un Design System doit être holistique. Les composants doivent donc être adaptables et affichables sur différents devices – d’autant plus que ceux-ci sont de plus en plus variés et nombreux -, tout en conservant leurs caractéristiques et fonctionnalités. Ils doivent également s’articuler facilement entre eux. Le but ? Délivrer une expérience homogène mais unique sur chaque support. Pensé ainsi, le DS pourra répondre à un maximum d’usages, de besoins et de contraintes futurs. Lorsque les micro-interactions sont alignées, l’expérience utilisateur est cohérente, simple et facile – impactant à terme l’image d’une marque de manière positive.

Assurer la maintenabilité du Design System

Pour maintenir un Design System dans le temps, les parties prenantes de l’entreprise doivent être impliquées en étant au fait de la nomenclature choisie et des règles établies.

Montrer rapidement les résultats de ce qui a été conçu permet d’engager les équipes à travers des KPIs préalablement définis : a-t-on gagné en temps de production lorsque l’on sort un nouveau produit ? Le taux de rebond a-t-il diminué ?

Conclusion

Si le Design System a été conceptualisé il y a plus d’une dizaine d’années, il est de plus en plus intégré dans les projets. Ses bénéfices sont multiples, mais l’on peut toutefois retenir 3 points : une simplification de la relation designers/développeur·euse·s, un gain dans la rapidité d’exécution et donc, une constance dans l’expérience utilisateur qui sera plus détaillée et cohérente, comme la marque qu’elle représente.

Vous voulez en savoir plus ? Vous souhaitez être accompagné·e·s sur un projet ? Contactez nos équipes à la Factory !

Contactez-nous

Rédigé par Yasmine Morsi, Consultante Confirmée Factory

(1) https://airbnb.design/building-a-visual-language/