La démarche UX

Accueil > Les cours > La démarche UX

L'objectif de ce cours est de comprendre la démarche UX avec les concepts et la manière de les mettre en application.

Théorie et pratique pour atteindre ses objectifs.

Mon approche

• Une approche progressive,

• Du général au particulier,

• Qui donne du contexte et des concepts,

• Pour ensuite ouvrir aux outils opérationnels

Objectifs du cours

• Donner des clefs de compréhension de la discipline : origine, contours, métiers, définitions, vocabulaire

• Transformer les intuitions et le bon sens, en méthodes et outils,

• Vous aider à mieux vous positionner dans l’évolution des métiers, des appellations, des tendances...

• Vous ouvrir à de nouvelles pratiques professionnelles (non seulement pour vous mais aussi pour les équipes avec lesquelles vous travaillez)

• Dédramatiser, désacraliser le "design", "les designer", "les process"... il n’y a ni génie, ni dogme... que de la pratique, de la collaboration, de l’ouverture, du dialogue, de l’écoute et de l’évolution.

• Connaître et comprendre les règles et termes importants de l’ergonomie des interfaces et de la psychologie de vos utilisateurs

• Pouvoir les mettre en pratique dès demain dans la conception de vos écrans et l’analyse des interfaces que vous utilisez

Sommaire du cours

Qui-suis-je ?

Et vous ?

Qui êtes-vous ? Vos motivations ? Vos peurs ? Vos attentes ? 

UX Design et Design Thinking

Etymologie du design

Définition du design

Le design est la création d’un projet en vue de la réalisation et de la production d’un objet (produit, espace, service) ou d’un système, qui se situe à la croisée de l’art, de la technique et de la société.  

Le but du design

Le but premier du design est d’inventer, d’améliorer ou de faciliter l’usage ou le processus d’un élément ayant à interagir avec un produit ou un service matériel ou virtuel. Un des rôles du design est de répondre à des besoins, de résoudre des problèmes, de proposer des solutions nouvelles ou d’explorer des possibilités pour améliorer la qualité de vie des êtres humains.

Et l'UX, c'est quoi ? D'où vient-il ?

On parle d'expérience utilisateur (User Experience) lorsque quelqu'un expérimente un produit ou un service (au dessus, c'est un chemin). Le chemin a été conçu (designed) à droite, mais les gens choisissent le chemin et expérimentent par ce biais. L'objectif d'un bon CEO, Product manager, Designer, c'est d'identifier ces chemins, d'aller écouter ces utilisateurs et d'en déduire un nouveau chemin optimal.

Pourquoi c'est indispensable ?

L'expérience utilisateur est importante car elle essaie de répondre aux besoins de l'utilisateur. Il vise à fournir des expériences positives qui gardent un utilisateur fidèle au produit ou à la marque. De plus, une expérience utilisateur significative permet de définir les parcours client sur votre produit les plus propices à la réussite de l’entreprise.

"Chaque euro investi dans l’UX apporte un bénéfice de 2 à 100 euros." selon les études de Gilb, T. (1988) et Pressman, R.S. (1992).

C'est quoi la différence entre UI et UX ?

Ici, le pot de gauche représente l'UI (en anglais User Interface, soit l'Interface Utilisateur) et le flacon de droite représente l'UX (en anglais User Experience, soit l'Expérience Utilisateur).

Pourquoi ?

Celui de gauche semble plus élégant mais lorsqu'on l'utilise, ça ressemble plutôt à ça !

Alors qu'avec celui de droite, on arrive à un résultat beaucoup plus soigné.

L’UX travaille sur le fond et l’UI travaille sur la forme. 

L’un ne peut pas vivre sans l’autre.

Le design thinking

Le design thinking combine une théorie et une pratique forgées depuis les années 50.

Les fondamentaux d'une approche par le design thinking

On appelle cette approche le double diamant (double diamond en anglais).

Une bonne solution n’existe pas sans un vrai problème !

L’alternance de la divergence (idées) et de la convergence (solutions). 👇

Le Design Thinking ne cherche pas à atteindre la perfection pour lancer une offre, un service, un produit. 

L’objectif est de répondre d’une manière simple au besoin, observer, améliorer et... recommencer !

Les 4 phases d'une approche par le design thinking

LE DIAGRAMME DE VENN APPLIQUÉ AU DESIGN THINKING

Design thinking : le design pour penser la complexité

Cette approche du design n’est plus exclusivement reliée aux objets (matériels ou immatériels).

Elle s’intéresse aux processus, outils et structures nécessaires à la compréhension, à la définition, à résolution de problèmes et à la mise en oeuvre de solutions.

Elle est fondamentalement pluridisciplinaire et associe les utilisateurs (jusque dans leurs dimensions émotionnelles et anthropologiques).

Glossaire

Affordance : c'est la capacité d'un objet ou d'un système à évoquer son utilisation, sa fonction.

Contre affordance : il s'agit d'un objet qui suggère une utilisation différente de la réalité ou pas d'utilisation du tout.

Ergonomie (du grec Ergos, le travail et de Nomos, la loi) : "Discipline visant à l'adaptation d'un système à son utilisateur, afin que ce dernier puisse mener à ses activités avec un maximum d'efficacité, de satisfaction et de bien être, avec une phase d'adaptation réduite."

Ergonomie digitale : proposer un produit utile, adapté aux caractéristiques de l'utilisateur, utilisable avec le moins d'effort et le plus de satisfaction.

Utilisabilité : un système est utilisable lorsqu'il permet à l'utilisateur de réaliser sa tâche avec efficacité, efficience et satisfaction dans le contexte d'utilisation spécifié. 

Efficacité : les utilisateurs arrivent-ils à accomplir leurs tâches ?

Efficience : réaliser l'objectif avec le moins d'effort (l'humain ira toujours vers la simplicité et la facilité)

Satisfaction : à quel point les utilisateurs sont satisfaits ? (Plus d'un tiers des utilisateurs partagent autour d'eux une mauvaise expérience. 88% des clients ne souhaitent pas retourner sur un site après une mauvaise expérience.

Loi de Hick : "Le temps requis à un utilisateur pour prendre une décision est fonction du nombre de choix à sa disposition"

Plus il y a de stimuli à choisir, plus il faut de temps à l'utilisateur pour prendre une décision. Les utilisateurs qui ont trop de choix doivent prendre le temps d'interpréter et de décider, cela leur donne du travail qu'ils ne veulent pas.

Loi de Fitts : "Le temps requis pour aller rapidement d'une position de départ à une zone finale de destination, est fonction de la distance et de la taille de la cible."

La loi de Fitts est un modèle du mouvement humain, indice de la difficulté d'une tâche.

Théorie de la Gestalt : C'est un ensemble de principes permettant de mieux comprendre comment le cerveau perçoit les formes.

Selon la "théorie de la Gestalt", notre cerveau va essayer de donner un sens à des des formes qui n'en n'ont pas initialement. "Gestalt" signifie forme en allemand.

Exemples

Exemples

Évaluation ergonomique

Évaluation d'interfaces utilisateur

• VPTCS, 5 critères

• Bastien et Scapin, 8 critères ergonomiques

• Les heuristiques de Nielsen, 10 critères d'utilisabilité

• Opquast, 240 critères qualité

VPTCS

Créé en 2001 avec des études sur le site e-qualite.com, ce modèle, qui se veut aussi l'acronyme de "Va Pas Te Croire Supérieur" (soufflé par Franck Paul). Il est l'acronyme des mots ci-dessous.

Visibilité

Perception

Technique

Contenus

Services

Modèle réalisé par Elie Sloïm & Eric Gateau. Licence CC-BY-SA.

Bastien et Scapin

Ces critères ergonomiques sont issus d'une étude menée par Dominique Scapin assisté de Christian Bastien, qui ont tous les deux donné leurs noms pour identifier cet outil devenu une référence en ergonomie des interfaces.

Compatibilité

Avec les caractéristiques de l’utilisateur, avec la tâche, avec l’équipement.

C'est la capacité du système à s'adapter aux caractéristiques de l'utilisateur.

Les bonnes pratiques

• L'accès aux fonctions doit être compatible avec la tâche de l'utilisateur

• Parler le langage de l'utilisateur (éviter le jargon technique)

• Utiliser des métaphores familières

• Agencer les éléments de l'interface en fonction de la tâche de l'utilisateur

• Vérifier que le site est compatible avec tous les navigateurs, toutes les résolutions

Guidage 


Aider à s’orienter, interagir, trouver.

Ensemble des moyens mis en oeuvre pour assister l'utilisateur dans l'emploi du logiciel

L'utilisateur doit comprendre ce qu'il peut faire et comment il peut le faire.

1. incitation

Les bonnes pratiques

• Griser les fonctions non disponibles (options de menu, boutons, ...)

• Donner le format de saisie des données (dates, dimensions, ...)

• Modifier la forme du curseur (pointeur de la souris) pour donner des indications sur l'opération à effectuer

• Indiquer clairement les champs obligatoires (* ou autre indicateur)

• Afficher les bulles d'aides (Tooltips)

• Montrer clairement comment aller en avant et en arrière

(Guidage) 2. groupement/distinction


Les bonnes pratiques

• Regrouper les informations de même type par le format ou par la position (regroupement par menus, entourer avec une bordure, ...)

• Distinguer par une présentation différente ou un emplacement différent, les informations distinctes pour éviter les risques de confusion.

(Guidage) 3. feedback immédiat

Les bonnes pratiques

• Le logiciel doit répondre à toute action de l'utilisateur par un changement dans la présentation de l'interface (visuel, sonore, ...)

• Indiquer les modes de fonctionnement du système (état)

• Signaler les traitements longs par une indication d'attente (sablier, barre de progression, animation, message, ...)

• Rendre visible les traitements réalisés par le logiciel et indiquer clairement lorsqu'ils ont échoués

• Toujours faire apparaître les saisies utilisateur

(Guidage) 4. lisibilité

Les bonnes pratiques

• Utiliser une police de caractère lisible (à l'écran, éviter les italiques en petite taille, ...)

• Soigner les espacements (interligne) et les alignements (justification)

• Adapter la taille des libellés et des icônes afin de garantir leur interprétation

• Soigner les contrastes (choix des couleurs pour le fond et le premier plan)

• Prendre en compte la configuration de la machine cible (résolution, ...)

Adaptabilité


C'est la capacité à réagir et s’adapter au contexte, aux besoins et aux préférences des utilisateurs et à leur niveau d’expertise (néophyte - experts).

1. Flexibilité

Les bonnes pratiques

• Permettre d'effectuer les tâches (fonctions) à la fois au clavier et à la souris

• Autoriser le déclenchement d'une commande fréquente depuis plusieurs endroits dans l'application

• Permettre à l'utilisateur de paramétrer le logiciel selon ses préférences

• Fournir un moyen rapide d'accéder aux commandes des menus (raccourcis)

(Adaptabilité) 2. Expérience

Les bonnes pratiques

• Permettre à l'utilisateur de définir son niveau d'expérience, le demander ou le déterminer automatiquement par des métriques.

• Guider l'utilisateur débutant (novice) pas à pas dans la réalisation de la tâche.

• Donner aux utilisateurs expérimentés les moyens d'effectuer leur tâche de manière rapide e efficiente (même si c'est parfois au détriment du guidage)

Homogénéité/Cohérence


Les interfaces et le vocabulaire utilisé. Le critère de cohérence concerne l'homogénéité globale de l'interface.

Les bonnes pratiques

• Utiliser le même schéma d'agencement pour toutes les pages

• La sémantique des boutons doit être constante

• Le même vocabulaire doit être utilisé pour désigner les mêmes fonctions

• Utiliser une organisation et une syntaxe cohérente pour els menus

• Utiliser de manière cohérente les symboles graphiques (icônes, couleurs, ...)

Contrôle explicite


L’utilisateur est informé en permanence de l’activité du système et garde le contrôle. C'est le degré de maîtrise qu'a l'utilisateur sur les traitements réalisés par le système.

C'est un facteur important d'acceptation : les utilisateurs n'aiment pas être menés par le bout du nez et se sentir asservis à la machine, au site, à l’application.

1. Action explicite

Les bonnes pratiques

• Ne pas déclencher d'opération sans le consentement explicite de l'utilisateur

• Déclencher l'opération immédiatement après l'action de l'utilisateur ou, sinon, indiquer clairement que l'opération sera différée (ou qu'elle ne peut pas être effectuée).

(Contrôle explicite) 2. Contrôle utilisateur

Les bonnes pratiques

• Offrir à l'utilisateur une validation explicite des commandes importantes ou difficilement réversibles

• Offrir la possibilité d'interrompre les traitements longs

• Autoriser les retours en arrière

• Permettre, en tout temps, de quitter la fonction courante ou même, le logiciel.

Charge de travail


Réduire l’effort nécessaire pour réaliser sa tâche (mémorisation, charge visuelle...). Cela concerne les moyens de minimiser à la fois la quantité d'informations que l'utilisateur doit prendre en compte ainsi que le nombre d'actions élémentaires qu'il doit réaliser pour accomplir une tâche donnée.

1. Brieveté

Les bonnes pratiques

• Limiter le nombre d'options dans un menu ou dans une liste déroulante

• Éviter les libellés trop longs

• Réduire le nombre d'actions élémentaires pour atteindre un objectif donné

• Éviter à l'utilisateur d'avoir à se souvenir d'informations d'une fenêtre à l'autre, faire des calculs ou de saisir des informations déductibles par le système.

(Charge de travail
) 2. Densité

Les bonnes pratiques

• N'afficher que les informations pertinentes pour effectuer la tâche

• Éviter les écrans trop chargés (décomposer si nécessaire)

• Éviter les liens trop nombreux dans un texte affiché sur une page web

• Éviter les textes trop verbeux (dialogue simple, phrases courtes)

• Privilégier la reconnaissance (symboles, icônes)

Gestion des erreurs


Prévenir les erreurs, les expliquer, permettre d’en sortir. C'est à dire, conserver l’intégrité du système en évitant, réduisant les erreurs et en favorisant leurs corrections.

1. Protection

Les bonnes pratiques

• Mettre en évidence les commandes non disponibles (griser)

• Détecter les erreurs au plus tôt et avertir immédiatement l'utilisateur

• Fournir la liste des valeurs possibles, des unités, ...

• Minimiser les saisies au clavier (si possible, listes à choix)

• Prévenir les risques de perte de données (demander confirmation)

(Gestion des erreurs) 2. Qualité des messages

Les bonnes pratiques

• Faire en sorte, si possible, que les textes soient auto-suffisants. Trouver le bon compromis entre concision et exhaustivité

• Placer les messages d'erreur là où l'utilisateur est censé regarder

• Éviter les textes réprobateurs

• Afficher des messages d'erreur explicites (utiliser le langage de l'utilisateur)

• Éviter les textes trop longs (rester bref, utiliser des liens, des références, ...)

(Gestion des erreurs) 3. Correction

Les bonnes pratiques

• Mettre en évidence le champ où l'élément erroné

• Permettre d'annuler une action ou une série d'actions (par ex. supprimer des articles dans le caddie virtuel d'une application e-commerce).

• Proposer des alternatives (par ex. "Sujets connexes" pour une recherche infructueuse)

Signification des codes


Les mots utilisés, les icônes sont compréhensibles. C'est à dire que les messages transmis doivent être compréhensibles et utiles.

Il ne suffit pas de présenter un message ou un symbole à l'utilisateur, encore faut-il qu'il soit compréhensible et pertinent pour lui. 


Les bonnes pratiques

• Éviter les termes techniques (jargon), parler le langage de l'utilisateur

• Reproduire le comportement habituel des objets

• Définir explicitement et respecter les règles d'abréviation

• Prendre en compte les standards en vigueur pour toutes les dénominations

Récapitulatif et checklist

Source : Usabilis

Les 10 heuristiques d'utilisabilité de Nielsen

Le contenu ci-dessous fait référence aux heuristiques de Jakob Nielsen, créées à la fin des années 90, et régulièrement mis à jour, pour proposer une philosophie de travail pour une ergonomie sur les interfaces. (la source en français)

Pour Nielsen, l’utilisabilité possède de multiples composantes et est associée traditionnellement à quatre attributs : apprentissage, efficience, gestion d’erreurs et satisfaction. Ces quatre attributs donnent naissance à des heuristiques.

1. Visibilité de statut du système

Dans le cadre de l’évaluation heuristique, le système devrait maintenir l’utilisateur toujours informé sur sa localisation à travers des marquages appropriées dans un temps raisonnable. Dans ce principe, deux choses sont plus importantes : Les utilisateurs doivent savoir où est-ce qu’ils sont et où est-ce qu’ils doivent aller.

2. Correspondance entre le système et le monde réel

Le système devrait " parler " la langue des utilisateurs de telle façon que les informations apparaissent dans un ordre naturel et logique, en se conformant aux mots, expressions et conventions usuels.

3. Contrôle de l'utilisateur et liberté d'action

Le système devrait être très " obéissant " aux actions de l’utilisateur et offrir des " sorties de secours " clairement marquées pour les opérations exécutées mais non désirées, ainsi que des options de faire/défaire les opérations dans le dialogue. 

Il peut aussi falloir permettre à l’utilisateur de personnaliser sa zone de travail comme la couleur, la police de caractères, la largueur de l’écran, la version du navigateur, etc.

4. Consistance et normalisation

Suivre les conventions de plateforme est la façon la plus sûr de respecter ce principe. Une évaluation heuristique implique que les utilisateurs ne se demandent pas si les différentes mots, situations ou actions veulent dire la même chose. Les titres et en-têtes doivent être représentatifs du contenu. Les titres et en-têtes doivent être représentatifs du contenu.

5. Prévention contre les erreurs

Le système devrait prévoir les erreurs que l’utilisateur peut commettre. Il doit offrir de bons messages d’erreurs et instructions compréhensibles pour les corriger afin d’éviter que des problèmes surviennent.

6. Reconnaissance davantage que mémorisation

Le système devrait rendre les objets, les actions et les options visibles. L’utilisateur ne doit pas se rappeler des informations d’une partie du dialogue à l’autre. Les directives pour l’usage du système doivent être visible ou facilement récupérables à chaque fois que c’est nécessaire pendant le dialogue (boutons, cartes de navigation, bonnes étiquettes et liens descriptifs, par exemple).

7. Flexibilité et efficience d'utilisation

Le système devrait offrir des raccourcis pour les utilisateur expérimentés. Mettre des accélérateurs permettant aux utilisateurs de faire et/ou récupérer les actions plus fréquemment utilisées (par exemple, des signet et etc.).

8. 'Design' esthétique et minimaliste

Les dialogues devraient contenir seulement les informations pertinentes et principales qui devraient être bien visibles. Les informations non pertinentes ou rarement utilisées doivent être placées dans les niveaux les plus bas ou les plus détaillés dans la hiérarchie de distribution du contenu. Chaque unité d’information supplémentaire dans un dialogue rivalise avec les unités pertinentes et diminue leur visibilité relative.

9. Fonctions de l'aide (reconnaissance, diagnostic et récupération d'erreurs)

Les messages d’erreurs devraient être exprimés dans la langue ordinaire, sans jargon, ni code en indiquant précisément le problème de manière constructive, claire et compressible et de minière à offrir une solution aux problèmes ou en tout cas comment les résoudre.

10. Aide et documentation

Le système devrait fournir des aides et de la documentation. Toutes les informations devraient être facile à chercher et être concentrées sur la tâche (par exemple, tutoriels, spécifications, agents intelligents, etc.).

Ce qu’on appelle “les critères Nielsen”, soit l'ensemble des principes listés ici, sont des références essentielles pour mener un audit ergonomique efficace à bien.

Voir les règles sur cette page.

La liste des 240 critères d'Opquast

Opquast a créé une liste de critères à ne pas oublier lorsqu'on créé un site ou une expérience web. Ils mettent à jour pour les périodes futures, là, c'est la période 2020-2025.

Découvrir l'ensemble des règles ici et les télécharger ici

Théorie et Pratique de la Recherche Utilisateur

La UX Research – user experience research - (ou recherche utilisateur en français) contient les principes employés pour apprécier les attentes des utilisateurs d’un produit ou service. La UX Research est au sein du processus de conception (UX Design - design voulant dire conception en anglais). C’est une manière de rassembler des informations qualitatives et quantitatives pour apprécier les besoins des utilisateurs.

De nombreuses méthodes, issues des sciences comportementales et des sciences humaines, nous amènent à avoir ces informations. Les résultats des enquêtes nourrissent la réflexion et les prochains choix de l’équipe, aussi bien en design d’interaction qu'en design d’interface. 

La recherche utilisateur peut s'établir :

• Au début du projet web (pendant l'étape d’analyse)

• Lorsqu'on conçoit l'interface

• Juste avant la livraison (phase d’évaluation ergonomique)

• Après la livraison pour analyser

La plupart du temps, la recherche utilisateur tient compte des tests utilisateurs, c’est-à-dire la critique (positive et négative) des sites et applications mobiles testés avec des utilisateurs représentants des segments pertinents de l'entreprise (voir positionnement et différenciation). En réalité, ces tests d'utilisabilité restent une méthode de recherche utilisateurs parmi tant d’autres.

Empathie comme fondation de l'UX Design

"Je ne peux pas avoir de nouvelles idées si ce que je fais uniquement de ma vie est d'exister dans ma vie seulement.” Emi Kolawole, chercheure à la Stanford University d.school

Ci-dessous, la vidéo d'Indy Young expliquant l'empathie en pratique. La vidéo est en anglais.

Voir le cours sur le positionnement et la segmentation 

Cartographie de l'expérience Utilisateur

On appelle aussi cela UX mapping, c'est le process qui vise à développer step by step, une représentation de l'expérience vécue par les users d'un site web/appli. L'objectif est de déterminer leur cheminement vers un but donné.

Il peut y avoir plusieurs buts et différentes possibilités pour les atteindre. Les chemins peuvent être divers, bien qu'ayant le même objectif. Une carte de l'expérience utilisateur est donc une représentation des intéractions du user dans son parcours.

C'est important pour pouvoir comprendre, mettre en lumière les moments où l'expérience est mauvaise (mais aussi ou l'expérience est bonne) puis optimiser en améliorant petit à petit.

Cela permet aussi d'objectiver quelque chose de naturellement subjectif (les émotions suscitées par un produit numérique).

Retrouvez ci-dessous l'ensemble des outils composant la cartographie de l'expérience utilisateur telle que proposée par le NNgroup, la référence mondiale en UX design.

Empathy map

C'est la première étape de compréhension de l'utilisateur. Pour le comprendre. Et le meilleur moyen est d'aller le rencontrer, de réaliser des sondages, des entretiens qualitatifs ou des questionnaires quantitatifs (voir plus bas)

Elle vous permet d'en savoir plus, de créer de l'empathie autour de vos utilisateurs ainsi que d'être alignés (l'ensemble de l'équipe). A utiliser avant toute conception et lorsqu'on a vu des utilisateurs.

Customer journey map

La Customer journey map est la visualisation du process que traverse une personne pour accomplir un objectif. Cette carte est utilisée pour comprendre les besoins des users et leurs pain points. Elle sert à casser les silos dans les équipes afin de comprendre l'ensemble du parcours. Elle permet aussi de donner aux différents départements une ownership sur l'optimisation (car on sait d'où viennent les problèmes)

Elle est sous forme chronologique. Il y a une carte par persona.

Elle est découpée en 4 parties : phases, actions, pensées, état d'esprit/émotions.

Elle est utilisée à n'importe quel moment lors du processus de conception (design)

Experience map

L'experience map permet de visualiser l'ensemble d'une expérience globale d'un utilisateur sur un site ou une application.

Voir les concepts des PM pour aller plus loin et découvrir ce que les Product Managers utilisent pour en savoir plus sur leurs utilisateurs.

Service Blueprint

Un service blueprint visualise les relations entre les composants des différents services, les 3P en anglais (people, props, processes).

Donc le premier P est People, les ressources humaines, le second est Props, les accessoires (preuves physiques ou digitales) et le dernier Processes.

Le tout doit être directement lié aux points que l'on voit dans la customer journey.

C'est chronologique et hiérarchique.

Cela reflète l'intérieur de l'entreprise (employés et fournisseurs), on ne voit pas trop les détails des utilisateurs.

On s'en sert pour percevoir les faiblesses de l'organisation, pour identifier les opportunités d'optimisation, pour permettre de combler les gaps entre services et pour casser les silos pour créer une seule compréhension de la manière dont fonctionne le service pour l'ensemble de l'entreprise.

On le fait après le customer journey mapping et avant de faire des changements organisationnels ou de process. On le fait aussi quand on touche à un funnel.

3-step decision framework

Avant de faire un mapping, il y a un framework en 3 étapes appelé "3-step décision framework".

1. L'actuel (tel quel) vs le souhaité (tel que ça sera)

Cette décision implique les actions et les états énoncés dans la visualisation : cela reflète-t-il l'état de l'art actuel ou l'état souhaité ?

• Les mappings actuels sont basés sur l'état d'aujourd'hui. Cette approche est idéale lorsque le but du mapping est d'identifier et documenter les problèmes existants et les pain points. Utiliser les mappings sur l'état actuel aide à analyser la recherche et aligner une équipe sur un problème validé "scientifiquement" (on dira plutôt objectivement).

• Les mappings souhaités sont basés sur un état idéal d'un utilisateur, d'une expérience ou d'une structure. Les maps de l'état souhaité aident à réinventer et concevoir la manière dont un user ou une expérience serait dans le futur. Ces maps servent à créer un objectif idéal pour votre produit ou service.

2. Hypothèse vs recherche

La décision dépends du type d'input que vous utiliserez pour votre mapping

• Les mappings d'hypothèses sont basés sur une accumulation de connaissances existantes au sein d'une équipe ou d'une organisation. Cette approche est une bonne manière de faire converger plusieurs points de vue au sein d'une équipe, créer un plan de recherche (basé sur les écarts qui émergent avec votre map d'hypothèse), et elle permet une première étape envers une map basée sur la recherche, davantage concrète et haute fidélité.

• La map de recherche est basée sur la donnée récoltée spécifiquement pour construire la map. Cette approche est la meilleure lorsqu'il y a le temps et les ressources dédiées pour créer un plan de recherche. Bien que cette méthode créé les meilleures maps, elle prend un temps significatif. Peu importe où vous commencez, vos maps doivent être itératives et mises à jour constamment avec vos découvertes au fur et à mesure.

3. Basse fidélité vs haute-fidélité

Cette décision aura des conséquences sur la qualité finale du rendu de la map. 

• Les cartes basses fidélité ne sont pas chiadées, la plupart du temps créées avec des Post-it d'une manière flexible et un peu brouillonne. Ces maps sont préférables au début du process. Basse fidélité voulant dire "petit engagement ou effort de création et donne l'opportunité aux gens de collaborer, réviser et mettre à jour au besoin. Utiliser des Post-it (physiquement sur un mur ou de façon digitale avec des outils comme Miro par exemple) ou un tableur collaboratif comme Google Sheets.

• Les maps haute fidélité sont davantage chiadées, créées numériquement et apparaissent comme étant finies. Les maps haute fidélité sont les meilleures pour créer des objets qui sont voués à être partagés avec plusieurs personnes. Haute fidélité voulant dire facilité de lecture, mais moins flexible à cause du côté "finalisé" de l'objet. Ces maps sont souvent crées digitalement, puis envoyées.

• High-fidelity maps are polished, created digitally, and look final. High fidelity maps are the best for creating an artifact that is going to be shared amongst many. High fidelity can be easier to read, but less flexible because of the “finished” nature of the product. These maps are often created digitally, then dispersed.

Un prototype est la déclinaison concrète de l'idée d'un projet. Rapide et réaliste, le prototype sert à valider les avancées et générer de nouvelles idées.

Il permet : 

• De tester son marché

• D'affiner son offre

• De connaître les forces et faiblesses du projet

Proposition de valeur / MVP

MVP est le mot à la mode, non ça veut pas dire "Most Valuable Player" dans ce cadre-là. C'est pour "Minimum Viable Product". En gros, le produit le plus petit qui vous permette de valider votre hypothèse comme quoi il existe bien un marché pour votre idée.

On le fait rapidement, pour pas cher et il a vocation a être jeté (attention, beaucoup d'entreprises construisent sur des MVP, c'est comme construire sur un terrain meuble, ça va s'écrouler à un moment donné).

Le processus de prototypage pour arriver à un produit fini

Prototype basse fidélité

Les prototypes basses fidélité permettent de faire les choses plus rapidement et de montrer son idée, sans nécessairement aller dans la précision. Il y aura des images génériques (voire, aucune image, ce qu'on appelle des placeholders), pas d'intéraction, du texte faux (le fameux lorem ipsum). Rapide à modifier, à montrer, à brouillonner, ils ne sont pas représentatifs du design final, mais il permet les jugements instinctifs non pollués par les couleurs, les images et autres marques émotionnels véhiculées par les autres caractéristiques. Le fait aussi que ce soit quelque chose de rapidement exécuté permet aux personnes à qui l'on demande de se lâcher facilement, en évitant la peur de froisser la personne.

Le design atomique

On va parler d'un nouveau concept, le design atomique (atomic design en anglais).

C'est une méthodologie qui permet de donner des directives et une hiérarchie dans la manière de construire des produits numériques.

L'analogie avec la chimie permet de comprendre qu'au départ, il y a la notion d'atome, de plus petit élément, qui, combiné, fait des molécules (donc des composants), puis des organismes (assemblages de composants) puis des templates (des pages pré-découpées, sans contenu) et enfin des pages, qui, sont différentes car contextuelles, avec du contenu statique et dynamique.

Parmi les atomes, il y a les éléments de base comme : 

• Les typos

• Les couleurs

• Les formes

• Les icônes

• Les liens

• La forme d'un bouton

Parmi les molécules, on peut retrouver (par exemple) :

• Un bouton et son lien

• Des boutons en hiver

• Des regroupements de titre

Parmi les organismes, il y a (par exemple) : 

• Un champ saisi avec un bouton et un titre

Ensuite, les templates qui seront l'assemblage de tous ces assemblages et viennent enfin les pages.

Aller plus loin avec l'article d'Adobe : Atomic design principles methodology 101.

Prototype Haute Fidélité

Le proto (c'est comme ça qu'on dit dans le jargon) haute fidélité possède l'ensemble des caractéristique du rendu final. Les visuels sont à jour, le contenu est réel. On fait "comme si".

Il peut parfois prendre du temps, mais ses avantages sont nombreux. Par exemple, lorsqu'il est intéractif, il permet de comprendre le comportement des utilisateurs, donc de tester en conditions réelles. Il nous permet aussi de tester l'ensemble des assets utilisés sur les pages et de les voir ensemble en conditions réelles.

Rappel de la recherche utilisateur

Le questionnaire quantitatif

Cela s'effectue à l'aide de formulaire simple (Google Forms) ou complexe (comme Typeform) et cela permet de dégager des tendances. En général, ce type de recherche est réalisé lorsqu'on a des questions précises à demander.

Nous utilisons la technique de l'entonnoir avec des questions larges au début, puis de plus en plus précises.

Il faut une certaine significativité pour que le questionnaire nous apporte de la donnée pertinente. Nous disons qu'à partir de 300 réponses, cela commence à être significatif.

L'entretien qualitatif

Lorsque nous ne savons pas ce que nous cherchons, nous parlons donc à des utilisateurs et nous posons alors des questions ouvertes, toujours avec la technique de l'entonnoir.

À partir de 20 entretiens dans les personas identifiés, nous pouvons dire que c'est significatif.

La notion de NPS

Le NPS (pour Net Promoter Score) est un indice utilisé par beaucoup d'entreprise en Europe et aux USA pour identifier la moyenne de la perception d'un user quant à son expérience avec l'entreprise.

Il est compris entre -100 et +100.

La question à poser est simple : "sur une échelle de 1 à 10, recommanderiez-vous "l'entreprise" ?"

• 0-6 correspond à des détracteurs

• 7-8 correspond à des gens neutres

• 9-10 correspond à des promoteurs

Tests utilisateurs

Le meilleur moyen de comprendre vos utilisateur est d'aller les rencontrer, de réaliser des sondages, des entretiens qualitatifs ou des questionnaires quantitatifs.

Il est conseillé d'en faire en amont et en aval du développement. Au cours, cela est possible afin de valider des hypothèses précises ou lors de la partie wireframe, comme nous l'avons vu plus haut.

Selon Jakob Nielsen, fondateur du cabinet NNgroup, seulement 5 users peuvent diagnostiquer 80% des soucis d’utilisabilité.

Design Inclusif et accessibilité

Une tendance se dégage depuis plusieurs années, c'est de travailler pour que les interfaces puissent être utilisées par l'ensemble de la population.

L'image et le son par exemple sont clés pour une partie de la population malvoyante et sourde. Amener du contraste visuel par exemple, permet aux personnes qui voient mal de voir mieux et pouvoir lire. C'est aussi l'exemple des textes alternatifs que l'on écrit lorsque les images ne s'affichent pas, elles permettent aux personnes malvoyantes d'écouter le texte (et donc la représentation textuelle de l'image) sur le site.

Concevoir le portefeuille idéal de votre ami.e

• Interviews croisées 5 min (x2)

• Synthèse (individuelle) : besoins, attentes, contraintes 5min

• Recherche de solutions (idéation) 5 min

• Prototype : dessiner le portefeuille idéal 5 min • Présentation du portefeuille idéal 5 min

Quelles questions poser ?

• Qui es-tu ?

• As-tu un portefeuille ?

• Peux-tu me le montrer, le décrire ?

• Quelles sont ses 3 fonctionnalités essentielles ?

• Pourquoi ?Dans quel contexte l’utilises-tu ? As-tu des usages différents selon les contextes ? • Quels matériaux ? Quelle couleur ?

• Raconte-moi une bonne expérience et à l’inverse une mauvaise expérience ?

• Qu’est-ce que tu aimes particulièrement dans ton portefeuille actuel.

• Inversement, quels sont ses gros défauts ?

• Si tu avais une baguette magique, de quel portefeuille rêverais-tu ?

• Pourriez-vous vous présenter ? ( nom , prénom, parcours professionnel ) 

  • ATHLAN Samuel - Mon parcours professionnel ici, je ne suis pas UI/UX designer mais c'est une composante de mon travail d'exercer des tâches relatives à ce métier. Ce qui m'a donné la légitimité pour donner ce cours-là.

• Quel niveau d’études est requis pour exercer le métiers d’UI/UX designer ?

  • On peut y arriver par plein de moyens, donc il n'y a pas de réponse type. 1-2-3 ans dans les nouvelles écoles peuvent permettre d'y arriver, de même que certaines formations en ligne permettent d'en saisir l'essence et de perfectionner cela en entreprise.

• Quelle est la journée type d’un UI/UX designer ?

  • De la recherche utilisateur (écrire un guide d'entretien, voir des prospects et les interroger)

  • Du dessin

  • Du prototypage

  • Des réunions pour mettre en commun, débattre, défendre son point de vue

• Qu’est ce qui vous plaît le plus dans ce métier ?

  • Le sentiment de créer

  • L'humilité qui s'en dégage (on doit écouter beaucoup)

• Qu’est-ce que vous a attiré vers ce métier ?

  • La création, la fascination pour l'humain et la volonté de résoudre des problèmes

• Pour vous, quelles caractéristiques particulières ce métier engendre-t-il? (contraintes, horaires, disponibilité, déplacement, avantages/inconvénients...)

  • En négatif, il y a le fait que tout le monde a un point de vue sur notre travail... Alors que c'est quand même assez technique et qu'on suit quand même des règles claires.

  • On peut travailler "quand on veut", c'est assez plaisant.

  • Il y a aussi une notion d'interdépendance forte entre les UI/UX, les PM, les PO, les dévs, c'est super cool de bosser avec eux, mais aussi super contraignants que son travail soit si imbriqué avec eux.

• Quelles évolutions majeures du métier avez-vous remarqué depuis que vous l'exercez? Cela a t-il été difficile de s'y adapter? Comment vous y êtes-vous adapté?

  • Le métier évolue, il se spécialise de + en +. Au début, c'était des UI/UX, maintenant, il y a des ramifications => UX research / UX delivery / UX design / etc.

  • Cela dépend des entreprises mais il est facile de s'y adapter. Moi, j'aime cultiver mon profil généraliste et donc je ne me spécialise pas. Je m'intéresse en revanche aux ramifications pour avoir des bases.

• Avec quel corps de métier êtes-vous le plus en relation ?

  • Product manager

  • Développeurs

• Par rapport à votre formation, quelles sont les compétences que vous utilisez le plus pour exercer votre métier ?

  • Présentations orales. Cette capacité à montrer, expliciter et poser les bonnes questions.

• Quelles sont les qualités requises pour exercer ce métier ?

  • Humilité et ténacité. Il faut savoir se remettre en questions souvent (pas avoir d'ego) et en même temps, savoir tenir ses positions très fortement lorsqu'on les pense légitime. C'est un peu schizophréniques mais c'est ainsi ahaha.

• Quels conseils donneriez-vous à un débutant compte tenu de votre parcours ?

  • Être solide sur la théorie, pour qu'elle soit incarnée le plus tôt possible

  • Se mettre à faire le plus tôt possible

  • Faire de la veille tout le temps

  • LIRE => ça donne des raccourcis et met son cerveau en mouvement pour le reste de sa vie.

• Comment dois-je démarrer ma carrière ? Quelles sont les évolutions de poste possible à l'issue d'un premier poste ?

  • Il y a plein de manières de commencer, je ne peux donner de conseil à ce sujet. Mais si je devais lister 2 possibilités de commencer. Soit en agence (on apprendra vite, mais on se mettra+ en mode exécution donc on apprendra la deadline mais on n'apprendra pas d'avoir des convictions), soit en startup de 20-30 employés avec déjà un designer sur place (on apprendra en deadline, mais on apprendra la qualité et les convictions).

• Quelles sont les modalités de recrutement dans votre métier ?

  • On travaille beaucoup avec des portfolio, on veut voir des choses. Comprendre pourquoi tel choix a été fait et pas autre chose.

• A quoi dois-je être vigilant ?

  • Privilégier la qualité au temps ou à l'argent. Ça peut s'appliquer à beaucoup de choses hein :) Mais il faut être vigilant à cela car c'est un job passion. Ça peut vite nous amener à faire des choses qui nous soûlent et donc à faire des burn-out ou se réorienter alors même qu'on adore le job.

Les écoles pour apprendre l'UI/UX Design

Les Gobelins

• Devenir UX designer : le métier, la formation, le salaire

Open Classrooms

• UX design : découvrer les fondamentaux

• Appropriez-vous la démarche UX en pratique