M1 Multimédia<br /> Année 2010/2011<br />Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tr...
Proposition de médiatisation <br />(principe et charte graphique)<br /> <br />Conception d’interfaces (actions possibles) ...
La page d’accueil/<br />Au lancement du jeu, apparait une vignette avec le titre de l’application : « Procrastinagame » av...
Page d’accueil : Salon/cuisine, chambre/bureau, jardin/extérieur.<br />
<ul><li>         Choix d’une porte </li></li></ul><li>Les espaces de jeu<br />La cuisine / le salon<br />Le bureau / la ch...
Bureau / Chambre<br />Le bureau propose de nombreuses tâches et des distractions : ordinateur portable, Smartphone, tas de...
Salon / Cuisine<br />Cette pièce propose diverses activités à réaliser : cuisiner, réparer, nettoyer, trier les déchets, f...
Jardin / Extérieur<br />Cet environnement offre diverses activités à l’utilisateur mais également des tâches comme : faire...
Fin du jeu<br />Ordonnance<br />Diagnostic final<br />
Fin du jeu : Ordonnance/Diagnostic final :<br />- Fond opaque sur la dernière pièce visitée<br />- Annonce / animation pré...
Fin du jeu : Ordonnance/Diagnostic final :<br />
Exemple de diagnostic : <br />
Charte graphique<br />Design<br />Typographie<br />
Charte graphique<br /> L’atmosphère de cette application doit être chaleureuse et humoristique. Le design de l’application...
Charte graphique<br />Le choix des couleurs<br />
Charte graphique<br /> L’évolution du graphisme de jeu<br />À l’arrivée de l’utilisateur dans l’une des trois pièces, celu...
Carte de navigation<br />
Spécification de la situation et identification des tâches à accomplir (diagramme de marché) <br />1. L’utilisateur entre ...
Tables des commandes – Table des évènements<br />
M1 Multimédia<br /> Année 2010/2011<br />Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tr...
Procrastinagame
Prochain SlideShare
Chargement dans…5
×

Procrastinagame

2 105 vues

Publié le

Publié dans : Formation
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
2 105
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 631
Actions
Partages
0
Téléchargements
8
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Procrastinagame

  1. 1. M1 Multimédia<br /> Année 2010/2011<br />Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres<br />
  2. 2. Proposition de médiatisation <br />(principe et charte graphique)<br /> <br />Conception d’interfaces (actions possibles) : <br />La page d’accueil<br />- lancement du jeu : vignette avec le titre de l’application, avec en fond trois portes d’accès.<br /> - possibilité d’entrer prénom et statut de l’utilisateur<br /> - vignettes défilent afin d’accéder aux règles du jeu.<br />- dernière vignette : début du jeu avec trois portes<br />- post-it sur chaque porte<br />
  3. 3. La page d’accueil/<br />Au lancement du jeu, apparait une vignette avec le titre de l’application : « Procrastinagame » avec en fond, trois portes d’accès.<br />L’utilisateur a la possibilité d’entrer son prénom et son statut. Cela afin que le jeu soit adapté au mieux à la cible.<br />Les vignettes défilent lorsque l’utilisateur clique sur celles-ci de manière à accéder aux règles du jeu.<br />A la dernière vignette, l’utilisateur peut débuter le jeu. Pour cela, les trois portes du fond apparaissent et proposent trois choix d’accès : Salon/cuisine, chambre/bureau, jardin/extérieur.<br />Sur chacune de ces portes se trouve un post-it qui, lorsque l’utilisateur cliquera dessus, proposera un petit mot humoristique laissé par sa mère/époux (se). On retrouvera ce scénario à chaque fois que l’utilisateur entrera pour la première fois dans une pièce.<br />
  4. 4. Page d’accueil : Salon/cuisine, chambre/bureau, jardin/extérieur.<br />
  5. 5. <ul><li> Choix d’une porte </li></li></ul><li>Les espaces de jeu<br />La cuisine / le salon<br />Le bureau / la chambre<br />Le jardin / l’extérieur<br />
  6. 6.
  7. 7. Bureau / Chambre<br />Le bureau propose de nombreuses tâches et des distractions : ordinateur portable, Smartphone, tas de feuille à classer, accessoires ludiques… Tous ces éléments sont cliquables pour déclencher les actions.<br /> - Au mur : présence d’un tableau interactif avec des images cliquables qui défilent, comme une sorte de diaporama.<br /> - Un lit avec plusieurs options (s’asseoir et lire / se reposer…) qui correspond à un coin de détente.<br /> - La bibliothèque (livre et bibelots) en guise de distraction.<br />
  8. 8. Salon / Cuisine<br />Cette pièce propose diverses activités à réaliser : cuisiner, réparer, nettoyer, trier les déchets, faire la vaisselle…<br />Tous ces éléments sont cliquables pour déclencher les actions.<br />
  9. 9. Jardin / Extérieur<br />Cet environnement offre diverses activités à l’utilisateur mais également des tâches comme : faire les courses, se promener…<br />
  10. 10. Fin du jeu<br />Ordonnance<br />Diagnostic final<br />
  11. 11. Fin du jeu : Ordonnance/Diagnostic final :<br />- Fond opaque sur la dernière pièce visitée<br />- Annonce / animation précisant que la totalité du temps s’est écoulée<br />- Barre de bien être qui s’agrandit afin d’être mise en évidence<br />- Apparition d’une fenêtre en pop up comportant le diagnostic estimé <br />- Enveloppe : Consulter l’ordonnance (conseil par rapport à la situation). <br />- Définition de 5 types d’ordonnances en fonction de l’état de la jauge de bien être<br />Les 5 niveaux de procrastination :<br /> 1) Beau travail !! Vous savez gérez votre temps entre corvées et distractions. Continuez ainsi <br /> 2) Très bien !! Pensez tout de même à vous et prenez le temps de vous détendre.<br /> 3) Bien !! Attention tout de même à ne pas vous laisser trop distraire.<br /> 4) La procrastination est un vilain défaut… Un peu plus d’organisation, de la motivation et tout s’arrangera pour vous.<br /> 6) La procrastination n’a aucun secret pour vous… Reprenez-vous !! Organisez vous, trouver de la motivation et au boulot !<br />- Possibilité de partager son résultat sur Facebook avec ses amis<br />
  12. 12. Fin du jeu : Ordonnance/Diagnostic final :<br />
  13. 13. Exemple de diagnostic : <br />
  14. 14. Charte graphique<br />Design<br />Typographie<br />
  15. 15. Charte graphique<br /> L’atmosphère de cette application doit être chaleureuse et humoristique. Le design de l’application pourrait s‘apparenter à celui proposé dans le film « A scanner darkly ». <br /> Le design recherché doit donc être réaliste mais avec un ton humoristique et décalé à la façon d’une bande dessinée. <br /> L’utilisateur doit se sentir à l’aise, comme chez lui en retrouvant des éléments de la vie quotidienne. De plus, lorsqu’il réalise une action, seul les avant bras du personnage sont visibles, comme si l’utilisateur incarnait le protagoniste du jeu.<br />Images tirées du film « A scanner darkly » de Richard Linklater.<br /><ul><li> La typographie</li></ul>Concernant la typographie, la police Lucida Sans serait adaptée à l’ambiance que nous souhaitons installer. En effet, celle-ci est simple, elle offre une bonne lisibilité, sans empâtement. Elle permet ainsi une lecture simplifiée et agréable à l’écran.<br />Police Lucida Sans.<br />
  16. 16. Charte graphique<br />Le choix des couleurs<br />
  17. 17. Charte graphique<br /> L’évolution du graphisme de jeu<br />À l’arrivée de l’utilisateur dans l’une des trois pièces, celui-ci pourra constater le mauvais état de l’endroit dans lequel il se trouve.<br />Il s’apercevra donc des actions à réaliser (ménage, rangement, etc.) pour améliorer son environnement, bien que ces tâches ne soient pas très attractives.<br />De même des distractions seront mises en évidence par des effets de surbrillance ou des animations. <br />Ainsi, l’environnement graphique de l’application évoluera en fonction des actions réalisées par l’utilisateur, afin de lui montrer l’incidence directe de ses actions. Enfin, des évènements surgiront lors du jeu et affecteront également l’environnement graphique de la pièce visitée.<br />
  18. 18. Carte de navigation<br />
  19. 19. Spécification de la situation et identification des tâches à accomplir (diagramme de marché) <br />1. L’utilisateur entre son nom et son âge dès le lancement. La connexion à Facebook est facultative, car sinon l’application est trop cloisonnée. Si l’utilisateur ne possède pas de compte Facebook, des « amis » virtuels par défaut sont chargés dans le jeu.<br />2. Le choix d’un lieu est libre.<br />3. L’exécution des différentes actions et divertissements par l’utilisateur fait varier la barre de bien-être.<br />4. Idem<br />5. Les évènements surgissent par rapport aux actions antérieures de l’utilisateur. <br />6. À tout moment, l’utilisateur est libre de se rendre dans un autre lieu.<br />7. Le diagnostic est établi en fonction de l’état de la barre de bien-être.<br />8. Le partage du résultat final est facultatif. Il peut se faire via les réseaux sociaux et/ou par email. L’objectif est d’inviter d’autres utilisateurs à participer.<br />
  20. 20. Tables des commandes – Table des évènements<br />
  21. 21.
  22. 22.
  23. 23.
  24. 24.
  25. 25. M1 Multimédia<br /> Année 2010/2011<br />Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres<br />

×