Superlink me

Voici quelques exem­ples d’installations util­isant l’interactivité pour échanger des don­nées ou par­ticiper à des per­for­mances. Ici, une inter­face de réseau de don­nées autour de pro­jets d’architectures, présenté à la Bien­nale de Venise.

Un autre exem­ple ici, présente un con­cept de vête­ment dont la pro­duc­tion est liée aux don­nées qui sont com­mu­niquées. cette autre per­met d’organiser les don­nées ren­seignées par l’utilisateur en une inter­face visuelle. Ici, vous trou­verez plusieurs exem­ples de sys­tèmes de représen­ta­tion d’informations, d’objets inter­ac­t­ifs et de réseaux de don­nées sur divers domaines, du corps humain à la politique.

Beau­coup de ces out­ils ont en com­mun d’avoir été pro­gram­més avec Pro­cess­ing qui est un lan­gage proche de l’actionScript de Flash, reposant sur la tech­nolo­gie Java, qui per­met des inter­ac­tions sim­pli­fiées avec des inter­faces hard­ware (de type WiiMote, la télé­com­mande pour con­sole Wii ou l’Asus Eee­Stick pour Win­dows).
Enfin, « sim­pli­fié » pour qui veut s’y met­tre. Avis aux ama­teurs, son envi­ron­nement de pro­gram­ma­tion (mul­ti­plate­forme Mac et PC) peut être téléchargé gra­tu­ite­ment à la même adresse.

Le pro­jet OLPC (One Lap­top Per Child) est main­tenant connu en sub­stance, j’espère, de tous. Il s’agit du pro­jet mené par Nicholas Negro­ponte au MIT, visant à une démoc­ra­ti­sa­tion très poussée de l’accès au réseau infor­ma­tisé plané­taire pour les enfants de pays en voie de développe­ment. Le pro­jet a donné nais­sance au XO, un ordi­na­teur portable. Il a été et est cer­taine­ment cri­ti­quable sur plusieurs aspects mais ce pro­jet et son développe­ment nous con­cerne en pre­mier lieu ici à l’ESAD :

Cet ordi­na­teur portable ne devait pas coûter cher à pro­duire et doit pou­voir être dis­tribué dans des pays où les infra­struc­tures tech­niques élec­triques et de télé­com­mu­ni­ca­tions ne sont pas aussi abouties que chez nous. Le pro­jet entre donc pleine­ment dans un cahier des charges de type « éco-conception », con­cept devenu cher à l’école.

Cet ordi­na­teur portable était égale­ment un pro­jet de design : il s’agissait de réu­nir des matéri­aux très économiques, au sac­ri­fice d’un cer­tain con­fort d’utilisation. Ce qui est un schéma peu habituel de la pro­duc­tion stan­dard, qui vise une qual­ité min­i­mum, pro­pre à nos marchés de pays riches. Cette impos­si­bil­ité de ren­trer dans un mod­èle déjà pro­duit aupar­a­vant ajouté à l’objectif de s’adresser à des enfant en pre­mier lieu à con­duit les dirigeants du pro­jet à chercher un design pro­duit appro­prié. Du côté de l’utilisation, il était égale­ment impos­si­ble de se caler sur nos logi­ciels et OS, trop spé­cial­isés et coû­teux en développe­ment et mar­ket­ing. Le design s’est donc étendu à l’interface graphique, nom­mée Sugar, pour pro­poser des fonc­tions basiques adap­tés aux spé­ci­ficités de la machine et de ses futurs util­isa­teurs. Inutile de pré­ciser le rap­port de l’école avec cette prob­lé­ma­tique du design.

> Lire la suite…

Les élèves de 3e année Nina Bah­soun, Agathe Bou­va­chon, Clara Bus­son, Vanessa Jouillerot, Rémy Lou­vard, Sarah Poletti, Julia Robert et ceux de 4e année Dora Borst-Jouan, Guil­laume Bulete, Tyan Yong Tao et Cao Jing ont effec­tué le tra­vail de con­cep­tion et réal­i­sa­tion du DVD de la Semaine folle/Crazy week édition 2007.
Ce tra­vail touche à sa fin, vous pour­rez en avoir un aperçu sur l’image ci-contre (Cliquez pour agrandir) sur laque­lle fig­urent presque tout les éléments. Les étudi­ants ont fait preuve d’initative pour pro­poser une inter­pré­ta­tion vidéo-graphique sur des ate­liers de type instal­la­tions ou per­for­mances dont la resti­tu­tion n’était matérielle­ment ou con­ceptuelle­ment pas évidente.

L’identité visuelle de cette édition 2007 repose sur des prises de vues réelles. Pliage, dépliage, assem­blage, super­po­si­tion, tout est mis en scène à par­tir de feuille de for­mat A4 aux couleurs bureau­tique. Chaque écran d’introduction inter­prète de cette manière le sujet de l’atelier qui suit.
Le tra­vail sur les ate­liers est égale­ment con­séquent : Les films pro­duits met­tent en scène les déroule­ments des ate­liers durant la semaine folle ou s’inspirent de leurs thé­ma­tiques pour pro­poser un mon­tage orig­i­nal per­me­t­tant d’en saisir la teneur :

Pour Votre intérieur idéal mange­able (ate­lier de Kiki Van Eijk), Les étudi­ants ont choisi de rester dans la référence « bureau­tique » asso­cié à la cui­sine en util­isant les codes d’un classeur de fiche qu’on feuil­lete. Pour L’important, c’est d’essayer (ate­lier de Fab­rice Lam­bert), l’accent a été mis sur le film du spec­ta­cle lui même, remonté pour se focaliser sur des éléments par­ti­c­uliers.
No way (ate­lier de Christophe Le Gac),  pro­pose un mon­tage énig­ma­tique, à la manière du film qui a servi de trame à l’atelier  : Lost High­way, de David Lynch. Odora­max (ate­lier de Boris Raux) pro­pose une vision simul­tanée des pré­parat­ifs et de la per­for­mance de l’atelier. Abstract hack­tivism (ate­lier de Otto Von Bush) reprends le car­ac­tère sub­ver­sif de l’atelier pour présen­ter cer­taines des réal­i­sa­tions ou con­cept qui y ont été étudiés.
Son titre (ate­lier de Pas­cal Bat­tus) appose des ani­ma­tions graphiques pour val­oriser la bande son des images tournées lors de la per­for­mance de l’atelier. Carto(o)ns (ate­lier de Ilka Hem­ing) pro­pose de par­courir une planche de BD type Comics dans la lignée des instal­la­tions vues lors de la semaine folle. Design­ing the for­bid­den (ate­lier de HeHe) pro­pose un mon­tage de scènes tournées lors des mul­ti­ples instal­la­tions ayant pris place dans la ville durant l’évenement.
Pour Entrée dou­ble slash (ate­lier de Vin­cent Delpeux), les étudi­ants ont choisi un mon­tage d’images alternées de type caméra de sur­veil­lance pour évoquer la lec­ture dis­con­tinue de l’action et l’effet de sur­prise. Enfin, sur Pein­ture, design, abstrac­tion déco­ra­tive (ate­lier de Damien de Roubaix), on par­court en détail les dessins et pein­tures réal­isées lors de l’atelier à la façon de Palettes.

Les étudi­ants de 4e année tra­vail­lent actuelle­ment à la mas­ter­i­sa­tion du DVD : le pack­ag­ing est égale­ment en voie de final­i­sa­tion (et sera bien­tôt présenté ici).
À suivre…

Bravo aux étudi­ants pour l’organisation du rendu qui s’est déroulé comme con­venu en salle 202. La journée (longue) a per­mis de démon­trer que la nature indéfinie de la resti­tu­tion du pro­jet n’en était pas pour autant informelle. Les accrochages étaient de qual­ité et ont été eux-même sujet d’un tra­vail plas­tique.
Le sujet était ambitieux dans la mesure où sa réponse était à définir au fur et à mesure de l’avancement dans le pro­jet. Cha­cun devait donc, à la manière d’un pro­jet per­son­nel, le diriger à sa façon. Cer­tains ont eu plus de facil­ités que d’autres à le faire, par­venant à maîtriser leur pro­pos mal­gré un avance­ment à tâtons. D’autres ont eu plus de dif­fi­cultés à tirer un pro­pos clair et une direc­tion du sup­port image qu’ils avaient choisi.
Aussi la par­tic­i­pa­tion, certes per­fectible, du groupe à la présen­ta­tion du rendu de cha­cun per­me­t­tra, je l’espère, à ceux ayant eu des dif­fi­cultés, de mieux cerner les champs d’ouvertures pos­si­ble à leur réponse.

Pour l’ensemble, l’obligation de com­poser du texte et d’organiser des éléments pic­turaux a for­cé­ment per­mis de tra­vailler graphique­ment. On mesure là l’influence du sup­port papier qui con­tinu de dicter la com­po­si­tion. Ce qui reste nor­mal en 2e année et je dirais même que de ce point de vue graphique, il y avait beau­coup de qual­ité.
D’une façon générale, il est clair que la prob­lé­ma­tique d’une com­po­si­tion graphique har­monieuse par un usage hiérar­chisé de la typogra­phie est inté­grée. Reste désor­mais à porter cette cul­ture du visuel « fixe » sur un écran, avec des notions de médias mul­ti­ples (image, son, mou­ve­ment) et d’interactivité : de design de la manip­u­la­tion de ces médias. Ce que cer­tains pro­jets ont très juste­ment ques­tionné. Il en ressort donc qu’il faut enrichir les con­nais­sances du mul­ti­mé­dia, en terme d’histoire, de con­cepts, etc. L’école fait ce qu’elle peut de son côté, il faut pour­suivre les efforts indi­vidu­elle­ment. Les livres con­cer­nant le domaine ne man­quent pas, ceux qui sont per­ti­nents ne sont pas for­cé­ment acces­si­bles et sou­vent en anglais (Peut-être y remédierez-vous plus tard). Le web est donc le vecteur de cul­ture de l’objet inter­ac­tif le plus acces­si­ble. Par chance il est un des plus riches, en tant que source et en tant qu’objet en soi.
En effet, pop­u­lar­isé depuis plus de dix ans, le web est devenu un véri­ta­ble ter­rain de design d’interfaces pour explorer les pos­si­bil­ités d’interactions avec des médias. Le logi­ciel Flash, notam­ment, a rendu plus acces­si­ble cette pra­tique que les autres sup­ports type jeux, logi­ciels ou sys­tèmes d’exploitations.

Ce sujet était une entrée en matière, un peu ardue, de ce qu’est fon­da­men­tale­ment le design mul­ti­mé­dia : du design d’information. Ce design réside en un objet inter­ac­tif con­sti­tué d’un con­tenu (pas néces­saire­ment vis­i­ble simul­tané­ment) et d’une inter­face (qui sert à manip­uler, afficher, etc. ce con­tenu). La ques­tion cen­trale de tout tra­vail de com­mu­ni­ca­tion reste le même : faire passer son mes­sage et tra­vailler le design que revêt sa forme. Il est donc tou­jours impor­tant de bien définir ce que l’on veut dire ou mon­trer et de tra­vailler chaque détail pour servir ce pro­pos ; tant les aspects visuels que les aspects scéno­graphiques ou fonc­tion­nels. Cer­tains ont donc bien exploré la manip­u­la­tion des éléments à l’écran sur leur pro­jet ou ont réfléchi à la nature con­ceptuelle de leur inter­face en rela­tion avec cer­tains con­cepts actuels du Web, félicitations.

J’espère donc que cette intro­duc­tion aux prob­lé­ma­tiques de design inter­ac­tif vous amèn­era à porter cette réflex­ion sur l’ensemble de vos pro­jets, du point de vue de leur com­mu­ni­ca­tion et/ou, mieux, de vous voir directe­ment pousser cette explo­ration en 3e année graphisme et multimédia.

Ci-dessous, un aperçu de cer­tains pro­jets présen­tés, par ordre d’apparition : Chris­telle Sajas (1 et 2) ; Adrien Petrucci (3 et 4) ; Laure Strom­boni (5, 6 et 7) ; Con­stance Laisne (8 à 14) ; Olivier Cortès (15, 16 et 17) ; Char­lène Bois­tault (18 et 19) ; Gas­pard Graulich (20) ; Fleur Lecoester (21) ; Emmanuelle Goutal (22) ; Mar­ion Frébourg (23 et 24) ; Claire Bau­d­ri­mont (25 et 26) ; Louise-Clémence Gre­nier (27 et 28) ; Geof­froy Gillant ( 29 et 30).

Merci aux étudi­ants (présen­tés ici ainsi qu’aux autres — dont les pro­jets n’en étaient pas moins intéres­sants), leur nom appa­raît en légende d’image au sur­vol de la souris.

Vous vous sou­venez peut-être de ce site, Don’t click it, que nous avions con­sulté lors d’un cours, où il s’agit de nav­iguer sans effectuer un seul clic, rem­placé par le roll-over (ou sur­vol) de la souris. Il per­met de rap­peler à quel point l’usage de la souris est devenu intu­itif ; au point qu’appuyer sur le bou­ton est devenu un réflexe con­di­tionné dif­fi­cile à éviter.

Appro­fondis­sons notre réflex­ion sur la notion de curseur de la souris. Le curseur est la trans­po­si­tion de notre main dans l’interface du bureau virtuel. Il peut revêtir l’aspect de mul­ti­ples out­ils vir­tu­al­isés (flèche, crayon, pot de pein­ture, etc.) allant jusqu’à la représen­ta­tion de notre main (main au doigt pointant sur un lien, etc.).
Ce site, Jaar­van­dek­leuter, vous pro­pose de retrou­ver l’usage d’une main dans l’écran. C’est assez bien fait mais ça per­met de se ren­dre compte de la richesse du tra­di­tion­nel curseur dont la poly­va­lence sem­ble moins épuis­able qu’un couteau suisse.

Lorsqu’un designer conçoit un objet, il le pense jusque dans sa per­cep­tion tac­tile. Les effets de matière, de struc­ture à manip­uler sont autant de facettes de sa créa­tion. En mul­ti­mé­dia, nous créons égale­ment des objets : que ce soit des menus à tirer, des bou­tons à enfon­cer, des icônes à saisir, glisser, déposer, des zones à détourer, etc. Toutes ses manip­u­la­tions sont trans­posée virtuelle­ment mais leur sens est bien main­tenu et nous avons réelle­ment l’impression de saisir et déposer des icônes dans une fenêtre de dossier, de gom­mer, tourner, étirer des objets.

Pour autant, si nous avons réussi à sym­bol­iser, à « iconi­fier » avec pré­ci­sion ces manip­u­la­tions, nous avons très peu d’exemple de tra­vail sur le sens tac­tile ou la ges­tion de l’inertie. Pour­tant nos bureaux virtuels que ce soit Win­dows, MacOS ou Linux rivalisent d’effets de vol­ume, de plans, de lis­sage, de matières mais la manip­u­la­tion reste tou­jours la même. Il pour­rait pour­tant être intéres­sant d’adjoindre la notion de toucher au design graphique et ergonomique d’un objet virtuel. La pre­mière appli­ca­tion de ce genre de réflex­ion serait de per­me­t­tre la représen­ta­tion, via l’écran, d’objets réels. Plus loin, on pour­rait con­cevoir une inter­face avec des par­tic­u­lar­ités tac­tiles directe­ment inté­grées à l’ergonomie de son util­i­sa­tion.
Cela con­sis­terait à réfléchir au com­porte­ment du curseur de la souris lors du pas­sage sur des zones (entrée et sor­tie, pas­sage lent, rapide, autre ?) ou lors du clic sur le bou­ton (double-clic ? clic long ?). le curseur pour­rait avoir un poids, être aimanté, avoir une force d’inertie, etc.

C’est ce que Pow­er­Cur­sor vous pro­pose d’explorer en reper­to­ri­ant sur cette page divers exem­ples de manip­u­la­tions virtuelles, plus ou moins réussies. Pour les plus ent­hou­si­astes, les sources Flash de ces exem­ples sont télécharge­ables libre­ment sur la même page.

Et pour­tant, tout ceci n’est pas nou­veau. Ceux qui ont un peu de cul­ture sur le jeu vidéo con­nais­sent peut-être ces célèbres jeux que sont Mar­ble Mad­ness ou Spin­dizzy (autre source) qui, déjà il y à vingt-quatre ans, explo­rait la notion d’inertie virtuelle… mieux vaut tard que jamais pour se pencher sur la ques­tion (ou recon­sid­érer l’influence du jeu vidéo sur toute les pra­tiques du design lié aux nou­velles technologies).

Dans tous les cas, ce type de réflex­ion est au cen­tre de l’apprentissage du mul­ti­mé­dia (ou design mul­ti­mé­dia, ou encore « design », tout court).

Je ne le dis pas pour rien. De nom­breux opéra­teurs de télé­phonie com­men­cent à inté­grer de la recherche & développe­ment en terme de design d’interface graphique. Réce­ment, Édouard Waut­tier, ancien étudi­ant de l’ESAD inté­grait les lab­o­ra­toires d’Orange. Les indus­triels de la télé­phonie sont désor­mais con­va­in­cus que le design des appareils ne con­cerne plus seule­ment l’apparence de leur coques. Exem­ple notable, les design­ers de Team­Lab, en col­lab­o­ra­tion avec KDDI, deux­ième opéra­teur de télé­phonie en asie, lan­cent un con­cept d’interface de télé­phone d’un genre nou­veau : Au lieu de l’éternel fond d’écran et icones, on trouve un envi­ron­nement réac­tif et autonome, à la manière des Tamagochis.

Inti­t­ulé Act­Face, le pro­jet pro­pose des univers thé­ma­tiques dif­férents. l’univers de l’interface du télé­phone évolue en fonc­tion de son util­i­sa­tion. Des plantes vont pousser durant un appel télé­phonique, un quartier de ville dess­inée au pixel va s’agiter lors du cap­tage d’un réseau, les con­tacts du car­net d’adresse vont se promener dans les rues, etc.
(Sources : L’atelier)

Bien sûr Je ne peux m’empêcher de rap­peler que ce nou­veau genre d’application du design graphique et inter­ac­tif prends sa source encore une fois dans le jeu vidéo puisqu’on pou­vait voir ce genre d’interaction entre jeu et bureau­tique dans le jeu Black & White. Il serait peut-être intéres­sant de con­sid­érer l’importance du jeu vidéo comme source d’inspiration d’usages pour des out­ils de demain…