Compte-rendu de la conférence Transmedia Storytelling 3.0

Comme chaque année, le gratin du web marketing se retrouve à Brie-comte-Robert pour une journée de conférences et débats sur les meilleures pratiques du marketing en ligne. L’édition 2010 était l’occasion d’inaugurer le tout nouveau convention center (chez Ginette) :

Entre le lancement imminent de l’iPad, les rumeurs autour des annonces de nouveaux services pour Facebook et le passage à l’heure d’été, l’ambiance était survoltée pour la keynote d’ouverture.

Keynote

C’est Jeffrey Porter (dont j’ai déjà parlé sur ce blog) qui a ouvert l’édition 2010 avec une intervention remarquée sur la rugosité des marques sur les applications de réalité diminuée sur touchbook :

Vous dites que vous voulez une révolution, mais tu sais nous voulons tous changer le monde ;
Vous me dites que c’est l’évolution, mais vous savez nous voulons tous changer le monde ;
Mais quand vous parlez de la destruction, ne savez-vous pas que vous pouvez compter sur moi ;
Ne savez-vous pas que tout va bien se passer, bien se passer, bien se passer ;
Tu dis que tu as une vraie solution, Eh bien vous savez nous aimerions tous voir le plan ;
Vous me demandez une contribution, Eh bien, vous savez nous faisons ce que nous pouvons ;
Mais quand vous voulez de l’argent pour les gens à l’esprit que la haine ;
Tout que je peux dire, c’est un frère que vous devez attendre ;
Ne savez-vous pas que tout va bien se passer, bien se passer, bien se passer.

Une vision radicale pour un intervenant d’exception !

Après un détour par la press room j’enchaine sur la première conférence.

How to Manage a Backside 540° Corkscrew Approach in your Media Planning?

Une session quasi-pleine pour écouter Shaun Black de l’agence con-media sur leur approche transmedia :

Tout vient à point à qui sait apprendre ;
C’est au pied du phare que l’on voit le mieux le phare ;
Un pain vaut mieux que deux fraises Tagada ;
On ne prend pas une douche avec du vinaigre ;
En partant du boulot le soir reboote ton Windows, si tu ne sait pas pourquoi, lui le sait ;
Si tu ne veux pas que les choucas t’assiègent de leurs cris, ne sois pas la boule d’un clocher ;
La célébrité, c’est l’avantage d’être connu de ceux qui ne vous connaissent pas ;
Le plus dur, ce n’est pas de devenir célèbre, C’est de retourner à l’anonymat.

Encore une fois je ne peux qu’approuver l’engagement de cette agence dans leur façon d’aborder les problèmes.

Transmedia Storytelling is the new Chatroulette

Dernière session de la journée avec Brian Johnson sur l’évolution des pratiques abusives de facturation par les stagiaires séniors des agences :

Facile de vivre, une vie sans billets de saison sur une autoroute à sens unique ;
Sans rien demander, laissez-moi être ;
Prenant tout mon stride dont la raison ont besoin, la rime n’avez pas besoin ;
N’est pas rien, je préfère ne pas en descendant, le temps parti ;
Mes amis vont trop être là, je suis sur l’autoroute de l’enfer ;
Aucun signe d’arrêt, vitesse maximale, personne ne va me ralentir ;
Comme une roue, allant le spin, personne ne va déconner avec moi ;
Hé Satan, paye donc ma cotisation pour jouer dans un groupe à bascule ;
Hé Maman, regarde-moi je suis sur le chemin vers la terre promise ;
je suis sur l’autoroute de l’enfer (ne m’arrêtez pas) je vais tout en bas.

Voilà, cette journée s’achève et comme toujours elle ne m’a pas déçue. Vivement la prochaine édition !

MIX 2010 – Jour 3

Troisième et dernier jour pour mon séjour à Las Vegas à l’occasion de la conférence MIX.

Building Multiplayer Games in Silverlight 4

Une session allégée qui devait présenter une étude de cas concrète de développement de jeux multijoueurs avec Silverlight mais qui doit se contenter de dire des généralités sur le développement de jeux avec Silverlight pour des raisons de confidentialité car le jeu en question n’est pas encore lancé :

Silverlight 4 cible 3 platefomes (PC, Xbox, Windows Phone) et peut s’appuyer sur différentes architectures (Xbox Live, Windows Azure) ;
Près de 70% des joueurs de social gaming sont en dehors des USA (principalement en Corée du Sud) ;
Le marché des causal games grossit de 20% par an en moyenne ;
Farmville, LA star des social games avec 60 millions de joueurs, a été développé en 5 semaines, l’éditeur (Zynga) vient de lancer un nouveau jeu de Social Poker (Poker Blitz) qui a l’ambition de faire encore mieux ;
Emergence d’une nouvelle catégorie d’éditeurs de causal / social games qui incubent des développeurs indépendants et se rémunèrent en pourcentage des revenus ;
Le marché est toujours en attente des Facebook Credits pour simplifier la monétisation ;
La performance est une préoccupation clé dans le développement de jeux en ligne, d’autant plus quand ils sont multijoueurs car le lag détruit le gameplay ;
Plusieurs outils seront disponibles dans Visual Studio 2010 pour faciliter / accélérer le développement de jeux ;
L’accélération matérielle dans Silverlight va permettre d’améliorer grandement la sophistication graphique des jeux ;
Visual Studio n’est pas spécialement conçu pour faire des micro-tests / ajustements (“spiking“) mais il est possible de biaiser pour en faire quand même ;
Les hackers sont très actifs sur les social games (packet sniffing & injection…) car il y a de l’argent en jeu (au travers des objets virtuels et boosters) ;
Silversprite permet d’exploiter les librairies de XNA dans Silverlight 4 ;
Le mode out of browser de Silverlight est très intéressant pour valoriser les jeux en ligne (et les faire passer pour des jeux desktop).

J’ai comme l’impression que le speaker nous aurait bien présenter des choses surprenantes s’il en avait eu le droit. Mon intuition me dit que Microsoft va bientôt se positionner en force sur les environnements de développement de jeux (avec le couple Visual Studio / SL). Plus d’infos sur gskinner.com/blog.

HTML5: Cross-Browser Best Practices

J’ai commencé par un workshop sur HTML5 et je termine par un session sur HTML5 avec Tony Ross (le chef de projet IE9) à propos de la gestion de la compatibilité entre les navigateurs :

Il commence avec l’exemple de border-radius qui est implémenté différemment sur Firefox et Chrome (et préfèrent leur sémantique : -moz-border-radius et -webkit-border-radius) ;
Nous sommes passé d’un code orienté navigateur (avec une gestion conditionnelle pour les navigateurs à la traine) d’un code orienté fonctionnalités (avec une gestion conditionnelle pour le support ou non d’une balise / propriété) ;
Il recommande également la détection de comportement (“behavior detection“) qui permet de tester la capacité du navigateur et de proposer une solution de contournement au cas où ;
L’intérêt de ces détections est de ne pas avoir à modifier le code lorsqu’une nouvelle version du navigateur est disponible et corrige des bugs ou des faiblesses d’implémentations (de type “if IE” qui force la prise en compte d’une feuille de style IE6 alors qu’IE9 a fait de très gros progrès);
Utiliser les techniques de détection (fonctionnalités et comportements) permet de réduire le coût de maintenance du code HTML ;
Très nombreuses références à jQuery qui semble être le nouveau couteau Suisse d’IE (rappelons que Microsoft est maintenant un des contributeurs majeurs à jQuery).

Les conseils de cette sessions étaient plein de bons sens, mais je pense que les équipes derrière Internet Explorer marchent tout de même sur des oeufs quand il est question de compatibilité avec les standards et de coût de maintenance du code HTML (IE 6 est la hantise des intégrateurs HTML). Bref, qu’ils reconnaissent leurs erreurs est une bonne chose mais il ne faudrait pas qu’ils se mettent à donner des leçons aux autres éditeurs de navigateur sous prétexte qu’IE9 est (soi-disant) le seul à correctement supporter la propriété border-radius.

À suivre…

MIX 2010 – Jour 2 (suite)

Suite de la deuxième journée de conférence au MIX 2010. Les vidéos et diaporamas des sessions sont déjà disponibles ici : Live.VisitMix.com/videos.

Total Experience: A design Methodology for Agencies

Salle comble pour cette session présentée par Organic sur les méthodologies créatives en agence :

Il y a 10 ans, les web designers subissaient de terribles contraintes (256 couleurs, 4 typographies, des pages de moins de 60 Ko…), ils sont maintenant beaucoup plus libres dans les possibilités créatives et les expériences qu’il est possible de faire vivre au travers d’un site web ou d’une création digitale ;
Si les clients / prospects sont connectés 24H/24 sur différents terminaux (ou presque), les marques doivent suivre ;
Le prototype est une composante essentielle du processus créatif car il permet de matérialiser une stratégie et éviter de prendre du temps lors de la réalisation ;
Les hollandais ont inventé le Total Football, un tactique au foot où les joueurs peuvent changer de poste en fonction des phases de jeu, les agences devraient s’en inspirer pour éviter la sur-spécialisation des profils (créatifs ou non) ;
L’intérêt de la Total Experience est d’occuper le terrain entre deux campagnes et ainsi de ne pas s’éloigner des clients / prospects ;
Ils ont 4 principes fondateurs pour les expériences de marque = Connect, Context, Interact, Syndicate ;
Les prototypes sont de formidables outils pour vendre des idées aux clients (à combiner avec du story-telling) ;
Exemples de campagnes = Morris pour Bank of America (pop-up website), Off RoadR pour Jeep (communauté en ligne), Pur pour P&G (Facebook App), U by Kotex pour Kimberly Clark.

Le mot de la fin : Il insiste sur l’importance de faire du travail de terrain pour bien comprendre les habitudes / motivations / contraintes des clients et prospects (plutôt que d’acheter des études aux instituts spécialisés) et pour itérer sur un concept créatif, une campagne ou un site (notion de beta perpétuelle, même pour une action de com’).

Modern Web Form Design

Impossible pour moi de rater la session de Luke Wroblewski, mon maitre à penser, sur la conception de formulaires :

Les formulaires en ligne sont la base de quasiment toutes les interactions sur le web (commerce en ligne, recherche, médias sociaux…) ;
Apple a fait un travail très intéressant de reformulation de son processus de commande avec un formulaire vertical (cf. The Apple Store’s Checkout Form Redesign) :
Le nouveau formulaire de l'Apple Store US
Il faut être très vigilant sur le nombre de champs d’un formulaire (lesquels sont réellement absolument nécessaires) ;
La quasi-totalité des formulaires de saisie d’adresse demande le code postal ET le nom de la ville (pourquoi ne pas déduire le deuxième du premier ?) ;
Les onglets optionnels sont dangereux car ils impliquent un choix exclusif (ex : comment combiner plusieurs moyens de paiement ?) :
Exemple d'onglets verticaux pour du choix exclusif
Les contrôles de surface sont essentiels pour aider les utilisateurs à localiser les champs où ont été fait les erreurs comme chez Yahoo! :
La validation en ligne chez Yahoo!
Les contrôles de surface sont à réaliser en sorite de champ pour éviter de perturber la saisie (sauf pour le choix d’un nom d’utilisateur) ;
Exemple intéressant de formulaire prédictif chez Kayak (affichage du meilleur prix dans un calendrier avant de choisir une date) :
Kayak et son formulaire prédictif
Saisir un mot de passe peut être compliqué car les caractères sont masqués (idéalement il ne faudrait cacher que les caractères déjà saisis).

Les formulaires en ligne sont de mieux en mieux maitrisés mais tout est à inventer sur terminaux mobiles (cf. Better Mobile Form Design) :

L’iPhone propose un zoom sur le champ en cours de saisie (attention à bien vérifier que les intitulés et aides restent visibles => il est préférable de placer les intitulés au dessus des champs) :
Le zoom lors de la saisie d'un champ sur iPhone
HTML 5 introduit de nouveaux types de champs de saisie pour simplifier et limiter les erreurs (date, slider…) ;
Exemple intéressant chez Kayak de formulaire avec mise en page originale et exploitant les fonctions natives de l’iPhone :
Formulaire de recherche en situation de mobilité chez Kayak
Il est important de prendre en compte la contrainte d’orientation dans la mise en page :
L'orientation des formulaires sur smartphone
Le Nexus One propose la saisie vocale (touche ‘Micro’ sur le clavier) et visuelle via l’appareil photo (reconnaissance de caractères).

Génial, même si je connais quasiment l’intégralité du travail de Luke W, je garde une excellente impression de cette session. Du coup je vais surement acheter son dernier livre : Web Form Design: Filling in the Blanks.

À suivre…

MIX 2010 – Jour 2

Deuxième jour de conférence à Las Vegas avec une seconde Keynote normalement consacrée à Internet Explorer 9 (entre autre).

Keynote 2

C’est Dean Hachamovitch qui va représenter l’équipe IE 9 :

Les applications en ligne consomment beaucoup de ressources processeur ;
Les applications en ligne réalisées avec HTML 5 proposeront une expérience très proche des applications desktop ;
IE 9 représente la troisième version majeure depuis IE 6 (ils affirment avoir franchi un cap qualitatif) ;
IE 9 va exploiter l’accélération matérielle pour améliorer les performances des applications en ligne ;
IE 9 inclura un nouveau moteur Javascript qui va compiler le code javascript de façon transparente et exploiter de façon plus efficace les processeurs multi-coeur et/ou la puce graphique ;
Pour bien comparer les performances des navigateurs il faut s’intéresser à l’ensemble des tâches (et pas qu’au moteur javascript) ;
IE 9 sera parfaitement compatible avec les spécifications HTML 5 et CSS 3 (border-radius, opacity, animations…) ;
Microsoft va devenir un contributeur majeur pour les spécifications HMLT 5, CSS 3, DOM et SVG.

Nous passons à une explication détaillée sur l’accélération matérielle dans IE 9. Ici une démonstration d’animation circulaire de pictos dans IE 9, Firefox et Chrome :

Démonstration de contenus SVG 1.1 :

Démonstration d’un moteur physique exploitant DirectX :

Démonstration de la balise <video> de HTML5 sur un netbook :

Une dernière démonstration technique avec un carrousel de vidéos et des effets de transparence :

La IE9 Platform Preview est disponible immédiatement auprès de la communauté de développeurs (d’autres expérimentations sur IETestDrive.com). Tout ça me semble aller dans la bonne direction…

Scott Hanselman monte ensuite sur scène pour présenter la Web Plateform. S’en suit une laborieuse revue de code avec ASP.net 4 et une longue visite guidée des possibilités de Visual Studio 2010.

Puis John Resig vient nous présenter les derniers travaux sur jQuery :

Près de 30% des sites web utilisent la librairie jQuery ;
Microsoft est maintenant un contributeur actif au projet jQuery.

Vient ensuite un longue présentation de Open Data Protocol qui permet de simplifier la création d’APIs, leur déploiement sur Azure et leur monétisation sur une marketplace baptisée provisoirement Project “Dallas”. Je vous passe les détails techniques car ce n’est pas ma spécialité.

Après cette séance très technique, Bill Buxton monte sur scène pour nous parler d’usages et d’expérience utilisateur :

Depuis le lancement des outils de développement d’applications pour Windows Phone quelqu’un a déjà développé un client Twitter en morse (illustration d’un phénomène d’innovation empirique) :
Une application Twitter pour Windows Phone qui utilise le morse
Les interfaces graphiques naturelles (“Natural UI“) vont devenir de plus en plus à la mode car ils réduisent grandement la courbe d’apprentissage ;
Les ordinateurs n’utilisent qu’une partie des sens des utilisateurs (vision, audition) et de leurs capacités (saisie au clavier, interaction avec la souris) ;
Le projet Natal introduit une nouvelle forme d’interaction en captant les mouvements de votre corps ;
Démonstration d’une application de peinture utilisant une interface tactile et un moteur physique pour reproduire de façon réaliste le comportement de la peinture ou d’une gomme (cf. Project Gustav) :
L'application de simulation de peinture Gustav
Des applications comme SketchFlow pourraient tirer parti de cette innovation pour libérer la créativité des concepteurs / designers.
L’important n’est pas d’innover pour le chalenge technologique mais plutôt d’améliorer / de simplifier le processus créatif.

Wow, quelle claque ! Autant je ne voyais pas trop où il voulais en venir (il est très brouillon dans ces explications) autant de faire le rapprochement entre ces nouveaux outils / techno de “libération créative” et la conception d’interfaces / expériences web est très intéressante. Je m’imagine déjà en train de concevoir une interface sur une table Surface au travers d’une interface naturelle…

À suivre…

MIX 2010 – Jour 1 (suite)

Suite de la première journée du MIX avec des sessions dans l’après-midi et de belles rencontres.

Seesmic Platform et l’application Seesmic pour Windows Phone

Suite à sa présentation lors de la Keynote nous retrouvons Loic Lemeur à la terrasse d’un restaurant pour qu’il nous en dise un peu plus sur son nouveau produit. Bonne surprise il dispose d’un prototype de Windows Phone (très rare) :

Nous en profitons donc pour squatter une salle et improviser une interview “exclusive” avec Eric :

Ils nous ont donc gentiment proposé une visite guidée de l’application Seesmic, ou du moins d’une pré-version :

Designing Windows Phone 7

Restons sur le même thème (Windows Phone) avec une session sur la genèse du projet Windows Phone par Albert Shum au travers de la présentation de Metro (son interface graphique) :

Metro est un projet entièrement nouveau qui a été créé de toutes pièces pour renouveler l’interface utilisateur de Windows Mobile :

Les codes graphiques des métros du monde entier ont été la source d’inspiration principale car ils permettent d’orienter les usagers et s’adressent à un public très large ;
Les interfaces de la Xbox et du Zune ont également été clé dans l’approche générale et les choix ;
L’interface tactile a été l’élément déclencheur d’une réflexion de fond ;
L’interface métro repose sur plusieurs principes : Rapidité, simplicité, minimalisme (“content is the interface“) ;
Un gros travail a été réalisé sur les choix typographiques (tout comme pour les chartes graphiques des métros) ;
Les animations et transitions sont clés dans l’expérience d’utilisation du Windows Phone (un héritage de Zune ?) ;
L’interface du Windows Phone n’a pas essayé de copier celle de l’iPhone mais de créer une expérience authentique ;
L’interface a nécessité de très nombreuses itérations :

L’interface n’est pas figée et est amenée à évoluer en fonction des feed-back des utilisateurs / développeurs / éditeurs ;
L’écran de démarrage est le point de départ de l’expérience avec un principe de tuiles (“tiles”) qui orientent l’utilisateur vers les contenus récents ;
L’idée derrière la “panoramic view” est de donner plus d’espace aux contenus et de créer des hubs autour de fonctions sociales ; illustration sur les écrans Pictures et People :
Ils se sont inspirés de personas modernes pour accompagner le travail de conception (qu’ils appellent des “life maximizers“) ;
L’interface peut être décrite par 3 adjectifs : Personal, Relevant, Connected :
Le minimalisme est omniprésent dans les écrans et permet de différencier l’expérience du Windows Phone par rapport à ses concurrents :

Couper les titres et les items de navigation est un moyen très efficace pour inciter les utilisateurs à faire défiler les écrans de façon horizontale ;
Les animations sont omniprésente mais restent discrètes pour ne pas saturer et/ou ralentir l’interface ;
De nombreux gestes sont disponibles pour déclencher différents types d’action :
Il y a des guidelines très précises sur les minima à respecter :
De nombreux contrôles sont disponibles nativement pour assurer un maximum de cohérence :
Le principe de Hub peut être appliqué à n’importe qu’elle application pour améliorer l’immersion et proposer une alternative aux applications avec plusieurs écrans :

Force est de constater qu’il y a eu un très gros travail de remise en question des équipes Microsoft pour proposer une expérience en rupture par rapport aux concurrents. Ils ont édité un livre qui résume la philosophie et les inspirations de l’interface Metro : A look at “Metro” – the book.

Plus d’infos sur le blog de Christian Schormann : ElectricBeach.org.

À suivre…