Ici archive

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

Pour une entreprise du CAC40 présente dans 68 pays comptant 170 000 collaborateur·rice·s, nous avons créé et développé une app centralisant l’ensemble des métiers de la finance au sein de cette entreprise multinationale : pour chacun d’entre eux sont listées les offres d’emploi, compétences et formations correspondantes. Elle présente également le parcours professionnel et les évolutions de carrière au sein du groupe.

Toutefois, cette app était figée et non-administrable par les collaborateur·rice·s IT en interne. Il a donc été rapidement nécessaire de créer une seconde app – un back-office – afin qu’ils·elles puissent gérer la base de données et modifier le contenu de la première (ajouter de nouveaux métiers, compléter les compétences et formations…).

Comment avons-nous abordé et travaillé sur ce projet ? Quels en ont été les enseignements ? Éric Bauman, développeur à la Factory chez Saegus, vous raconte.

Un défi technique

Le back-office a été pensé comme une app à part entière. La base de données est commune entre les deux applications. La première application étant internationale, le back-office devait donc être pensé en plusieurs langues – nous l’avons pour l’instant développé en français et anglais, l’objectif étant d’ajouter de nouvelles langues dans le futur. Cela entraîne un défi technique : penser différemment la base de données. Pour chaque langue, nous avons créé une table distincte pour les métiers, compétences et formations.

La maquette du back-office, designée par l’équipe de la Factory, était assez complexe à développer : il y avait beaucoup d’éléments très customisés, rendant leur intégration complexe. Par exemple, les listes déroulantes ont un style par défaut qui n’est pas modifiable ; il nous a donc fallu recréer une liste déroulante à la main, ce qui prend forcément plus de temps. Ce type de problème s’est posé sur plusieurs fonctionnalités de l’application.

Dans cette application, le menu permet de naviguer parmi tous les types de données que les administrateur·rice·s peuvent ajouter, modifier ou supprimer :

  • Les univers (“universes”), qui sont des sous-domaines de la finance ;
  • Les métiers (“jobs”) ;
  • Les compétences (“skills”) ;
  • Les formations (“trainings”) ;
  • Les évolutions de carrière (“career paths”).

Par exemple, pour modifier un univers, l’utilisateur·rice arrive à partir du menu sur un écran permettant de sélectionner un univers existant ou d’en ajouter un nouveau. Dans les deux cas, un formulaire contenant tous les attributs d’un univers s’affiche, permettant de le personnaliser en modifiant chaque champ. Cette fonctionnalité est la même pour tous les types de données.

Les métiers ont pour particularité d’être reliés aux formations, compétences et profils inspirants : des onglets permettent de naviguer parmi ces attributs et de les lier au métier sélectionné.

Nous avons utilisé Angular pour le front, en framework JavaScript ; Node.js et NestJS pour le backend ; et PostgreSQL pour la base de données. L’app est hébergée sur Azure.

Une app née de la collaboration

Au sein d’un projet de cette envergure, la relation avec le client est essentielle. Nous avons organisé plusieurs ateliers pour bien comprendre les besoins (parcours utilisateur, interactions) et avoir une image d’ensemble de l’interface à créer. Dans ce cadre, le client est un véritable collaborateur du projet ; les daily meetings et méthodes agiles, permettant d’avancer par itérations, sont clés pour pouvoir échanger. C’est aussi un moment au cours duquel le client peut tester les features une à une, permettant d’ajuster l’app au fur et à mesure. Sinon, le test unitaire est une bonne pratique : les lignes de test sont enregistrées et rejouées à l’ajout de chaque nouvelle fonctionnalité, automatisant les tests. Il convient de noter que cela demande du développement supplémentaire, mais fait gagner du temps à terme.

Il est essentiel que les designers et développeur·se·s travaillent en collaboration. Pour ce projet, pendant la création de la maquette, nous avons beaucoup échangé sur la faisabilité technique du front imaginé.

Après une livraison de la première version, nous avons fait des changements mineurs sur la base du retour client. Comme nous l’avons vu, l’app est pensée pour que l’on puisse y ajouter des langues supplémentaires à l’avenir, ce qui devra être fait par un·e développeur·se.

Conclusion

La gestion de projet et celle d’équipe se sont rencontrées au cours de ce projet. Une mission de cette envergure demande de la rigueur et du cadrage, ainsi qu’une collaboration régulière entre toutes les parties prenantes (client, métiers, designers). Nous sommes fier·ère·s de ce projet qui est une belle réussite.

Vous souhaitez vous aussi être accompagné·e·s par nos équipes de la Factory ? Contactez-nous !

Rédigé par Éric Bauman, Développeur à la 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

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

Qu’est-ce que Brave ?

Né en 2019, Brave est un navigateur qui ose défier Chrome directement depuis sa home page.

Sa promesse ? Il en a plusieurs :

  • Sécurité : Brave bloque les « creepy stuff », les publicités et les traqueurs qui récupèrent volent vos données ;
  • Confidentialité : le navigateur comprend des Tor Private Tabs, des onglets privés (les autres navigateurs ne faisant que masquer notre historique) qui chiffrent nos connexions et masquent votre localisation aux sites auxquels vous vous connectez ;
  • Vitesse : les pages chargent 2x plus vite sur un ordinateur et 8x plus vite sur mobile. Ils nous invitent à faire le test nous-mêmes : encore un défi ?

Les petits plus ?

  • Vous pouvez importer les favoris et les paramètres de votre ancien navigateur ;
  • The Brave Rewards : un système de récompenses vous permet de gagner des tokens en visualisant des “Brave Private Ads” et soutenir ainsi les créateurs de contenu.

Ce que j’apprécie en tant que designeuse

  • L’identité visuelle de la marque : mis à part le logo qui dénote du reste, leur identité est top ;
  • LE DISCOURS : le fait que la toute première phrase de leur site soit un défi envers Chrome est brillant. Très osé, mais brillant. Le ton employé est très frais, très fluide et sans trop de bullshit. La quantité et la qualité de l’information est assez pertinente à mon sens. Et surtout, ça donne envie !

Une étude de cas par Growth Design

2 designers (qui utilisent des Bitmojis pour présenter leurs études de cas) ont testé l’expérience utilisateur de Brave. L’étude s’étend de la première visite de leur site web jusqu’à quelques semaines d’utilisation.

Personnellement, j’adore leur manière de présenter leurs études. C’est très dynamique et intéressant ! Ils donnent leur avis mais proposent aussi des solutions.

Je vous laisse l’étude ici, vous me direz ce que vous en pensez !

Je vous laisse, je retourne tester Brave…

Rédigé par Almudena Perez-Garcia, Consultante Junior Factory

Material You, la nouvelle version du design system Google Material, est sortie à la fin du mois d’octobre. Voici en quelques points ce qu’il faut retenir :

  • Ce nouveau DS a pour but d’accélérer les expériences émotionnelles individuelles maintenant que Google propose une base commune sur le marché en terme de navigation, de parcours, d’expérience, en déployant Material en 2014 ;
  • Il prend également une toute autre dimension puisqu’il passe la main directement à l’utilisateur 👸🏻🤴🏻 en termes de personnalisation (favorisant une approche user centric) et non pas uniquement aux concepteurs 👩🏻‍🎨 ;
  • Il a été pensé pour être adaptatif sur n’importe quel support (large desktop, desktop, mobile, watch…) ;
  • Un énorme focus a été mis sur la partie accessibilité 👓 (gestion de la taille des typo, des graisses, de la taille des éléments UI) pour permettre à n’importe quel·le utilisateur·rice d’utiliser l’interface avec un maximum de confort et d’aisance sans dénaturer le design de base ;
  • On peut également remarquer sur les différents motions que l’on est globalement sur des tons plutôt pastels ce qui est assez cohérent puisque nous sommes depuis quelques mois dans une tendance liée au rétro/vintage. Est-ce que Google va donc avoir un impact et officialiser cette nouvelle tendance d’ici la fin de l’année ? RDV d’ici quelques mois pour la réponse !

En quoi cela impacte-t-il notre travail de designer ?

Il est clair que nous allons devoir de plus en plus nous adapter aux différents environnements qui naissent année après année autour de nous. Nous ne sommes qu’aux prémisses d’une nouvelle ère du digital (industrie 4.0) et les différents supports sur lesquels nous allons devoir concevoir et créer seront de plus en plus nombreux 💻📱⌚️ (watch nouvelle gen, téléphones, lunettes connectées, casques de réalité virtuelle).

Notre objectif sera donc de s’adapter à ces nouvelles manières de concevoir pour aller toujours plus vite et permettre de délivrer une expérience homogène MAIS unique à travers chaque support.

Pour le reste, je vous laisse découvrir le teasing vidéo ainsi que toutes les vidéos de présentation des différents éléments ici.

Rédigé par Jeffrey Dhumeaux, Consultant Confirmé Factory