InterfacesRiches.fr

Normalement sur ce blog je ne traite que des sites web et applications proposant des interfaces enrichies (donc qui font plus qu’afficher du texte et des images), mais je souhaiterais aujourd’hui sortir de ce cadre et vous faire découvrir un concept d’interface transparente pour ebooks : Text 2.0. Par interface transparente, je fais référence à une interface invisible (pas de menu, de boutons ou d’icônes) qui serait pilotée par le regard :

Ce concept nécessite donc le recours à une webcam placée au dessous de l’écran qui capterait le regard de l’utilisateur et permettrait de déclencher des actions selon des comportements définis à l’avance.

Prototype de ebook utilisant une interface transparente

Par exemple si un lecteur s’attarde sur un mot, sa définition est affichée dans une bulle :

La définition d'un mot affichée si le regard est fixe

De même, si un lecteur se contente de survoler le texte et de lire en diagonale, l’interface va masquer la majorité des mots pour mettre en évidence ceux qui ont le plus d’importance d’un point de vue sémantique :

Masquage des mots superflus par faciliter le survol d'un texte

Fonctionnalité bonus, si un lecteur prend le livre électronique en main et parcours la page de façon chaotique (il cherche sa ligne), l’interface affiche une petite flèche pour l’aider à reprendre sa lecture là où il l’avait laissée : :

L'interface qui vous aide à retrouver votre ligne

Magie ? Non, technologie. Ici le concept est poussé à l’extrême, mais il serait tout à fait possible de proposer ces fonctionnalités en complément de menus et boutons (recherche, accès à l’index…). L’idée serait alors d’assister l’utilisateur dans son quotidien ou plutôt de modifier légèrement le protocole d’interaction pour lui simplifier la vie. En tout la plus-valeur d’une telle interface justifie largement l’implémentation d’une webcam dans un ebook (c’est tout de meme plus discret qu’une EyeSeeCam !).

(via Wired)

Vous connaissez iTunes ? Vous connaissez les comics ? Alors vous adorerez Graphic.ly, un lecteur de comics numériques. En fait ce n’est pas tant un lecteur qu’une plateforme, car Graphic.ly ambitionne d’être aux comics ce qu’iTunes est aux chansons : Une plateforme complète pour consulter, gérer, acheter et même sociabiliser.

Il vous faut donc télécharger l’application (qui tourne sur AIR) et créer un compte. Vous accédez alors à l’écran d’accueil qui est subtil mélange de Twitter (pour le flux d’activités), de l’App Store (pour les meilleures ventes) et de l’Adobe Media Player (pour le côté sobre et élégant de l’interface) :

Le basculement entre les écrans est très fluide et l’on trouve tout de suite ses repères, notamment dans la boutique qui est un modèle de sobriété :

Là où ça devient intéressant, c’est dans la partie News où vous pouvez consulter différents flux RSS de blogs dédiés aux comics mais dans l’environnement de l’application (mêmes couleurs, typos…). Le résultat est très plaisant et donne réellement la sensation d’être dans un espace protégé (sans pub ou agressions visuelles) :

La lecture des comics en eux-même se fait en mode plein écran avec différentes possibilités de visualisation et notamment la vue par défaut qui affiche une double page en grisée et fait un zoom sur la case en cours de lecture (navigation au clavier) :

La visualisation en plein écran dans Graphic.ly

Il y a aussi un mode de lecture plus classique où l’on peut également consulter les commentaires laissés par vos amis ou la communauté :

La visualisation des commentaires dans Graphic.ly

Nous avons donc au final une application tout à fait remarquable car elle garantie une expérience utilisateur de très haut niveau dans un environnement parfaitement maîtrisé. Le fait d’intégrer un lecteur de flux RSS de même que des fonctions sociales (profil, liste d’amis, messagerie interne…) plonge l’utilisateur dans une petite bulle de bonheur (sous réserve que vous appréciez les comics).

Finalement est-ce ça l’avenir des contenus numériques ? Peut-être… En tout cas l’expérience est tout à fait plaisante et la possibilité de pouvoir accéder à sa collection quelque soit le support (c’est tout l’intérêt de AIR) est un plus indéniable pour celles et ceux qui n’aiment pas voir s’entasser les comics dans une bibliothèque.

Reste à trancher LA question : Est-ce que l’iPad ne serait pas le support idéal pour ce genre d’application ? Si, bien sûr que si. Mais ça n’arrivera pas pour les raisons que vous connaissez (il va falloir attendre la sortie de la version spécifique à l’iPad – PanelFly est déjà sur le coup). Je me demande également comment ce type d’application pourrait voir le jour sur des ebooks… en théorie Amazon s’apprête à lancer une App Marketplace pour son Kindle donc nous devrions y retrouver cette application (reste à régler les problèmes de droits et de partage des revenus).

Au final il ne manque qu’une seule chose à cette application : Du son ! Autant il faut vraiment être fan pour acheter les comics tels qu’ils sont vendus sur la boutique (après tout ce ne sont que des PDF), autant en y ajoutant du son et des voix le produit prendrait carrément plus de valeur, quitte à augmenter le prix (cf. la très concluante expérience menée avec Megalex).

J’ai déjà eu l’occasion de vous parler des rich internet games, mais je ne crois pas avoir abordé le cas des jeux utilisant uniquement HTML et javascript. Il y avait déjà un certain nombre d’expérimentations (à l’image du JS-Wars sur Chrome Experiments) mais deux projets récents me font dire que l’idée n’est pas si folle.

Il y a tout d’abord Akihabara, un framework permettant de développer des jeux à l’ambiance très rétro à l’aide de différentes librairies. Le résultat est surprenant mais fonctionne parfaitement comme en témoignent les démos (ne pas appuyer sur “a” mais sur la touche “z”), Leave Me Alone un jeu de plateformes :

Exemple de jeux de plateforme avec Akihabara

Solitude, un Shoot’Em Up :

Exemple de Shoot'Em Up avec Akihabara

Ou encore Capman, un clone de Pac-Man :

Exemple de Pac-Man avec Akihabara

Quel est l’intérêt de réaliser des jeux en HTML5 ? La portabilité tout simplement ! Car même si ces jeux ne fonctionnent que sur les navigateurs récents (donc pas sur IE), ils fonctionnent très bien sur les smartphones iPhone ou Android. Certainement pas de quoi faire trembler les gros éditeurs comme Gameloft ou ngmoco, mais de quoi réfléchir avant de se lancer dans le développement d’applications pour des types de jeux ne nécessitant pas de grosses ressources comme les RPG textuels.

Autre exemple avec le Aves Engine, un framework de développement avec un solide couche métier : Aves, HTML5 Game Engine with Social Built In.

De la 2,5D en HTML5 avec le Aves Engine

Le moteur du framework gère de façon native les cartes en 3D isométrique, la gestion de collisions… Pas de démo jouable pour le moment mais une vidéo très impressionnante :

Là encore l’idée n’est pas révolutionner le marché du jour au lendemain (pour cela je m’intéresserais plutôt au futur Unity 3) mais plutôt de réfléchir au recours systématique à Flash. Peut-être que le déploiement de certaines catégories de jeux comme les Point & Click pourraient être facilité avec ce type de framework.

Encore une fois je ne suis pas en train d’annoncer la fin de Flash au profit d’HTML5 mais plutôt le début d’une refléxion sur une approche low tech du jeu en ligne. À suivre…

MàJ (02/07/2010) : L’éditeur allemand Dextrose vient de racheter l’Aves Engine pour construire le premier moteur de jeu complet en HTML5 (cf. Dextrose, the browser-based game engine, acquires Effect Games).

Connaissez-vous EnglishCentral ? Il s’agit d’un service en ligne d’auto-apprentissage de l’anglais. En gros ils proposent des vidéos d’actualité avec sous-titres, chapitrage et exercices :

Le player vidéo d'EnglishCentral et son chapitrage

Le player vidéo est plutôt bien fait avec une timeline chapitrée, un fonction text-to-speech au survol de la souris sur les sous-titres et la possibilité de s’exercer en enregistrant sa voix à chaque phrase (ce qui permet de gagner des points).

Mais le plus intéressant est cette incroyable fonction de playback audio ralenti de la phrase entière :

Le playback audio en ralenti

En cliquant sur le lien “Hear line slowed down“, vous pouvez réécouter la phrase à une vitesse deux fois moindre sans toutefois altérer la qualité sonore ou le rythme. Je ne sais pas trop comment ils font ça (certainement en échantillonnant et en dupliquant des boucles d’1/10 de seconde) mais le résultat est stupéfiant.

Qui pourrait me dire s’il existe des technologies ou des composants Flash pour faire quelque chose d’équivalent ?

Alors qu’il reste un peu moins d’un mois à attendre pour découvrir Avatar, le dernier film de James Cameron, je vous propose de vous plonger un peu plus en détail dans l’univers très riche du film (lire à ce sujet l’article de Wired) avec leur toute nouvelle bande annonce interactive : Official Avatar Interactive Trailer Powered by Adobe AIR. Il s’agit en fait d’une application propulsée par AIR qui vous permet de lire une bande annonce “augmentée” de nombreux détails sur les personnages ou les équipements du film :

La bande annonce interactive de Avatar

Bon OK ce n’est pas vraiment le premier film interactif, mais je trouve que de repackager la bande annonce avec des “hot spots” et tout un tas de news en provenance de Twitter, YouTube, FlickR… est plutôt une bonne idée. Disons que l’ensemble est très efficace, idéal pour faire patienter les fans. Et pour celles et ceux que ça branche, ne ratez sou aucun prétexte le site dédié aux produits dérivés du film et notamment les cartes en réalité augmentée : Avatar i-Tag.

(via Mashable)

Choisir un vin est un processus compliqué et particulièrement intimidant, surtout pour un étranger. Voilà pourquoi le site Aromicon vous propose un moteur de recherche permettant de choisir par arôme, plats… Mais ils proposent surtout une représentation visuelle des arômes se mélangeant dans le verre (ici un Riesling) :

Les arômes du Riesling

Sur chaque fiche sont ainsi consignés les arômes ainsi que les plats conseillés pour pouvoir naviguer par facettes. Sur l’animation se trouvent également des icônes pour désigner la teneur en sucre (idéale quand vous ne parlez par allemand).

La fiche d'un Muscadet

Voici donc un très beau site avec une recherche et une représentation visuelle tout à fait intéressante.

Un vin italien aux épices

À quand un Wine Configurator en 3D ?

(via Springwise)

Il existait déjà des exemples de navigation dans un site grâce à votre webcam et même à l’aide de l’accéléromètre (La souris est-elle ringarde ?), mais Andreas Lutz va plus loin en proposant les deux : vous naviguez en énonçant à voix haute les intitulés des rubriques et vous parcourez le contenu en faisant des gestes devant votre webcam.

Démonstration vidéo :

Bon dans les faits c’est un peu plus compliqué car même si la détection de mouvement fonctionne bien, la capture audio est beaucoup trop faible pour être exploitable (et il n’existe pas de “solution de secours” comme un menu caché).

La navigation visuelle sur le site d'Andrea Lutz

Quel dommage que cet essai soit à moitié transformé car ceci préfigure une authentique révolution dans la façon d’interagir avec du contenu et surtout dans les capacité immersives d’un site (pouvant ainsi se transformer en une véritable expérience ludique). Connaissez-vous d’autres initiatives de ce type ?

(via Fubiz)

Vous connaissez les documentaires à la télé, vous connaissez les livres dont vous êtes le héros, alors vous allez forcément apprécier ce web-documentaire : L’obésité est-elle une fatalité ?

La page de démarrage du web-documentaire sur l'obésité

Selon les promoteurs (Honkytonk Films et Curiosphere.tv), ce nouveau format place l’internaute au cœur du documentaire et luis permet de choisir son parcours, de conduire ses propres interviews. Autant le dire tout de suite : c’est une véritable réussite car l’immersion est très bien restituée et le minutage est parfait pour maintenir votre attention.

Dans les fait, ce web-documentaire est un mélange de séquences vidéo et d’animations Flash (avec photos en pleine largeur d’écran messages qui défilent et fond sonore). Sur la capture d’écran suivante, il est possible d’avoir plus de détails en cliquant sur le bouton “Plus d’infos” en bas à gauche :

Une séquence du web-documentaire

Des chiffres-clés sont affichés en sur-impression de temps en temps. À la fin de chaque séquence (qui peuvent être esquivées) on vous propose un choix vers la ou le séquence suivantes (ici en bas à droite) :

Un embranchement dans la narration

Les interviews sont en fait des extraits sonores avec des sous-titres si elles sont en langues étrangères :

Le déroulement d'une interview

Rien à redire, cette nouvelle forme de narration vous plonge de façon spectaculaire au cœur du récit, vous pouvez même décidez de l’ordre des séquences en accédant au menu.

Après “Voyage au bout du charbon“, le réalisateur (Samuel Bollendorff) nous prouve qu’il est tout à fait possible de mélanger ces deux supports (le reportage TV et les contenus interactifs) dans un tout cohérent. Pour le moment ces réalisations sont engagées mais j’attends de voir à quoi pourrait ressembler une fiction interactive à regarder sur son touchbook au coin du feu.

Bien évidement vous pourriez me dire que depuis les CD-Rom il n’y a rien de neuf, et je vous répondrait que si justement il y a du neuf : le problème de la distribution est résolu. De même que celui de l’évolution, il serait ainsi tout à fait possible d’enrichir un documentaire au fur et à mesure : un budget limité pour tester l’appétence de l’audience et des compléments produits au fur et à mesure.

Par contre la question qui reste en suspend est la suivante : Comment insérer dans ce tableau les annonceurs ? Peut-être sous forme d’encarts ou d’interstitiels…

Connaissez-vous le Pixel Art ? Mais si enfin, ces fameuses compositions numériques réalisées pixel par pixel. Mélangez cela à de la 3D et vous obtenez de la 3D Pixel Art. Comme son nom l’indique, la 3D Pixel Art est un art. Et comme dans toute création artistique, il faut les outils adaptés.

Il existe déjà des éditeurs en ligne comme Cubescape mais ces derniers ne vous facilitent pas la tâche car le vue est figée :

Une composition 3D en Pixel Art réalisée avec CubeScape

Heureusement les équipes de l’agence japonaise Kyucon nous propose Q-Block, un éditeur 3D Pixel Art qui utilise PaperVision3D :

L'édition de 3D Pixel Art dans Q-Block

L’intérêt de cet outil est de pouvoir éditer un objet 3D en le faisant tourner dans tous les sens. Bon OK mes réalisations peuvent difficilement être qualifiées d’artistiques mais il y a de belles choses dans la galerie :

Exemple de réalisation avec Q-Block

Par contre les objets 3D ne sont pas animés. Mais avec un peu de travail c’est tout à fiat faisable comme le propose les équipe de Neuro et leur 3D Pixel Fun :

Animation en 3D Pixel Art

Et puisque l’on parle de 3D et de PaperVision, avez-vous visitez le site de la nouvelle agence de Carlos Ulloa (Hello Enjoy) ? Il ne s’y passe pas grand chose mais vous pouvez jouer avec les lettres pendant des heures :

Jouez à casser les lettres du logo du site Hello Enjoy

Bref, tout ça pour dire que je suis plus qu’impatient de découvrir les nouveautés 3D dans Flash qui vont certainement nous être présentées au MAX de la semaine prochaine…

En ce moment c’est la rentrée pour les séries US, de ce fait c’est également la rentrée pour les régies publicitaires des chaines qui diffusent les séries. Il est donc important pour elles de communiquer sur les nouvelles créations ou les nouvelles saisons. En plus des différents dispositifs de teasing habituels, HBO propose un dispositif tout à fait original : HBO Imagine.

Le concept de ce site est de développer votre imaginaire et de faire travailler vos neurones. Pour cela ce mini-site vous propose de visionner une série de courts-métrages à plusieurs niveaux de lecture (il faut le voir plusieurs fois et sous différents angles pour connaitre le fin mot de l’histoire). Les différents angles des caméras de ces courts-métrages sont ainsi “projetés” sur des cubes qu’il est possible de faire pivoter pour voir deux angles en même temps :

Le cube en vidéos de HBO Imagine

En plus de ces courts-métrages, il est également possible d’explorer des contenus additionnels (articles, photos, vidéos…) qui viennent enrichir l’histoire et vous permettent de comprendre encore mieux la scène. La navigation au sein de ces suppléments se fait à l’aide d’une représentation spatialisée façon mind map :

Le mind mapping de HBO Imagine

Et pour vous aider dans la compréhension ils fournissent même une carte pour relier les contenus entre eux :

La carte de correspondance des contenus de HBO Imagine

J’adorerais que les films en DVD fournissent des bonus de ce type ainsi qu’un grand schéma pour tout comprendre l’histoire (par exemple pour un film comme Memento).

Même si le mini-site est long à charger et lourd à manipuler, je ne peux que reconnaître la richesse et l’ingéniosité des courts-métrages ainsi que la qualité de la réalisation. Plus d’infos ici : HBO Teases New Season With Teddy Bears.