Les interfaces naturelles d’aujourd’hui et de demain

J’ai déjà eu l’occasion de vous parler de l’évolution de l’outil informatique vers des terminaux polymorphes et nomades. Cette évolution du hardware se fera de concert avec le software et notamment les systèmes d’exploitation et les logiciels. D’ailleurs nous sommes en plein dedans avec la vague des widgets (sorte de mini-applications) qui font la fortune d’Apple sur l’iPhone et le prochain Chrome OS de Google qui sera un hybride entre navigateur et système d’exploitation.

Les interfaces naturelles bientôt dans notre quotidien

Depuis que j’ai assisté au speech très inspiré de Bill Buxton sur les interfaces naturelles, je m’interroge sur la pertinence du modèle écran / clavier / souris. Regardez de près le Project Gustav pour vous rendre compte du potentiel que pourrait représenter des interfaces faisant une utilisation optimale des écrans tactiles et des périphériques naturels (ici un simili-pinceau pour cette simulation de peinture) :

L'interface du Gustav Project
L'interface du Gustav Project

La prise en main est immédiate et l’utilisateur s’exprime d’autant mieux qu’il utilise les gestes et outils de son quotidien. Démonstration vidéo ici :

Ce type d’interface a d’ailleurs été vu sur les stands de Fiat et de Renault au récent Salon de Genève pour épater les visiteurs : Les configurateurs interactifs de Fiat et Renault au Salon de l’Auto de Genève.

Le configurateur ludique de Fiat au Salon de Genève
Le configurateur ludique de Fiat au Salon de Genève

La dimension ludique est ici évidente et l’on se met à rêver des nombreuses possibilités offertes par des terminaux comme Surface… ou comme la Sphere, un autre projet de Microsoft qui combine un affichage sphérique et une surface tactile :

Le projet Sphere de Microsoft
Le projet Sphere de Microsoft

Mais pas la peine de sortir la grosse artillerie pour proposer une expérience différenciante. Exemple avec le Gesture Cube, un concept à mi-chemin entre touchbook et cadre numérique qui pousse encore plus loin la logique de terminal domestique connecté popularisée par le Chumby : Gesture Cube, Une interface 3D interactive.

Le concept de Gesture Cube
Le concept de Gesture Cube

Là encore, ce cube domestique aux formes et dimensions très proches d’un radio-reveil, exploite parfaitement les gestes naturels et surtout la contextualisation des informations / applications en fonction de la pièce dans laquelle vous vous trouvez :

Et dans la série « je fais du neuf avec du vieux« , je me permets également d’évoquer le concept Waveface Ultra proposé par Asus, un écran tactile souple que vous enroulez autour de votre poignet :

Le concept Waveface d'Asus
Le concept Waveface d'Asus

L’idée ici n’est pas de miniaturiser un smartphone mais plutôt de faire monter en compétence votre montre pour qu’elle puisse vous envoyer des notifications et qu’elle interagisse avec ce qui vous entoure :

Là encore vous remarquerez que le terminal et les gestes utilisés pour le manipuler sont les plus naturels possibles (l’interface est ici presque transparente).

Dernier exemple et pas des moindres avec SixthSens le concept d’interface gestuelle portable présentée par Pranav Mistry lors du dernier TED : An interview with Pranav Mistry, the genius behind Sixth Sense.

SithSens, l'interface gestuelle portable
SithSens, l'interface gestuelle portable

Imaginez-vous avec un terminal en forme de médaillon qui serait équipé d’un mini-projecteur (pour afficher des informations) et d’une caméra pour capter le mouvement de vos doigts. Lorsque vous allumez le terminal, vous choisissez une application et celui-ci projette alors une interface adaptée au contexte d’utilisation (ici, la lecture d’une vidéo en complément d’un article) :

L'interface gestuelle SixthSens en action
L'interface gestuelle SixthSens en action

Pour le moment le terminal en lui-même est rudimentaire mais l’on décèle un potentiel énorme dans la vidéo suivante :

Et comme dans les précédents exemples, c’est un objet du quotidien (un médaillon) qui est mis en scène dans notre quotidien (prendre une photo, lire un journal) et dont l’interface se manipule de façon tout à fait naturelle (avec les doigts).

Interfaces naturelles et jeu vidéo, une réalité

Bon nous sommes tous d’accord pour dire que ce n’est pas demain la veille où nous sortirons avec notre médaillon augmenté, il n’empêche que les interfaces naturelles sont une réalité pour un grand nombre de personnes (vous avez déjà essayé la Wii ?) et qu’il n’y a aucune raison pour que l’industrie du jeu vidéo n’aille pas plus loin (d’ailleurs elle a toujours été très précurseur).

La Wiimote pour reproduire les gestes naturels
La Wiimote pour reproduire les gestes naturels

Passé relativement inaperçu l’année dernière, le jeu EndWar est ainsi un bel exemple d’interface naturelle avec son principe de commandes vocales plutôt abouti :

L'interface à commandes vocales du jeu EndWar
L'interface à commandes vocales du jeu EndWar

Commandes gestuelles, commandes vocales, c’est la sortie en juin prochain de la déclinaison grand public du Project Natal de Microsoft qui devrait normalement rehausser la barre d’un cran avec des concepts de jeu tout à fait renversants. Exemple avec ce concept malheureusement abandonné de beat them all qui se joue avec les doigts : Indie studio reveals cancelled, finger-powered Natal game.

Un projet de jeu de combat avec les doigts
Un projet de jeu de combat avec les doigts

Quel dommage que ce concept n’ai pas été retenu car je me voyais tout à fait jouer avec mes doigts sur la table basse :

Illustration du jeu 2 Finger Heroes
Illustration du jeu 2 Finger Heroes

Bref, j’ai comme l’impression que les souris et claviers vont prendre une grosse claque avec la généralisation des écrans tactiles et des interfaces naturelles. Quoique…

Pas d’interfaces naturelles dans le milieu professionnel ?

Outre les métiers graphiques, j’ai du mal à anticiper une percée des interfaces naturelles dans le monde professionnel. Autant je suis convaincu du potentiel ludique et intuitif de ce type d’interfaces, autant je ne pense pas que l’on puisse améliorer la productivité d’un utilisateur de clavier / souris dans un contexte pro.

C’est donc malheureusement l’argument économique qui va pérenniser l’outil informatique tel que nous le connaissons sur le poste de travail. Rien de dramatique dans la mesure où nous pourrons toujours exploiter des interface naturelles dans nos moments de détente ou à la maison. La rupture entre le monde pro et perso sera ainsi d’autant plus nette et agréable.

Et le web dans tout ça ?

Reste une grande inconnue pour les interfaces naturelles : Comment les exploiter dans le cadre d’un navigateur web ? Et c’est là où nous nous heurtons au casse tête des interfaces web qui se manipulent à la fois avec la souris pour le clic ou le drag & drop (donc potentiellement la main ou le doigt), mais également avec le clavier pour saisir une URL ou remplir un formulaire.

Donc très clairement sur ce cas d’usage particulier je suis incapable de prendre position. Comme je fais un usage intensif du web, je penche tout de même en faveur du traditionnel couple clavier / souris. Mais tout ceci pourrait bien changer avec la « widgetisation » des sites web et services en ligne sur l’iPhone et encore plus sur l’iPad.

Affaire à suivre, nous aurons l’occasion d’en reparler.

Mes réflexions sur le MIX 2010

Je suis maintenant de retour en France et je prends le temps d’analyser tout ce qui nous a été montré lors de l’édition 2010 du MIX par Microsoft.

Retour en force de Microsoft sur de nombreux fronts

Alors que ces dernières années Apple, Google ou Facebook innovaient dans tous les sens, Microsoft avait accumulé un retard notable sur un certain nombre de sujet : Navigateur, smartphone et cloud computing. Depuis le début de l’année il semblerait bien que la firme de Redmond ait la très ferme intention de revenir dans la course et même de retrouver son leadership avec de nouveaux produits comme Windows Phone et IE 9. Nous commençons également à y voir un peu plus clair dans les plans de Microsoft en ce qui concerne Azure et les nombreux services qui vont petit à petit venir s’y greffer. De toute façon, nous n’en attendions pas moins de Ray Ozzie sur ce dernier point. Maintenant que le voile a été levé, reste à Microsoft d’assurer LE test ultime : celui du marché.

Des changements culturels profonds

Saviez-vous que la moitié des employés de Microsoft ont moins de 8 ans de maison ? Non pas que le turn over soit élevé, mais que le renouvellement des équipes est visiblement une priorité dans la politique RH. Résultat : Une nouvelle vague de collaborateurs issus de la génération Xbox / Zune qui accouche de produits étonnamment disruptifs et en rupture complète par rapport au marché (à l’image du Windows Phone ou du projet Natal). Il y a donc une réelle volonté de la part de Microsoft de tourner la page sur les années Windows / Office et se tourner vers les marchés d’avenir (nomadisme, divertissement…). Autre conséquence de cette nouvelle image : Un rapprochement évident avec les communautés open source (par opposition à Apple qui s’affirme comme le champion des standards fermés).

Silverlight comme le garant d’une expérience riche et multi-plateforme

Plus nous avançons dans les versions de Silverlight et plus il est évident que cette technologie est bien plus qu’un plug-in RIA. En plaçant Silverlight au coeur de produits comme la Xbox ou Windows Phone, Microsoft cherche à en faire le vaisseau amiral d’une nouvelle expérience utilisateur multi-plateforme. À ce petit jeu là, Microsoft risque bien de prendre de vitesse Adobe et son Open Screen Project qui se heurte à Apple.

J’ai également eu la très nette impression que Microsoft cherche à séduire les développeurs de casual et social games en mettant en avant la maturité de l’environnement Visual Studio et les capacités de Silverlight dans ce domaine. Rappelons à ce sujet que Microsoft est actionnaire de Facebook, que Facebook est LA plateforme sociale de référence pour les social games, social games qui tournent à 99,99% sous Flash. On pourrait ainsi supposer que Microsoft a la ferme intention de se positionner sur le marché des social games avec une offre verticale comme peut le proposer Unity. Il faut dire qu’entre XNA et Bungie, Microsoft possède de sérieux atouts.

En attendant le prochain Windows…

Nous ne savons pas grand chose de Windows 8, juste que Microsoft nous prépare quelque chose de gros… Impossible de savoir s’il s’agit de bluff, mais entre le discours de Bill Buxton sur les interfaces naturelles, les incroyables possibilités du project Natal et la maturité de la réflexion sur l’interface du Windows Phone, je me dis qu’ils pourraient bien nous surprendre. D’autant plus s’ils décident de s’intéresser aussi aux périphériques pour proposer une offre hardware + OS + logiciels entièrement nouvelle.

Je peux me tromper, mais j’ai la conviction qu’ils ont à la fois la volonté et les ressources financières / humaines pour complètement ré-inventer leur approche de l’outil informatique. Plus que jamais les prochaines années vont être passionnantes…

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
    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
    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!
    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
    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
    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
    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
    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 :

Utilisation de SVG dans IE 9
Utilisation de SVG dans IE 9

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
    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 GustavPaint
    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…