Ici archive

Étiquette : ux design

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

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/

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 !

Contactez-nous

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 !

Contactez-nous

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