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 3 sites coup de coeur (mars 2010)

Ce mois-ci j’ai encore une belle moisson de jolis sites, je me demande même si je ne vais pas passer à 5 sites coup de coeur…

Commençons avec le très mignon Cubicl, une application de collaboration en ligne pro/perso :

Cubicl

Une palette de couleur très harmonieuse, une approche graphique tout en rondeur, des intitulés accrocheurs et des textes courts et percutants. Rien à redire, cette page véhicule du sérieux et de la maitrise.

Restons dans le minimalisme avec Tapbots, un éditeur d’applications pour iPhone :

Tapbots

L’approche graphique est ici similaire au précédent site avec un style très cartoon mais il y a une volonté afficher d’en dire le moins possible, et ça marche ! Les descriptions des applications sont minimalistes (même pas de captures d’écran) mais cette page d’accueil donne sacrément envie de cliquer. La grille de lecture permet à l’oeil de bien circuler entre les blocs, les contrastes sont excellents et les illustrations rythment bien la page dans sa verticalité (ha mince, je me met à parler comme un sémioticien, c’est grâce docteur ?).

Terminons avec un troisième site en rupture complète, le portfolio de Simon Collison :

SimonCollison

La page d’accueil de ce site est un véritable électrochoc avec une touche graphique rétro dans la plus pure tradition des manuels de taxinomie. Chaque bloc correspond à une rubrique. Je ne peux qu’applaudir l’engagement de ce design et le travail réalisé pour respecter les codes graphiques de la taxonomie (fond de page, typographie, illustrations…). Facile de se démarquer avec un site comme celui-là !

La suite le mois prochain…

Mes 3 sites coup de coeur (octobre 2009)

Comme chaque mois je vous propose une sélection de sites dont j’apprécie particulièrement le design.

Epic Event, un service d’organisation, de réservation et de paiement pour des évènements :

EpicEvent

J’apprécie beaucoup les différents traitements graphiques du fond de page qui ne nuisent pourtant pas à la lisibilité, le contraste et la forme du gros bouton d’action « Learn more… » et les pictos qui rythment les blocs de la seconde partie de page.

Postbox, un outil de productivité fondé sur l’email :

Postbox

Beaucoup de blanc sur cette page très dynamique de par le contraste des couleurs (blanc / bleu / rouge). J’aime bien le fait de réduire au minimum les possibilités d’interaction (Donwload, Buy, 4 items de navigation et un lien en bas de page). Les accroches sont en plus ultra-courtes et très percutantes.

The Social Agency, une agence d’organisation de rencontres professionnelles :

SocialAgency

J’adore cet immense header blanc et la non moins gigantesque base line (« We bring people together« ). La formation de la promesse est également très bien tournée (« We want to promote your next event« ), c’est volontaire sans toutefois être rentre-dedans. Dynamisme et élégance, quel subtil mélange !

Mes trois sites coup de coeur (juin 2009)

Je continue dans ma série de sites “coup de coeur” avec trois applications en ligne superbement mises en valeur par leur site web.

On commence avec DailyBurn, une application en ligne de fitness tracking :

dailyburn

La grille de lecture est limpide, les visuels attractifs et l’harmonie des couleurs très… harmonieuse. En plus ils ont le bon goût de proposer une visite guidée intégrée à la page d’accueil.

Il y a ensuite Tea Round App, une application pour iPhone qui sert à définir des tours de préparation pour le thé (WTF?) :

tearound

Autant je suis très dubitatif quand à l’intérêt réel de cette application, autant je suis immédiatement tombé amoureux de cette ambiance boisée très chaleureuse, des petits coups de crayon, du jeu typographique (en bas de page). Cerise sur le gâteau, la visite guidée en 4 étapes qui utilise un slider façon iPhone (« Step 1« …).

Il y a enfin Ballpark, une application en ligne de facturation :

ballpark

Rien de révolutionnaire dans le choix des couleurs mais une construction de la page en strates tout à fait convaincante avec une parfaite lisibilité et un fort contraste permettant de bien guider l’attention sur le bouton d’action. Vous apprécierez au passage les titres qui sont un modèle de concision et d’incitation. Et ne ratez surtout pas la superbe page de comparaison des offres ainsi que le magnifique formulaire de création de compte.

La suite le mois prochain…

Mes 3 sites coups de coeur (avril 2009)

Je continue ma série de coups de coeur avec deux sites d’une sobriété exemplaire et un dernier site très… inspiré.

Il y a tout d’abord Utilium, une solution pour créer / gérer des espaces collaboratifs en ligne à vocation pédagogique :

utilium

La page d’accueil est d’une grande sobriété, lisibilité est parfaite (choix des typos + contraste), le conrat de lecture est limpide (avec un dégradé de bleu en trois temps), les textes sont courts et accrocheurs, le bouton d’action idéalement positionné et ils ont même mis un « filet de sauvetage » en bas de page avec 3 options de navigation alternatives.

Il y a ensuite Creattica, une galerie collaborative de beaux designs :

creattica

La mise en page est d’une grande sobriété mais il y a un très intéressant travail au niveau de choix typographiques qui apporte de la sophistication sans trop alourdir la page, il y a surtout de magnifiques effets graphiques au niveau du logo et des boutons qui donne un aspect très « classieux » (façon Adobe).

Il y a enfin College Park Curch, le site d’une église à Indianapolis :

collegeparkchurch

J’adore le logo, l’harmonie des couleurs qui jouent sur un dégradé de vert (symbole de stabilité et de fertilité), la grille de lecture est nette et permet de guider l’oeil le long des colonnes à la découverte du contenu, les boutons d’action sont très incitatifs dans leur formulation (« I’m New« , « Listen« , Dowload« ) sans pour autant faire tâche sur la page, le pied de page est massif mais à la lisibilité optimale. À noter que ce site repose sur Ekklesia 360, un système de gestion de contenu dédié aux paroisses avec une gestion très fine des contenus texte (thèmes récurrents) et audio (les sermons), des modules communautaires (pour les fidèles) et des évènements (pour les RDV religieux). Je vous invite à visiter leur très belle galerie (très reposante).

La vision du futur de Microsoft

Dans mes prédictions 2009 j’anticipais un retour sur le devant de la scène pour Microsoft, ce retour en grâce passant notamment par un certain nombre de projets innovants comme Photosynth, Surface, Sphere ou encore WorldWide Telescope. À cette liste de projets il faut également ajouter tous les projets expérimentaux menés dans le Microsoft Labs comme cette stupéfiante vidéo : Future Vision Montage.

http://images.video.msn.com/flash/soapbox1_1.swf

Cette compilation de concepts regroupe en effet une incroyable série d’interfaces toutes plus belles les unes que les autres qui me font penser au célèbre Vodafone Future :

microsoftfuturevision

 

Saluons donc le formidable travail de design réalisé pour mettre en scène ces interfaces qui concurrencent sérieusement le concept Aurora de Mozilla (même si dans le fond très peu de ces concepts sont pour le moment réalisables). Dans le même genre il y a aussi le 4G=IP de Cisco. (via R/W Web)

L’invasion des magazines photos en ligne

Décidément la presse n’en finit plus de se réinventer. Pour faire face à la baisse généralisée des ventes de papier nous assistons à la naissance d’un nouveau type de magazine en ligne : les photo-magazines. Particularité de ces sites : une ligne éditoriale orientée lifestyle et beaucoup de photos très qualitatives. Dans les faits, ça donne des sites comme Flipgloss, le dernier de la bande :

La page daccueil de Flipgloss
La page d'accueil de Flipgloss

Vous apprécierez les « unes » que l’on peut parcourir en mode coverflow sur la page d’accueil ainsi que l’effort notable pour proposer une mis en page agréable. Au niveau des pages intérieures, les articles sont en fait des diaporamas avec des photos en pleine largeur (ou hauteur) et du contenu associé :

Une page intérieure de Flipgloss
Une page intérieure de Flipgloss

Il est évident que ce type de site ne se préoccupe pas trop de l’accessibilité ou du temps de chargement mais de touye façon est-ce que les pendants « papier » de ces magazines en ligne se souciaient d’utiliser du papier recyclé ? Non pas réellement car l’objectif ici est bien de faire rêvé, et ça marche ! Plus d’infos ici : Flip Or Bust? FlipGloss Debuts Glossy Digital Photo Magazine.

Autre exemple avec Wonderwall publié par MSN :

La page daccueil de Wonderwall
La page d'accueil de Wonderwall

Là encore nous avons assez peu de texte et des photos dans tous les sens. Vous noterez au passage l’improbable barre de défilement latérale pour naviguer dans le site, sûrement une métaphore pour nous rappeler le geste du feuilletage des pages. Finalement une assez bonne idée car l’impression de « survoler » les sujets est bien présente. (via Paid Content)

Plus proche de chez nous, nous avons également le magazine français Ykone qui vient de voir le jour :

La page d'accueil d'Ykone
La page d'accueil d'Ykone

Bon… c’est moins spectaculaire et dense que les magazines US mais l’intention est là. (via Heaven)

Une tendance intéressante mais finalement je me demande s’il ne serait pas mieux d’encapsuler ce type de magazine dans des parutions plus étoffées comme les diaporamas de L’Express ou ceux de MenStyle.