Concrètement, c’est quoi l’UX et l’UI ? 🤔

Cela fait maintenant plus de 10 ans que je fais du design d'interfaces, les termes évoluent constamment et les experts continuent de se battre sur les définitions. En attendant de mon côté, j’ai continué à enchaîner les projets et à me former.

Aujourd’hui je vais donc vous livrer ma définition de l’UX et de l’UI et à quoi ça correspond au jour le jour dans mon travail.

C’est simple, mais c’est un peu compliqué. Enfin ça n’est pas clair.

À chaque premier rendez-vous avec un nouveau client, je me présente, je m’appelle Guillaume et je suis Product Designer au charrette.club, je gère la partie UX et UI. Et la question que je pose ensuite est toujours la même : est-ce que l’UX et l’UI c’est ok pour vous ou pas ?

Et globalement, on me répond un petit « oui », mais je sens le doute dans toutes les réponses.

1. L’UX ⚙️

L’UX pour User Experience, soit l’expérience utilisateur. Concrètement, avant de mettre la couche de peinture sur une interface, il faut la créer. Comment on créé une interface, un parcours utilisateur ? On utilise les connaissances emmagasinées (en interne ou sur le marché) et le bon sens :

• Si vous n’avez pas de base de connaissance et de recule en interne (parce que le projet est nouveau par exemple) : on recherche ce qui existe sur le marché, ou du moins ce qui s’en rapproche, on enlève ce qui ne fonctionne pas et on garde ce qui marche. On prend les bonnes pratiques, car même si chaque projet est unique, il existe des grandes lignes. Par exemple, on ne vais pas cacher le bouton de l’action principale dans une sous-page du site, tout en bas. C’est logique, non ? Pas pour tout le monde.
• Si le produit existe déjà et que vous l’améliorez, quelqu’un quelque part a forcément un minimum d’informations sur les performances du produit actuel : est-ce que le parcours actuel fonctionne ? Quel est son taux de conversion ? Quels sont les profils des utilisateurs ? Sur quels appareils accèdent-ils à votre produit ? Etc. On récupère toutes ces informations, on ajoute un peu de bon sens et de veille (il existe forcément un concurrent quelque part), on secoue et paf ! Ça fait une bonne base de départ.

Vous l’aurez compris, l’UX comprend une grosse phase préalable de recherche sur l’existant et les utilisateurs. Si vous avez une nouvelle idée, il est très probable que quelqu’un l’ait eu avant vous et le fasse déjà très bien : servez vous-en. Je ne vous incite pas à copier, c’est nul et vous avez un minimum de fierté, mais il y a sûrement quelques éléments à reprendre pour faire encore mieux.

Il existe de nombreux outils et méthodes pour faciliter cette recherche, mais ça n’est pas le sujet d’aujourd’hui (spoiler : c’est Google, l’ancêtre de ChatGPT, vous vous souvenez ?).

Concernant les outils pour poser ces informations, j’aime utiliser un combo de Notion (pour le côté tableau et base de données) + FigJam pour le côté visuel et gribouillage (Miro fera aussi bien le travail, ou bien Freeform chez Apple qui est gratuit). Lorsque j’ai une vue claire du parcours utilisateurs et des fonctionnalités, je commence à réaliser des prototypes basse fidélité (en mode « fil de fer ») soit sur FigJam soit sur Figma selon le niveau de détails nécessaire.

Voilà ma définition courte et simple de l’UX, certains experts (probablement des américains du Texas) trouveront à redire, aucun problème, mais c’est ma vision des choses après plus de 10 ans de pratique. Je ne suis ni une star d’UX (pardon, c’était juste pour le jeu de mots), ni américain.

2. L’UI 🎨

L’UI pour “User Interface”, soit l’interface utilisateur. Après avoir bien travaillé sur l’UX, on peut passer à la couche visible : l’UI, c’est la partie que les utilisateurs voient et touchent. C’est à cette étape que tout devient esthétique, on travaille sur les couleurs, les typographies, les boutons et les interactions visuelles…

Mais attention, ce n’est pas juste de la déco. L’UI doit servir l’UX, et chaque choix visuel a un impact sur la façon dont les utilisateurs interagissent avec votre produit.

Par exemple, un bouton trop petit ou mal placé peut rendre l’action principale difficile à trouver. Et même si on a tendance à associé un Designer à la créativité, il ne faut pas oublié qu’il sert un objectif principal : transformer selon les KPIs (Indicateurs Clés de Performance) définis au préalable. L’idée, c’est de créer une interface claire, intuitive, et agréable à utiliser qui convertit :

• Cohérence visuelle : Les utilisateurs ne doivent pas être perdus à chaque page. Il faut de la constance dans les couleurs, les polices et les styles pour que l’expérience reste fluide et compréhensible (ça peut être le cas entre plusieurs points de contact, comme un site, une application mobile etc.). Sur les gros projets, on peut mettre en place un Design System.
• Accessibilité : Tout le monde doit pouvoir utiliser votre interface. Le contraste des couleurs, la taille des éléments, et même la manière dont les utilisateurs naviguent (clavier, voix, etc.) doivent être pris en compte. Je vois souvent des grosses entreprises très fières de leur nouvelle charte Groupe. C’est bien, c’est joli (parfois), mais ça n’est pas lisible, il y a des ratios de contraste pour le web qui permettent à tout un chacun de lire votre contenu sans difficulté. Et le print n’est pas le web non plus.
• Feedback visuel : Chaque action de l’utilisateur doit générer une réponse. Quand un bouton est cliqué, il change de couleur ou donne un retour visuel pour confirmer que l’action a été prise en compte. Ou au moins un indice clair qu’il va se passer quelque chose.

En bref, l’UI, c’est tout ce qui transforme une idée bien pensée (merci l’UX) en une réalité concrète, où les utilisateurs savent quoi faire, où cliquer, et comment avancer. C’est assez gratifiant lorsque l’on enchaine les deux : la couleur rend les choses plus concrètes (c’est encore mieux quand c’est développé, mais chaque chose en son temps).

Pour concevoir des interfaces visuelles, j’aime utiliser Figma car il permet à la fois de collaborer et de tester rapidement des idées, notamment en ajoutant quelques animations. Et on ne pas pas se mentir, Figma a gagné la guerre des outils de création visuel d’interfaces digitales (RIP Adobe XD et Sketch).

Voilà pour l’UI, une discipline certes visuelle, mais ancrée dans la logique, où chaque choix esthétique a un impact direct sur l’expérience globale.

Dans le cadre d'un projet 🗓️

Lorsqu'il s'agit d'un projet, voici comment cela s'articule la plupart du temps (dans les grandes lignes) :

• Premiers échanges avec le client, compréhension du besoin, des objectifs et d'éventuelles contraintes (techniques, budgétaires, temporelles etc.). Cette étape est extrêmement importante. À titre personnel, je la fais durer le temps qu'il faut afin de devenir expert du sujet
• Veille sur le marché, qui sont les concurrents en France et à l'étranger
• En même temps, planche d'inspiration (UI), je garde des liens de ce qui me plaît ou au contraire ce que je ne souhaite pas
• Réflexion autour de l'architecture, des parcours utilisateurs, des personae, et potentiellement des fonctionnalités et users stories
• Je fais un premier point avec le client pour valider la direction
• Si c'est ok, je commence à créer des parcours utilisateurs et des écrans de manière simple et basse fidélité (wireframes)
• Rebouclage avec le client
• Si c'est ok : je passe à l'UI
• Et je reboucle avec le client pour avoir le produit parfait
• Les livrables : des fichiers images, un fichier Figma ou encore un prototype cliquable, selon les besoins
• Lorsque le produit est en ligne, on peut faire de nombreux tests et itérer pour l'améliorer.

Chaque projet est différent, il s'agit là d'une approche générale et j'adapte en fonction des besoins.

UX/UI Designer, Product Designer, Product Manager, on s'y perd...

Ça n'est évident pour personne. Chacun a un peu sa définition. Pour moi :

• L'UX/UI designer travaille sur l'interface, de ses prémices à sa conception (sur Figma par exemple)
• Le Product Designer (c'est mon cas), fait la même chose, mais a une vision un peu plus globale du produit, un petit côté marketing, business, marché. Il a une implication supplémentaire dans la stratégie du produit et s'assure que celle-ci soit alignée avec les objectifs business.
• Le Product Manager quant à lui est responsable de la vision, des objectifs et de la roadmap qui permet de les atteindre. Il gère les ressources (humaines) et priorise les étapes pour garantir le succès du produit.
• L'UX/UI Product Designer Manager ++ n'existe pas, c'était pour vous faire peur.

Pour conclure

Maintenant que vous avez ma définition (qui est assez généraliste), vous comprenez un peu plus comment je travaille, et comment nous procédons plus généralement au charrette.club.

Dans certaines grosses sociétés ou sur des gros projets, l’UX Designer et l’UI Designer sont deux personnes différentes. Je pense que pour de nombreux projets, ça ne pose aucun souci que ça soit la même personne. À vous de voir selon la complexité de vos projets et la taille de votre portefeuille aussi (soyons honnête).

À titre personnel, il m’arrive de faire de l’UX sans faire d’UI, et l’inversement est aussi vrai. Mais je préfère travailler sur les deux sujets parce que :

• J’aime suivre un produit de la réflexion à la mise en ligne
• C’est parfois compliqué de reprendre le travail de quelqu’un, si doué soit-il, chacun a ses méthodes.

Pour conclure, l’UX et l’UI, ce sont les meilleurs copains, ils se complètent. Comme Steve Jobs & Steve Wozniak (pour les geeks), ou encore Mario & Luigi (pour les geeks aussi, mais pas les mêmes, les deux n'étant pas incompatibles, vous suivez ?).

Merci d’avoir été jusqu’au bout, et si vous avez des doutes, des questions, je suis là pour y répondre (sur l'UX et l'UI, mais on peut aussi parler de votre vie si vous le souhaitez).

À bientôt !

Titre (album) écouté pendant l'écriture: