L'UX et l'UI sont deux notions étroitement liées qui vont permettre à un site ou à une interface de se distinguer.
L'UX (User Experience) se concentre principalement sur l'utilisateur et va chercher à répondre à un besoin, tandis ce que l'UI (User Interface) va enjoliver cette même interface pour rendre la navigation plus confortable.
Afin d'avoir une expérience utilisateur adaptée à son projet, il est important de se poser les bonnes questions et de suivre quelques étapes.
Il est intéressant de chercher à connaitre ses utilisateurs en se posant quelques questions utiles à notre projet :
- Qui va utiliser mon site internet/interface ?
- Pourquoi celui-ci va venir sur mon site internet/interface ?
- Dans quelle circonstances (A quel moment ? Sur mobile/tablette/PC ?) ?
- Comment mon utilisateur va-t-il se déplacer sur mon site internet/interface ?
- Quelle sera ma plus-value (Qu'est-ce que mon projet pourrait apporter en plus à mes utilisateurs ?) ?
- A quels besoins réponds mon site internet/interface ?
- Quelles sont les préférences de mes utilisateurs ?
- etc
Plus généralement, nous pouvons établir 4 étapes clés qui vont nous guider :
OBSERVATION : Ce que voit l'utilisateur, ce qu'il entend
INTERPRETATION : Que pense-t-il, Qu'est-ce qu'il ressent ?
BESOINS : Qu'est-ce qu'il lui manque ?
SOLUTION : Comment répondre à ce manque ?
Maintenant que nous avons une première idée théorique du besoin de nos utilisateurs, la réalisation d'une étude cas ne peut être que bénéfique pour notre projet.
Pour cela, nous allons nous renseigner directement au près du public afin d'enquêter sur les habitudes de nos utilisateurs en réalisant des sondages/interviews.
Nous allons donc poser des questions d'ordre personnel (afin de connaitre d'identifier notre public) et des questions d'ordre général (En rapport avec des situations qu'ils ont vécu, leurs motivations, leurs frustrations, leurs objectifs dans la vie,etc) qui vont venir confirmer les besoins auxquels notre site internet/interface doit répondre.e
Quelques exemples de questions personnelles :
- Âge, prénom, sexe, enfants, loisirs, caractère, qualités/défauts etc ?
- Où travaillez-vous (salaire) ?
- Dans quelles conditions ?
- L’ambiance de travail est-elle agréable ?
- Avez-vous des perspectives d’évolution dans votre entreprise
actuelle ?
Quelques exemples de questions d'ordre général :
- Avez-vous vécu cette situation ?
- Combien de fois ? Avez-vous réglé le problème ?
- Utilisez-vous une application pour régler ce problème ?
- Vivez-vous cette situation seule ou en groupe ?
- Appartenez-vous à une communauté en lien avec cette situation ?
A l'aide de notre sondage et de nos interviews, nous avons pu obtenir une première base et identifier quelques utilisateurs potentiels. Pour cela, nous allons établir 2 à 3 personas types des utilisateurs susceptibles d'utiliser notre site internet/interface/application, etc.
Un persona est un profil type d'utilisateur qui va nous permettre d'identifier plusieurs critères, parmi lesquels :
- Son identité (Sexe, Age, Métier, Catégorie socio-professionnelle, ville, enfants, etc)
- Sa personnalité (Introvertie, intuitif, Perceptif, etc)
- Sa biographie/Son histoire
- Ses qualités/défauts
- Ses objectifs
- Ses frustrations
- Ses motivations
- Les marques qui l'intéressent
- Ses canaux (réseaux sociaux, mail, etc)
Le persona va nous permettre de synthétiser les informations obtenues lors des sondages/interviews et de mieux cerner nos utilisateurs potentiels afin de mieux répondre à leurs besoins et d'orienter notre projet.
La prochaine étape consiste à établir un scénario d'usage : Dans quelle circonstance un utilisateur va-t-il aller sur mon site/application/interface ?
Celui-ci va nous permettre de représenter visuellement (via une experience map) les frustrations des utilisateurs et leurs motivations à visiter votre interface.
Une experience map se présente comme ceci :
Exemple pour un système de cloud :
- Un utilisateur s'apprête à présenter des documents à ses collègues (🙂),
- pour cela, il a pensé à tout mettre sur une clé USB (😌),
- il s'apprête à sortir la clé de sa poche pour la présentation mais se rend compte qu'il l'a oublié (😱),
- heureusement, il sauvegarde fréquemment ses données sur notre système de cloud, ils y sont peut-être (🤔),
- il vérifie et s'apperçoit que l'ensemble des documents sont là, il va pouvoir faire sa présentation (😄)
Nous avons maintenant toutes les cartes en main pour réfléchir à notre solution. Nous savons qui sont nos utilisateurs, pourquoi ils vont utiliser notre solution, dans quelles circonstances, quelles sont leurs frustrations auxquelles notre projet va répondre, etc.
De là, nous allons pouvoir établir un chemin utilisateur.
Celui-ci se présente sous cette forme :
Celui-ci va indiquer toutes les pages existantes sur votre interface et comment celles-ci sont liées (Quelle page me permet d'aller sur telle autre page ?).
Pour cela, nous allons chercher à répondre au besoin utilisateur en un minimum de clics.
Exemple pour accéder à mes opérations bancaires :
L'utilisateur devrait parcourir un chemin qui ressemble à ceci :
Accueil > Connexion > Synthèse de mes comptes > Mon compte sélectionné > Mes opérations
Le chemin utilisateur peut s'apparenter au zoning
L'architecture de notre interface est établie, nous connaissons chaque page qui compose celle-ci et comment ces dernières sont agencées. Il ne reste plus qu'à réfléchir à la structure de chacune de ces pages.
Pour chacune des pages, nous allons devoir nous poser les questions :
- Quelles informations je souhaite communiquer sur la page (Quelles sont les plus importantes) ?
- Qu'est-ce que je souhaite mettre en avant (Qu'est-ce qui doit sauter aux yeux des utilisateurs) ?
- Vers quelle action je souhaite diriger mon utilisateur (Quelle clic doit-il effectuer) ?
- etc
Nous allons donc réaliser une première étape de conception de nos pages où nous allons simplement identifier l'essentiel (Emplacement des textes, des images, des vidéos, du logo, comment se présentera mon menu, etc).
Un wireframe se représente comme ceci :
Les wireframes vont nous permettre d'avoir un premier rendu visuel de son site/application/interface, nous savons donc maintenant quels éléments nous allons placer sur chaque page et comment les placer.
Une fois les wireframes établis, nous allons pouvoir maquetter et prototyper !
Le prototypage va ajouter 2 choses : la couche UI (voir plus bas) + le design thinking (voir cours)
Celui-ci représentera le design de votre interface avant développement.
Votre interface est terminée, il ne vous reste plus qu'à la développer !
Mais avant cela, il est conseillé de faire tester une dernière fois son prototype à nos utilisateurs potentiels. Cela va nous permettre de confirmer que notre interface répond convenablement aux besoins des utilisateurs et surtout qu'elle est "User Friendly", c'est à dire qu'elle est intuitive pour les utilisateurs. Ces derniers s'y retrouveront donc facilement et souhaiteront potentiellement utiliser à nouveau votre interface.
Comment ce déroule un test utilisateur ?
- On essaye d'effectuer les tests utilisateurs dans un endroit neutre,
- On prévoit un ordinateur ou un téléphone avec le prototype installé,
- On demande à l'utilisateur d'effectuer une action sur le prototype (se rendre sur une page précise, effectuer une action précise, etc)
- On étudie quel parcours l'utilisateur effectue pour cette action
- On analyse les erreurs, les parties de l'interface auxquelle il a été réceptif, etc
- Une fois les actions effectuées, on interrog l'utilisateur (Qu'est-ce que vous avez aimez ou non ? vous êtes-vous retrouvé facilement ? qu'auriez-vous changé ? etc)
- On peut également proposer à l'utilisateur de créer son propre chemin utilisateur suivant sa logique avant de le soumettre au protoype.
Les tests utilisateurs vont nous permettre de valider notre solution ou d'étudier les points bloquants à éventuellement corriger avant la mise en développement.
Celle-ci va également nous confirmer la fiabilité de nos "call to action" (les endoits où l'on souhaite que l'utilisateur clique, ex : un bouton "acheter").
Les tests réalisés, il ne nous reste plus qu'à lancer le développement !
- Adobe XD : Pour les personas et le prototypage
- Photoshop : Pour les maquettes
- Balsamiq : pour les personas