sous les pavés - dossier de conception

Tocanne Manuel CRM8dossier de conception

Tocanne Manuel CRM8dossier de conception

sommaireintention

- synopsis et intention- public, promesse et services clés

charte graphique- intentions graphiques- planches tendances- identité visuelle et sonore- écrans clés

technique- borne interactive- prolongement en ligne

conception- principes de navigation- scénarios utilisateur- arborescence- zoning- storyboard

moyens de production- échéancier de production- budget prévisionnel

3Tocanne Manuel CRM8dossier de conception

intention


synopsis démarche

objectif

parti pris

L’année 1968 a été marquée par la vague de révoltes sociales du mois de Mai en France. Mais ces événements ne sont pas isolés, ils font partie d’une vague mondiale de ruptures sociales et politiques.

De Marthin Luther King au printemps de Prague, en passant par l’enlisement des Etats-Unis au Vietnam, Sous les Pavés vous propose de découvrir

ou redécouvrir cette période clé de l’histoire.

Revivez les faits marquants à travers de nombreux médias, et retracez la chronologie grâce à une interface expérimentale et interactive. Adoptez un point de vuemondial sur cette période et découvrez des liens

entre les différents événements.

L’utilisateur pourra manipuler le temps au cours de l’année 1968 pour avoir accès aux médias. En plus d’avoir une vision chronologique et géographique des événements, il découvrira des liens thématiques entre les événements.

INFORMER ET DOCUMENTER SUR LES FAITS MARQUANTS DE L’ANNÉE 1968 DANS LE MONDE

Je souhaite proposer une approche mondiale de cette période, montrer que l’année 1968 ne se limite pas auxseuls événements du mois de Mai en France. Mon projet proposera une interface simple d’utilisation qui joue sur la temporalité et sur les liens entre les

événements qui ont marqués l’année 1968 dans le monde.


public services clés

coeur de cible : cible jeune de 18 à 25 ans qui s’inscrit dans une démarche pédagogique ou

d’expérimentation. Une cible curieuse souhaitant découvrir une période qu’elle ne connaissait jusque là qu’àtravers les événements du mois de Mai en France.

cible élargie : de 25 à 60 ans, des personnes ouvertes

culturellement, intéressées par l’histoire moderne,ou simplement curieuses de faire des expérimentationsmultimédia.

Installation tactile

L’installation tactile pourra être utilisée dans un musée ou dans une exposition. L’interfacesimplifiée sera très fluide d’utilisation. Les événements seront resitués dans le temps, dans le monde, et de manière thématique avec un ou plusieurs mots clés.

Si l’utilisateur reste passif ou s’il décide de manipulerle temps, l’interface fait défiler les événements chronologiquement et lui permet de les situer dans le monde.

Lorsqu’il a visualisé un média, il peut continuer unenavigation thématique en suivant des liens prédéfinisou en sélectionnant lui même des médias quipossèdent un mot clé similaire.

Version Internet

La version en ligne prolongera l’expérience et permettra la sauvegarde des médias visualisés par l’utilisateur pour les reconsulter.

promesse

L’utilisateur va se documenter et réaliser l’importance de

l’année 1968 dans la fondation de nouvelles valeurs mondiales.Il va manipuler et visualiser une série de médiasde manière originale et expérimentale. Il aurala possibilité de rester passif pour visualiserla chronologie des événements et se rendre compte de la dimension mondiale des ruptures de cette période. Il pourra prendre le contrôle du

temps pour se rendre à une date précise de l’année1968, ou parcourir les médias de manière thématique.


conception


Navigation temporelle

Médias

Les événements marquants sont représentés par desvignettes de médias (photos ou vidéos). Les médiass’affichent ou disparaissent selon leur proximité de ladate en cours. Ce critère affecte également la taille

des vignettes : plus la vignette est grande plus l’événement est proche de la date courante.

Temporalité

Une fois lancée, l’interface tourne en boucle en évoluant dans le temps du 1er Janvier au 31 Décembre 1968. Toute l’année 1968 correspond à 5 minutes de temps réel. Cependant le temps passé sur chaque mois varie en

fonction du nombre d’événements qui s’y sont déroulés.L’utilisateur peut également mettre en pause l’interface et manipuler la timeline pour se rendre à une date précise.

principes de navigation

Navigation thématique

Mots clés

Chaque mot-clé est représenté par une couleur distincte. Les médias sont caractérisés par un ou plusieurs mots clés. Pour chaque média, une hiérarchie est établie pour définir les mots clés qui caractérisent le plus l’événement en question. Ce sont ces mots-clés qui vont créer des liens objectifs à travers des connaissances communes sur les événements historiques.

Les mots clés apparaissent au lancement d’un média :- pendant la visualisation pour une vidéo,- au lancement pour une photo.

Le nombre de mots clés est fixé à 3 maximum pour des raisons ergonomiques. En choisissant un de ces mots clés, l’utilisateur peut accéder à la liste de tous les événements liés à ce mot clé.


Navigation thématique

Liens prédéfinis

L’utilisateur peut suivre des liens prédéfinis vers d’autres médias. Chaque média possède un lien prédéfini, il est subjectif et propose une alternative à la navigation classique par mots clés. Ce lien se présente sous la forme d’un slogan et confronte le média actuel à un autre média.

Ce lien correspond à une confrontation entre deux univers

totalement opposés, une confrontation entre deux valeurs

morales, ou à une confrontation entre le visuel de deux

médias.

Version Internet, options supplémentaires

Identification

L’utilisateur doit s’identifier sur la page d’accueil du site Internet pour lancer la visite.

Sauvegarde des médias

Lors de la visualisation d’un média, l’utilisateur peut

le sauvegarder pour l’ajouter à sa sélection de médias.Il a la possibilité de retrouver à tout moment lesmédias qu’il a sauvegardé.

Tous les médias sauvegardés sont visibles dans larubrique « Mes médias sauvegardés ». Ces médias sontresitués sur une frise chronologique.

principes de navigation


Jérome, étudiant de 25 ans

Jérome se rend à une exposition sur Mai 1968

avec sa petite amie. Il étudie dans une faculté de

droit à Lyon. Ce sujet l’intéresse particulièrement

puisqu’il est très engagé politiquement et pense

que cette année a été bénéfique pour la France.

Il fréquente régulièrement Internet et les

réseaux sociaux mais n’a pas de connaissances

poussées en matière de nouvelles technologies.

Il découvre dans une des salles de l’exposition une table

tactile. Curieux, il décide d’aller y jeter un oeil pendant

que sa petite amie visite une autre pièce de l’exposition.

Il appuie sur le bouton « Lancer l’expérience » et arrive

sur un écran d’aide pour utiliser l’interface. Il ferme

l’écran d’aide et arrive sur l’interface de Sous Les Pavés.

Il ne touche à rien et observe l’application pendant quelques minutes.

Une sélection d’événements reliés à une map monde, il comprend que

l’application les montre chronologiquement sur toute l’année 1968. Il

ne pensait pas qu’autant d’événements majeurs s’étaient déroulés cette

année. La vignette d’un événement attire son attention, le fameux

point levé d’un sportif noir sur un podium, il continue de regarder les

événements défiler. L’événement qui l’intéressait a donc disparu car la

date a changé. Il manipule la ligne de temps située en bas de l’interface

scénarios utilisateur et se rend au 18 Octobre pour retrouver l’événement. L’interface s’est

mise toute seule en pause et il appuie sur la vignette en question.

Il visualise la photo et découvre que le sportif noir était Tommie Smith

aux jeux olympiques de Mexico. Il découvre une liste de mots clés au

dessus de la photo. Une info-bulle lui propose de choisir un mot clé, il

appuie sur « Ségrégation ». Une liste d’événements relatifs s’affiche,

il choisit de visualiser un média sur la mort de Martin Luther King.

Il appuie sur la vignette du média en question et une vidéo se lance.

A la fin de la visualisation, la vidéo se stoppe et il remarque le slogan

« les leaders meurent, la musique reste » en dessous de la vidéo. Une

info-bulle lui indique qu’il s’agit d’un guide dans sa navigation. Le slogan

l’intrigue, il appuie sur le bouton à côté du slogan et découvre un nouveau

média, un concert de Jimy Hendrix. Il regarde la vidéo de ce musicien

qu’il apprécie, et qui symbolise pour lui une certaine liberté musicale.

Il voit le slogan « révolutions culturelles, enlisements politiques » sous

la vidéo, il décide de continuer à suivre les liens prédéfinis et appuie sur

le bouton à côté du slogan. Il arrive sur un nouveau média concernant

l’offensive du Têt au Vietnam. Une vidéo se lance et Jérome en apprend

plus sur l’offensive qui a visé les américains pendant la guerre au Vietnam.

Sa petite amie revient, il décide de lui montrer la ligne de temps et

tous les événements majeurs de l’année 1968. Il ferme le média

pour retourner sur le premier écran. Il manipule la ligne de temps

pendant quelques minutes avant de continuer la visite de l’exposition.


Luce, journaliste de 43 ans

Luce est une habituée d’Internet, elle l’utilise tous

les jours au travail et aime s’en servir chez elle

pour rechercher des informations ou se divertir.

Elle possède un téléphone tactile et a l’habitude

de cette technique de navigation. Dans le cadre

de son travail elle se rend dans un musée pour

rédiger un article sur les années 1968-1969

et les révolutions sociales de cette période.

Très pressée, elle regarde quelques photos exposées mais préfère se

rendre vers une installation tactile qu’elle aperçoit plus loin. Elle lance

l’expérience, regarde rapidement l’aide et observe l’interface tourner

chronologiquement sur toute l’année 1968. Lorsque l’interface se

rembobine au 1er Janvier 1968, elle décide de manipuler la ligne de

temps par curiosité. Elle note quelques événements qui l’intéressent, elle

se dit qu’elle fera plus de recherches plus tard sur ces événements. Elle

ne s’intéresse pas à la visualisation des médias, et ne découvre pas les

liens thématiques, elle doit se rendre à un rendez-vous dans peu de temps.

En sortant du travail et en naviguant sur Internet, elle se rappelle de

l’interface qu’elle a utilisée et décide de se connecter sur le site Internet.

Elle remarque que l’interface est légèrement différente puisqu’elle

doit s’identifier sur la page d’accueil. Elle insère un pseudonyme pour

créer un compte et arrive sur l’écran d’aide. Elle lit plus attentivement

l’aide et visualise les médias des événements qu’elle avait noté au

musée. Elle découvre des médias d’archive qu’elle n’avait pas eu

l’occasion de trouver sur cette année, elle décide de les visualiser.

Sur chacun des médias est présent un bouton « Sauvegarder », elle en

visualise un qu’elle sauvegarde ensuite. Elle se rend compte que des mots

clés apparaissent lors de la visualisation d’un média et sont repérables par

des couleurs. Habituée des nouvelles technologies et de ce type d’interface,

elle suit directement les liens qui ont été prédéfinis et qui sont présents en

bas des médias. Ces liens lui donnent des idées pour son article, surtout sur

la contradiction des différents événements de cette époque clé de l’histoire.

Elle sauvegarde trois autres médias, dont deux photos parcourues en suivant

les liens. Elle ferme la visualisation des médias et quitte le site Internet.

Une fois à son travail, elle reconsultera ses médias sauvegardés pour

les montrer à sa rédaction. L’interface lui sera d’une grande aide pour

comprendre l’ampleur des ruptures sociales ou culturelles de cette

période, et pour les replacer dans le temps ou sur des thématiques.


arborescence

borne interactive + internet

options supplémentaires(version Internet)

événements visuels

Boucle temporelle

du temps de manière dynamique

Timeline

Manipulation du temps

Écran d'accueil

Vignettes des médias

Liaisons sur le globe

Identification

Mes médias

SauvegarderLien prédéfini

Média relatif

Média

Mot clé

Liste des médiasrelatifs

Liste des médiasde la même thématique

Choix d'un mot clé


zoning

Écran 1Navigation temporelle / géographique

version Internet

Écran 2 Navigation thématique / Visualisation d’un média

Écran 3 Mes médias sauvegardés


storyboard

?

1

2

20 21 22 23 24

1

1

2

1

3

2

1

2

22

? aide

3

2

1

Écran 1L’utilisateur lance l’interface

Écran 2L’aide apparait, l’utilisateur ferme l’aide

Ecran 3L’utilisateur est passif Apparition/Disparition des vignettes Les dates défilent et le contour tourne Une infobulle d’aide apparait

123

L’utilisateur maintient son doigt appuyé sur la date Manipulation de la timeline, un drag&drop avec le doigt fait défiler les dates à droite ou à gauche

1

L’utilisateur appuie sur un média Disparition des éléments de l’écran 3 L’écran coulisse vers le bas12

fondu

Ecran 4Lecture d’un média Glissement/Apparition du média Coulissement vers le haut des mots clés Deux infobulles d’aide apparaissent

123

L’utilisateur change de média Glissement/Disparition de l’ancien média Glissement/Apparition du nouveau média

1

2

L’utilisateur ferme l’écran 4, retour à l’écran 3 Disparition des éléments de l’écran 4 L’écran coulisse vers le haut12

fondu fondu


charte graphique


intentions graphiques

Contraintes

- La charte graphique doit s’adapter à un support tactile.

- La cible doit être accrochée rapidement, étant donné l’utilisation principale de l’interface lors d’une visite dans une démarche d’apprentissage (musée ou exposition).

- Les interactions doivent être facilement accessibles au

toucher.

- Les médias doivent être mis en avant, et facilement

repérables à travers les différents niveaux de visualisation (temporel, géographique, thématique).

Intentions graphiques

La couleur rouge symbolise la révolte, couleur très représentative de l’année 1968, qui permet également de créer une accroche et un impact auprès de l’utilisateur.Les couleurs moins vives (niveaux de gris) sont un rappel des médias noir et blanc de l’époque, et une allusion au passé. Elles créent également un parallèle entre Mai 68 en France et les autres événements dans le monde.

Les jeux de dégradés rendent l’interface plus élégante, et créent un contraste avec les événements marquants qui y sont présentés.

Les boutons ont une taille adaptée au toucher, et un jeu de pictogrammes permet de créer des repères visuels sur les zones interactives.

Les typographies sont strictes, claires et lisibles, pour mettre en avant la force des événements de cette période.


planches tendances


identité visuelle et sonore

Titre du projet

« Sous les pavés, la plage », célèbre slogan de Mai 68, est devenu « Sous les pavés ». Au delà de ces jets de pavés parisiens, d’autres événements majeurs se sont déroulés dans le monde entier.

Logo

Le logo, un losange, est un rappel de la forme d’un pavé. « Sous les pavés » est coupé aux extrémités du carré, le fond est lié avec la forme. Le texte est transparent et arbore un slogan de Mai 1968, il peut se superposer sur tous les

supports permettant de voir au delà de ces événements.

Le rouge et le blanc appuient la nécessité de révoltes plus ou moins violentes pour prétendre à un avenir meilleur.

Typographie

SugoTypographie linéale qui offre une bonne

lisibilité et donne une force aux mots. Le corps important du lettrage met en avant la structure et la pression politique de l’époque.

Blue HighwayTrès similaire à Sugo mais plus fine et

élégante, elle a été utilisée sur toute l’interface graphique.

Musique

Dès le lancement de l’interface, un univers musical se mettra en place. La sélection d’une dizaine de musiques de l’époque sera lue en boucle.

Lors de la visualisation d’une vidéo, la musique sera mise en

pause pour ne pas gêner le son de la vidéo.

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz123456789*!?

ABCDEFGHIJKLMNOPQRSTUVWXYZ

abcdefghijklmnopqrstuvwxyz123456789*!?


écrans clés

Pré-home : Invitation à lancer l’interface


Aide : Tutoriel d’utilisation de l’interface


Écran 1 : Visualisation des vignettes et défilement chronologique de l’interface


Écran 1 : Manipulation de la timeline


Écran 2 : Visualisation d’un média, apparition des thématiques


Écran 2 : Choix d’un mot clé, liste des médias relatifs


technique


borne interactive

Installation tactile

L’installation tactile doit être disposée sous la forme d’une table pour faciliter l’utilisation de l’application (environ 90cm de hauteur).Les spécificités de la table doivent être celles ci :- résolution d’écran de 1280x1024,- installation tactile simple-touche,- possibilité de drag and drop avec le simple-touche,- possibilité de lire des fichiers exécutables.

Techniques de développement

Développement Adobe Flash AS3 :

- le développement en classes favorise l’évolutivité de l’application

et la réutilisabilité en vue de son exploitation sur d’autres périodes

historiques,

- cette technologie ne nécessite pas de ressources spécifiques sur la

borne interactive et est complètement répandue sur Internet (98%

disposent du lecteur Flash),

- technologie qui se couple très bien avec l’installation tactile et qui

permet de récupérer l’événement du toucher,

- création d’animations et fluidité importante sur le support,

- possibilité de créer un fichier exécutable pour lancer l’application sur

l’interface tactile.

Listing XML des médias :

- permet d’affecter des mots clés au sein des médias : pour une

vidéo chaque mot clé correspondra à une durée de la vidéo, une photo

correspondra à un seul mot clé

- facilité d’intégration du fichier XML à l’application Flash

- facilité d’installation, évite le déploiement d’un serveur web.

Exemples d’arbres XML

<medias> <date num=”05/06/1968”> <media type=”video” titre=”Titre média 1” vignette=”vignette.jpg” media=”media.mov” pays=”France”> <motcle mot=”Émancipation” timecode=”00:15” position=”1” /> <motcle mot=”Ségrégation” timecode=”00:30” position=”2” /> </media> <media type=”photo” titre=”Titre média 2” vignette=”vignette.jpg” media=”photo.jpg” pays=”France”> <motcle mot=”Emencipation” position=”1” /> </media> </date></medias>

<liens> <media titre=”Titre 1”> <lien media=”Titre média 2” motcle=”choc des photos, photos chic” /> <lien media=”Titre média 3” motcle=”révolution sociale, révolution musicale” /> </media></liens>

<coordPays> <pays titre=”France” x=”20” y=”200” /></pays>


Médias

- Les vidéos seront intégrées dans Flash au format FLV qui permet une compression de bonne qualité. Elles disposeront d’un lecteur classique avec Lecture / Pause / Timeline.- Les photos seront au format JPG qui permet une bonne qualité de compression pour une taille minimale.

Techniques de développement

La partie utilisateur et la sauvegarde des médias de la version en ligne seront réalisés en classes PHP5, langagegratuit permettant de communiquer avec des basesde données MySQL. L’interaction entre les classes PHP5et l’interface en Flash se fera à l’aide d’un flash-service

de type AMFPHP. La base de données permettra aux utilisateurs de créer un compte et de sauvegarderles médias qu’ils veulent revisionner.

prolongement en ligne

La résolution de l’interface pour la version en ligne sera réduite afin d’être compatible à une résolution moyenne de

1024x768.

Hébergement

Le site Internet devra être hébergé sur un serveur disposant de PHP5 et d’une base de données MySQL. La bande passante de l’hébergement devra être optimale pour afficher correctement les médias en flux continu.

Exemple de base de données

table utilisateurs - utilisateur_id : int 10 - utilisateur_login : varchar 255

table medias_sauvegarde - media_id : int 10 - media_utilisateur : int 10 - media_titreXML : varchar 255


moyens de production


échéancier de production

CONCEPTION ET GESTION DE PROJET

Conception

Gestion de projet

DOCUMENTATION ET CONTENU ÉDITORIAL

Collecte des événements et des médias

Dé�nition du ton éditorial et des liens historiques

RÉALISATION

Direction artistique

Maquettes graphiques

Création des arbres XML

Développement Flash

Développement PHP/MySQL

Tests et debug

Tournage vidéo

Montage vidéo

MISE EN SERVICE

Installation de la borne

Mise en ligne du site

Avril Mai Juin Juillet Août1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Version en ligne


budget prévisionnel

Concepteur

Chef de projet

Documentaliste / Historien

Directeur éditorial

Directeur artistique

Graphiste

Développeur Flash

Développeur PHP/MySQL

Prestataire vidéo

Table tactile

Hébergement (coût/année)

Poste Jours de travail Coût/Jour (€) Total HT (€)

Total HT (€)

15

11

5

10

10

10

23

10

7

440

420

300

400

700

400

570

450

400

6600

4620

1500

4000

7000

4000

13110

4500

2800

10000

70

58200

Total TTC (€) 69607

sous les pavés - dossier de conception

Documents