Ici archive

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 ?

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 ?

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 ?

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 ?

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 !

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

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

Qu’est-ce que 30sec ?

Je suis loin d’être la seule à apprécier la bonne chère avec quelques camarades au loisir d’une terrasse. Je me trouve pourtant bien dépourvue quand vient l’heure du paiement (je ne sais pas compter).

Tada ! 30sec est une application qui permet de partager et régler rapidement l’addition en quelques clics.

Mon user journey

  • Un accès très simple : après avoir scanné le QR code de ma table, je n’ai eu qu’à entrer mon prénom ;
  • Une absence de calcul mental : je n’ai qu’à cliquer sur les plats en haut de l’écran pour constituer mon addition ; les autres convives peuvent en faire de même. Il est possible d’ajouter un pourboire pré-rempli ou de le personnaliser juste en dessous de manière très claire. Pratique lorsque l’on n’a pas de monnaie !

Les petits plus

  • J’ai le sentiment que l’usage du QR code, dont je doutais il y a quelques années, s’est vraiment installé dans nos habitudes avec les cartes des restaurants, le passe sanitaire et la présence de Google Lens ou similaires sur la majorité des devices mobiles ;
  • Pas besoin d’attendre l’addition même en heure de pointe ;
  • Vous pouvez choisir le prénom que vous voulez !

Les moins

  • Le paiement par carte de ticket restaurant n’est pas disponible ;
  • Le site internet de 30sec apporte peu d’informations, vous devez donc vous fier à mon expérience ;
  • L’app est disponible uniquement dans une sélection de restaurants pour l’instant.

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

  • J’ai payé en 30 secondes (un peu plus pour contempler cette merveille d’expérience utilisateur) ;
  • La possibilité de payer par GPay en deux taps sur mon téléphone intelligent ;
  • L’envoi du ticket par mail ou la possibilité de le télécharger directement sur mon téléphone ;
  • Tout régler sur un seul écran, de manière sécurisée, avec une confirmation claire à la clé.

Bon appétit !

Rédigé par Anne d’Andigné, Consultante Confirmée Factory

Que vous soyez UX Writer chevronné·e, designer, researcher ou que vous travailliez avec ces profils, il est toujours bon de se rappeler quelques bonnes pratiques liées à la microcopie et à l’usage du texte dans les interfaces sur lesquelles vous allez intervenir.

Voici donc quelques conseils qui me servent beaucoup dans mon métier !

Apprenez une nouvelle langue

En amont du projet, effectuez une recherche approfondie sur le sujet, le vocabulaire ou tout type de jargon lié au domaine du projet. Participez autant que possible à la recherche utilisateur, prêtez une attention particulière aux mots utilisés par les utilisateur·ice·s en interview. Vous aurez des repères, surtout si vous travaillez sur des applications techniques ou spécifiques à certains métiers ou domaines particulier, comme le secteur médical ou encore scientifique.

Back to basics !

De manière générale, n’hésitez pas à fréquemment recourir au dictionnaire pour vraiment percevoir la signification d’un mot. Cela vous aidera à être plus précis·e dans votre formulation des textes de l’interface. 

Analysez les applications

Et sites que vous aimez utiliser. Comment avez-vous réussi du premier coup à chercher un itinéraire sur Citymapper, à publier une annonce sur Le Bon Coin ? Pourquoi avez-vous eu du mal à commander un taxi sur une application VTC ?  

Détachez-vous de la vision produit

Mettez-vous à la place de l’utilisateur·ice. Récemment, j’ai ajouté une fonctionnalité d’export de données depuis une interface. Je pensais nommer le bouton “exporter”, mais peut-être le mot “télécharger” signifiera-t-il mieux que l’utilisateur·ice aura son fichier enregistré localement sur son ordinateur à l’activation de ce bouton.

Relisez votre texte à haute voix

L’entendre énoncé tout fort peut vous aider à imaginer comment il sera perçu. Cette technique vous poussera aussi à raccourcir vos phrases si vous finissez à bout de souffle en lisant le label d’un champ !

Lexical system

Définissez un vocabulaire commun avec votre équipe et votre client et décidez précisément qui est quoi. Cela peut se formuler à travers un document Word ou quelques slides toutes simples – une sorte de glossaire commun. Partagez ce document entre clients, équipe marketing, designers, développeur·euse·s pour être sûr·e d’adopter le même langage lorsque vous parlez d’une fonctionnalité, d’un composant ou d’une étape du projet. Vous éviterez tout quiproquo surtout pour des systèmes complexes où les synonymes sont facteurs de confusion. Faites en sorte que toutes les parties prenantes adoptent ce langage commun.

Par extension, il pourra servir :

  • aux Scrum Masters à repérer les US ;
  • aux Project Owners à nommer et affiner les prochaines fonctionnalités ;
  • aux développeur·euse·s à nommer leurs classes CSS pour une passation plus efficiente ;
  • aux UX/UI pour nommer précisément les composants du design system/kit UI, etc.

N’utilisez plus de Lorem Ipsum

Lorsque vous n’avez pas reçu le contenu. En tant que designer, vous connaissez la douleur de ne jamais l’avoir à temps, ce qui ralentit votre production. Qu’à cela ne tienne ! Saisissez cette opportunité pour vous atteler au texte et faire un brouillon de premières propositions de wording. Du reste, votre maquette sera même plus claire pour vous.

Comme le dit si bien Laura Wright,

Copy shouldn’t be an afterthought. Use the vocabulary and language you discovered during the research phase when designing any part of the UI. Try to verbalize and create rough content instead of using Lorem Ipsum. Placeholding with drafted text brings content to the forefront of the design process.

Designing with words: Tackling UX writing as a UX designer, Laura Wright

La peer review entre designers

S’applique aussi au texte ! Demandez à vos collègues d’effectuer une tâche sur votre prototype et voyez comment ils·elles s’en sortent. Si vous remarquez une légère hésitation, l’heure est venue de tester une autre formulation.

À vos plumes !

Rédigé par Anne d’Andigné, Consultante Confirmée Factory

Habituez-vous à la terminologie EE…

L’EE, c’est comme si nous parlions d’UX (User Experience) ou de CX (Customer Experience) en interne des entreprises : EE pour Employee Experience… L’expérience collaborateur, en voilà une belle proposition pour 2022, faites vivre une expérience à vos collaborateurs et collaboratrices !

Et c’est là que l’intranet change radicalement de visage en 2022,
OUT « le site interne », place aux plateformes d’expérience employé :

  • Partager de l’information inédite ;
  • Communiquer avec ses pairs ;
  • Travailler différemment.

Quoiqu’en on en dise, la crise sanitaire aura eu l’avantage d’accélérer la nécessité de disposer de plateformes internes innovantes dans nos entreprises et nos organisations. Une plateforme interne, c’est bien plus qu’un site de diffusion de l’information.

C’est un lieu d’échange, qui permet de parler à n’importe qui n’importe quand sur un sujet, une initiative, une bonne pratique… bref, l’occasion de mieux connaître celles et ceux qui partagent votre quotidien professionnel ou qui pourraient le partager demain. C’est un lieu de travail, qui permet de donner des référentiels conjoints, de documenter des procédés, de partager des expériences vécues et de mettre tout le monde sur un niveau de connaissance commun.

Enfin, c’est un lieu qui devient presque communautaire : car oui ! Le développement et le renforcement du sentiment d’appartenance n’est pas qu’une douce utopie, il est une réalité pour des milliers de salarié·e·s et dirigeant·e·s d’entreprise. Aujourd’hui, il ne suffit pas de travailler pour… Il s’agit aussi d’être fièr·e de travailler pour !

Ces dernières années, notre cabinet Saegus a accompagné plusieurs clients dans la création ou la refonte de leurs plateformes internes : des gros et des petits, des groupes transverses comme des groupes silotés, des clients qui partaient de zéro et d’autres qui étaient déjà bien avancés… Savez-vous ce qui relie ces clients ? La réussite ne peut venir que d’un engagement collectif !

Si vous pensez que l’amélioration significative de l’expérience employé ne passe que par la mise en place d’une nouvelle solution, passez votre chemin ;

Si vous êtes persuadés que l’accompagnement au changement est secondaire, la réussite restera en demi-teinte ;

Enfin, si vous croyez qu’un site interne ne se traite pas comme n’importe quel produit digital, vous faites fausse route.

Notre cabinet est partenaire depuis plusieurs années de LumApps. La raison pour laquelle nous nous engageons dans ce partenariat est la capacité de l’éditeur à pousser son produit toujours plus loin pour en faire un levier incroyable d’amélioration de l’expérience employé et de l’engagement collaborateur.

Si, il y a quelques années, la solution pouvait se limiter au partage de contenus et à quelques fonctionnalités communautaires, les cas d’usage qui sont adressés aujourd’hui sont presque infinis :

  • J’ai besoin d’un espace de diffusion pour partager des informations corporate ;
  • Je souhaite un espace sécurisé pour travailler et échanger les bonnes pratiques avec mes pairs ;
  • J’aimerais proposer des fonctions d’interactions sociales avancées pour que chacun et chacune se sente libre de diffuser sa propre voix en interne de l’entreprise ;
  • J’aimerais en apprendre davantage sur les autres entités de mon entreprise ;
  • Je suis frontline worker mais cela ne devrait pas me couper des informations internes et du partage avec mes collègues ;
  • J’aimerais faire découvrir ma filiale aux autres entités du groupe ;
  • J’ai besoin d’informations clés en ressources humaines ;
  • J’ai besoin d’un accès exclusif aux offres de mobilité internes

Je vous l’ai dit, les exemples sont infinis.

La force de LumApps ? Adresser ces cas d’usage en construisant des sites uniques et sur mesure à partir d’éléments templatisés et prêts à l’emploi.

Vraiment ? Oui, vraiment ! Il suffit d’être bien accompagné pour réaliser le projet correctement. Car oui, créer ou refondre une plateforme interne n’est pas une mince affaire. C’est un projet ambitieux dont il faut mesurer l’importance.

Une plateforme innovante et facile d’utilisation, c’est la force de LumApps :

  • Un accompagnement sur la gouvernance pour mesurer les décisions stratégiques dès le démarrage de vos projets : qui en est responsable ? Quelle équipe pour le démarrer et le tester ? Comment le déployer ? Comment le faire adopter ? Et enfin, comment le faire vivre ?
  • Une construction de produit ambitieuse. Car si le design ne suffit pas, il reste néanmoins le premier contact que vos utilisateurs et utilisatrices auront avec le site ! Une force encore de LumApps : prêt à l’emploi est aussi synonyme de personnalisation. Ce sont vos codes, votre univers, vos originalités. Il s’agit également de trouver un territoire singulier qui, lui aussi, permettra de renforcer le sentiment d’appartenance de vos collaborateurs et collaboratrices et donc votre marque employeur ;
  • Une approche adaptée à vos besoins pour optimiser votre expérience employé et pérenniser la valeur métier apportée ;
  • Et enfin, étape ultime et bien trop souvent négligée : l’adoption. Car oui, faire le site le plus beau c’est bien, mais faire le site le plus utilisé, c’est mieux !

Notre cabinet mesure l’importance d’un embarquement collectif pour réussir ces projets :

  • Un éditeur qui dispose d’une solution innovante et tient également une roadmap ambitieuse pour penser aussi au « demain » ;
  • Un client pleinement sensibilisé aux enjeux du renforcement du sentiment d’appartenance et des nouvelles façons de collaborer en hybride ;
  • Enfin, un partenaire qui connaît à la fois les enjeux client et la solution qui sera mise en place par l’éditeur pour cadrer le besoin et construire la solution la plus adaptée possible en réponse à ce besoin.

Si la collaboration entre LumApps, Saegus et les clients pouvait se mesurer factuellement, je dirais sans l’ombre d’un doute qu’un travail d’équipe équilibré, c’est déjà la moitié du chemin parcouru.

Alors lancez-vous !

Imaginez des plateformes innovantes, faites participer vos employé·e·s, envisagez des nouvelles façons de travailler, diffusez vos contenus différemment, adressez vos frontline workers….

Chez Saegus, nous sommes lancés depuis des mois et plus nous avançons, plus nous courrons vite pour atteindre la prochaine étape.

Merci à LumApps et aux nombreux clients qui nous font confiance pour leur projet d’intranet !

Restez connecté·e·s pour une table ronde spéciale sur ce sujet très bientôt… En attendant, pour en savoir plus :

Rédigé par Charlotte Zekraoui, Manager Senior Factory

Product Writer, Copywriter, Content Strategist… les métiers dédiés aux contenus des interfaces utilisateurs sont nombreux. Parmi eux, le métier d’UX Writer, né au début des années 2010 aux États-Unis, s’impose peu à peu en Europe. Quels sont ses domaines d’action ? Comment intervient-il·elle dans le processus de conception global de l’expérience utilisateur ? Quelle est la valeur ajoutée de son expertise ?

Sa mission, centrée sur la rédaction de textes d’une interface utilisateur, est double :

  • accompagner les utilisateur·rice·s dans les différentes étapes de leur parcours, en clarifiant l’information et en réduisant les doutes, puis les faire passer à l’action ;
  • et ce, en accord avec le positionnement de la marque.

À l’instar de l’UX designer, l’UX Writer doit donc comprendre en détails les besoins, les habitudes et les motivations des utilisateur·ice·s. Comment vont-ils·elles comprendre les instructions qui sont mises à leur disposition ? Comment vont-ils·elles agir en conséquence ? Comment les accompagner jusqu’à l’étape de conversion ?

Clarifier l’information

En effet, un contenu rédactionnel maîtrisé dessine un tunnel de décision pour l’utilisateur : pour cela, l’information doit être claire et précise. Prenons un exemple : en Anglais, les mots « sign up » (s’inscrire) et « sign in » (se connecter) sont très proches – ce qui peut entraîner une confusion, d’autant plus auprès d’utilisateur·rice·s non-Anglophones. Il serait pertinent de proposer « create an account » (créer un compte) et « log in » (se connecter), dont les significations sont distinctes et donc, compréhensibles.

Le tone of voice

Le choix de mots de l’UX Writer se base également sur l’image de marque d’une entreprise. Comment ces mots mettent-ils en avant les forces et les différences de la marque ? Sont-ils en accord avec le discours global tenu par celle-ci ? L’enjeu est de créer et/ou de préserver la confiance des utilisateur·rice·s envers la marque en proposant un contenu rédactionnel adapté, s’intégrant s’il y a lieu à un écosystème déjà existant. Le tone of voice, ou la voix d’entreprise, est une opportunité unique de se connecter avec l’utilisateur·rice qui interagit avec les mots et le design sur son écran. Une marque ne dit pas à ses utilisateur·rice·s qu’elle est chaleureuse, fiable et de confiance : elle doit le montrer dans sa manière de communiquer, visuellement et textuellement.

Prenons comme exemple la page d’erreur 404 du site de Marvel, page que la plupart des sites respectant les bonnes pratiques du web proposent de nos jours. Si l’information clé est d’indiquer à l’utilisateur·rice qu’une erreur est survenue et qu’il·elle doit se diriger ailleurs, il y a différentes manières de le communiquer. Si l’on prend appui sur ce que Nielsen & Norman Group évoque dans sa vidéo sur les 4 dimensions de tone of voice, croisé avec l’hypothèse de ce que les fans du monde des Comics attendent (des clins d’œil, des références, un peu de fun), on pourrait obtenir ce cheminement :

  • Ton sérieux, formel et pragmatique : « Nous rencontrons un problème. Veuillez nous excuser ». Le message est simple et transmet l’information à l’utilisateur·rice ;
  • Ton plus familier : « Désolé, mais nous rencontrons un problème de notre côté ». Ce ton reste trop formel pour Marvel ;
  • Ton dynamique et enthousiaste : « Ah ! Désolé, nous rencontrons un problème de notre côté ! ;
  • Maintenant, ajoutons une petite touche « clin d’œil » pour les fans qui aidera à dédramatiser l’aspect négatif que représente une page 404 dans un parcours de navigation : « Erreur 404 page disparue. Hydra a dérobé cette page de la base de données du S.H.I.E.L.D. ! »

Quelles sont les qualités d’un·e bon·ne UX Writer ?

  • Avoir de l’empathie : pour connaître ses utilisateur·rice·s, il faut savoir les écouter et les comprendre, puis se mettre à leur place afin d’imaginer la solution la plus adaptée. Prenons l’exemple de Doctolib : l’utilisateur·ice prend rendez-vous, souvent pour la première fois, auprès d’un·e praticien·ne de santé. Cette situation peut être une source de stress, pouvant rapidement générer de l’incompréhension. Comme stipulé dans Oxygen, le Design System de Doctolib, l’UX Writer a choisi un ton chaleureux, dépourvu de jargons professionnels (médicaux comme informatiques) qui seraient trop complexes à appréhender. (1) Les phrases à tournure positive sont préférées à celles à tournure négative : par exemple, « Stay connected, don’t close this page » devient « Stay connected, keep this page open. » (2) Dans le même objectif, les informations présentées à l’écran sont les plus explicites possibles :
  • Comprendre : à la fois les attentes des utilisateur·ice·s et la ligne éditoriale de la marque. Il est nécessaire pour cela de poser un maximum de questions, sans juger ni interpréter les réponses reçues : quelles sont leurs habitudes, leurs frustrations, leurs attentes ? Quel est le ton employé par la marque ?
  • Prendre en compte le contexte : celui dans lequel une interface est créée. Faut-il tout créer ou doit-on partir de l’existant ? L’interface s’intègre-t-elle à un écosystème plus global ? Est-elle destinée à être traduite dans plusieurs langues ? Dans ce cas, l’UX Writer veillera à éviter les jeux de mots ou les formulations propres à chaque langage afin de faciliter le travail de traduction.
  • Résoudre : les problèmes liés au fonctionnement des interfaces. L’UX Writer doit d’abord savoir les identifier, puis proposer des pistes pertinentes en conséquence. Par exemple, pour partager un contenu : avant, « Pour partager, cliquez sur ce bouton » – après, « Cliquez sur ce bouton pour partager » (ici, on place l’action en premier dans la phrase).
  • Communiquer : pleinement intégré dans la démarche d’expérience utilisateur, l’UX Writer est complémentaire des autres métiers : si l’UX Designer crée le produit dans sa globalité, l’UX Writer en optimise le contenu. Ce travail d’équipe doit débuter dès les premières ébauches du projet.
  • Faire tester : les contenus doivent être testés par les utilisateurs finaux, afin que les hypothèses établies puissent être confirmées, sinon invalidées.
  • Fidéliser : il faut rassurer les utilisateurs, puis les faire passer à l’action, tout en leur transmettant des émotions liées à l’image de la marque.

Conclusion

Les entreprises convaincues de la nécessité des services d’un·e UX Writer au sein d’une équipe sont encore peu nombreuses – son expertise leur est pourtant indispensable car elle définit clairement la position d’une marque vis-à-vis de ses utilisateurs. Pleinement complémentaire au travail de l’équipe d’UX, le mode de rédaction qu’il·elle propose offre une nouvelle dimension à l’expérience client telle qu’on la connaît aujourd’hui.

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

Rédigé par Joseph Deffayet, Consultant Senior Factory

(1) « We write how people speak. For patients, we use everyday words that are easy to understand. We don’t use technical or corporate jargon, unfamiliar acronyms, or obscure words. » Source
(2) « We use positive language rater than negative language. One way to detect negative language is to look for words like can’t, don’t, haven’t, etc. » Source