Le document explore le concept de storytelling évoluant vers le scrollitelling, une technique qui utilise l'effet de parallaxe pour créer des expériences interactives sur le web. Il discute des ingrédients d'un bon storytelling et présente les outils et tendances associés au scrollitelling, tout en soulignant les avantages et inconvénients de cette approche. Enfin, il propose des conseils pour une narration engageante, en appelant à l'innovation dans le design web.

1. A5 : Du storytelling au scrollitelling
@fperroy @MrEtourisme

3. On veut tous de belles histoires…
« pour que l’évènement le plus banal devienne une aventure, il faut
et il suffit qu’on se mette à le raconter »
Jean-Paul SARTRE – La Nausée

4. Oui, bon…
Le storytelling,
on connait !

5. OK… On vous écoute
Quels sont les ingrédients du bon storytelling ?

6. On est d’accord ?

7. Dans ce cas,
pourquoi nous
limitons-nous
le plus souvent
à ça ?...
#vismaviedeboulanger
#monbeauterritoire #picoftheday
#leshashtagscestjoli #storytelling
#monbeauterritoire
#maisouestcequejaimismesclés
#pouetaceluikilitça

8. Ceci n’est pas du storytelling

9. Le B.A.BA
OUI NON
OUI
NON
Création
d’un symbole
Choix dans
le patrimoine
méconnu
Recherche
d’informations
Élaboration
d’une identité
STORYTELLING
=
DES
HISTOIRES
=
DE
L’HUMAIN
Disposons-nous d’un
symbole?
A-t-il une
histoire ?

10. You know
what?
I hate
Thailand !

11. Tendance forte
Les sites recourant massivement au scroll et aux
effets de parallaxe
Développée dès 2011, elle s’impose aujourd’hui.

12. L’effet parallaxe
La parallaxe est l’incidence du changement de
position de l’observateur sur l’observation d’un
objet. En d'autres termes, la parallaxe est l'impact
(ou l'effet) de changement de position de
l'observateur sur un objet observé.
source http://fr.wikipedia.org/wiki/Parallaxe

13. EFFET
PARALLAXE

14. Traduction dans le web
L'effet de parallaxe dans la conception web est la
technique qui permet de faire déplacer des images
disposées sous différentes couches. L'interaction
se fait à partir de la souris ou du scroll afin de
créer un effet de vitesse/perspective pour
donner une illusion agréable et intéressante de
3D.

15. EFFET
PARALLAXE
http://www.web-eau.net/blog/tutoriel-realiser-un-site-web-avec-l-effet-parallaxe

16. SCROLLET
COUCHES

17. Avantages et inconvénients
• Fluidification de la
navigation
• « Réduction » du temps
chargement
• Immersion dans
les contenus
• Technologie éprouvée
(débuts en 2011)
• HTML5, CSS3
• Ergonomie/usabilité
parfois douteuse
• Plus adapté au tactile des
tablettes qu’au tandem
clavier/souris
• Risque d’effet de mode
• Poids des images de fond
• Multiplication des scripts
• Abus

18. Des exemples pour mieux comprendre
PARALLAX
WEB DESIGN

25. On aurait pu vous parler aussi…
• … de l’infinite scrolling;
• … de l’hypothèse de voir Google
passer à 40 occurrences par
page;
• … des soucis que va rencontrer
l’internaute… et pas que lui…
• … du coup de vieux que se
prennent nos sites…

26. Scrollitelling késako ?

27. Une tendance qui nous vient de la presse

28. Et sûrement l’influence des timelines…

29. Les outils du scrollitelling
• Shorthand
• Storehouse (app iPad)
• Steller
• Klynt
• Racontr
• Exposure
• Aesop (extension WP)
• Atavist
• …

30. C’est l’heure de VRAIMENT se mettre au
transmédia!

31. Crossmedia VS Transmedia
http://www.contes-estuaire.fr/

32. Crossmedia VS Transmedia
http://www.contes-estuaire.fr/

34. Soyez malins: crowdsourcez !

35. Quelques exemples significatifs

42. Etonnez-moi • Un storytelling nouveau, événementiel,
narratif, l’étape d’après les cadres MTL ?

43. 1. Racontez une vraie histoire (et pas
forcément une histoire vraie…)
2. Variez les média, pas seulement de la photo
3. Faites voyager spatialement mais aussi
temporellement
4. Inspirez-vous des mises en page des
magazines haut de gamme
5. Usez des effets parallaxes sans abuser
5conseils

44. Et si…
…on testait ça en live et sans filet ?

45. Webographie sélective
• http://veilletourisme.ca/2015/07/22/promouvoir-les-regions-grace-aux-
recettes-de-grands-meres/
• http://reference-etourisme.com/storytelling-chere-destination-raconte-moi-
une-histoire/
• http://www.web-eau.net/blog/tutoriel-realiser-un-site-web-avec-l-effet-
parallaxe
• http://www.deepintheweb.com/effet-parallax-ressources-gratuites/
• http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html
• http://www.blogduwebdesign.com/web-design-inspiration/25-sites-utilisant-
un-effet-de-parallaxe-original/435
• http://www.webdesignertrends.com/2012/07/la-boite-a-outils-de-la-
parallaxe/
• http://www.webdesigndev.com/parallax-scrolling-templates/