Dexu très belles réalisations pour Got Milk

Got Milk? est une vaste campagne lancée par la filière laitière US afin d’inciter les jeunes à consommer plus de lait. Qui dit “jeunes” dit “sites de jeunes”. Je souhaiterais donc vous présenter ce matin deux très belles réalisations de cette campagne.

Il y a tout d’abord le site principal Got Milk? qui propose une interface exploratoire très originale :

GotMilk_home.jpg
La page d'accueil de Got Milk?

Cette scène est animée et sonorisée de façon à bien concentrer l’attention des internautes. En cliquant sur les différents animaux vous accédez à des mini-jeux :

GotMilk_Game.jpg
Un mini-jeu dans Got Milk?

L’idée est de mettre en scène les qualités nutritive du lait. Autre exemple ici :

GotMilk_Game2.jpg
Un autre mini-jeu dans Got Milk?

À chaque fois la réalisation est très soignée et le look & feel particulièrement original.

Autre réalisation avec Brittlelactica (pas tout à fait lancée il me semble). Cette campagne met en scène un système solaire où les habitants souffrent de graves carences alimentaires (normal, ils ne boivent pas de lait) :

Brittlelactica_System.jpg
Le système solaire de Brittlelactica

En cliquant sur la planète principale (Brittlelactica), vous pouvez accéder à son histoire set surtout aux quatres factions qui règnent sur la planète (ici, l’impératrice des Papau Hairthinny) :

Brittlelactica_Planet.jpg
Une des factions vivant sur Brittlelactica

Chacune des ces factions est en lutte pour dominer cette planète et envoient ainsi une expédition sur Terre pour connaître le secret de la bonne santé de ses habitants (nous). Les aventures de ce corps expéditionnaire sont à suivre dans une série de vidéos :

Brittlelactica_Video.jpg
Les vidéos disponibles sur le site Brittlelactica

L’expédition en question a même réussi à capturer et ramener un spécimen de vache terrienne avec laquelle ils essayent de communiquer au travers de cette interface :

Brittlelactica_Dairy.jpg
L'interface qui permet de dialoguer avec une vache

Il y a donc de très claires références aux séries SF comme Battlestar Galactica mais je ne peux qu’applaudir la qualité de la réalisation et l’originalité de l’histoire.

Pour résumer : des interfaces riches au service d’ambiances très réussies pour un branding performant. Du grand art de la part de l’agence North Kingdom dont j’ai déjà parlé de nombreuses réalisations (et notament le fameux Vodafone Future Vision).

200 millions d’installations pour Adobe AIR

Voilà moins d’un an et demi que la technologie de Rich Desktop Application d’Adobe est sortie et AIR a déjà dépassé les 200 millions d’installations : Adobe AIR now installed over 200 millions times. Un nombre tout à fait intéressant, surtout lorsque l’on sait que le rythme d’installation accélère (100 millions sur les 6 derniers mois).

Bien évidement les utilisateurs n’installent pas AIR pour le plaisir ou l’exploit technique, ce sont donc les applications qui tirent le déploiement. Au palmarès des applications les plus populaires nous retrouvons le pionnier eBay Desktop ainsi que les social softwares comme TweetDeck ou Seesmic Desktop.

ebay_desktop.jpg
La version desktop d'eBay

Il y a également les applications proposées par les médias traditionnels comme le BBC iPlayer ou le NYTimes Reader.

TimesReader.jpg
Le NY Times sur votre bureau

On retrouve enfin des applications plus “critiques” comme SocialTexet Desktop ou celles exploitant des ERP (SalesForce, Oracle ou SAP) ou encore cette assistant pour payer ces impôts en ligne en Pologne.

Socialtext_desktop.jpg
La version desktop de SocialText

Autre application critique, cette incroyable interface servant à piloter un robot de combat :

gator.jpg
L'interface de pilotage d'un robot de combat

Pour la petite histoire, le robot en question tourne sous Linux et embarque une mitrailleuse de calibre 50, elle se pilote à l’aide d’une manette de Xbox 360 (les jeunes recrues y étant particulièrement bien habituées). Plus d’infos ici : Adobe AIR driving the military of tomorrow.

Outre les bons chiffres de déploiement de AIR, je m’intéresse plus particulièrement aux applications payantes. Le cas du NY Times Reader est ainsi représentatif du modèle économique qu’il peut y avoir derrière une RDA payante : abonnement de 15$/mois pour un accès illimité aux contenus (récents et archives), consultation hors-ligne et lisibilité améliorée grâce au Text Layout Framework. Il existe une version gratuite mais limitée qui permet de faire découvrir les fonctionnalités et de tester le reader. Plus d’infos ici : NY Times Desktop Reader Gest a Makeover.

Autre exemple avec Pandora One Desktop, l’extension applicative du service de recommandations affinitaires de musique : une version gratuite mais limitée et une version payante à 3$/mois proposant une meilleure qualité d’écoute, le retrait des publicités et une diffusion quasi-illimitée. Plus d’infos ici : The Freemium Model And A Desktop App Get The Thumbs Up With Pandora One.

pandora_one.jpg
La verison payante de Pandora

Ces deux exemples me confortent dans l’idée que le potentiel marchand d’une application (sa capacité à générer du C.A.) n’est pas fonction de sa sophistication (le nombre de fonctionnalités) ou de sa puissance (le nombre de données qu’elle est capable de traiter) mais plutôt de la qualité du service rendu. Et en ce sens, une plateforme de déploiement comme AIR n’est pas un frein : Le NY Times Reader ou TweetDeck ne sont pas mal considérées sous prétexte qu’elle ne sont pas développées en C++ ou qu’elle ne pèsent pas 800 Mo.

Spezify, un nouveau moteur de recherche visuelle

Après SearchMe et SearchCube , voici  Spezify, un nouveau moteur de recherche visuelle en flash.

Dès la page d’accueil de Spezify vous pouvez constatez que la case de recherche s’ajuste selon les mots que vous inscrivez.

Contrairement à SearchMe et SearchCube , dont les résultats s’affichent en Cover Flow et en cube, les résultats de recherche sont présentés sur une page de façon mêlée  (extraits de blogs, images, vidéos, images, etc. ).  Spezify trouve les réponses de vos requêtes sur Flickr, Yahoo, Wikipedia et Twitter.

La navigation se fait en déplaçant votre souris vers les bords de la page.

Mon avis ?

Personnellement, bien que l’interface soit agréable visuellement, je trouve que le moteur de recherche Spezify est une perte de temps. Par contre, je suis certaine qu’il peut être utile pour les designers qui souhaitent s’inspirer…

Sujet à part.

Pour ceux qui s’intéresse aux nouveaux moteurs de recherches. AltSearchEngines a réalisé un top 100 des moteurs alternatifs existants. Consultez l’article A new Top 100 Alternative Search Engines list!

Qu’en pensez-vous ?

Source : (Twitter ) @orenoque et Benoit Descary

Quand la réalité augmentée nous facilite le quotidien

Il existe déjà de nombreuses applications de réalité augmentée via la webcam, mais celle dont je veux vous parler est nettement moins “gadget” que les autres (supports promotionnels enrichis). Développé par l’agence AKQA pour la poste US (United States Postal Service), ce simulateur de colis permet de choisir à l’avance la bonne taille de boîte : Priority Mail.

PriorityMail_simulator.jpg

Cette vidéo donne ainsi des explications très clair étape par étape :

Il est possible de changer la boîte et de régler la transparence pour mieux en apprécier les dimensions. Simple et efficace (à condition de posséder une webcam).

(via Graphism)

Roland-Garros en HD Smooth Streaming avec Silverlight (et dans votre intranet aussi)

En ce moment l’actualité sportive est dominée par le tournoi de Roland-Garros. Un évènement sportif comme Microsoft les aime. Microsoft ? Mais oui enfin, Microsoft qui est petit à petit en train de s’imposer sur la retransmission “live” de contenus sportifs (comme les J.O. l’été dernier). Bref, tout ça pour dire que France2 propose de suivre la compétition en streaming sur son site : Roland Garros 2009.

Roland-Garros en Smooth Streaming avec Silverlight
Roland-Garros 2009 en Smooth Streaming avec Silverlight

Là où ça devient intéressant, c’est que cette retransmission est en HD, plus précisément du 720p soit une résolution de 1280 x 720 pixels. Ceci est rendu possible grâce à la technologie Smooth Streaming de Silverlight. Une technologie très intéressante pour les événements sportifs car elle permet de moduler la résolution en fonction de la bande passante disponible (“adpative streaming“) et de faire des pauses, ralentis… Plus d’infos ici : Microsoft lance IIS Smooth Streaming qui permet de streamer en vraie HD en 1080p.

Pour ce qui est de la régie, je vous propose cet article de Clubic qui résume très bien les moyens déployés : Roland Garros en HD grâce à Silverlight.

L'architecture technique derrière le
L'architecture technique derrière le "live" de Roland-Garros 2009

Et si les compétitions sportives vous laissent de marbre mais que vous vous intéressez à Silverlight, je peux également vous recommander cet article où il est question d’un intranet médical exploitant des interfaces riches : Microsoft Health Patient Journey Demonstrator.

Exemple d'intranet
Exemple d'intranet "riche" avec Silverlight

(via JF Gomez)

De la pédagogie des mini-jeux

Vous souhaitez faire passer un message dans un contexte ludique ? Vous voulez vulgariser sans vous lancer dans des explications jargonneuses ou trop simplistes ? Alors les tutogames sont pour vous. Bon en fait j’avoue avoir inventé ce nom en contractant “tutoriel” et “advergames“. Parce que c’est bien de cela dont nous sommes en train de parler : des petits jeux très simples d’accès dont le but n’est pas de faire de la publicité mais d’expliquer.

Illustration avec le mini-site M2M de chez Orange. L’objectif de ce site est d’expliquer de façon ludique les concepts de communication “Machine-to-Machine” au travers de petits dossiers animés sur des applications concrètes (environnement, transport, logistique…).

Le mini-site M2M de chez Orange
Le mini-site M2M de chez Orange

Différents contenus et mini-jeux sont ainsi proposés pour illustrer des domaines d’application. Ici la gestion de flotte “intelligente” avec une simulation de taxis (il faut gérer les priorités et minimiser les A/R) :

La simulation de taxis chez Orange M2M
La simulation de taxis chez Orange M2M

Là un mini-jeux qui concerne les systèmes de prévention des pannes avec ce réparateur de chaudières :

Le mini-jeux de réparation de chaudières chez Orange M2M
Le mini-jeux de réparation de chaudières chez Orange M2M

La prise en main des jeux est immédiate, la réalisation soignée (qui tourne autour de la couleur orange), les transitions impeccables… bref, c’est du bon boulot.

Si vous avez d’autres exemples, n’hésitez pas à les signaler dans les commentaires.

Et on reparle des univers virtuels en 3D avec Flash

J’ai comme l’impression que les projets d’univers virtuels 3D en Flash sont les candidats idéals pour un sujet “pommier” (qui revient régulièrement, comme les feuilles des pommiers). Bref, tout ça pour dire que j’ai récemment découvert deux expérimentations très intéressantes d’univers vrituels en 3D qui e jouent dans le browser (donc sans nouveau plug-in).

Il y a tout d’abord Yogurt3D, un framework de jeu en ligne dont le rendu 3D est assuré par SwiftGL (un moteur 3D compatible avec OpenGL). La démo est très impressionnante et mérite le long temps de chargement. Pour la démo, c’est ici : Yogurt3D Demo.

Le moteur 3D de Yogurt3D
Le moteur 3D de Yogurt3D

Il y a ensuite Massiva3D, un MMORPG qui vient de rentrer en phase beta et qui repose sur la très efficace librairie Away3D. Pas de démo disponible pour le moment mais l’accent est visiblement mit sur les fonctions de communication in-game. La démo est ici : Massiva3D Demo.

Le moteur 3D de Massiva3D
Le moteur 3D de Massiva3D

Il y a enfin des tentatives de FPS comme les très bon Andagel réalisé avec Sandy 3D : Andagel an amazing 3D sci-fi game developed with Sandy3D.

Andagel, un FPS en Flash
Andagel, un FPS en Flash

Sinon nous sommes toujours en attente de projets en gestation comme Coobico ou IdentiFiction :

Premiers écrans de Coobico
Premiers écrans de Coobico
Le très attendu IdentiFiction
Le très attendu IdentiFiction

Tout ceci est vraiment très encourageant mais j’anticipe une nette évolution avec PapervisionX, la prochaine version de Papervision3D qui est en cours de réécriture pour mieux exploiter les fonctions 3D natives de Flash 10. Vivement la suite…

(via Hebiflux et Hebiflux)

Est-ce la mode du Cover Flow ?

Connaissez-vous le Cover Flow ? Mais si enfin, c’est ce mode de visualisation et de navigation de pochettes d’albums dans iTunes (originellement inventé par l’artiste Andrew Coulter Enrightpuis adpaté par un développeur indépendant et finalement racheté par Apple en 2006). Bref, Voilà maintenant plus de deux ans qu’Apple a sorti son iPhone et son fameux mode de visualisation Coverflow. Une représentation qui visiblement plaît beaucoup puisqu’on le retrouve également dans le Finder du Mac OS X.

Le cover flow dans iTunes
Le cover flow dans iTunes

Vous devinez la suite : comme à chaque fois Apple est copié et l’on retrouve donc tout une série de composants permettant de faire de la navigation en mode Cover Flow.

Avec Flash (Flash iTunes Cover Flow – Version 2) :

Le Cover Flow avec Flash
Le Cover Flow avec Flash

Avec Flex (CoverFlow Flex Component) :

Le Cover Flow avec Flex
Le Cover Flow avec Flex

avec Silverlight (CoverFlow built using Silverlight 3′s Projection feature) :

Le Cover Flow avec Silverlight
Le Cover Flow avec Silverlight

Avec Ajax (AJAX Image Gallery powered by Slideflow – like Cover Flow) :

Le Cover Flow avec Ajax
Le Cover Flow avec Ajax

Il ne manque plus qu’une version JavaFX pour que le tableau soit complet (ha non mince il manquera toujours une version Curl).

Autant je suis séduis par cette modalité d’interaction sur mon iPhone car c’est ludique de faire défiler les pochettes d’albums avec son doigt, autant transposé sur le web (ou à l’écran) ce mode de visualisation ne rime plus à rien. Le problème vient de la manipulation : avec un écran tactile c’est intuitif mais avec une souris ou un clavier ça n’a plus aucun intérêt.

N’est pas Apple qui veut, je préfère ainsi un carrousel bien réalisé plutôt qu’un Cover Flow pas inspiré. Et vous ?

La navigation Web façon Iphone, une nouvelle tendance ?

Je viens tout juste de prendre connaissance que la marque danoise de vêtements Red Issue vient de remporter un Webby award pour avoir pensée à un mode de navigation qui s’inspire de l’Iphone.

Pour naviguer sur l’interface en Flash, il faut dessiner une flèche, un rond ou encore un M.

Flèche = Image suivante ou précédente.
Rond = Zoom.
M = Menu.

Sur le plan de l’expérience utilisateur, je trouve cette exploration très intéressante. Ce type de navigation qui déclenche des actions grâce à la reconnaissance des dessins a aussi été utilisé ailleurs. Prenons par exemple l’interface du jeu  Straw Hat Samourai et  Toshiba .

Straw Hat Samourai

Grâce à la reconnaissance de forme, nous évitons les clics de souris et le clavier.

Toshiba

Pour déclencher des actions, il faut dessiner des formes. L’interface reste toutefois très lourde à charger ce qui ralentit le tracé de la souris.

Rencontrerons-nous de nouvelles interfaces Web qui détecteront la reconnaissance de forme dans les prochains mois ?

Qu’en pensez-vous ?

Source : Arnaudmeunier et Herbiflux

P.S. Je vous invite aussi à consulter l’article Immersion tactile pour Metal Gear Solid Touch sur Richcommerce.fr

Vidéo, Papervision et moteur physique pour le NASCAR sur ESPN

J’ai déjà eu l’occasion de vous parler de Papervision3D, de même que des moteurs physiques Flash, ainsi que de différentes techniques de manipulation vidéo… mais jamais des trois en même temps !

C’est ESPN, la chaîne US dédiée au sport, qui m’en donne l’occasion avec le NASCAR Results Simulator. Il s’agit d’une application en ligne permettant de simuler les résultats de la prochaine course et de participer à un concours du meilleur pronostiqueur :

Le NASCAR Results Simulator de ESPN
Le NASCAR Results Simulator de ESPN

En bon fans de RAI que vous êtes vous apprécierez cette grille en 3D temps réel (animée par la librairie Papervision3D) où il est possible de positionner les pilotes. Là où ça devient intéressant, c’est que les pilotes sont animés grâce à de la vidéo (ils bougent, font des signes de la main, parlent et s’étirent) et ils répondent aux lois de la physiques (lorsque vous les déplacez, leurs jambes et bras pendent dans le vide).

Plus impressionnant, il y a un très bel effet de profondeur de champ car les pilotes déposés en fond de grille sont plus petits :

La profondeur de champ en action sur le NASCAR Results Simulator
La profondeur de champ en action sur le NASCAR Results Simulator

Rajoutez à cela une sonorisation soignée (on entend les commentaires et les bruits de voitures en fond sonore) et vous avez une interface riche très ludique et surtout parfaitement réalisée.

(via Blitz)