Chris Bikes
Devenir un expert Figma et amélioration des compétences UX/UI : Cours Figma UI UX Design Essentials
Oct. 2023 → Déc. 2023 (2 mois)
UX Designer - Certification (Udemy)
Contexte : résumé
J'ai récemment suivi un cours pour solidifier pleinement ma transition de adobe XD vers Figma. Dans ce cours, un générateur de projets aléatoires a été utilisé pour obtenir une base et un fil conducteur tout au long du cours. J'ai décidé de pousser le projet plus loin pour obtenir un site mobile e-commerce haute fidélité et complet. Je voulais que ce travail soit réalisé et intégré ici rapidement et donc pour simplifier les choses j'ai décidé que :
La marque ne vendrait qu'un seul produit
Je n'essaierai pas de retravailler le nom de l'entreprise ni le logo réalisé rapidement durant le cours
Si vous souhaitez avoir plus d’informations sur le contexte, une section avec plus de détails est présente plus bas.
Méthodologie
Mock-ups
Page produit - contenu réseaux sociaux
Illustration : résultat du générateur de projet aléatoire.
La conception de la page produit a été une excellente occasion d'essayer d'utiliser les informations fournies dans le brief du projet sur l'utilisateur cible de la marque (voir illustration).
Les décisions d'achat de cet utilisateur semblent être influencées par le contenu des réseaux sociaux. Par conséquent, inclure un espace incluant ce type de contenu devrait être bénéfique pour la marque.
Page produit - avis
Des bons avis sont essentiels en e-commerce. Ceci est étayé par des preuves provenant de multiples sources : entreprises mais aussi de la recherche universitaire en psychologie (voir Chen et al., 2022 par exemple). Par conséquent, proposer une bonne expérience utilisateur sur cette page est fondamental. Ici, il s’agit de la lisibilité des fiches d’avis et de la manière dont les options de gestion du contenu sont présentées.
Heureusement, les avis ne contiennent généralement pas trop de paramètres sur lesquels filtrer et trier, il est donc possible de les rendre facilement accessibles à l'utilisateur sans prendre trop de place. Plus important encore, la sélection et les commentaires sur cette sélection peuvent être effectués et affichés sur cet écran unique sans avoir à le quitter, ce qui constitue la meilleure solution lorsque cela est possible.
Pour vérifier mon travail, j'ai utilisé cette excellente ressource sur la conception de filtres.
Configuration produit - panier - paiement
Il était important pour moi d'avoir une page de configuration du produit car c'était une fonctionnalité assez courante sur le marché du vélo. Le principal défi visuel de cette page était de pouvoir disposer d’un sélecteur de couleurs qui ne perturbe pas l’identité visuelle de la page tout en restant utilisable. Chaque couleur est une ligne qui prend beaucoup de place mais qui permet :
un aperçu couleur de taille significative à afficher et facilement perceptible
une cible tactile généreuse
une apparence unifiée avec le reste des paramètres
Pour la page de paiement il est important de fournir un résumé rapide de ce qui a été sélectionné à l'étape précédente afin que l'utilisateur n'ait pas à revenir si un élément est oublié (même s'il semble que le nombre de paramètres semble gérable. Rappel : la règle 7+/-2 est un mythe).
Page compte : suivi de commande
Suivi de commande : example avec délai de livraison
Les informations relatives aux commandes et leur suivi sont un domaine où l’expérience utilisateur n’est pas toujours excellente. Il était particulièrement important pour moi de concevoir un flux qui donne la bonne information aux bons moments et aux bons endroits.
Je me suis beaucoup inspiré de cette étude de cas notamment pour la partie suivi où j'ai montré comment l'utilisateur est informé de tout problème concernant sa commande ce qui a un grand impact sur la satisfaction de l'utilisateur et donc sur les KPI clés pour l'entreprise.
Page compte : gestion des adresses
Pour la conception des champs de texte, j'ai décidé de suivre la recommandation de NNg (Nielsen Norman Group) en la matière qui est de ne pas inclure de texte de remplacement (placeholder text en anglais) car ils ne sont pas compatibles en matière d'accessibilité. Au lieu de cela, le seul champ qui nécessitait des instructions (le champ déroulant pour la sélection du pays) les avait placées en dehors de celui-ci.
Un autre aspect intéressant de cette page est que les utilisateurs sans adresse enregistrée voient directement le formulaire pour en créer une nouvelle sans avoir à explicitement manifester leur désir de le faire, ce qui économise une action.
Page compte : informations personnelles
Création de compte
Un autre aspect qui pourrait être adapté aux spécificités du persona présent dans le brief du projet était le choix des médias sociaux pour la création de compte ou la connexion directe. Ici, les choix sont cohérents avec les informations démographiques fournies : Facebook pour la tranche d'âge et Pinterest pour le genre.
Création de compte : erreurs et force du mot de passe
La création de compte comporte quelques étapes importantes en ce qui concerne l'expérience utilisateur.
Pour le champ du mail, un retour clair, à la fois visuel et textuel, doit être fourni pour que l'utilisateur puisse corriger efficacement toute erreur pouvant survenir.
Pour le mot de passe, des directives claires existent (voir ici ou ici). Par exemple, pour découvrir les différentes règles de ce qui constitue un mot de passe conforme, l’application ne doit pas imposer un jeu laborieux d’essais et d’erreurs à l’utilisateur. Par conséquent, dès que l'utilisateur modifie le champ du mot de passe, des règles claires doivent être fournies. La force d'un mot de passe est également efficace pour encourager l'utilisateur à créer un mot de passe plus fort et donc réduire les problèmes de sécurité. Enfin afficher le mot de passe par défaut est une solution qui favorise l’utilisabilité sans perte de sécurité pour l'utilisateur :
[…] il y a un clavier tactile visible directement sous le champ de saisie qui met en surbrillance chaque touche lorsque vous appuyez dessus. Ces retours visuels affichent les caractères d'un mot de passe dans une taille plus grande que la plupart des champs de saisie. Donc, en réalité, les caractères de masquage •••• ne cachent pas efficacement un mot de passe aux regards indiscrets.
Luke Wroblewski, Google
Contexte : détails
Jusqu'à récemment, je travaillais toujours avec Adobe XD pour assumer la conception, mais Figma a désormais complètement pris le relais. A l’époque, j’ai appris XD à partir de sources hétérogènes et fragmentés (tutoriels, vidéos, etc.). Cette démarche a donné des résultats satisfaisants mais je voulait améliorer ma démarche. J'ai donc décidé de suivre un cours bien noté sur une plateforme d'apprentissage en ligne réputée : Udemy.
L'objectif du cours était d'apprendre toutes les fonctionnalités essentielles que Figma propose à l'utilisateur pour pouvoir travailler sur des projets professionnels d’UX/UI. Une fois le cours terminé et le certificat bien mérité, il a été recommandé de porter le projet à un niveau professionnel et réaliste. C’est le résultat de ce travail qui présenté sur cette page.
Brief
Comme pour de nombreux cours, un générateur d’idées de projet pour constituer un fil rouge à travers le cours. Après que quelques informations aient été fournies, un brief a été généré (voir illustration).
Il contenait le nom de la marque composé de deux variables : un nom et le type de produit pour lequel nous concevions un site Web. Il contenait également une brève description d’un persona pour la marque.
Contenu du cours
Le but du cours était de couvrir un maximum de choses sur ce qu'est l'utilisation de Figma dans un cadre professionnel. Une partie de ce qui a été abordé, je l’avais déjà appris et pratiqué sur Adobe XD. Cependant, j'ai également beaucoup appris sur les nouvelles fonctionnalités, les meilleures pratiques et l'optimisation des flux de travail.
Sans trop entrer dans les détails, le cours a abordé les domaines suivants dans Figma :
Maquettes ou wireframes (basse et haute fidélité)
Les frames et leurs spécificités (vs groupes)
Autolayout et constraints
Styles (couleur, texte, effets)
Colonnes et grids
Composants et variants multi-dimentionnels
Prototypage (animations, micro-interactions)
Plug-ins et communauté Figma
Utilisation de l’interface et meilleures pratiques :
Pages
Librairies d’équipes
Commentaires et partage
Des critères clairs et raisonnables
L'objectif du cours étant de découvrir Figma et non de réaliser un site web réaliste, sa structure est restée extrêmement simple, comme l'illustre le taskflow ci-dessous.
Je savais que si je voulais profiter de cette opportunité pour ajouter un site Web réaliste à mon portfolio, je devais approfondir la structure. J'ai donc transformé ce flux de tâches en userflow pour aider à identifier les parties manquantes.
De plus, je savais aussi que si je voulais mener ce projet dans un délai raisonnable, je devais simplifier les critères.
J'ai donc décidé que :
j'allais produire un site Web mobile uniquement
pour une marque qui ne vend qu'un seul produit
je n'essaierai pas de retravailler le nom de l'entreprise ni le logo réalisé au cours