1. M1 Multimédia Année 2010/2011 Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres

2. Proposition de médiatisation (principe et charte graphique) Conception d’interfaces (actions possibles) : La page d’accueil - lancement du jeu : vignette avec le titre de l’application, avec en fond trois portes d’accès. - possibilité d’entrer prénom et statut de l’utilisateur - vignettes défilent afin d’accéder aux règles du jeu. - dernière vignette : début du jeu avec trois portes - post-it sur chaque porte

3. La page d’accueil/ Au lancement du jeu, apparait une vignette avec le titre de l’application : « Procrastinagame » avec en fond, trois portes d’accès. L’utilisateur a la possibilité d’entrer son prénom et son statut. Cela afin que le jeu soit adapté au mieux à la cible. Les vignettes défilent lorsque l’utilisateur clique sur celles-ci de manière à accéder aux règles du jeu. 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. 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.

4. Page d’accueil : Salon/cuisine, chambre/bureau, jardin/extérieur.

7. Bureau / Chambre 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. - Au mur : présence d’un tableau interactif avec des images cliquables qui défilent, comme une sorte de diaporama. - Un lit avec plusieurs options (s’asseoir et lire / se reposer…) qui correspond à un coin de détente. - La bibliothèque (livre et bibelots) en guise de distraction.

8. Salon / Cuisine Cette pièce propose diverses activités à réaliser : cuisiner, réparer, nettoyer, trier les déchets, faire la vaisselle… Tous ces éléments sont cliquables pour déclencher les actions.

9. Jardin / Extérieur Cet environnement offre diverses activités à l’utilisateur mais également des tâches comme : faire les courses, se promener…

10. Fin du jeu Ordonnance Diagnostic final

11. Fin du jeu : Ordonnance/Diagnostic final : - Fond opaque sur la dernière pièce visitée - Annonce / animation précisant que la totalité du temps s’est écoulée - Barre de bien être qui s’agrandit afin d’être mise en évidence - Apparition d’une fenêtre en pop up comportant le diagnostic estimé - Enveloppe : Consulter l’ordonnance (conseil par rapport à la situation). - Définition de 5 types d’ordonnances en fonction de l’état de la jauge de bien être Les 5 niveaux de procrastination : 1) Beau travail !! Vous savez gérez votre temps entre corvées et distractions. Continuez ainsi  2) Très bien !! Pensez tout de même à vous et prenez le temps de vous détendre. 3) Bien !! Attention tout de même à ne pas vous laisser trop distraire. 4) La procrastination est un vilain défaut… Un peu plus d’organisation, de la motivation et tout s’arrangera pour vous. 6) La procrastination n’a aucun secret pour vous… Reprenez-vous !! Organisez vous, trouver de la motivation et au boulot ! - Possibilité de partager son résultat sur Facebook avec ses amis

12. Fin du jeu : Ordonnance/Diagnostic final :

13. Exemple de diagnostic :

14. Charte graphique Design Typographie

16. Charte graphique Le choix des couleurs

17. Charte graphique L’évolution du graphisme de jeu À 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. 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. De même des distractions seront mises en évidence par des effets de surbrillance ou des animations. 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.

18. Carte de navigation

19. Spécification de la situation et identification des tâches à accomplir (diagramme de marché) 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. 2. Le choix d’un lieu est libre. 3. L’exécution des différentes actions et divertissements par l’utilisateur fait varier la barre de bien-être. 4. Idem 5. Les évènements surgissent par rapport aux actions antérieures de l’utilisateur. 6. À tout moment, l’utilisateur est libre de se rendre dans un autre lieu. 7. Le diagnostic est établi en fonction de l’état de la barre de bien-être. 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.

20. Tables des commandes – Table des évènements

25. M1 Multimédia Année 2010/2011 Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres