Module 322 - Concevoir et implémenter une interface utilisateur

Recenser et documenter

Recenser et documenter

• 4 étapes clé pour la conception d'une interface utilisateur
• Permettent d'analyser et documenter les informations cruciales des utilisateurs

1. Création de persona
2. Définition des récits utilisateurs (user stories)
3. Création de Storyboard
4. Tri de cartes (card sorting)

Persona

• Personnage fictif représentant un segment d'utilisateur spécifique
• Chaque persona incarne un type d'utilisateur bien défini
• Permet aux développeurs de visualiser les utilisateurs
• Le nombre dépend de la portée du projet et sa diversité

Étapes de création persona

1. Collecter des données et informations sur les utilisateurs
2. Identifier les caractéristiques communes
3. Nommer le persona
4. Décrire le persona
5. Définir les frustrations et les problèmes que rencontre le persona
6. Définir les objectifs  et les besoins du persona
7. Itérations

• Une fois créé, le persona sert de référence tout au long du processus de conception

CAS PRATIQUE - Persona

• Par groupe de 3
  • Créez un persona pour l'un des deux projets dans le fichier "CP02"
  • Basez-vous sur les données récoltées
  • Utilisez ces données pour représenter au mieux votre Persona
  • Utilisez le template Figma pour créer votre Persona

• Basez-vous sur les données factuelles

• Complétez à l'aide d'hypothèse si besoin​

Récit utilisateur (user story)

• Une user story est une phrase simple qui décrit une fonctionnalité rédigée du point de vue de l'utilisateur
• L'objectif est de capturer la valeur ajoutée qu'apporte cette fonctionnalité
• Doit comporter assez d'informations pour que les développeurs comprennent les besoins de l'utilisateur

En tant que [profil utilisateur], je souhaite [objectif] afin de [résultat attendu].

Récit utilisateur (user story)

• La rédaction d'une user story se compose :
  • d'un utilisateur type (persona)
  • d'un besoin
  • d'un objectif

Exemple de user stories

En tant que coureur régulier, je souhaite avoir accès à des programmes d'entraînement personnalisés adaptés à mon niveau, afin de pouvoir améliorer mes performances à mon propre rythme.

En tant que cycliste, je souhaite recevoir des rappels hebdomadaires personnalisés sur mes objectifs sportifs afin de rester motivé et de ne pas perdre de vue mes progrès.

Exemple de user stories

En tant que végétarienne, je souhaite voir plus de diversité dans les options végétariennes et sans gluten afin de ne pas devoir commander les mêmes repas chaque semaine

En tant qu'étudiante à budget serré, je souhaite bénéficier de frais de livraison réduits pour les commandes rapides afin de ne pas être découragée de commander des repas équilibrés.

Utilité des user stories

• Garder à l'esprit les besoins réels des utilisateurs
  • Pour Julien, l'équipe doit veiller à ce que les programmes d'entraînement soient personnalisables et motivants
  • Pour Léa, l'équipe doit se concentrer sur la diversité des repas et sur la réduction des frais de livraison pour les commandes fréquentes

Storyboard

• Décrit les interactions possibles entre un utilisateur et un produit

• Se présente sous histoire visuelle (dessin, BD, ...)

• Raconter l'histoire de l'utilisateur en tant que personnage
  • Comment découvre-t-il le site ou l'application ?
  • Pourquoi clique-t-il sur tel produit ou service ?
  • Quel usage a-t-il de ce produit et comment cela répond-t-il à son besoin ?

• ​Le storyboard sert à montrer le scénario UX  de l'utilisateur (son parcours !)

Créer un storyboard

• Sous forme de BD très courte (min. 5 planches - max. 10 planches)
• On part d'une situation de départ (besoin, désir, problème, ...)
• On met en scène une action qui permet d'accomplir une tâche
• On arrive à une situation de résolution, de satisfaction

Bonnes pratiques

• Soyez simplistes !
• Annotez et légendez les vignettes ("Dans le métro", "au bureau")
• Donnez des indices temporel (horloge, "Le lendemain", ...)
• Nommez les personnages

Exemple

Avantages

• Mieux comprendre les clients
• Stimuler l'engagement émotionnel
• Présenter des idées à des parties prenantes
• Collaborer avec votre équipe

CAS PRATIQUE - Storyboard

• Par groupe de 3
  • ​Effectuez le storyboard pour Léa Lachat
  • 6 à 8 planches (+/- 1 planche)
  • Partez d'une situation de départ
  • Définissez la résolution
  • .. et imaginez le parcours entre
  • utilisez les bonnes pratiques
• Osez être créatif ! ... pas trop non plus ;-) ​
• Travaillez ensemble
• Utilisez les outils que vous voulez
  • ​IA Générative (ChatGPT, Adobe Firefly)
  • Paint (bon courage)
  • Papier/stylo

Tri de cartes (Card Sorting)

• Méthode permettant de concevoir une structure d'informations intuitives et maximiser la convivialité de l'interface
• L'objectif est de fournir des cartes aux utilisateurs représentant des éléments ou contenus du site.
• Les utilisateurs doivent ensuite organiser les éléments en catégories logiques.
• Permet aux développeurs de comprendre comment les utilisateurs perçoivent les informations et les relations

Objectifs du Card Sorting

• Améliorer la structure de l'information
  • ​organiser le contenu de manière logique et intuitive
• Comprendre la logique utilisateur
  • ​comment les utilisateurs pensent et organisent l'information ?
• Valider les hypothèses de conception
  • ​la structure imaginée est-elle en accord avec la manière dont pense l'utilisateur ?

Les étapes du Card Sorting

• Immersion
  • ​Fermé
  • Ouvert
  • Mixte
• Définition des contenus
• Regroupement
• Labélisation
• Disposition

Les étapes du Card Sorting

Avantages du Card Sorting

• Adaptabilité​
  • ​Permet aux utilisateurs d'influencer la structure
• Efficacité
  • ​Méthode rapide, peu coûteuse et facilement reproductible
• Précision
  • ​Clarifier l'architecture du site

CAS PRATIQUE - Card Sorting

• Par groupe de 3
  • ​Vous recevez un lot de 18 étiquettes
  • Lisez les étiquettes, comprenez leur contenu
  • Définissez des regroupements
  • Créer des catégories à l'aide de post-it
  • Prenez une photo !