ordinateur-interfaces-riches

Dopez votre narration interactive avec HTML5

J’ai déjà eu l’occasion de vous expliquer dans quelle mesure les interfaces riches vous permettent de développer de nouvelles formes d’écriture institutionnelle. Tout l’intérêt d’utiliser les technologies RIA est de scénariser un contenu à la base très… statique, pour dynamiser la narration et rendre le tout beaucoup plus ludique, à l’image du Mobile Playbook de Google. Cet exemple est d’ailleurs particulièrement intéressant, car réalisé en HTML5, donc accessible sur tous types de terminaux.

La question que l’on est en droit de se poser est alors la suivante : le HTML5 va-t-il populariser le storytelling à grand renfort de mini-sites narratifs ? C’est bien possible, car les exemples ne manquent pas. Je vous propose d’en étudier trois qui me semblent représentatifs.

Dans le registre institutionnel, il y a tout d’abord Nutella Parlons-en, un mini-site dédié à apaiser les interrogations du grand public sur la composition de la célébrissime pâte à tartiner et notamment l’utilisation d’huile de palme. Ce mini-site propose une dizaine de pages au sein desquelles on navigue à l’aide de la molette de la souris. L’idée est manifestement d’égayer et de dynamiser un contenu plutôt rébarbatif.

nutella-parlonsen-8549517 Le mini-site institutionnel de Nutella

Les pages s’enchainent facilement avec de très beaux effets de transition. On passe ainsi d’un panneau à un autre, on survole les titres, on s’attarde sur les images, et l’air de rien, on consulte bien plus de pages que si le site proposait un système de navigation traditionnel. L’objectif est donc atteint.

Deuxième exemple avec Le Hybrid 4 Graphic Novel de Peugeot. Le but de ce mini-site n’est pas de faire passer des messages institutionnels, mais de s’appuyer sur une BD pour mettre en situation les bénéfices du produit. Le mode de lecture est ici plus limité que dans l’exemple précédent, car il n’est possible que de scroller vers le bas, mais avec le défilement automatique activé, c’est presque comme un dessin animé.

peugeotgraphicnovel-6781575 La BD interactive de Peugeot

La réalisation est soignée, et les transitions et animations apportent un vrai plus à la narration, à mi-chemin entre Ben the Bodyguard et Soul Reaper. Là encore, la cosmétique est un prétexte à vous faire rester plus longtemps sur le site, et ça marche.

Dernier exemple avec le livret blanc Au-delà du cloud produit par SFR. Nous sommes ici dans le domaine BtoB, mais le fait de proposer un format web pour ce livret blanc apporte une vraie valeur ajoutée, car le contenu est plus riche (vidéos…) et peut-être facilement mis à jour pour prolonger la durée de vie, contrairement à un fichier qui est figé dans le temps. De plus, ce livret blanc donne la possibilité de commenter certains articles ou paragraphes.

audeladucloud-5374710 Le livret blanc en ligne de SFR

Comme pour les deux exemples précédents, le format permet de prolonger la visite et même d’en augmenter la portée grâce aux fonctions de partage intégrées nativement. Je vous confirme également qu’il s’affiche parfaitement sur mes trois tablettes (iPad, Nexus et Windows 8).

La conclusion que je peux logiquement livrer est la suivante : oui, HTML5 est bien LA technologie idéale pour faire de la narration interactive (digital storytelling comme disent les anglais). Idéalement, il ne manque plus que la possibilité de “télécharger” ces mini-sites pour pouvoir les consulter hors-ligne, une chose qu’il est pourtant très simple de réaliser en HTML5…

Aucun commentaire