cahier des charges projet jouersansdanger si28 · l'expéien e utilisateu au œu de la...

SI28 Projet JouerSansDanger 1

Arnaud Schwartz Samuel Martineau SI28

Cahier des charges

Projet JouerSansDanger SI28

Prévention des risques domestiques


1. Sommaire

1. Sommaire ........................................................................................................................................ 2

2. Introduction ..................................................................................................................................... 3

3. Synopsis du projet ........................................................................................................................... 4

A. Concept ....................................................................................................................................... 4

B. Public cible ................................................................................................................................... 4

C. Objectifs....................................................................................................................................... 4

4. Cahier des charges ........................................................................................................................... 5

D. Ressources medias ...................................................................................................................... 5

a. Audio ....................................................................................................................................... 5

b. Graphique ................................................................................................................................ 5

c. Editorial ................................................................................................................................... 5

E. Navigation et structure ............................................................................................................... 5

d. Introduction : ........................................................................................................................... 5

e. Lieu principal : ......................................................................................................................... 5

f. Choix techniques ..................................................................................................................... 6

g. Interactivité ............................................................................................................................. 6

h. Schéma de navigation ............................................................................................................. 7

F. Contraintes .................................................................................................................................. 7

i. Aspect design - Graphisme ...................................................................................................... 7

j. Planning du projet ................................................................................................................... 7

k. Budget du projet...................................................................................................................... 7

5. Scénario ........................................................................................................................................... 8

G. Le compagnon et animateur ....................................................................................................... 8

H. Introduction ................................................................................................................................. 8

I. Navigation ................................................................................................................................... 8

6. Story-bord ........................................................................................................................................ 9

J. La vue d'accueil ........................................................................................................................... 9

K. Début de l'aventure ..................................................................................................................... 9

L. Niveau 0 ..................................................................................................................................... 10

M. Niveau 1 ................................................................................................................................. 10

N. Niveau 2 : les pièces .................................................................................................................. 11

7. Conclusion ..................................................................................................................................... 12


2. Introduction

Dans le cadre de l'unité de valeur écriture interactive et multimédia, il nous a été demandé de réaliser un projet interactif. Notre groupe étant composé d'étudiants en génie informatique, nous avons décidé de réaliser un projet pédagogique à destination des enfants utilisant les dernières possibilités du web. Ce projet constitue une opportunité de placer l'expérience utilisateur au cœur de la réalisation du projet, ce qui, dans les autres enseignements suivis, ce place généralement après l'aspect fonctionnel. L'idée de ce projet nous est venue après avoir visionné le projet de la fabuleuse ferme permettant à un enfant de s'orienter dans un monde réalisé en dessin en totale immersion. Nous avons donc décidé de garder la dimension ludique et pédagogique autour d'un autre thème en faisant appel à notre créativité et nos idées autour de l'interface utilisateur. A l'aide de nos connaissances personnelless, de celles que nous allons développer durant le semestre, nous allons nous attacher à créer un univers pédagogique autour des dangers liés aux risques domestiques.


3. Synopsis du projet

A. Concept

Nous désirons réaliser un site pédagogique et ludique sur le thème des risques domestiques. Nous avons eu cette idée en parcourant les projets précédents et nous avons été attirés par l'idée de transmettre des connaissances à un public jeune par le biais d'une interaction ludique avec un site internet. Ainsi l'utilisateur pourra parcourir une maison à travers une interface intuitive afin de découvrir les informations utiles. La présentation des informations sur les divers risques devra être ludique que ce soit dans son contenu ou dans la manière dont on affiche celle ci. Nous porteront donc une attention particulière à l'interface utilisateur et à la clarté de l'information. Le projet multimédia sera réalisé à l'aide des dernières technologies du web à savoir un couplage de html5, css3 et de JavaScript. Il sera sonore et visuellement coloré pour être adapté à un public jeune.

B. Public cible

Comme défini précédemment, le public visé sera un public jeune à partir de 6 ans. Cette limite est liée à l'apprentissage de la lecture pour pouvoir retirer la contrainte d'une personne tiers pour aider l'enfant dans son expérience. De ce fait, il sera donc très important de bien indiquer les actions possibles avec des feedbacks cohérents pour pouvoir guider l'utilisateur. Ainsi nous espérons pouvoir être dispensés de l'assistance d'une personne plus âgée devant assister et guider l'utilisateur réel. Pour un enfant, le coté "dessin animé" des graphismes s'efforcera de gommer le coté scolaire pour rendre l'utilisation du site ludique et que l'utilisateur apprenne des choses sans avoir la sensation de travailler.

C. Objectifs Notre projet aura des vertus ludoéducatives. Nous allons essayer de faire passer un certain nombre de messages à travers des pages sous forme des différentes pièces de la maison. Le thème des risques domestiques vise généralement les parents mais dans beaucoup de cas les risques sont liés aux enfants. Le but est donc de sensibiliser l'enfant au risque dans la maison et pour cela nous utiliserons: - Les couleurs vives - Les formes simples et des objets de la vie courante - Des textes simples - Du son de situations courantes


4. Cahier des charges

D. Ressources medias

a. Audio

Notre site internet possédera différents types de médias. Nous utiliserons des bruitages audio sur certains éléments pour indiquer une action possible par le biais d'un feedback. Nous utiliserons pour cela des bibliothèques libres de droit comme par exemple celles disponibles sur les plateformes http://www.sound-fishing.net/ ou encore http://www.universal-soundbank.com/.

b. Graphique

Une partie des images sera réalisée par notre groupe à l'aide du logiciel de la suite adobe, Photoshop, en se basant sur des dessins trouvés sur internet. Les éléments des pièces seront récupérés sur des plateformes d'icônes libre de droit et d'utilisation. L'assemblage de ces deux médias visuels permettra de créer une atmosphère similaire à un dessin animé.

c. Editorial

L'ensemble des textes liés aux risques domestiques seront adaptés en reprenant les thèmes principaux sur les différentes plateformes existantes à destination des adultes et en les adaptant pour les enfants.

E. Navigation et structure

d. Introduction :

La première arrivée sur le site lancera une fenêtre modale demandant le nom de l'utilisateur pour créer un climat convivial tout au long de l'aventure. Nous aurons donc une fenêtre design avec un fond grisé laissant découvrir les maisons en fond. Cette fenêtre sera composée d'une phrase d'introduction, d'un champ d'entrée pour pouvoir saisir son nom et d'un bouton permettant de sauvegarder le nom dans un cookie et d'accéder à l'aventure.

e. Lieu principal :

La première vue est celle d'une rue composée de trois maisons. En cliquant sur la maison principale, l'utilisateur supprimera la façade de la maison permettant de voir les pièces. Un second clic fera grandir l'image pour pouvoir voir plus précisément les 4 pièces de la maison: • La chambre en haut à gauche • La salle de bain en haut à droite • Le salon en bas à gauche • La cuisine en bas à droite

http://www.sound-fishing.net/%09

http://www.universal-soundbank.com/


L'utilisateur aura la possibilité de passer d'une vue à un autre et de retourner en arrière par des éléments intégrés au décor

.

f. Choix techniques

En conséquence du choix de plateforme à savoir le web, nous utiliserons toutes les

possibilités offertes par les dernières technologies internet à savoir:

• le couplage HTML5/CSS3/JavaScript permettant la programmation d'application web. • Adobe Photoshop CS5 pour créer et intégrer le contenu graphique. • Audacity pour le bruitage et le son du site.

Nous avons décidé d'utiliser l'espace internet offert par nos comptes personnels de l'UTC en tant que

plateforme de développement pour pouvoir effectuer des tests en conditions réelles.

g. Interactivité

L’interactivité de l’application sera faite par le biais des boutons intégrés au décor et proposés à l’utilisateur dans les différentes vues. Nous choisirons un compagnon de type animal pour permettre d'avoir un guide tout au long de l'aventure et de ne jamais se sentir perdu lors de l'expérience. Nos choix s'est donc porté sur un chien pour symboliser la narration au long de l'aventure. Etant donné que l'utilisateur ne sera pas contrait par un parcours imposé, nous avons donc séparé l'environnement en pièce définies par des couleurs et des thèmes différents. Chaque pièce aura un contenu équivalent au niveau quantitatif et n'aura pas d'effets sur les différents parcours possible du site. Il n'y aura pas de vue plus importantes que les autres. Au niveau interactivité, nous choisirons des zones d'interactions suffisamment grosses pour que l'utilisateur puisse les découvrir tout seul par le biais du survol de la souris.

Troisième clique

Deuxième clique

Premier clique Trois

maisons

Facade

Chambre Salle de

bain Salon Cuisine


h. Schéma de navigation

Le parcours d'une vue à une autre s'effectuera par le clic de l'utilisateur qui provoquera un zoom ou

un dézoom vers la vue suivante. Cette navigation ne demandera que l'usage de la souris et ne fera

pas intervenir de phase de chargement entre chaque vue.

F. Contraintes

i. Aspect design - Graphisme

Nous avons choisi pour ce projet de réaliser l'ensemble des décors ce qui nous oblige à faire attention aux droits sur les images que nous utiliserons. Nous n'avons pas trouvé utile de formuler une charte graphique pour un projet de cette ampleur mais nous devons respecter les contraintes liées au public ciblé d'un point de vue graphique. C'est pourquoi nous utiliserons des couleurs vives, des textes brefs et simples en police bien lisible.

j. Planning du projet

Le développement du projet se fera à au cours du semestre de printemps 2013 avec des jalons lors des séances de TD de l'UV SI28. Le temps estimé pour la réalisation de ce projet est de 2 mois réparti en deux phases: - conception : 1 mois - développement: 1 mois

k. Budget du projet

La seule ressource budgétaire de notre projet est le temps que nous utiliserons lors de celui-

ci. En dépit de nos nombreuses autres obligations, ceci correspond à la contrainte la plus importante.


5. Scénario

Nous allons étudier le scénario de notre application web.

G. Le compagnon et animateur

Nous avons choisi d'animé le jeu en utilisant un compagnon représenté par un chien à l'aspect sympathique. Il sera l’animateur du site web dans le sens ou tous les messages passeront par lui à travers une bulle comme dans les bandes dessinées. Son but est également de permettre d'avoir un feedback sur le jeu et l'avancement dans chaque pièce.

H. Introduction A l'arrivée sur le site, le chien se positionne dans le coin gauche de la fenêtre par dessus un écran noir avec transparence permettant de focaliser l'attention sur le chien et de ne pouvoir cliquer nul part ailleurs que sur celui ci. Deux cas de figure se présentent : • Soit c'est la première fois que l'utilisateur arrive sur le site internet (ou il a supprimé ses cookies depuis sa première visite) : - Le chien lui demande de rentrer son nom dans un champ de texte et d'appuyer sur un bouton pour passer à la suite. • Soit l'utilisateur à déjà joué et n'a pas vidé ses cookies: - On offre la possibilité de reprendre la partie ou l'utilisateur avait arrêté à travers une liste déroulante de noms correspondants aux utilisateurs ayant joués au jeu. - Ou on crée une nouvelle partie avec un nouveau nom.

I. Navigation L’introduction passée, l’utilisateur est immergé dans le monde de l'application contenant différentes zones interactives à commencer par la maison principale vu depuis la rue. La carte, le tableau, un poster représentant l’anatomie humaine, La première zone d'interactivité est la façade de la maison. On clique dessus pour la faire disparaître et voir les pièces apparaître. Un second clique sur cette façade permet de zoomer à un niveau intermédiaire et permet de concentrer le regard de l'utilisateur sur les 4 pièces de la maison. On entre dans une pièce en cliquant sur celle-ci au niveau précédent. Dans chaque pièce, l'utilisateur peut effectuer certaines actions en cliquant sur des objets.


6. Story-bord

Représentation graphique du déroulement du jeu.

J. La vue d'accueil

L'utilisateur doit interagir avec les touches du clavier.

K. Début de l'aventure

L'utilisateur doit interagir avec les touches du clavier.


L. Niveau 0

L'utilisateur découvre les pièces de la maison.

M. Niveau 1

L'utilisateur peut voir plus précisément les pièces et entend un son au survol de chaque pièce.


N. Niveau 2 : les pièces

L'utilisateur joue avec les éléments du décor pour apprendre et le chien lui donne les explications.


7. Conclusion Notre groupe de projet était composé de deux étudiants de GI post TN09 ce qui nous à permis de mettre à profit notre expérience acquise durant les divers projets réalisés. Ainsi l’aspect programmation n’a pas été le plus complexe, ce qui nous à permis de passer beaucoup plus de temps sur le scenario, la création du contenu graphique et sur les animations. Nous avons été très ambitieux au départ en voulant apprendre à une cible très jeune, les dangers domestiques. Nous nous sommes rendu compte lors de la sélection des différents dangers qu'il était difficile de sensibiliser les très jeunes enfants sur certains risques et nous avons préféré augmenter cette limite d'âge pour pouvoir respecter les risques retenu. Ce projet nous a permis d’apprendre à utiliser et mettre en commun les connaissances et les compétences de chacun et d'effectuer un travail en équipe à l'aide d'outils de communication et de partage de données. La partie la plus intéressante que nous retiendrons est la sensibilisation sur la cible du projet pour retenir les éléments d'interactions, au niveau, textuel, sonore, graphique ou d'animation.

cahier des charges projet jouersansdanger si28 · l'expéien e utilisateu au œu de la...

Documents