Vous vous êtes déjà retrouvés face à un site internet avec des milliers d’informations sans trouver réponse à votre question ? À une application mobile qui bugue ? Une interface avec des visuels entrecoupés ?... Ou bien vous vous êtes déjà surpris à rester un bon moment à admirer le design d’une application web ou mobile ? Félicitations, vous avez vécu une expérience utilisateur réussie ! Mais que se cache-t-il derrière cette expérience ? Qu’est-ce que l’UX/UI, précisément ? Nous allons le découvrir à travers cet article !
Qu’est-ce que l’UX/UI ?
La transformation digitale et l’UX/UI : un petit peu de contexte
Alors que la transformation digitale touche un nombre grandissant de métiers, cette dernière devient centrale et de plus en plus nécessaire au sein des entreprises.
En effet, nous utilisons de nombreuses interfaces numériques au quotidien, et l’expérience utilisateur (ce que l’on vit lorsque l’on surfe sur ces dernières) est primordiale. Comme les démarches “customer centric” (axées sur le client) deviennent à la mode, les entreprises doivent à tout prix penser à ce que nous, internautes et utilisateurs, vivons à travers leur interface en ligne, en nous plaçant au centre de leurs stratégies ! C’est LÀ que l’UX/UI interviennent.
Et oui ! Une mauvaise expérience utilisateur aura tendance à susciter la lassitude des utilisateurs, voire l’abandon de ceux-ci : c’est-à-dire qu’ils fermeront l’application sans même revenir.
Même si l’on peut croire que les termes UX/UI sont très similaires, vous allez voir que ce n’est pas tout à fait le cas ! Une chose est sûre, le plus important est de produire une expérience utilisateur la plus agréable et appréciable possible.
Qu’est-ce qu’une expérience utilisateur ?
Comme on a pu le voir plus haut, l’expérience utilisateur est l’expérience que l’on vit lorsque l’on surfe sur une interface numérique. Lorsque nous expérimentons quelque chose, il y a plusieurs “critères” à prendre en compte :
- Notre ressenti : Comment est-ce que je me sens en surfant sur cette interface ? Est-ce que j’aime la façon dont les choses sont présentées ?
- Notre environnement : Est-ce que l’environnement qui m’entoure est propice à une expérience utilisateur réussie ?
- Notre besoin et nos motivations : De quoi ai-je besoin ? Quelle est l’information que je recherche ?
- Les interactions offertes par le site internet ou l’application mobile : Quand j’appuie ici, qu’est-ce que ça donne ? Quelle action sera engendrée ?
Le secret pour offrir LA meilleure expérience client
L’UX design place une grande importance dans le fait d’offrir une interface accessible, graphiquement qualitative, fonctionnelle, pratique et ergonomique ! Il faut donner envie à l’utilisateur d’y rester et de découvrir les moindres recoins de l’application web ou mobile... mais pas que ! Celle-ci doit lui permettre de trouver rapidement l’information qu’il cherche, afficher une image de marque forte et positive alignée avec une identité visuelle de qualité, présenter des fonctionnalités originales et authentiques...
Qu’est-ce que l’UX design ?
On parle d’UX design (user experience design) pour définir le design de l’expérience utilisateur. Par “design”, on entend surtout la “conception” de l’expérience utilisateur plutôt que la création visuelle.
Le rôle d’un UX designer va être de penser, réfléchir et concevoir non seulement le produit - donc l’interface utilisateur - mais également l’expérience utilisateur qui en découle.
Pour faire de l’UX design, il faut prendre en compte les attentes, les besoins et les éventuelles envies des utilisateurs.
On pourrait même définir l’UX design comme un processus composé de différentes étapes et caractéristiques :
I. La phase de recherche et d’analyse (research)
- Compréhension du besoin :réaliser des interviews utilisateurs (user interviews) pour identifier leurs besoins, définir les objectifs et comprendre les attentes des utilisateurs.
2. Personas :créer des profils types pour identifier les points culminants de leur expérience, leur but, leurs frustrations…
3. Cas d’utilisation : comprendre les particularités de chaque persona et comment résoudre les éventuels problèmes pour créer la meilleure expérience utilisateur possible. On peut notamment se poser les questions suivantes : “Comment les différentes personnes pourraient vivre cette expérience ? Comment utiliseraient-ils le produit ou service proposé ?“. De cette manière, la conception de la stratégie est facilitée.
4. Cartographie du parcours client (journey map) : retracer le parcours de l’utilisateur lors de sa navigation sur l’interface en se demandant : “Comment l’expérience utilisateur commence-t-elle ? Et comment finit-elle ?”
II. La phase de conception et idéation (brainstorming)
- Flux d’utilisateur (user flow) :ce sont des diagrammes qui reconstituent les différentes étapes du parcours utilisateur, celles qui mènent à l’accomplissement d’un objectif précis.
Exemple :Un internaute est à la recherche d’une boisson sur le site internet d’un supermarché.
Voici ce que donnerait son flux d’utilisateur :
- L’utilisateur arrive sur la page d'accueil
- Il clique sur la catégorie “boissons”
- Il est redirigé vers la page “boissons”, et choisit la boisson qu’il souhaite acheter en cliquant sur l’icône correspondante
- Sur la page de la boisson choisie, il entre la quantité souhaitée (1 bouteille par exemple)
- Il se rend sur son panier en ligne pour procéder au paiement
- Après avoir entré ses coordonnées de paiement sur l’interface du site, il est redirigé vers une page de confirmation de paiement
- Une fois le paiement validé, il ferme l’onglet
- Wireframe: à destination de l’UI designer, le “wireframe” est un modèle de ce à quoi l’interface utilisateur ressemblera. Grâce à ce dernier, l’UI designer arrivera plus facilement à construire l’ossature visuelle de l’interface.
III. La phase de mise en place (implementation) : c’est là que l’UI designer intervient !
- Prototypes :le rôle de l’UI designer repose ici sur la constitution des maquettes plus ou moins représentatives et/ou interactives représentant les idées de l’UX designer.
2. Développement front-end et back-end :une fois ces maquettes validées, c'est au tour des développeurs de s’attaquer au projet et de construire l’interface grâce au code.
IV. La phase de suivi (reporting)
- Test utilisateur (usability reporting) :une fois que le produit a été mis en place, il est testé par de réels utilisateurs qui vont fournir leurs retours propres et personnels sur l’expérience utilisateur qu’ils ont vécue.
2. Test A/B (split testing) :l’équipe UX est également menée à tester différents designs et leur impact sur les utilisateurs.
3. Analytics reporting : analyser les statistiques ressortant de ces tests (par exemple : le temps moyen passé sur les pages, le taux de rebond…).
Attention, l’UX design ne s’arrête pas à la phase de suivi, ou “reporting”. En fait, une fois le reporting terminé, l’équipe UX va repartir à la phase de conception et idéation (brainstorming), puis constituer une boucle jusqu’à trouver la version finale de l’interface : celle qui sera officiellement mise en ligne et qui donnera lieu à la meilleure expérience utilisateur !
Qu’est-ce que l’UI design ?
Comme on a pu le voir précédemment, l’UI design est intégré dans les rouages de l’UX design. On situe l’UI design dans la phase de mise en place (implement) : c’est l’étape où les idées et prototypes des UX designers prennent vie.
Lorsque l’on parle d’UI design (user interface design), on fait référence au design de l’interface utilisateur - et donc à l’expérience esthétique qui en découle.
En quoi consiste le métier de l’UI designer ?
Le rôle de l’UI designer va être de se pencher plutôt sur les aspects graphiques et visuels de l’interface, donc les éléments perceptibles par l’utilisateur. Par exemple, la couleur et la taille d’un bouton pour qu’il soit visible, qu’il attire l'œil et qu’on ait envie d’appuyer dessus ; ou encore la typographie des textes qui s’affichent à notre écran.
Quelle est la différence entre UX et UI ?
Comme on peut le constater grâce au schéma ci-dessus de papdan.com, l’UX est un peu comme la partie cachée de l’iceberg !
Alors que l’UI se concentre sur la conception visuelle : toute la partie visible à l'œil de l’utilisateur avec…
- le design graphique : icônes, formes et images pour donner du sens aux actions de l’utilisateur
- les couleurs de l’interface, des illustrations, des boutons, des textes...
- la typographie : polices, gras, souligné…
- la mise en page de la page : espaces entre les blocs, nombre d’éléments sur l’interface graphique...
… l’UX représente ce qu’on appelle la “science de l’utilisateur”, donc tout ce qui touche à :
- la stratégie
- la compréhension du besoin utilisateur
- la constitution de prototypes, de scénarios, etc.
UX designer vs UI designer : les compétences clés
Travail d’équipe vs travail autonome
L’UX designer va avoir tendance à travailler avec beaucoup de personnes et différents services, dans des activités collaboratives qui amènent à la réflexion autour de l’expérience en elle-même. L’UI designer travaillera quant à lui de façon plus “autonome”, même s’il sera en interaction avec le chef de projet et l’UX designer.
Le scope du projet
L’UX designer va surtout s’intéresser à la situation dans son ensemble et au problème général, tandis que l’UI designer se concentrera sur les détails, peaufinera l’interface de fond en comble, et apportera les dernières touches pour rendre l’expérience la plus qualitative possible !
Les soft-skills
- UX designer : écoute, observation, patience, réactivité
- UI designer : créativité, précision, attention portée aux détails
UX/UI : le conceptuel et le visuel en symbiose
Bien que ces deux disciplines soient bien distinctes, l’UX et l’UI sont complémentaires et nécessaires pour pouvoir créer une bonne expérience utilisateur. Reprenons l’exemple de l’UI designer qui détermine la taille et la couleur du bouton. L’UX designer va, de son côté, définir son utilité.
C’est pour cette raison qu’une grande partie des entreprises qui recherchent un UX designer incluent la mention “UX/UI designer” pour recruter un profil expert, capable de conceptualiser et designer l’expérience utilisateur.
En faisant preuve de ces deux compétences, l’UX/UI designer est en mesure de créer une interface qui répond aux critères du responsive design. Il va donc être capable de créer une application utilisable et accessible sur toutes les interfaces d’utilisation, quelle que soit la résolution écran.
UX/UI design : tendances et outils
Quelles sont les tendances UX/UI en 2021 ?
Et oui, le monde UX/UI subit aussi les humeurs changeantes des tendances !
À quoi doit-on s’attendre cette fois-ci ?
- Fini les couleurs vives, on laisse place à la sobriété avec des couleurs douces et reposantes.
- Au revoir le mode lumineux, bonjour le mode sombre ! En plus de faire du bien à nos yeux, le mode sombre est à la fois élégant et moderne.
- Bienvenue aux typographies audacieuses qui en mettent plein la vue. Pour le coup, les applications web et mobiles créées en 2021 en regorgent...
- Le minimalisme privilégié : On ne montre que les éléments les plus importants !
- Des animations, des animations et encore des animations : on aime quand nos pages bougent et nous font rêver.
Et pour le bonheur des yeux, voici une compilation des meilleurs exemples d’UX design :
Sur ordinateur
Sur mobile
Quels outils UX/UI utiliser en 2021 ?
- Adobe XD : outil de prototypage rapide et tout-en-un permettant de créer des wireframes, des prototypes interactifs, et facilitant la conception d’applications web et/ou mobile
- Figma : outil de prototypage collaboratif où l’on peut travailler en ligne, à distance, en direct et à plusieurs
- InVision : autre outil collaboratif permettant aux équipes et aux clients non seulement de placer directement leurs commentaires, mais également de pouvoir visionner des versions antérieures du prototype
- Zeplin : interface simplifiant la communication entre les équipes et permettant de s’y retrouver plus facilement en générant automatiquement toutes les couleurs, les polices, les tailles etc. dans un style guide
- Marvel : solution aidant à la création rapide de maquettes animées en seulement quelques clics - l’application Marvel est disponible sur Android et iOS pour pouvoir tester en direct les maquettes en version mobile
- Maze : outils très efficace pour réaliser des questionnaires et tests utilisateurs à distance pour générer des rapports détaillés plus rapidement et plus facilement
- Miro : un tableau blanc virtuel parfait pour allier productivité et collaboration entre chef de produit et de projet, concepteurs, développeurs web et mobile et équipes marketing
UX/UI : quelle conclusion ?
Et même si, après cet article, vous doutez toujours de la différence entre UX/UI, voici un bref résumé pour éviter toute confusion :
L’UX designer va être responsable de l’expérience utilisateur dans son entièreté et de la compréhension des besoins utilisateurs, et va également contribuer à trouver des solutions pour améliorer cette expérience.
L’UI designer va, quant à lui, contribuer à l’expérience visuelle des utilisateurs en représentant les idées de l’UX designer tout en facilitant l’utilisation et l’accessibilité de l’interface, en aidant les utilisateurs à comprendre comment utiliser l’interface et en les guidant à travers elle (à travers des call-to-action, par exemple)
UX/UI : pour aller plus loin
Vous souhaitez vous former tout en continuant à travailler ? Rejoignez notre formation Product manager à temps partiel et apprenez à développer un produit de A à Z ! Conçu en partenariat avec Productized.co, ce programme intensif et pratique vous rendra opérationnels et prêts à l’emploi à la fin de votre formation.
Finalement, c'est le no-code qui vous intéresse ? Téléchargez notre syllabus Développeur no-code et découvrez le programme de formation, le parcours de candidature, les prochaines sessions, et bien d'autres !
