Browsing Tag interfaces

L’information tactile

Le champ hyper-codifié de l’information en ligne évolue en montrant d’intéressantes porosités avec le support papier. Il abandonne peu à peu le modèle du portail — auquel il est historiquement lié — pour trouver de nouvelles approches formelles dans lesquelles les interfaces laissent la part belle à l’hybridation. La prochaine rupture d’usage annoncée par les tablettes tactiles, écrit Tech Crunch, impose d’imaginer au plus vite les nouvelles interfaces, c’est-à-dire des modes d’organisation de l’information, de navigation, d’interaction qui se situeront entre les maquettes papier, les pages web et les applications mobiles. Ces défis réguliers qu’impose l’apparition de nouveaux supports matériels, de nouveaux terminaux, brassent quantités d’enjeux pour le design de l’information en ligne. Par exemple, la façon dont ces logiques de formes influencent le traitement de l’information. Les tablettes vont également réintroduire le rapport tactile à l’information. Il ne s’agira pas de tourner virtuellement des pages mais d’engager une participation gestuelle. Une lecture tactile. Assez proche du Times Reader peut-être. Après les interfaces mobiles, rapidement adoptées, les media en ligne seront-ils prêts ?

tablette-mag

Category : blog

Le Petit dictionnaire du design numérique

Je travaille actuellement, dans le cadre de *designers interactifs*, sur un projet de Petit dictionnaire du design numérique. Il s’agit d’une publication collaborative destinée à proposer des repères à la profession et au grand public sur ce que sont les grandes notions en design numérique. Nous oeuvrons dans une discipline dont la terminologie est pléthorique et parfois hermétique. L’écrasante majorité de la littérature sur le design numérique est rédigée en langue anglaise. Une initiative s’imposait pour démontrer que les francophones s’impliquent dans l’éditification et la promotion de la profession.

Le projet du Petit dictionnaire du design numérique est une initative à but non lucratif. Sa vocation est d’aider l’ensemble de la profession à expliquer aux entreprises, au grand public, aux institutions les notions qu’elle emploie au quotidien dans la diversité des disciplines qui la constitue. Ainsi, Le projet du Petit dictionnaire du design numérique invite la profession francophone à participer à la rédaction des définitions des 100 termes du corpus. Chaque contribution est créditée sur le site comme dans la future publication, qui sera éditée par l’association via lulu.com. Les bénéfices liés à la vente de l’ouvrage permettront de financer les différents programmes de l’association.

petit-dictionnaire

Category : blog

Nouvelle version du NYT article skimmer

The New York Times a annoncé sur son blog First Look la sortie de la 3ème version de l’article skimmer. J’ai déjà amplement abordé le principe de cette interface dans différents billets, “Renouveler les parcours de lecture dans la presse en ligne” et “L’information en ligne comme une mosaïque”. Article skimmer permet un mode de consultation des nouvelles axé sur le confort de lecture, à travers une grille modulaire et différentes autres organisations formelles de l’information. J’avais expliqué que cette souplesse d’interface souhaitait renouer avec l’expérience tactile et visuelle du support matériel papier.

Dans cette 3ème version, la navigation a été encore améliorée, avec une pagination, une navigation au clavier, qui enrichissent l’interaction en rendant l’accès à l’information plus direct. Les développeurs de l’interface ont cette fois-ci également intégré le principe Times Wire, qui permet de visualiser en temps quasi-réel les nouveaux articles publiés dans le site du NYT, selon l’ordre anté-chronologique. Je trouve intéressante cette confrontation de la logique linéaire de Times Wire avec l’organisation non-séquentielle de l’article skimmer, avec l’idée que l’organisation de l’information dans les sites d’information en ligne exprime une temporalité particulière. Cette notion de temporalité, nous l’avions déjà entrevue à propos du site néerlandais EN et sa newsriver (“Représenter l’actualité avec une newsriver navigation”). The New York Times apporte une fois encore des propositions judicieuses qui annoncent une évolution plus profonde de l’archétype “portail”, organisation jusque là privilégiée par les sites d’information.

article-skimmer-by-the-new-york-times5

article-skimmer-by-the-new-york-times6


article-skimmer-by-the-new-york-times9

article-skimmer-by-the-new-york-times10

article-skimmer-by-the-new-york-times8

article-skimmer-by-the-new-york-times4

article-skimmer-by-the-new-york-times3

article-skimmer-by-the-new-york-times2

article-skimmer-by-the-new-york-times

article-skimmer-by-the-new-york-times7

Category : blog

True/Slant et l’avènement de l’advertorial

True/Slant, lancé ce lundi 8 juin, est selon The Washington Post un portail d’information qui redéfinit les relations entre journalistes, lecteurs et annonceurs. Son modèle, qui revendique la capacitation (empowering) des contributeurs (une centaine), fait intervenir aussi bien des journalistes, des auteurs que des experts. Chacun est invité à y construire sa propre communauté de lecteurs. Les journalistes sont désormais leur propre média, leur propre marque. Les annonceurs, pour compléter le modèle économique du site, disposeront comme les contributeurs de pages profil et pourront mettre en ligne leurs propres contenus. Ce modèle, ont souligné des commentateurs, floutte les frontières entre information et publicité. D’autres site comme le Huffington Post, fondé aussi sur la contribution ou Daily Beast, privilégient l’agrégation des sources d’information et tiennent également des positions d’éclaireurs dans cet avènement d’un journalisme très informel, très critiqué.

J’ai relevé ce site car il témoigne d’une manière intéressante la façon dont le design traduit son positionnement, avec une large place accordée à la visibilité des contributeurs. En termes d’usage, True/Slant effectue une synthèse étrange entre un portail d’information généré par ses utilisateurs, un Digg-like,  Twitter (on peut ainsi suivre les publications d’un contributeur) et Facebook.

trueslant-accueil

true-slant-article

Category : blog

Quand l’information devient un jeu

Quels sont les nouveaux usages et typologies d’interface situés à l’intersection des jeux vidéos et de l’information en ligne ? C’est la problématique que tente d’élucider un groupe de chercheurs et de designers américains, à l’origine du passionnant blog News Games. Ils y décryptent la façon dont la pratique du jeu pourrait faire émerger une nouvelle appréhension de l’information, comment elle pourrait influencer sa perception, encourager (ou pas) le sens critique des citoyens, et dans quelle mesure ne donne-t-elle pas naissance à un nouveau genre éditorial, les news games. En somme, comment un jeu peut-il construire un récit différent de l’actualité, un récit où l’internaute est co-énonciateur ?

Cet angle d’analyse me semble particulièrement opportun car il met en lumière une influence culturelle (très différente du système des métaphores fondé sur la matérialité du support, le papier), le jeu vidéo, doté d’un héritage historique riche en tant que dispositif informatique. Le jeu vidéo est un complexe de genres présentant de nombreux aspects qui recouvrent en partie les thèmes couramment abordés par l’actualité. Il apparaît comme un mode de relation dans lequel les interactions semblent relever d’un horizon d’attente moins séquentiel qu’un article, plus structuré comme un récit arborescent, composé de multiples propositions narratives. Technologiquement parlant, les jeux en ligne sont intimement liés au développement de la plateforme Flash, qui a permis l’éclosion de multiples initiatives, souvent teintée d’idéologie politique car ils cherchent à persuader d’une thèse, comme le populaire 12th September de Newsgaming. Dans d’autres cas, les jeux d’information en ligne sont des tentatives pédagogiques de faire comprendre un enjeu complexe de l’actualité.

Même si l’état embryonnaire de l’information comme jeu ne permet pas de mettre beaucoup d’exemples en évidence, l’intérêt de la presse en ligne pour les jeux n’est pas nouveau, comme en témoigne une rubrique de Business Week sur les meilleurs jeux en ligne. Parfois, ils émergent plus spécifiquement en réaction à l’actualité ou des faits de société. A ce titre, The Huffington Post a produit un jeu parodique (intitulé Dick Cheney Quail Hunt) sur l’ex-vice président américain Dick Cheney et MolleIndustria a de même moqué le modèle de McDonald dans son célèbre McDonald Videogame. L’histoire de ces jeux éditoriaux est relatée dans un billet de News Games. Par la charge critique qui est signifiée dans le dispositif, ils ont une portée performative à laquelle l’internaute peut se joindre par l’engagement gestuel. Ils sont alors proche des journaux satiriques que nous connaissons en France, Charlie Hebdo ou Le Canard Enchaîné.

La chaîne américaine Comedy Central a elle aussi produit plusieurs jeux à résonnance politique pendant les élections du pays en 2008. On y retrouve la même mise en scène satirique d’événements et de personnages puisés dans l’actualité.

comedy-central-indecision2008

Les journaux en ligne développent régulièrement des modules de design d’information interactif que l’on peut considérer comme des passages vers le jeu. Ils permettent la prise en main ludique des données, tel le Los Angeles Times dans les 51 projets de son data desk interactif. Sans totalement non plus s’ancrer dans le genre du jeu vidéo, The New York Times dispose d’un très riche viz lab. Ces expérimentations demeurent peut-être trop éloignées de la convergence jeux vidéos / média en ligne. Un projet de la BBC, BBC White, permet d’explorer une visualisation des émotions dans les commentaires des internautes sur un débat de société, l’immigration. Il est remarquable car permet de contourner la surcharge informationnelle des commentaires pour en synthétiser l’essence. Ces visualisation de données, d’après Bobby Schweizer, l’un des éditeurs du blog News Games, peuvent orienter l’interprétation de l’internaute ou être composées de multiples niveaux de lectures.

bbc-white

Le remarquable blog Information aesthetics recense dans ce domaine des dizaines de visualisations en lien direct avec l’information en ligne. C’est le sujet d’un billet distinct.

Les quiz, qui sont des jeux dans lesquels la participation est profonde – avec une connotation très sociale – et ont une étymologie liée à l’oralité du discours, mesurent la connaissance du joueur. Plusieurs sites d’information les ont mis en scène au sein de réseaux sociaux comme Facebook. The New York Times y alimente un quiz quotidien, ainsi que la chaîne d’information France 24, qui a fait un notable effort de conception. Une démarche similaire de NPR, mais cette fois intégrée directement à son site web.

france24-quiz

News games relate par ailleurs l’expérience de plusieurs jeux en ligne sur le crash de l’Hudson River, en janvier 2009, qui proposent une interaction presque haptique. Dans ces cas, le jeu tente d’immerger mentalement et d’impliquer gestuellement l’internaute dans le contexte de l’événement, en lui faisant effectuer une manoeuvre d’atterrissage d’urgence. Il s’agit alors de revivre l’événement. Ce même événement devient, sur la BBC, un similateur de vol, dans une vidéo (non interactive) qui en décrit le déroulement.

Mais également, plusieurs initiatives dans la presse en ligne initiée autour des jeux témoignent des inexorables changements dans la façon dont l’information peut être “consommée”. MSNBC a mené différentes expérimentations autour de news infused-games avec NewsBreaker et NewsBlaster, deux jeux en flash. Elle les présente comme un moyen de “rester informer tout en s’amusant” et recycle ses flux RSS dans un casse-brique qui libère les titres de l’actualité à mesure que les éléments d’un mur sont détruits.

newsbreaker

NewsBlaster est “inspiré par la nature instantannée de l’actualité en ligne et se conçoit comme une course contre la montre pour détruire les “bulles” d’information” d’un même niveau.

newsblaster-_-msnbccom

MSNBC a également cherché à développer une pratique,  sans doute plus intéressante, fondée sur la prédiction d’événement, en se cantonnant cette fois à certains sujets. iPredict est un module de visualisation dans lequel les internautes sont interrogés sur la probabilité d’un événement à se produire. Leur vote est compilé dans un graphique, qu’ils peuvent mettre en rapport avec l’opinion des autres internautes.

angelina-jolie-will-adopt-another-baby-ipredict-entertainment-msnbccom

Dans ces 3 jeux, l’expérience de l’information n’a plus de rapport avec les modes d’accès traditionnels. Est-elle pour autant plus pertinente ? Elle apparaît comme l’aboutissement un peu ridicule des mécaniques participatives, car elle ne semble pas améliorer véritablement l’usage. Néanmoins, elle vaut davantage par les problématiques soulevées (comment réinventer les modes de consommation de l’information à l’ère numérique ?) que par la qualité du traitement de l’actualité. Par ailleurs, certains commentateurs font valoir un principe de précaution devant les news games, souvent idéologiquement orientés comme nous l’avons expliqué. Leur pertinence n’est pas établie pour traiter tout type d’information.

Dans un tout autre rapport, plus fonctionnel cette fois, quelques sites d’information ont spécifiquement développé des versions de leur portail pour des consoles de jeux pouvant se connecter au web, comme c’est le cas d’El Pais avec sa version PSP. Cette prise en compte des terminaux pourrait aussi à terme questionner de manière plus profonde le type de navigation qui s’impose en fonction du contexte de consultation.

Les concepteurs de The Wii News Channel ont à ce titre réalisé de remarquables propositions pour une navigation de l’actualité avec les principes d’interaction mis en oeuvre par le contrôleur de la console. Il ne s’agit pas uniquement de vidéos et de podcasts, mais d’un authentique rapport au texte, comme la vidéo ci-dessous en témoigne :

Comme le relève la notice wikipédia du Wii Menu, ce pourrait être un concurrent très pertinent des grandes chaînes d’information télé classique comme CNN. Dans la console de Nintendo, le rapport tactile au texte développe tout son sens, par opposition au sens visuel d’un portail d’information web, qui le place à distance. Mc Luhan ne renierait pas ce prolongement tactile de la lecture.

Category : blog

Ce que Mc Luhan apporte à la compréhension des média électroniques

L’ouvrage de Marshall Mc Luhan, Pour comprendre les média, analyse en profondeur les effets de la technologie sur la réception que les hommes ont des média et de l’information. Il a beaucoup insisté sur la dimension pragmatique que revêt la forme des média, influant directement sur le sens de leur contenu, et l’idée que les média sont des prolongements de nos sens et de notre système nerveux central. Cela est vrai par exemple quand nous consultons une même information dans l’édition papier et l’édition en ligne d’un journal quotidien. Sans entrer dans le détail de l’expérience, on conçoit bien que le sens donné à cette information est investi différemment selon le médium.

Ses théories sont encore en grande partie d’actualité au regard des média électroniques, car la pensée de Mc Luhan ne se limite pas aux média existants. Dans les rapports qu’entretiennent les média entre eux, qui est en ce moment un vaste thème de débat (presse papier vs presse en ligne),  ressort souvent la notion cruciale d’hybridation. “L’hybridation ou la rencontre de deux média est un moment de vérité et de découverte qui engendre des formes nouvelles.” (p77 de l’édition Point Seuil Essai). Cette notion me semble bien illustrer la situation d’innovation actuelle à laquelle est confrontée la presse d’une manière générale. Je l’ai évoqué notamment lorsque The New York Times a rendu disponible l’application Times Reader, qui cherche à faire se rencontrer l’affectif du support matériel du papier et l’usage engageant du web. De là émerge une forme nouvelle, une façon inédite de consommer l’information, plantée hors du navigateur et un prolongement évident du sens tactile à travers les métaphores de la page. En cela un Times Reader “déplace les rapports intersensoriels”, les transposent dans une “nouvelle forme de vie” fondée sur le vécu culturel des lecteurs.

En cela aussi, “un nouveau médium ne s’ajoute jamais aux média antérieurs et ne les laisse jamais intacts. Il les bouscule sans cesse et leur trouve de nouvelles formes et de nouveaux emplois.” C’est à ces nouveaux emplois que la presse papier devrait notamment être en train de réfléchir plutôt que de jouer sa survie sur l’opposition du modèle payant au modèle gratuit.

Mc Luhan développe une vision passionnante sur la technologie qui devancerait désormais les usages : “la demande d’une technologie nouvelle est peut-être la plus évidente des structurations ou des effets phsychiques qu’elle produit. Personne ne réclame d’automobile tant qu’elle n’existe pas, personne ne s’intéresse à la télévision tant qu’il n’y a pas d’émissions. Le pouvoir qu’a la technologie de créer sa propre demande n’est pas étranger au fait qu’elle est avant tout un prolongement de notre corps et de nos sens.”

Il mêle étroitement les nouvelles technologies à l’organique et c’est effectivement il me semble la direction très claire prise par l’évolution des interfaces (lire à ce sujet l’excellent billet d’Hubert Guillaud, Demain, les interfaces organiques). Il oppose l’âge mécanique, celui de Gutenberg, à l’âge électrique, associé à nos organes. “Notre nouvelle technologie électrique a une tendance organique et non mécanique parce qu’elle prolonge non pas nos yeux mais notre système nerveux central”.

Il y a aussi chez Mc Luhan une idée de la filiation de la forme de la mosaïque à travers une autre opposition qui est celle de la séquentialité du livre et de la lecture fragmentaire du magazine, du journal. Que penser aujourd’hui de cette forme de la mosaïque dans l’information en ligne ? C’est un autre exemple de mutation génétique, pour conserver la métaphore évolutionniste. Il faut aussi se souvenir que Mc Luhan avait perçu pour la télévision la dimension cinétique de la mosaïque, que l’on retrouve totalement dans les média interactifs.

Autre vision fascinante, c’est la comparaison par Mc Luhan des pixels de l’ordinateur, qu’il appelle des points, au courant impressionniste. Pour lui, “toutes ces techniques annoncent d’autres formes électroniques, comme les points et les traits de l’ordinateur, en effet, elles caressent à petits points les contours de toutes les sortes d’êtres”.

Cette réflexion est une succession de notes encore incomplètes, mais elles resituent un peu la pensée de Mc Luhan en la liant à nos préoccupation. Je trouve que sa grande force était d’être un système de pensée dynamique, sans a priori culturel. Je continuerai à y faire appel car je la trouve très utile pour élaborer une grille d’analyse judicieuse des enjeux actuels autour de l’information qui est, Mc Luhan l’avait distinctement perçu, le fondement de notre économie.

mcluhan

Category : blog

Interfaces de science fiction

J’ai déjà publié l’an passé, dans l’actu de *designers interactifs*, un bref Voyage dans les interfaces de science fiction. Cette vision du futur, que l’on nous demande inlassablement d’imaginer, connaît une longue filiation dans le cinéma de science fiction et dans le genre des video concepts, qui seront l’objet d’un prochain billet. Dans mon précédent article, je n’avais pas cherché à incarner et à analyser ces visions. J’ai ainsi rassemblé quelques extraits de films en partant du Metropolis de Fritz Lang (1927). J’aurais pu également démarrer par le plus ancien Voyage dans la Lune de Méliés (1902), mais je chercherai ici à me limiter aux interfaces. Je précise par ailleurs que le point de départ de cette nouvelle réflexion m’a été donné par Pascale Neveu de Vocation Graphique, qui m’a chargé de diriger pour ses étudiants de 4ème année un projet de recherche sur les interfaces innovantes.

minority-report

Il est intéressant de partir de la définition de la science fiction : “un genre narratif (littéraire et cinématographique) structuré par des hypothèses sur ce que pourrait être le futur et/ou les univers inconnus en partant des connaissances actuelles (scientifiques, technologiques, ethnologiques etc.)”. Elle questionne la relation ou les problématiques qui peuvent exister entre le présent et une représentation du futur plus ou moins éloigné. Ce que nous décrivent ces interfaces ancrées dans le futur, c’est une anticipation qui s’opère à partir des références connues dans le domaine des interactions homme / machine réelles. Les films cités ci-dessous convoquent un imaginaire singulier et démontrent à travers le temps la puissance de leur rayonnement culturel (l’un des meilleurs exemples étant sans doute la saga de Star Trek).

Trois chercheurs allemands, Schmitz, Endres et Butz, ont mené depuis 2003 une étude pour interroger les influences des interfaces futuristes dans les films. Ils ont mis en évidence plusieurs facteurs :

  • les effets spéciaux disponibles techniquement
  • le budget de production
  • les produits existants et les recherches menées en design d’interaction
  • l’imagination du réalisateur

D’autres chercheurs, Paul Dourish et Genevieve Bell, au Royaume-Uni, ont questionné la place de l’informatique ambiante dans les films de science fiction, dans un article intitulé “Reading Science Fiction Alongside Ubiquitous Computing“. Leurs conclusions point dans la même direction : l’imaginaire collectif développé à partir des films de science fiction s’interpénètre avec les champs de la recherche en interaction homme / machine. Jean-Noël Lafargue illustre ce propos dans un article relatant la filiation de l’invention du téléphone mobile à partir de Star Trek.

“Science fiction does not merely anticipate but actively shapes technological futures through its effect on the collective imagination”

“Science fiction visions appear as prototypes for future technological environments”

Les principales thématiques développées autour de l’interaction dans les films de science fiction :

  • l’intelligence artificielle et synthèse vocale (Star Trek, 2001, Space Odyssey, AI, Artificial Intelligence (2001), Time Machine (2002) : un assistant intelligent)
  • les interfaces tangibles
  • la réalité augmentée (Johnny Mnemonic, Total Recall)
  • les interfaces neurales (Johnny Mnemonic, The Matrix
  • l’identification numérique des personnes, qui soulève les questions très actuelles de la privacy et de la sécurité (Logan’s Run, Gattaca, Bourne Identity, Alien IV)

Metropolis (1927) de Fritz Lang, film en noir et blanc muet, est considéré comme l’un des plus anciens films de science fiction et a profondément et durablement influencé le genre (la notice Wikipedia liste certaines de ces influences). Il relate une ville futuriste habitée par des travailleurs esclaves et des familles dirigeantes, sur fond de lutte des classes. Sa vision du futur est très mécaniste (la culture numérique n’existe pas encore), même si elle est fondée sur la conscience du télégraphe, de la radio et du téléphone et met en scène des machines dont les interfaces tangibles ont été conçues avec un design “anti-utilisateur” comme le montre l’extrait suivant.


Metropolis – Fritz Lang – 1927 from Benoît Drouillat on Vimeo.

Blade Runner de Ridley Scott, sorti en 1982 dans les salles et adapté du roman de Philip K. Dick, Do Androids Dream of Electric Sheep?, a acquis le statut d’un film mythique. Comme dans Metropolis, la femme androïde y occupe une position centrale. Son esthétique, inspirée du film noir, relate un futur proche (2019) où les humains cohabitent avec les androïdes (Replicants). Pour les analystes, Blade Runner représente “un moment clef dans l’évolution des effets spéciaux au cinéma” (voir cette page) puisqu’il coïncide avec l’émergence du traitement numérique. L’extrait suivant montre une raisonance particulièrement actuelle comme représentation de la ville numérique, qui est constamment reprise depuis (voir plus loin l’extrait de Babylon AD) :


Blade Runner digital city from Benoît Drouillat on Vimeo.

En 1990, Total recall, du réalisateur Paul Verhoeven, toujours à partir d’un roman de Philip K. Dick,  explore les technologies d’affichage ambiantes et holographiques :


Total recall display + holographic interface from Benoît Drouillat on Vimeo.

Johnny Mnemonic (1995) est un film de Robert Longo. Johnny, personnage interprété par Keanu Reeves, y est un trafiquant d’information doté d’un implant cérébral qui lui permet d’effectuer des transferts de données sécurisés. L’interface neurale est le thème principal de ce film référence du cyberpunk.

X-Men, de Bryan Singer est sorti en 2000. L’un des scènes du film aborde également la question de l’affichage tangible (physical display) à travers cette représentation en 3D du plan d’une ville :


X-Men physical display from Benoît Drouillat on Vimeo.

Artificial Intelligence: A.I. de Spielberg (2001), outre son thème éponyme (intelligence artificielle), aborde la réalité augmentée :


Artificial Intelligence AI – augmented reality – 2001 from Benoît Drouillat on Vimeo.

La même année, du même réalisateur, sort en salles le film Minority. Ce film a évidemment un écho particulier dans la chronologie des films de science de fiction car c’est l’une des premières fois où les rapports entre la fiction et la recherche se font aussi explicites. Alex McDowell, le chef décorateur (production designer), s’est inspiré de sa visite au MIT Media Lab où on lui a présenté des prototypes d’interfaces gestuelles. Son intention était de faire référence à la technologie actuelle tout en lui donnant l’aboutissement logique de ce qu’elle serait dans 40 ans. Microsoft devait par ailleurs contribuer à la production du film, mais la collaboration n’a pas abouti. La firme a publié les esquisses des recherches de son département design.

Un autre aspect intéressant du film, les constantes publicités personnalisées, et notamment cette scène où Tom Cruise entre dans un magasin. Mais le moment-clé du film est l’écran transparent qui permet avec son interface multi-touch de balayer les souvenirs ou les visions des pre-cogs. La grammaire gestuelle que l’on reconnaîtra aisément :  drag and drop, vider l’écran, zoom. Le film montre également un exemple d’e-paper (USA Today). Les technologies du film (l’écran multi-touch) agissent comme un prototype pour les designers puisqu’elles ont été réalisées quelques années plus tard par Jeff Han dans un prototype qu’il a présenté à la conférence TED.


Minority report interface from Benoît Drouillat on Vimeo.

Film de moindre envergure, Time Machine (2002) de Simon Wells, présente un intéressant principe d’assistant virtuel :


Time Machine – holographic agent – 2002 from Benoît Drouillat on Vimeo.

Iron Man, de Jon Favreau, sorti en 2008, reprend différents principes d’interfaces : interface holographiques, écrans ambiants, Head-Up Display (HUD), multi-touch…


Iron Man – 2008 from Benoît Drouillat on Vimeo.

Enfin, la même année, Mathieu Kassovitz, inspiré par le roman Babylon Babies de Maurice G. Dantec, réalise Babylon A.D. où on distinguera quelques clins d’oeil : à la ville de Blade Runner, ainsi qu’au style d’interaction de l’iPhone.


Babylon AD – interface ) 2008 from Benoît Drouillat on Vimeo.

Category : blog

De l’hypertexte à l’hypervidéo, nouveaux modèles narratifs et nouvelles applications

Dans un environnement hypermédia contenant des médias temporels, la notion d’hypertexte traditionnel d’un lien nécessite d’être étendue (”In a hypermedia environment that contains temporal media, the traditional hypertext notion of a link requires extension.“), écrivaient en 1989 Hans Peter Brondmo et Glorianna Davenport, deux professeurs du MIT Media Lab.

L’hypervidéo ou vidéo interactive est un ensemble d’images animées intégrant des surfaces cliquables, qui permettent la mise en oeuvre d’un parcours de navigation entre la vidéo et d’autres contenus interactifs. Son concept est similaire à celui plus connu de l’hypertexte, dont le terme fut inventé en 1965 par Ted Nelson. L’hypertexte permet notamment de consulter des documents liés selon un mode non-linéaire. Cette structure non-linéaire enrichit considérablement les possibilités narratives du récit sous la forme vidéo.
Les éléments de distinction essentiels entre l’hypervidéo et l’hypertexte sont à la fois la scène temporelle et la scène spatiale. Alors que le texte écrit propose une scène d’énonciation dont le support formel est statique, le contenu vidéo est par essence mouvant dans le temps (ce que Glorianna Davenport décrit comme un temporal media). Les liens créés dans l’espace hypervidéo ne sont ainsi visibles et actifs que selon un temps donné. Ils doivent par ailleurs s’établir, prendre appui, par le truchement de métaphores spatiales dans la scène de l’énonciation.

Autre aspect crucial, c’est celui de la sémantisation du contenu vidéo, dont la syntaxe et les unités de sens sont fondamentalement différentes de celles du texte. En effet, comment extraire du sens des séquences d’images sans recours humain ? Le calcul des algorythmes capable de le mettre en oeuvre est une problématique complexe. Quel degré de granularité considérer, le frame, la scène ?

La première expérience hypervidéo a eu lieu au MIT Media Lab, en 1988, au sein de l’Interactive Cinema Group, à travers la création d’un portrait hyper-media du cours d’eau Charles River, Elastic Charles.  Il est décrit comme “une convergence d’éléments  vidéos, graphiques, textuels et d’une interface utilisateur dynamique, inspirée par une vision du magazine du futur“. Le projet, mené par Glorianna Davenport, exploitait la métaphore du cours d’eau pour matérialiser le récit interactif, dont les berges étaient émaillées de séquences vidéos. L’article de présentation du projet contient une réflexion particulièrement importante pour les développements de l’hypervidéo. Il établit notamment plusieurs principes qui régissent la grammaire interactive de l’hypervidéo :

  • le lien entre 2 séquences vidéos pourrait être fondé uniquement sur une analogie visuelle des deux contenus ou bien sur des notions plus abstraites
  • dans l’hypervidéo, il est nécessaire de spécifier un mécanisme des points d’entrée et de sortie pour poser les limites d’un lien (où il commence et où il finit)
  • ces liens doivent trouver une représentation affordante pour se signaler eux-mêmes. Les moving icons (icônes mouvantes) ou micons sont des dispositifs qui peuvent jouer ce rôle. Elles sont conçus comme de courts extraits vidéos jouant en boucle pour représenter le contenu de la séquence.
  • la navigation apparaît comme beaucoup plus complexe de part la nature dynamique des liens dans la scène d’énonciation

Aussi ludique qu’il soit, Le projet Elastic Charles, explore pour la première fois la mise en oeuvre de l’hypertextualité dans un média temporel. Il pose les jalons d’une nouvelle grammaire interactive. Il anticipe même, à travers son expérience, l’amenuisement de la frontière entre le destinataire (l’usager, le spectateur) et l’énonciateur (le réalisateur).

8 ans plus tard, en 1996, la cellule de recherche d’IBM en Chine implèmente des objets dynamiques cliquables dans les vidéos, pour les besoins d’un projet intitulé HotVideo. Tout comme le projet Elastic Charles, HotVideo permet d’associer un objet à une page ou à un autre contenu vidéo. Le projet introduit de nouvelles idées en termes d’interface utilisateur, notamment en travaillant sur la notion d’affordance, qui permet de signaler d’une façon plus efficiente l’emplacement des liens. Il étend également l’usage de l’hypervidéo au navigateur internet, explore de nouvelles applications pour la TV interactive et proclame : “Les vidéos seront bientôt envisagées davantage par les contenus vers lesquels elles pointent plutôt que leur apparence. [...] Ce que réalise vriament HotVideo, c’est de transformer l’espace en deux dimensions des vidéos ordinaires en un véritable espace multidimensionnel d’information.” (”[...] videos may soon be judged more by what they link to than what they look like. [...] What HotVideo really does is to transform the two-dimensional space of ordinary video into a true multidimensional information space.”)

Présenté lors d’Hypertext ‘96, HyperCafe est un projet interactif expérimental souhaitant explorer les potentialités de l’hypermédia et en faire ressortir les nouveaux enjeux énonciatifs et esthétiques. Il s’agit d’une fiction interactive immersive dans laquelle sont représentés les conversations de différents personnages dans un café, jouées de manière continue (ce qui n’était pas le cas jusqu’à présent). Les interactions mises en oeuvre permettent à l’usager de suivre des propositions narratives différentes lui offrant des “opportunités spatiales et temporelles” d’accéder aux conversations (Temporal opportunities in HyperCafe permit only a temporal window for navigating links in video and text, as an intentional aesthetic.). Ces opportunités d’interactions sont décrites comme relevant de plusieurs ordres :

  • des opportunités d’interaction temporelles (une fenêtre de temps de 3 à 5 secondes pour cliquer) qui permettent une navigation séquentielle (vs arborescente) dans la vidéo et pointent vers différents chemin narratifs ;
  • des opportunités d’interaction spatiales qui permettent une navigation plus exploratoire et exploitent la profondeur de la scène (ex. cliquer sur une table en arrière-plan). Elles sont signalées par des zones de clic highlightées d’une certaine couleur, des principes de survols, des modifications du curseur de la souris ;
  • des sortes de didascalies interactives (Interpretative Textual Links), notations narratives, qui offrent des ponts entre certaines scènes et produisent un effet esthétique de tension entre texte et image

hypercafe

HyperCafe témoigne d’une nouvelle forme de vie pour la vidéo et le cinéma, qui sera reprise d’une manière très poétique (et avec des moyens techniques sans commune mesure) par un projet français, Le Partage de l’incertitude, co-produit par Arte et le CNC, en 2005. Je l’aborde un peu plus loin. HyperCafe questionne la grammaire de l’interaction et la confronte à une réinvention esthétique des codes cinématographiques. A l’époque, la démarche est expérimentale de part le caractère limité des technologies disponibles et des outils.

hypercafe2

En 1997, de nouveau au Media Lab, un groupe d’étudiant développe une version plus avancée de l’interface Hypervidéo en envisageant des passerelles avec le téléshopping et la pratique du placement de produit dans les films. HyperSoap est un soap opera (feuilleton-fleuve) dans lequel le spectateur peut interagir grâce à une télécommande augmentée. Il permet d’afficher des informations contextuelles sur les objets sélectionnables (avec une zone de clic prédéfinie) de la vidéo, notamment la façon dont ils peuvent être achetés. Ce projet permet notamment d’affiner considérablement la technique qui permet de définir les zones interactives assignées dans la vidéo.

hypersoap

Les idées autour du Computational Narrative ne sont pas nouvelles. Le film interactif, Le partage de l’incertitude, réalisé par le collectif Anonymes.net en 2005, reprend en grande partie les idées développées par Kevin Brooks au Media Lab entre 1994 et 1999, à travers le projet Agent Stories. Il s’agit de mettre en relation un ensemble de propositions narratives, selon une progression non-linéaire. L’usager co-énonce ainsi l’histoire en générant, par les interactions mises à sa disposition, des variations narratives.

Une petite fille, un jeune homme, une jeune femme, un homme plus âgé : trois générations différentes. Dans une maison, sur la plage, au bord de l’océan, ces quatre personnages partagent des moments simples de la vie.
Pourtant, tout est loin d’être évident. Relations et séparations, distance qui les sépare, dépendent des gestes du spectateur. Le rapprochement des images créé des tensions ou des liens entre ces instants de vie…

Telle est la présentation du film, qui met en abîme à travers l’hypervidéo les connexions émotionnelles de ses personnages. Ce projet est intéressant à plusieurs titres. Fondé sur un usage de petites fenêtres vidéos mouvantes, il se place en rupture esthétique avec les tendances actuelles de la vidéo fullscreen pour aller chercher une tension entre leur cadre blanc et la distance des personnages. Mon corps régule lui-même le flux des images, affirment les auteurs du film, qui soulignent par ailleurs la complexité du travail de montage vidéo et sonore, à envisager non plus dans le temps mais dans l’espace.

partage-de-lincertitude

Plusieurs campagnes publicitaires interactives ont exploité l’hypervidéo en 2006, notamment un dispositif innovant de General Motors. Cette bannière vidéo est élaborée comme un récit articulé autour d’une arborescence de propositions narratives à déterminer. Il s’agissait de trouver un véhicule adapté aux préférences de l’utilisateur. Chaque séquence du récit, proposée à l’internaute, permettait à la jeune narratrice d’argumenter l’adéquation du véhicule à l’axe des besoins (la performance, le style, le prix, l’usage). L’expérience se fondait un cheminement établi par les préférences utilisateur : à chaque noeud narratif, la narratrice lui demandait d’effectuer un choix, qui l’orientait vers une séquence vidéo déterminée.

gm1

gm2

gm3

En 2007, le clip Neon Bible des canadiens d’Arcade Fire, réalisé par Vincent Morisset, renouvellait à son tour le genre du video clip, en implicant gestuellement l’internaute dans son déroulement. Plus minimal dans sa conception et la richesse des interactions proposées (séquentialité, clics), ce travail témoigne néanmoins des potentialités ouvertes par les outils comme Flash ou Silverlight et le design sonore.


Arcade Fire, Neon Bible interactive video clip from Benoît Drouillat on Vimeo.

Réflexions menées d’après la notice Wikipedia d’Hypervideo [en].

Category : blog

Le Webdesign. Sociale expérience des interfaces web

Le webdesign. Sociale expérience des interfaces web (Collection Forme & sens dirigée par Jean-Jacques Boutaud), Nicole Pignier, Benoît Drouillat, Hermès-Lavoisier, 2008. Préface d’Etienne Mineur.

Plus qu’un simple lieu d’affichage de l’information, plus qu’un simple mode d’accès à l’information, l’interface graphique des sites Web ne serait-elle pas l’espace scénique où se construit une relation imaginaire et culturelle entre l’annonceur et l’usager ? Les interfaces Web par les spécificités de leurs métaphores, par les modes d’organisation de l’information et les parcours de travail qu’elles proposent, invitent les usagers à vivre une réelle expérience socio-culturelle dont les conditions et les enjeux sont dévoilés dans cet ouvrage. Quels effets de sens possibles pour l’usager les interfaces Web suggèrent-elles ? Le webdesign. Sociale expérience des interfaces web permet de répondre à cette question essentielle en phase de conception de sites Web. Il s’adresse aux professionnels de la communication en ligne, aux annonceurs, aux étudiants en communication, en design et aux chercheurs.

Category : Publications

Réseaux sociaux

Pour me suivre sur les plateformes où je suis présent.