Prototype de radio visuelle

Posted by on août 23, 2011 in VisualRadio | 2 Comments

Visual timeline screenshot

 

Je suis très heureux de partager une version préliminaire d’un prototype de «radio visuelle» que je développe depuis quelque temps avec le support technique de Étienne Després, Nathanaël Lécaudé ainsi que de la communauté Popcornjs et Hyperaudio. Le projet est rendu possible grâce au contenu radio prêté par Karine Poirier et l’excellente équipe de l’émission de géopolitique La Guerre des mondes.

- Vous trouverez la version «large» ici : http://www.studioimaginaire.com/visualradio
- Et une version «réduite» ici : http://www.studioimaginaire.com/visualradio/small.html

La démo est assez explicite quant aux fonctions et possibilités,  mais j’aimerais quand même partager quelques réflexions concernant les principes de design et d’interaction proposés.


Ligne de temps avec repères visuel
Un des objectifs principaux du projet est d’obtenir une représentation visuelle forte de la structure du contenu. La proposition actuelle est assez simple : le contenu visuel est segmenté sur une longue page web à défilement vertical, puis la couleur du fonds de chaque section est coloré pour correspondre à des marqueurs sous la ligne de temps du lecteur média. Le contenu peut donc être exploré de deux manières: D’une façon passive, en laissant la page défiler automatiquement au fur et à mesure que la lecture du contenu audio avance; D’une façon active, en faisant défiler la page manuellement et en cliquant sur le titre des sections pour lancer l’audio qui y correspond.

La représentation visuelle des blocs de contenus est un concept commun dans les logiciels d’édition audio et vidéo, malheureusement, les lecteurs médias n’offrent que rarement cette fonction. Comme le note Henrik Moltke sur son blogue «seul Souncloud offre une expérience digne de 2010» avec sa représentation des ondulations sonores et des marqueurs  temporels pour les commentaires. Néanmoins, l’ondulation sonore n’offre pas des indications fortes sur la structure du contenu (et encore moins les marqueurs de commentaires). Les marqueurs de structure pourraient pourtant être particulièrement pertinents pour du contenu média dense, tel qu’une émission de géopolitique.


Exploration du contenu et «focus narratif»
Le deuxième objectif principal de l’expérimentation est d’assurer que tout le contenu soit pertinent pour une exploration passive ou active. En ce sens, je vise à ce que tous les contenus visuels puissent être activés soit par un marqueur temporel ou par une action de l’utilisateur. La plupart des démos réalisés avec la libraire PopcornJs que j’ai consulté jusqu’à maintenant dévoilent et cachent le contenu complémentaire uniquement en fonction des marqueurs temporels. C’est une approche pertinente pour des expériences narratives visuelles «fortes» où tout le contenu additionnel est abordé soit comme partie intégrante ou «distraction» du récit. Je crois toutefois qu’il est également possible de développer des expériences narratives à la fois actives et passives, où le spectateur peut explorer librement le contenu sans pourtant perdre le fil conducteur.


Prochaines étape
Ce prototype est encore très préliminaire, l’objectif de cette itération est de placer les concepts, entamer une discussion et idéalement susciter des contributions directes ou indirectes à la prochaine version du prototype. Vous trouverez le code source (plutôt bordélique*) sur github.

*À ce propos, je tiens à souligner l’apport considérable de Étienne Déprés qui a contribué très tôt au développement du projet alors que j’avais un urgent besoin d’aide en JavaScript. Il travaille encore activement à transformer les scripts bordéliques et les fonctions non automatisées en code élégant et fonctionnel.

 

2 Comments

  1. Florent_MICHEL
    %e %B %Y

    Beau travail, ça donne envie d’avoir ce type de fonctionnalité liés aux futures radios numérique terrestre. Retour utilisateur sur ta démo, je trouve que lorceque l’on saute du premier « chapitre » au « chapitre » 5, il est domage d’avoir un affichage qui passe sur les chap 2 3 et 4 en marquant une courte pause.

  2. sroux
    %e %B %Y

    Merci pour les commentaires Florent. En effet, le glissement de la tête de lecture n’offre pas encore une expérience intéressante, pour l’instant c’est beaucoup plus intéressant de cliquer sur la ligne de temps, ce qui provoque un défilement sans accrocs.  L’équivalent devrait être obtenu à terme avec le déplacement de la tête de lecture.

Leave a Reply