Des écoles au site internet donnant envie d’y retourner
En un clin d’œil :
- Le 10ème art
- Une toile de peinture
- Une création sur-mesure
- La star d’UX
L’expérience utilisateur, ou UX Design, tout le monde en parle. Si vous vous demandez toujours pourquoi, laissez-nous vous expliquer aujourd’hui à quel point c’est essentiel pour tout projet web.
L’expérience utilisateur, ou UX pour User eXperience, désigne à la fois l’étude utilisateurs et la définition de l’expérience que nous souhaitons leur proposer. Plus concrètement il s’agit de mieux comprendre son audience (caractéristiques, besoins, freins…) afin de concevoir un dispositif qui répond à tous, de la manière la plus intuitive possible.
Cette discipline n’est pas spécifique au web, elle est présente dans tous les domaines.
Attention, on sort nos lunettes rondes et notre pull à coudières pour revenir sur les origines de l’expérience utilisateur : la première évocation de l’utilisateur et de son importance est née dans les usines Toyota en 1940 où des tests utilisateurs furent menés pour améliorer l’efficacité de la chaîne de production.
C’est Donald Norman, le beau jeune homme en photo qui suit, qui dans les années 90 utilisa en premier le terme d’expérience utilisateur. Expression largement démocratisée de nos jours.
Sur Internet, l’utilisateur est roi. Il lance sa recherche via quelques mots clés et ensuite, clairement, il n’a pas le temps. Il va étudier les premiers sites qui lui seront proposés et, à l’arrivée sur chacun d’entre-eux, va s’attendre à pouvoir répondre immédiatement à son besoin.
Le design graphique a son importance : il faut que le site soit beau, rassurant, qu’il corresponde aux codes du secteur. Mais sans une bonne expérience utilisateur le parcours sera le suivant : l’utilisateur cherchera 3 secondes dans la navigation, peut-être une dizaine de secondes sur votre page d’accueil et s’il ne trouve pas de réponse il s’en ira vers un autre site.
Voilà pourquoi l’utilisateur, ses attentes et ses caractéristiques, doivent être placées au centre de toute conception web. Nous vous expliquons aujourd’hui comment faire.
Pas celui de rosé, il s’agit d’un diagramme composé par Corey Stern : le CUBI Experience Model.
Le principe ? Définir l’expérience utilisateur via 4 axes principaux :
On constate ici aisément que plus vous prendrez le temps d’étudier vos utilisateurs, votre marché et vos enjeux, plus vous serez en mesure de concevoir une plateforme cohérente.
On vous laisse découvrir dans la suite de cet article une méthodologie simplifiée.
La première étape consiste à découper votre audience en différents types de personae. N’en déterminez pas trop, il suffit de bien identifier les grands types de besoins, par exemple :
Viennent-ils tous du même endroit ? Arrivent-ils tous sur la même page ? Quelle est la première information qu’ils vont chercher ? Qu’est-ce qui pourrait les pousser à quitter votre site sans aller au bout de leur démarche ?
Pour atteindre vos objectifs via un dispositif web il n’y a rien de magique. Laissez Gerard Majax tranquille et travaillez sur une étude approfondie de votre marché et de ses utilisateurs, tout va bien se passer.
Maintenant que vous connaissez vos personae sur le bout des doigts, vous devez tenter de vous projeter dans leurs parcours au sein de votre futur site.
Si je suis [persona 1], qu’est-ce que je recherche en priorité ? Quel est le point de départ de mon expérience, quels arguments je vais chercher et comment j’atteins mon objectif en seulement quelques clics ? C’est cet exercice de projection que vous allez devoir appliquer afin de déterminer des parcours types / idéaux.
Vous vous rendrez vite compte que les parcours utilisateurs sont souvent plus complexes que prévu, que la page d’accueil n’est pas toujours la porte d’entrée et que les parcours peuvent être totalement différents d’un persona à l’autre.
Ce travail, s’il est bien fait, va vous permettre de créer une structure de site optimale.
L’arborescence, c’est l’organisation de votre site et ses contenus. Plus il y en a, plus il sera complexe de faire simple mais rassurez-vous : il y a toujours des solutions.
Une arborescence doit être construite en tenant compte des parcours utilisateurs (étape 2), de vos objectifs business et des enjeux SEO (un tout autre travail à mener en parallèle, cliquez ici pour en savoir plus).
Ensuite c’est une question de priorité, il va falloir faire des choix pour déterminer comment guider vos utilisateurs vers vos points de conversion.
Voici sur la droite un exemple d’arborescence : celle de notre site.
Les maquettes fonctionnelles, autrement appelées wireframes (c’est de l’anglais), correspondent à la structure de vos pages. Dénuées de tout aspect graphique, vous n’y verrez ni image, ni couleur, ni typographie. L’objectif est de structurer l’architecture de l’information au sein des pages.
Comme vous pourrez le voir sur notre arborescence, vous devrez définir différents gabarits de page (un par grand type de besoin structurel), ensuite il suffira de produire une maquette fonctionnelle par gabarit. Vous pourrez ainsi déterminer une liste de blocs de mise en page par gabarit, vous permettant par la suite de créer des pages qui s’adaptent à vos contenus et qui les valorisent.
Vous allez également devoir prévoir les logiques de navigation, à savoir : comment passer d’une page à une autre. Votre menu aura un rôle important mais ne négligez pas les liens internes contextualisés au sein des pages.
Pour comprendre un peu mieux la démarche, nous vous expliquons dans cet article comment nous avons conçu l’expérience utilisateur sur notre site.
« * » indique les champs nécessaires
« * » indique les champs nécessaires
Permet de désactiver l’affichage des images et vidéos pour une navigation plus écoresponsable