Skip to content

Latest commit

 

History

History
51 lines (34 loc) · 3.42 KB

scenario.md

File metadata and controls

51 lines (34 loc) · 3.42 KB
Raw

Scénario utilisateur

Accueil

L'utilisateur arrive sur l'accueil.

  • Si il clique sur le bouton primaire, il passe à la scène d'introduction.
  • Si il clique sur le bouton Informations, il voit un modal d'informations
  • (proposition) Si il clique sur un bouton Choisir nom, il sera capable de retrouver son progrès s'il a déjà joué (et skip les tutoriels déjà vus), basé sur son nom. Cet élément est décrit dans Choix nom.

Informations

Après une transition d'arrivée, un modal est affiché (responsive) avec les noms des auteurs et des détails ainsi que des remerciements, notamment dirigé vers l'utilisateur, Beaubourg, etc. On pourra aussi mettre ici les licences et crédits d'oeuvres ou éléments extérieurs.

Choix nom

Une popup survient, ou alors un changement de scène. Exemple : Exemple d'effet De là, on peut donner son nom.

  • Si le nom est déjà pris localement, l'utilisateur peut le voir au fur et à mesure qu'il tape. Si le nom n'a pas de mot de passe, alors il peut se login sur celui-ci et récupérer sa progression
  • Si le nom n'est pas pris, il peut confirmer, et on lui propose de s'enregistrer en bloquant le nom par mot de passe. Cela ne doit pas être bloquant.

Une fois cela fait, selon là où il était, il revient à l'écran précédent.

Introduction

Après une transition (je pense notamment à un fond assombri), du texte apparaît en fade-in, pour expliquer rapidement le but de l'application (sa valeur pédagogique) et ce qui sera demandé de l'utilisateur.

Un truc du genre :

Bienvenue sur {NOM_APP} !
Cette application propose des jeux vous permettant de découvrir la cryptographie, la programmation informatique et le design Web ! Ces jeux sont accessibles à tous, mais certains vous donneront du fil à retordre !

Après un cours laps de temps (le temps que l'utilisateur réalise que le texte est apparu et qu'il a eu le temps de le lire, soit 2 secondes par exemple), un bouton primaire apparaît :

C'est parti !

Deux scénarios ensuite :

  • Si l'utilisateur clique sur ce bouton sans avoir donné de nom précédemment, on lui propose de donner son nom. On lui explique que cela permet de garder sa progression. Il va donc au choix nom.
  • Si l'utilisateur clique sur ce bouton en ayant donné son nom précédemment, le bouton menu apparaît (hamburger, sur le haut droit/gauche) et s'ouvre vers la droite/gauche afin de dévoiler les différents modules de jeu.

Menu

L'idée de design que j'avais était d'utiliser une row flexible à 3 éléments max, avec comme structure :

  • Conteneur de genre 300 px

    1. Icône centrée rappelant le thème du module
    2. Titre du module en toute lettre (full uppercase ou normal case)
    3. Incitation/description succinte à jouer à ce module (moins de 72 caractères) Chaque conteneur de module aurait une identité de couleur différente, ou de petites nuances, de manières à les repérer facilement à l'oeil.

  • Pour le module chiffrement, si l'utilisateur clique sur le conteneur, il va au module cryptographie

  • Pour le module programmation/algorithmie, il va au module programmation

  • Pour le module design, il va au module design

Dans tous les cas, si l'utilisateur n'a pas encore essayé le module, on lui propose le tutoriel (non bloquant).