Cet article illustre l’utilisation des techniques d’UX design pour un projet de développement d’une nouvelle application métier autour de la comptabilité du pharmacien.
L’UX design a été introduit au plus tôt dans le projet, il fallait vérifier que le besoin remonté grâce à de précédents ateliers était bien le bon. Cela nous a également permis de discerner d’autres besoins importants pour le pharmacien.
La première phase a été une phase d’empathie permettant de recueillir et d’approfondir la compréhension des besoins des utilisateurs.
Entretiens qualitatifs
Nous avons commencé par la mise en place d’entretiens, il s’agit d’une méthode de recueil de données qualitatives. Celle-ci offre des moments de dialogues privilégiés avec les destinataires du projet. Les données sont alors construites dans l’échange.
Par leur caractère ouvert et convivial, les entretiens permettent de recueillir des données à dimension humaine : exemples concrets, anecdotes intéressantes ou récits de vie. Ces données personnelles sont de précieuses bases à la création de personas réalistes et d’expériences maps.
Ces entretiens nous ont notamment permis de mieux comprendre le processus actuel de contrôle des factures en pharmacie, à ces fins trois titulaires de pharmacie ont été interviewés. Il est difficile de trouver beaucoup de pharmaciens volontaires car ils sont très occupés et les créneaux pour de potentiels entretiens doivent être réalisés en dehors de leurs horaires de travail. Malgré tout, on constate que ce nombre a été suffisant puisqu’un grand nombre d’informations s’est répété entre les différents entretiens.
Au cours des entretiens nous avons aussi remarqué l’utilisation fréquente d’un tableau Excel pour suivre les factures. Cela permet d’avoir une idée concrète des informations importantes pour eux et de leurs habitudes.
Echéancier d’un des titulaires interviewés
Immersion
Nous nous sommes aussi rendus en pharmacie pour se rendre compte du futur contexte d’utilisation de la solution. En effet, celle-ci devra être utilisée en parallèle d’un LGO (Logiciel de Gestion d’Officine) où les pharmaciens effectuent leurs réceptions ou passent des commandes par exemple.
Il est important de garder à l’esprit l’environnement de travail dans lequel l’application sera utilisée afin qu’elle puisse s’intégrer parfaitement dans l’activité réelle des utilisateurs.
Experience map
Issue du marketing, la méthode des experience maps consiste à identifier puis à représenter de façon chronologique les différentes interactions entre un utilisateur cible et un service ou produit.
Il s’agit d’une synthèse visuelle qui met l’accent sur les besoins de l’utilisateur, ses actions et les émotions ressenties avant, pendant et après l’interaction. L’objectif est de faciliter l’identification de points critiques, où l’expérience de l’utilisateur connaît une forte dégradation. Il convient alors d’en comprendre les causes et de proposer des solutions d’amélioration.
Grâce aux entretiens menés, plusieurs experience maps ont été créées. Grace à la courbe, nous pouvons facilement constater les points de critiques principaux qui constituent des opportunités de conception.
Expérience map d’un des titutaires
Persona
Les personas permettent de créer l’archétype d’un groupe d’utilisateurs de l’interface. Un persona est un personnage fictif qui incarne un type d’utilisateurs cibles.
Cette méthode apporte de nombreux avantages :
- donner un visage aux utilisateurs cibles pour mieux identifier leurs attentes, besoins et ressentis ;
- concevoir une interface utilisateur améliorée, alignée sur les objectifs réels de l’usager ;
- transmettre plus aisément une description du public cible.
Grâce aux nombreuses données recueillies, nous avons créé un persona pour mieux comprendre quelles seraient les motivations de l’utilisateur et comment aligner l’expérience de la nouvelle application.
Persona des pharmaciens titulaires
User flow
Un user flow est une représentation visuelle permettant de comprendre chaque étape que l’utilisateur franchit, du démarrage de l’application jusqu’au point final. Il s’agit d’une aide pour mieux comprendre comment l’utilisateur navigue dans l’application et quelles décisions il peut prendre. Cela permet d’avoir une idée de l’expérience à un niveau holistique, en prenant en compte l’application dans sa totalité.
Extait du User flow de notre solution
Atelier de co-conception
Un atelier de co-conception, ou co-création, est la mise en œuvre d’une méthode où l’utilisateur final d’un site web ou d’une application collabore de manière active à la conception. La conception participative encourage la créativité de l’équipe et l’innovation.
Ainsi, des ateliers de co-conception ont été menés sous Miro (plateforme de tableau blanc collaboratif en ligne) afin de construire les maquettes low fidelity.
Exemple de maquettes créées en atelier
Maquettes high level
Aucune charte graphique n’était imposée pour le design de cette application. La première étape fut donc de définir les codes graphiques de l’application : couleurs, typographie, iconographie, illustrations.
Quelques écrans de la maquette high level
Choix des couleurs
Pour cela j’ai d’abord réalisé un benchmark afin de m’immerger dans les codes de l’activité du client, de me familiariser et m’approprier les codes graphiques de la cible et de son secteur d’activité.
Benchmark UI
De manière globale, on remarque qu’il y a une dominance de la couleur bleue au sein des applications comptables et financières. Cela s’explique par le fait que la couleur bleue est souvent décrite comme un signe de stabilité et de fiabilité. Les entreprises qui veulent projeter une image de sécurité utilisent donc souvent le bleu.
Le domaine de la pharmacie quant à lui est associé à la couleur verte, synonyme de vitalité et de guérison. De ce fait, c’est cette couleur qui domine la charte graphique du logiciel LEO, utilisée par les futurs utilisateurs de notre application.
En prenant en compte ces deux éléments j’ai décidé d’utiliser une palette à mi-chemin entre le bleu et le vert, avec un vert persan. Je l’ai appliqué à la règle des 60-30-10 qui permet d’harmoniser le schéma de couleurs et de créer une conception d’interface bien équilibrée.
Notion d’accessibilité :
L’accessibilité désigne les ajustements dans le travail de conception qui permettent de concevoir des applications pour le plus grand nombre. Cela peut concerner l’audio, la navigation, les propriétés du texte ou encore la couleur. Nous allons nous concentrer sur ce dernier point, car il s’agit des choses les plus faciles à identifier et à corriger.
Selon les couleurs, nous ressentons le contraste différemment. Comme vous pouvez le voir ci-dessous, un texte bleu sur fond blanc sera beaucoup plus facile à lire que sur fond jaune. C’est quelque chose qu’il faut toujours garder à l’esprit lorsque l’on conçoit pour les humains.
En France, environ 1,7 million de personnes vivent avec une déficience visuelle (source : aveuglesdefrance.org). Pour s’assurer que les applications conçues puissent être utilisées et lues par le plus grand nombre de personnes possible, il faut toujours garder un œil sur le contraste relatif entre les couleurs. Cela garantit que tout le monde a la possibilité de voir le contenu, y compris les personnes daltoniennes.
Pour les interfaces numériques, la norme WCAG (Web Content Accessibility Guidelines) a été élaborée à cet effet. Il y a deux niveaux, AA et le plus strict AAA. On peut voir ci-dessous que le contraste utilisé pour les boutons est suffisant (4,5). Nous assurons donc l’accessibilité.
Test du contraste des couleurs sur color.review
Autres éléments graphiques
Cette palette de couleur est accompagnée d’une police sans empattement Montserrat, cela assure la lisibilité et la scannabilité du contenu, ce qui est vraiment important pour ce type de contenu avec beaucoup d’informations et de tableaux.
Pour les iconographies nous utilisons les icônes libres de droits Google Fonts. Ils ont l’avantage d’avoir une grande librairie et les icônes sont disponibles en cinq styles différents. Nous utilisons le style “sharp” (pointu) en majorité car c’est en adéquation avec le domaine sérieux de la comptabilité et des contrôles.
Les illustrations et les animations proviennent quant à elles de lottiefiles. Utiliser des animations et illustrations permet d’humaniser l’application, la rendant plus engageante.
Utiliser des ressources libres de droit permet un gain de temps pour avancer sur le projet. Il n’est toutefois pas écarté la création d’icônes ou d’illustrations personnalisées si cela est jugé nécessaire à l’avenir.
Prototypage
J’ai ensuite donné vie à la maquette statique pour la rendre interactive, en mettant en place un chemin de navigation cohérent, avec des animations, des micro-interactions, des transitions et des effets de défilement immersifs. Créer des prototypes UX fonctionnels permet de simuler le fonctionnement escompté de l’interface avant sa production finale. En effet, mieux vaut faire une maquette que du développement inutile.
Dans cette optique, le prototypage de la maquette a été réalisé afin d’effectuer de futurs tests utilisateurs avec les pharmaciens. Ceux-ci permettront d’optimiser l’interface actuelle grâce aux retours des utilisateurs.
Conclusion
Pour conclure, si on considère l’UX Design sous un angle économique, on comprend mieux l’enjeu qu’il constitue pour les entreprises. En effet, aujourd’hui l’expérience est devenue un critère déterminant dans le succès d’un site web, d’une application métier ou de tout autre produit numérique. L’UX Design est ainsi un moyen de se différencier et d’innover pour une organisation.
Vous recherchez des compétences UX Design? Nos équipes restent également à votre écoute, n’hésitez pas à nous contacter dès aujourd’hui.
Article proposé par
Laura Carquille
UX/UI designer