Camille
“La beauté est une promesse de bonheur” selon Proust. Concevoir des parcours utilisateurs optimaux, beaux, simples à utiliser et intuitifs est très certainement une promesse de bonheur et de valeur pour les utilisateurs, tout au moins le temps de leur navigation sur un applicatif numérique ! En tant qu’utilisateur, nous avons tous rencontré au moins une fois dans notre vie une expérience numérique pénible et douloureuse, qui a entravé à la fois notre désir d’aller au bout du parcours, mais aussi ébranlé notre confiance en l’applicatif utilisé, parfois même jusqu’à remettre en question la fiabilité de ladite plateforme ! Cela souligne l’importance de soigner l’UX/UI de son site et de mettre en place quelques bonnes pratiques simples, afin de rendre son applicatif numérique appétent et désirable pour les utilisateurs.
Afin d’avoir une plateforme désirable et optimale pour les utilisateurs, il est avant tout nécessaire de débuter sa stratégie UX par une phase d’user research, à travers des interviews utilisateurs, des tests, des enquêtes et des questionnaires, permettant d’aboutir à une User Journey Mapping. Cela permet de faire un état des lieux de l’existant, de connaître ses utilisateurs et d’avoir une première vision claire de la stratégie UX/UI à mettre en place. Cela commence par un audit de l’existant.
Pour ce faire, le Product Manager et l’UX/UI designer peuvent travailler conjointement afin de matérialiser sur Miro, Figma ou Whimsical les étapes actuelles des parcours utilisateurs, mais aussi les parcours des principaux concurrents, afin de construire la User Journey Mapping.
Cette première étape permet de cartographier les fonctionnalités existantes, celles manquantes, mais aussi les points de frictions potentiels rencontrés par les utilisateurs et les opportunités envisagées.
Elle permet de faire un état des lieux de l’existant, de se positionner face à ses concurrents et de clarifier sa vision du marché.
Une expérience utilisateur satisfaisante se doit de reposer sur des fondations stratégiques solides : se concentrer uniquement sur l’aspect esthétique ne peut être une stratégie pérenne. Sans réflexion stratégique profonde sur les utilisateurs, leurs comportements, leurs désirs, leurs attentes, il est délicat de donner du fond à une interface, aussi belle et élégante soit elle.
Avant d’habiller un applicatif numérique, il est donc primordial d’établir la vision stratégique, qui viendra sous-tendre et porter la vitrine utilisateur. Pour ce faire, il est primordial de connaître ses utilisateurs, de comprendre leurs envies, leurs points de frictions actuels et leurs souhaits les plus chers.
A ce stade, il est nécessaire de solliciter ses utilisateurs, à travers :
Une fois l’audit et les tests utilisateurs réalisés, le Product Manager et l’UX/UI designer peuvent travailler conjointement à leur analyse, et en extraire des hypothèses produit et design, nécessaires pour concevoir les premières briques du parcours utilisateurs. Ces résultats chiffrés et qualitatifs ont plusieurs visées :
Ces chiffres permettront de justifier auprès des stakeholders, des sponsors et des comités directionnels les choix UX/UI.
Grâce à la première phase d’audit, de benchmark, de conduite de tests et d’entretiens utilisateurs, il est désormais possible pour le Product Manager et l’UX/UI designer de définir leurs personae, de clarifier leurs désirs et leurs souhaits. Ces personae peuvent être matérialisés sous forme de cartographie, en incluant pour chaque persona les Job-to-be-done, les profils socioculturels envisagés, le genre et l’âge des cibles…
L’UX/UI designer et le Product Manager peuvent alors travailler à l’élaboration des parcours utilisateurs, en fonction des personae identifiés. Ces parcours utilisateurs permettront de venir alimenter la réflexion sur l’arborescence de l’applicatif numérique. Ces étapes précèdent la conception des premiers wireframes.
Un wireframe consiste en l’élaboration d’un schéma très simplifié, souvent en noir et blanc, permettant de visualiser les éléments principaux d’un applicatif numérique : logo, menu, barre de recherche, arborescence, positionnement des éléments en sont autant d’éléments constitutifs.
Le wireframe permet de mettre l’accent sur les aspects fonctionnels d’un applicatif numérique et d’évaluer sa pertinence.
Chaque page du parcours utilisateurs peut ainsi être matérialisée sous forme de wireframe : cela permet d’évaluer la cohérence du parcours, mais aussi de vérifier qu’aucun élément ne manque et qu’il n’y a pas de frictions à la navigation.
Une fois les wireframes réalisés, il est désormais possible de maquetter chaque page sur un logiciel de design, comme Figma. Ces maquettes, à la différence des wireframes, sont en couleur et comportent toute la charte graphique de l’entreprise. Elles sont censées matérialiser l’applicatif numérique à venir, tel qu’il sera vu par les utilisateurs une fois en production.
Une fois toutes les maquettes réalisées, et avant de passer à leur développement et leur mise en production, une dernière vérification s’impose à travers la conduite de nouveaux tests utilisateurs, en condition semi-réelle cette fois-ci !
L’UX/UI designer conçoit alors des prototypes sur Figma, liant une maquette à une autre, afin de simuler un vrai parcours utilisateurs. Ces prototypes sont ensuite testés par des utilisateurs, à qui l’on demande d’interagir avec les maquettes, comme s’il s’agissait d’un vrai applicatif numérique. Cela permet de vérifier la compréhension du parcours, les éventuelles difficultés rencontrées, la bonne disposition et visibilité des différents éléments principaux (call-to-action, menu, barre de recherches…), sur des utilisateurs réels. Plusieurs types de tests sont envisageables : des tests d’usabilité, des guerilla tests, des tests exploratoires…
En cas de doute entre plusieurs versions, il est aussi possible de réaliser des tests non modérés sur des plateformes telles que Maze : des utilisateurs anonymes sont amenés à réaliser des actions sur différentes maquettes. Cela permet d’affiner certains détails, comme le positionnement des call-to-action primaires, ou encore la hiérarchisation des informations.
Certaines bonnes pratiques de design peuvent impacter considérablement l’expérience utilisateur. Une bonne arborescence et hiérarchisation des informations est essentielle, et ce afin de remplir plusieurs objectifs :
La hiérarchisation des informations se manifeste par différents éléments :
Après la hiérarchisation des éléments, une autre bonne pratique consiste à assurer la lisibilité de l’ensemble des informations. Cela passe bien évidemment par la construction d’applicatifs numériques responsive, mais aussi par la taille des polices et des call-to-action, ainsi que leur disposition au sein de l’interface.
Quelques bonnes pratiques consistent à valoriser les phrases courtes et impactantes, plutôt que les textes à rallonge, mais aussi à aérer le contenu afin de rendre les informations lisibles.
Favoriser les contenus visuels (vidéos, images, schémas) est aussi une bonne pratique, permettant une compréhension immédiate des informations et assurant une plus grande lisibilité et interactivité de la plateforme.
Une bonne pratique UX consiste aussi à favoriser l’amélioration continue de l’expérience utilisateur, à travers une remise en question fréquente de l’existant, passant par des tests utilisateurs en continu. En effet, la compétition accrue sur les applicatifs numériques, ainsi que l’évolution rapide des bonnes pratiques UX/UI incitent à ne jamais se reposer sur ses lauriers et à chercher toujours à améliorer l’expérience existante.
Des AB tests peuvent ainsi être conduits fréquemment, afin de tester plusieurs versions d’une même page ou d’une fonctionnalité. Les chiffres obtenus à l’issu de ces AB tests permettent de voir, en condition réelle, quelle version d’une même fonctionnalité fonctionne le mieux.
Des entretiens non modérés sur des plateformes telles Maze permettent aussi d’avoir des retours d’utilisateurs anonymes sur des parcours utilisateurs. Ces tests permettent de vérifier l’usabilité d’un parcours et d’infléchir ainsi la stratégie UX.
Une bonne démarche UX/UI passe par différentes étapes :
