Module 322 - Concevoir et implémenter une interface utilisateur

La conception créative

Partie 4

Objectifs du cours

•  Concevoir un storyboard

• Construire un prototype à l’aide de Lego Serious Play

• Différencier les différents type de maquette d'écran

• Expliquer la phase de test

   

La conception créative

Nous allons aborder la 4e et 5e phase du design thinking : le prototypage et le test

Le prototypage rapide

Le prototypage rapide permet de concrétiser une idée de façon simple, de la tester rapidement auprès des utilisateurs.

Les prototypes n’ont pas besoin d’être parfaits : ils sont faits pour évoluer. Cette approche favorise des cycles courts d’itération, alternant phases de création et phases de test. Elle permet de valider une idée, puis d’améliorer progressivement le concept grâce aux retours obtenus

Le prototypage rapide

Storyboard

Lego

Serious Play

Avant de tester une idée directement auprès des utilisateurs finaux, il est parfois nécessaire de convaincre d’abord des collaborateurs en interne ou de recueillir des premiers retours pour valider le concept. Des outils comme le Storyboard ou le LEGO Serious Play permettent alors de rendre l’idée tangible et d’embarquer efficacement les parties prenantes.

Storyboard

Décrit les interactions possibles entre un utilisateur et un produit. Il 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

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

Storyboard

Exemple de Storyboard

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

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

Avantages

Bonnes pratiques

Storyboard

• Papier, crayon
• Adobe Firefly :  permet de générer rapidement des images à partir de descriptions textuelles, idéales pour illustrer chaque scène d’un storyboard.

Outils

Le Prototypage rapide : Storyboard

• Définir ensemble de l'idée à dessiner: récompense, défis, JcJ ?
• Télécharger le document "Storyboard" présent sur padlet
• Aidez-vous du document cadre du défi conceptuel, des personas, des users stories, du tri par carte et des idées sur les post-its pour concevoir votre Storyboard
• Commencer par écrire votre histoire ensuite dessinez la à la main ou à l'aide d'Adobe Firefly 6 images
• Envoyer le prototype à la prof

Temps : 30 minutes

Travrail : en groupe de 2-3 personnes

Lego Serious Play

La méthode Lego Serious Play, c’est un outil projectif qui utilise les pièces du jeu de Lego pour construire des représentations de situations.

C’est Lego qui a inventé la méthode Lego Serious Play. Pour “illustrer” la problématique, ils ont eu l'idée d'utiliser des pièces lego et une solution a émergé.

Lego Serious Play

Lego Serious Play

5 étapes de la question à la réponse:

Étape 1 - L’échauffement : Dans le cas de l’utilisation des Lego, l’échauffement sert à briser les a-priori concernant le jeu et vise à aider le public à manipuler les pièces car pour certaines personnes, manipuler des Lego est quelque chose qui date de quelques années, voire qui est totalement inconnu.

Étape 2 - La problématique : l’objectif est de répondre à une question. Par exemple :« C’est quoi des cours de yoga amusants destinés à un groupe d’âge ? » Une fois la question posée, la méthode préconise de passer immédiatement à l’action et d’entamer la représentation avec ses pièces de Lego. Le but n’est pas de construire une œuvre d’art mais un support symbolique.

Lego Serious Play

5 étapes de la question à la réponse:

Étape 3 - La construction : Travailler sur la métaphore et construire ce que l’on a dans la tête, se fait dans l’action, en défaisant et construisant. Les mains étant au service de la pensée.

 
Étape 4 - Le partage : Les personnes sont invitées à partager la représentation de leur réponse à la question initiale. Elles racontent chacune leur histoire, elle partage leur besoins, valeurs, et visions !

Étape 5 - la réponse collective : Une fois le travail individuel terminé, il faut réaliser une construction collective, en répondant à une nouvelle question et pourquoi pas intégrer sa précédente création !

Exemple de Lego Serious Play

Le Prototypage rapide :

Lego Serious Play

• Etape 1 : L'echauffement
• Etape 2 : Question individuel
• Etape 3 : La construction
• Etape 4 : Le partage
• Etape 5 : La réponse collective

Idée à prototyper : comparer ses résultats personnels avant et après

Envoyer la photo du prototype lego final à la prof

Test du prototypage

Recevoir des feedback sur le prototype

Améliorer le prototype à chaque itération, découvrir de nouveau enjeux et identifier rapidement les forces et faiblesses des idées.

L'objectif est de créer une banque de données des retours sur l'expérience.

Etapes lors de la collecte de feedbacks à faire avec les utilisateurs :

1. Résumez l’hypothèse (« Nous pensons que… »)
2. Expliquer la démarche (« Pour cela, nous allons…. »)
3. Indiquer ce qui va être mesuré pendant la séance (« nous allons mesurer… »)
4. Etablir un objectif (« l’hypothèse est confirmée si…. »)

Test du prototypage

Ensuite l’ensemble des remarques, retours et avis des utilisateurs sera synthétiser dans une grille :

• Points forts : quels aspects du projet ont été validés par les utilisateurs
• Points faibles : quels aspects faut-il impérativement retravailler, remplacer ou supprimer
• Questions : quelles sont les nouvelles soulevées par cette séance de tests
• Idées : Quelles idées des utilisateurs peuvent être retenues, quelles idées ont été proposées par l’équipe pendant l’exercice

Test du prototypage

Test du prototype :

Lego Serious Play

• Un groupe se porte volontaire pour tester son prototype Lego
• Les autres membres de la classe téléchager le document "Grilles de la phase test"
• Le groupe présente sont projet en s'aidant des étapes de collecte de feedback : 
  • Résumez l’hypothèse (« Nous pensons que… »)
  • Expliquer la démarche (« Pour cela, nous allons…. »)
  • Indiquer ce qui va être mesuré pendant la séance (« nous allons mesurer… »)
  • Etablir un objectif (« l’hypothèse est confirmée si…. »)
• Les autres membre de la classe complète leur
  fiche selon les retours de l'utilisateur et envoi
  leur fiche à la prof

Itération

L’objectif est d’adapter continuellement votre solution aux besoins des utilisateurs, en écoutant avis, remarques, suggestions et retour d’expérience.

Itérer, réitérer, autrement dit prendre en compte les retours des utilisateurs cibles est essentiel à toutes les étapes du projet. Des itérations nombreuses et rapides sont la clé d’un projet réussi

Itération

Ainsi, il faut organiser, regrouper l’ensemble des feedbacks en catégories afin d’identifier les points à retravailler. Une fois ces points mis à jour et en fonction des conclusions tirées, trois solutions sont possibles :

• Affiner le prototype : retour à l’étape « Prototypage »
• Redéfinir la solution : retour à l’étape « Idéation »
• Redéfinir le problème : retour à l’étape « Définition»
   

Prototype final - La maquette d'écran

La réalisation de maquettes détaillées correspond à une étape avancée dans la conception d’une application ou d’un site web.

Contrairement au prototypage rapide, qui sert surtout à tester une idée ou une fonctionnalité de manière exploratoire, la maquette détaillée vise à représenter précisément l’interface utilisateur.

Son rôle principal est double :

• Valider l’ergonomie du parcours utilisateur
• Préparer un brief clair pour les développeurs

• Processus fondamental dans la conception d'interfaces digitales
• Visualiser et organiser les éléments d'une interface

• Une maquette permet de :
  • Garantir une harmonie entre ergonomie, design et UX
  • Faciliter la collaboration entre l'équipe

La maquette d'écran

• les wireframes : définit la structure et la disposition des composants de manière simple et fonctionnelle
  
• la maquette (mockup) : introduit les choix graphiques tels que les couleurs, les typographies et les visuels
  
• le prototype d'interface : simule les interactions et l’expérience utilisateur finale.
  

La maquette d'écran

Wireframes

• Représentation statique de basse fidélité d'un site web ou application

• Définit la structure et architecture de l'information

• Donne une vue d'ensemble des interactions prévues

• Sans détails graphiques  : Squelette du futur design

• Peut être réalisé de 2 façons
  • Sur papier
  • Sur logiciel

Exemple de Wireframes

Maquette

• Ajout d'éléments graphiques
  • Couleurs
  • Typographies
  • Images

• Donne une perspective visuelle du produit final

• Concevoir une interface plaisante respectant l'ergonomie

• Identifier certains détails manquant ou incohérence sur l'incompatibilité graphiques

• Utilisation d'outils ciblés : Figma, Lunacy

Exemple de maquette

Prototype d'interface

• Représentation graphique haute-fidélité, simulation du projet final, analyser en condition proche de la réalité

• Tester les interactions et hypothèse d'expérience utilisateur (Aussi appelé "maquette ou prototype cliquable")

• Tester si le site web sera adapté aux utilisateurs, imite les interactions que rencontrera l'utilisateur, permet d'identifier les erreurs de parcours ou d'utilisabilité, identifier les problèmes

• Utilisation d'outils de prototypage : Figma / Adobe Xd

Prototype d'interface

La maquette d'écran

Créer la maquette (mockup) : Aidez-vous du tri par carte pour concevoir la structure de l'application

Idée à prototyper en 1er  : formulaire pour connaître l'utilisateur et ses préférences

Outil : Figma

Périférique : mobile

Travail  individuel : chacun travaille sur sa maquette mais les reflexions peuvent se mener à 2