Notre objectif était de développer un prototype d’application éducative contenant différents types d’exercices sous forme de quiz. Idéalement, le prototype devait être en assez haute fidélité pour pouvoir être utilisé lors de tests utilisateurs.
Dans ce projet, chaque écran comporte potentiellement plusieurs dizaines de déclinaisons avec des interactions, des animations et des adaptations différentes pour chaque état. On doit partir d’une structure simple et robuste. Sinon, la complexité du prototype va augmenter pour chaque nouvel exercice.
La question s’est vite posée : comment limiter la complexité du prototype tout en maximisant le contenu et le réalisme ? En effet, les utilisateurs doivent pouvoir répondre à la question de plusieurs façons, et le prototype doit pouvoir continuer, que la réponse soit juste ou fausse. On doit également avoir une diversité et un nombre de questions assez élevés pour permettre de tester sur plusieurs minutes.
Voici le type de résultat que l’on a obtenu :
Le premier challenge est de réussir à simplifier la structure tout en permettant la personnalisation des contenus dans le prototype. On doit aussi pouvoir gérer l’apparition de fenêtres de dialogue en évitant de multiplier les variants du même écran. Enfin, une fois que le prototype est fonctionnel, on va voir comment le rendre plus réaliste sans alourdir la structure.
Pour créer un quiz dans notre prototype, on va avoir besoin d’enchaîner plusieurs questions à la suite, avec parfois différents formats d’exercices. Pour limiter la duplication de variants, la série d’exercices sera définie dans le prototype. De ce fait, on a besoin de pouvoir surcharger les contenus (override) pour pouvoir personnaliser chaque question.
Premièrement, on a besoin de créer un master pour chaque type de question. Deuxièmement, on doit pouvoir définir plusieurs versions du même exercice. Par exemple, parfois la bonne réponse sera “vrai”, parfois “faux”, donc cliquer sur le même bouton aura un effet différent. Pour augmenter le réalisme, on a besoin de ces deux versions dans les variants. On peut ensuite ajouter tous les états-clés.
Maintenant que nos exercices sont prêts, comment les enchaîner dans le prototype ? En effet, dans un quiz, tant que l’utilisateur n’a pas répondu à la question, le bouton pour passer à l’exercice suivant n’est pas visible (ou pas actionnable). De plus, on peut personnaliser la question, mais le contenu qui apparaît après une interaction (comme la correction de l’exercice) n’est pas visible non plus, et de ce fait pas personnalisable. C’est pour cela que l’on ajoute un variant supplémentaire par type d’exercice : un variant de surcharge.
Ce variant contient tous les éléments nécessaires pour les transitions et la personnalisation de contenu dans le prototype. Pas d’inquiétude, il ne sera pas visible par les utilisateurs. Tous les contenus sont en opacité 0 %, et l’écran ne s’affiche que pendant une milliseconde avant de transitionner sur l’écran de question. Cette astuce permet d’utiliser tous les éléments nécessaires au bon fonctionnement du prototype, sans impacter l’expérience utilisateur. Cela permet également la modification de fenêtres de dialogue, sous forme d’overlays.
Ce type d’application contient souvent de nombreuses fenêtres de dialogues : bonne réponse, bien joué, résultats, animations… Figma comporte déjà un type de fenêtre “overlay” intégré, mais cet outil comporte des limitations. Il est notamment compliqué à intégrer dans des variants. De plus, les overlays peuvent être communs à plusieurs types d’exercices. On a donc cherché un contournement pour optimiser l’utilisation.
D’abord, on crée toutes les fenêtres d’overlay sous forme de composants responsifs. Il est important d’avoir des composants qui s’adaptent à la taille de l’écran. Ensuite, on intègre ces composants dans les masters.
Nous avons utilisé une frame “Overlays” avec un fond noir à opacité réduite pour simuler une fenêtre de dialogue. Tous les composants sont ajoutés à cette frame, avec la largeur “fill container”, puis cachés. Lorsque l’on a besoin d’un de ces overlays, on crée un variant en utilisant cette frame Overlays. Cela permet également de gérer facilement les animations.
Maintenant, notre prototype enchaîne des questions personnalisées avec toutes les fenêtres de dialogue nécessaires. Tout le contenu y est, il ne reste plus qu’à travailler la forme.
D’abord, il est recommandé de soigner les transitions des fenêtres de dialogue. L’apparition, la disparition ou le changement vers une autre fenêtre se font de façon assez basique par défaut. Avec quelques astuces, il est possible d’ajouter des animations simples sans ajouter de variants supplémentaires. Si le sujet vous intéresse, nous détaillerons différentes méthodes pour améliorer ces transitions dans un prochain article.
On pense également aux détails qui peuvent rendre l’expérience plus intuitive. Par exemple, il est possible de clarifier les actions de l’utilisateur avec des animations. On peut ajouter un élément pour mettre en valeur là où l’utilisateur a cliqué ou touché l’écran. Cela permet de renforcer l’impact de l’interaction et de valoriser l’action de l’utilisateur.
Ces quelques pistes vous permettront de partir sur une base solide pour créer des prototypes complexes. Est-ce que vous utilisez d’autres méthodes pour simplifier la structure de vos prototypes, ou pour les rendre plus réalistes ?
Si le sujet vous a plu, vous pouvez vous inscrire à notre newsletter pour ne pas manquer notre prochain tutoriel.
Besoin d'aide sur Figma ? Jetez un œil à notre cours en ligne.
Composants : Les composants sont des éléments que l’on peut réutiliser dans les designs. Ils aident à créer et à gérer des designs cohérents d'un projet à l'autre. On peut créer des composants à partir de n'importe quel calque ou objet. Il peut s'agir de toute une gamme d'éléments tels que des boutons, des icônes, des mises en page, etc.
Master (sous Figma) : L’écran Master est créé lorsque l’on transforme un écran en composant. L'instance est une copie qui hérite du composant principal Master.
Variants d’écran (sous Figma) : Les variants sont des variations d’un Master que l’on peut regrouper en un seul ensemble. Un ensemble de variants contient des écrans avec différentes propriétés.
Surcharge (override) : La surcharge est un concept qui permet de changer le contenu (défini dans le Master) dans une instance.
Overlay (fenêtre en superposition) : Les Overlays sont une fonctionnalité qui permet de placer une forme de contenu au-dessus d'une autre. Dans le prototypage, cela est généralement utilisé pour afficher des informations supplémentaires à l'écran, comme un message de confirmation, une info-bulle ou un menu.
Nous envoyons une fois par mois nos nouveaux articles, tutoriaux et notre veille technologique
