M1 MultimédiaAnnée 2010/2011

Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres

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

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.

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

• Choix d’une porte

Les espaces de jeuLa cuisine / le salon

Le bureau / la chambreLe jardin / l’extérieur

Les boutons de navigation présents dans chaque scène :

- Une jauge bien-être

(en haut à droite)

-Une barre de progression du

temps

-Une icône par lieux du jeu (3)

-Boutons pour mettre le jeu en

pause et pour arrêter ou activer

le son

- Un volet sur la droite pour lesconseils, rappel à l’ordre…

CONSEILS

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.

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.

Jardin / Extérieur

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

Fin du jeuOrdonnance

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 ainsi2) 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

Fin du jeu : Ordonnance/Diagnostic final :

Fin du jeu : Ordonnance/Diagnostic final :

Exemple de diagnostic :

Charte graphiqueDesign

Typographie

Charte graphique

• L’atmosphère de cette application doit êtrechaleureuse et humoristique. Le design de l’applicationpourrait s‘apparenter à celui proposé dans le film « Ascanner darkly ».

• Le design recherché doit donc être réaliste mais avecun ton humoristique et décalé à la façon d’une bandedessinée.

• L’utilisateur doit se sentir à l’aise, comme chez lui enretrouvant des éléments de la vie quotidienne. Deplus, lorsqu’il réalise une action, seul les avant bras dupersonnage sont visibles, comme si l’utilisateurincarnait le protagoniste du jeu.

Images tirées du film « A scanner darkly » de Richard Linklater.• La typographie

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. Police Lucida Sans.

Charte graphiqueLe choix des couleurs

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.

Carte de navigation

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. Idem5. 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.

Spécification de la situation et identification des tâches à accomplir

(diagramme de marché)

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.

Tables des commandes – Table des évènements

Boutons de l’applicationActions Définition Condition d’activation Réaction/Conséquence au niveau de

l’écran et de l’application

Post-It Affichent les tâches à effectuer

Si l’utilisateur a passé la première étape de l’introduction

Affichage et agrandissement au centre de l’écran du post-It indiquant la tâche à réaliser

Les icônes des pièces

Redirection vers la salle sélectionnée

Si l’utilisateur a passé la première étape de l’introduction

Apparition du décor de la salle choisie en plein écran

Onglet latéral, bouton son Aide/Conseil

Donner des conseils à l’utilisateur, Historique des rappels à l’ordre humoristique

Si l’utilisateur se situe dans l’une des trois pièces

Apparition d’un onglet sur le côté

Bouton action Lancer l’action Si l’utilisateur se situe dans une des trois pièces

Influence sur la jauge de bien être et temps consommé

Choix d’une porte lors de l’introduction

Emmène l’utilisateur vers une des pièces.

Si l’utilisateur a inscrit son nom et choisi son statut pendant l’introduction

Apparition du décor de la pièce choisie en plein écran

Enveloppe du bilan Bouton Facebook

Une enveloppe se déplie avec marqués dessus des conseils sur la procrastination

Si l’utilisateur a terminé le jeu

L’application se termine après que l’utilisateur ait fermé l’enveloppe. Possibilité de partage sur Facebook

Son Désactiver ou activer le son

Si l’utilisateur se situe dans une des trois pièces

Activation ou non du son

Play/Pause Mettre le jeu en pause

Si l’utilisateur se situe dans une des trois pièces

Mettre en pause ou non le jeu

Actions : Jardin/ Extérieur

Définition Modalité Réaction/Conséquence au niveau de l’écran et de l’application

Planter des fleurs

Clic sur la pelouse sur l’endroit en surbrillance

Les bras du personnage apparaissent à l’écran. Plantation de fleurs.

Tondre Clic sur la tondeuse Les bras du personnage apparaissent à l’écran. La pelouse apparaît tondue.

Tailler la haie Clic sur la cisaille Les bras du personnage apparaissent à l’écran. La haie apparaît taillée.

Nécessité d’aller jeter les déchets

Clic sur la poubelle Les bras du personnage apparaissent à l’écran. La poubelle se vide.

Faire du sport Clic sur les altères dans le jardin

Le personnage fait du sport avec les altères.

Détente bronzage

Clic sur le transat Le personnage s’allonge sur le transat.

Se baigner dans la piscine

Clic sur la piscine Le personnage se baigne.

Faire un barbecue

Clic sur le barbecue Le barbecue est utilisé par le personnage.

Jouer au ballon Clic sur le ballon L’utilisateur jongle avec le ballon (mini jeu où l’utilisateur doit faire clic droit ou gauche en fonction du pied sur lequel le ballon va rebondir). S’il se trompe, ballon part dans la piscine.

Evènements : Jardin/ ExtérieurLa haie prend feu

Utiliser le barbecue Le personnage éteint le feu. Le téléphone sonne.

Le téléphone sonne

Clic sur le téléphone Des amis proposent au personnage une sortie (resto, cinéma). Influence sur la jauge de bien être.

Actions : Bureau/Chambre

Définition Modalité Réaction/Conséquence

L’utilisateur doit faire son travail scolaire

Clic sur le tas de feuille sur le bureauPlan avec l’apparition des bras. Le personnage écrit et le tas de feuille diminue jusqu’à disparaitre entièrement.

L’utilisateur doit s’occuper de ses papiers administratifs

Clic sur le tas de feuille sur le bureau Plan avec l’apparition des bras. Le personnage écrit et le tas de feuille diminue jusqu’à disparaitre entièrement.

L’utilisateur réaliser un travail lié à son activité professionnelle

Cliquer sur le tas de feuille sur le bureau

Plan avec l’apparition des bras. Le personnage écrit et le tas de feuille diminue jusqu’à disparaitre entièrement.

L’utilisateur ranger son bureau Cliquer sur le bureau Plan avec l’apparition des bras. Le personnage ouvre les tiroirs de son bureau, des feuilles s’envolent, il classe le tout.

L’utilisateur doit faire du ménage dans son bureau

Cliquer sur le mur de la pièce Plan avec l’apparition des bras et un plumeau à la main. Le personnage fait la poussière sur les meubles (bureau, étagère).

L’utilisateur doit faire son lit Cliquer sur le lit Plan avec l’apparition des bras, afin de remettre les draps en ordre.

L’utilisateur doit faire vider sa corbeille

Cliquer sur la corbeille Plan avec l’apparition des bras. Le personnage secoue la poubelle et celle-ci se vide.

L’utilisateur peut s’amuser avec ses objets

Cliquer dessus l'utilisateur s’amuse à viser des objets pour y lancer les billes-essaye de jouer aux pog -partie de Tetris

L’utilisateur peut lire le journal Cliquer dessus Plan avec l’apparition des bras afin de se munir du journal, les pages défilent à toute vitesse.

S’amuser avec la lampe Cliquer dessus Ecran noir, écran normal à chaque clic

Se détendre sur le lit Cliquer sur le lit Plan avec des bras qui pendent du lit

Regarder son tableau Cliquer dessus L’utilisateur peut faire défiler des images

Consulter les vidéos de ses amis Facebook

Cliquer sur l’ordinateur Une sélection de vidéo, l’utilisateur peut les visionner

Consulter les derniers livres sortis Cliquer sur la bibliothèque Une liste en pop-up s’affiche avec les nouveautés littéraires

Le personnage joue de la guitare Cliquer sur la guitare Plan avec apparition des bras, tentative de mélodie

Evènements : Bureau/Chambre

Une page facebook s’ouvre pour discuter avec des amis

Cliquer sur l’écran de l’ordinateur L’écran de l’ordinateur s’allume, l’utilisateur peut regarder des photos facebook

Une fenêtre MSN s’ouvre L’écran clignote, le son wizz

Le téléphone sonne Sonnerie retentie, l’utilisateur choisi de décrocher ou non. Image d’un ami Facebook.

Action : Cuisine/Salon

Définition Modalité Réaction/ConséquenceCette action fait manger le personnage Clic sur le frigo Le personnage mange (l’utilisateur a le choix des

aliments). Cette action distrait le personnage en le faisant regarder la télé

Clic sur la télé Le personnage regarde la télé (apparition des bras du personnage avec télécommande).

Le personnage se distrait en jouant Clic sur la console Application (jeu Pac Man). Le personnage lit et se distrait Clic sur l’objet

correspondantChoix du livre par l’utilisateur

Le personnage se détend Clic sur l’objet correspondant

Influence sur la jauge de bien être et temps consommé

Faire le ménage Clic sur le balai Animation avec le personnage faisant le ménage. Faire la corvée de vaisselle Clic sur l’évier Évier vidé. Le personnage réalise la tâche de trier les déchets

Clic sur l’objet correspondant

Jeu de tri pour l’utilisateur.

Le personnage cuisine pour manger Clic sur les plaques électriques

Jeu de recette de cuisine.

Le personnage répare des fuites Clic sur les canalisations Animation pendant la réparation. Influence sur la jauge de bien être et temps consommé.

Evénements : Cuisine/SalonDéfinition Modalité Réaction/Conséquence

Bulle d’information apparaissant aléatoirement à l’écran

aucune Apparition d’une bulle en forme d’éponge. Influence la poursuite du jeu, l’utilisateur se reprend

Fuite qui ajoute une tâche à faire Clic sur l’évier Déclanchement de l’action bricoler. Une éponge apparaît à l’écran aucune Réaction/ surprendre l’utilisateurLe personnage oublie de cuisiner, retirer son plat du four

Clic sur le four Réaction/ surprendre l’utilisateur

L’utilisateur voit sa télé exploser aucune Doit faire réagie l’utilisateur

M1 MultimédiaAnnée 2010/2011

Charlotte Bonnal . Marie Girard . Vincent Lachambre . Marie Montané . Thibault Tressieres