TP Mini Temple UX/QCM

Exercice pour la partie UI Design.

Vous êtes libre sur le choix des couleurs, typo et Design.

Objectif: Créer un mini-jeu (QCM) de 3 salles ou plus avec Figma.

A réaliser :

1. Créez une page Figma ‘MiniTempleQCM’.
2. Créez :
   • 1 écran d’accueil
   • 3 salles de questions
   • 3 écrans bonne réponse
   • 3 écrans mauvaise réponse
   • 1 écran final
3. Pour chaque salle :
   • 1 question UX/UI/Accessibilité (les questions sont fournies)
   • 4 réponses, dont 1 correcte
4. Ajoutez au moins :
   • une transition simple
   • un auto-layout pour les réponses
5. Testez votre prototype en mode Present.

Bonus :

• Ajouter une petite animation Smart Animate (si vous savez le faire)
• Personnaliser le thème (temple, espace, labo, etc.).

Quelques idées pour les assets visuels (icônes / illustrations)

• Icône porte pour l’accueil
• Icône torche pour les salles
• Icône crâne ou trappe pour les mauvaises réponses
• Icône trophée ou couronne pour la salle finale

Tous ces éléments peuvent être trouvés :

• Dans Figma Community (recherche: icon pack)
• Ou recréés avec de simples formes vectorielles.

Structure des frames

Page Figma

01 - TempleAventure, TempleUX (ou autre nom)

Sections / Frames

• Accueil
  • Frame: 1440x900
  • Bouton: Entrer dans le temple -> Salle 01
• Salles de questions (Salle 01 à Salle 10)
  • Une frame par salle
  • Question + 4 réponses (4 boutons)
• Salles Porte Ouverte (Bonne réponse 01 à 10)
  • Message de succès
  • Bouton Continuer -> Salle suivante
• Salles Piège (Mauvaise réponse 01 à 10)
  • Message d’erreur
  • Bouton Revenir à la salle -> Salle correspondante
• Salle Finale
  • Message de félicitations
  • Bouton Rejouer -> Accueil

Carte de navigation

Accueil -> Salle 01 Question

Pour chaque Salle X :

• Bouton bonne réponse -> bonneReponse X
• Boutons mauvaises réponses -> mauvaiseReponse X

bonneReponse X :

• Bouton Continuer -> Salle X+1
• Exception: bonneReponse 10 -> Salle Finale

mauvaiseReponse X :

• Bouton Retour -> Salle X

Salle Finale :

• Bouton Rejouer -> Accueil

Questions proposées avec les réponses

Je vous laisse choisir parmi la liste ci-dessous. Vous pouvez mettre ce que vous voulez pour les mauvaises réponses possibles étant donné que c’est un QCM.

• Salle 1 – UX Q: L’UX Design consiste principalement à… R: Comprendre les besoins utilisateurs et réduire les frustrations

• Salle 2 – UX Q: Un persona est… R: Un profil fictif basé sur des données réelles

• Salle 3 – UX Q: Un ‘pain point’ correspond à… R: Une frustration de l’utilisateur

• Salle 4 – Figma Q: Un wireframe low-fidelity doit être… R: En niveaux de gris, simple et fonctionnel

• Salle 5 – Figma Q: À quoi sert l’auto-layout ? R: À aligner et organiser intelligemment les éléments

• Salle 6 – UI Q: Une UI réussie est… R: Simple, claire et cohérente

• Salle 7 – UI Q: Quelle grille est couramment utilisée ? R: 8 px grid

• Salle 8 – Accessibilité Q: Taille minimale d’une zone cliquable ? R: 44x44 px

• Salle 9 – Accessibilité Q: Contraste minimum AA pour texte normal ? R: 4.5:1

• Salle 10 – UX/UI Q: À quel moment intégrer l’accessibilité ? R: Dès la phase de conception

etc…