10 ans d’évolution des interfaces web au service de l’expérience utilisateur

2007 sera une grande année pour les interfaces riches (voir à ce sujet mon précédent billet). Pour célébrer cette révolution à venir, je vous propose de faire une rétrospective sur dix années d’évolution des interfaces web, en incluant un peu de prospective sur l’année à venir.

J’ai résumé tout cela dans ce schéma :

La page HTML : simple et efficace

La manière la plus simple de réaliser une interface web est d’utiliser HTML. Pour consulter une page web, il faut : un système d’exploitation et un navigateur. C’est simple et efficace, suffisamment efficace pour faire fortune (à l’image d’eBay ou d’Amezon).

L’applet : un peu plus de puissance mais au détriment du confort d’usage

Durant la fin des années 90, sont apparus des micro-applications qui pouvaient être exécutées au sein d’une page web : les applets réalisées en Java. Pour pouvoir les exécuter, il fallait bien évidemment un système d’exploitation, un navigateur, mais également une machine virtuelle. C’est cette dernière qui servait à interpréter le code Java (qui n’a rien à voir avec Javascript).

Les applets permettent de faire plus de chose que le HTML mais au détriment du confort d’usage, car les applets sont lourdes et longues à démarrer (de 1 à 3 secondes) et que la machine virtuelle nécessite souvent des mises à jour intempestives. Quand il s’agit du configurateur en 3D de Volkswagen, ça va, mais quand il s’agit d’un simple calendrier pour choisir une date comme sur le site de la banque Fortis, c’est inadmissible.

Les RIA : le meilleur compromis à ce jour

Puis sont apparues les Rich Internet Applications qui proposaient de bien plus grandes possibilités d’affichage et de manipulation que le HTML. Ces interfaces riches pouvaient être réalisées en AJAX (à l’image du sélecteur de diamant d’Amazon ou du site de GAP) ou en exploitant des technologies vectorielles comme Flash ou WPF/E. Pour les faire tourner, vous devez posséder le bon plug-in (ce qui est le cas de 99% des ordinateurs pour Flash). L’intégration des animations au sein d’une page web est transparente et très performante (à l’image du très bon comparateur de Ford Vehicles).

Les widgets : petites mais terriblement efficaces

Plus récemment, des petits modules autonomes sont venus s’installer sur notre bureau : les widgets. Ces micro-applications nécessitent plusieurs choses pour pouvoir tourner : soit un programme appelé moteur de widget (Yahoo! Widget, Google Desktop, Kapsules sous Linux ou encore le navigateur Opera), soit un système d’exploitation de nouvelle génération comme Windows Vista ou Mac OS X.

Les RDA : l’avenir du logiciel ?

La toute dernière évolution des interfaces web s’appelle les Rich Desktop Applications. Tout comme les applets, les RDA nécessitent une machine virtuelle (Eclipse RCP, NetBeans, Java Web Start, XULRunner de Mozilla, Le futur Apollo d’Adobe ou encore le SmartClient de Microsoft). Ces technologies permettent d’avoir des interfaces aussi robustes que des applications et la simplicité de déploiement des sites web (pas besoin de les installer sur le système d’exploitation).

Plusieurs expérimentations sont en cours autour des RDA : SongBird (un concurrent de iTunes réalisé avec XUL), le Mozilla Amazon Browser (une RDA qui exploite le catalogue d’Amazon) ou encore le module d’eBay réalisé avec Apollo.

Conclusion : le service avant tout

Après ce formidable déballage des technologies toutes plus prometteuses les unes que les autres, je vous propose de faire le constat suivant : Qui avons-nous à gauche du schéma ? Amazon et eBay. Qui retrouvons-nous à droite du schéma ? Amazon et eBay. L’enseignement que nous pouvons en tirer est le suivant : si votre service est bon alors ces différentes technologies (et les plus récentes en particulier) ne doivent vous servir qu’à enrichir l’expérience utilisateur que vous proposez. Par contre si votre service n’est pas performant alors ne rêvez pas, l’interface (quelle que soit la technologie utilisée) ne compensera pas une expérience utilisateur négative.

Je vous laisse méditer là dessus…

Première expérimentation d’Apollo pour eBay

J’ai déjà eu l’occasion de vous parler d’Apollo, le remplaçant des lecteurs Flash et PDF. Visiblement les équipes d’Adobe mettent les bouchées doubles pour évangéliser leur nouvelle plateforme avec notamment cet article publié sur Techcrunch : Preparing For Apollo.

Logo d'Apollo

Là où ça devient intéressant, c’est quand certaines grandes marques (en l’occurrence eBay) se servent d’Apollo pour proposer une expérience différenciante à leurs clients. C’est en tout cas ce que nous explique ce billet : How eBay is developing with Adobe’s Apollo project. Il est ici question de développer une application connectée de type RDA (dont je vous ai déjà parlé ici : Après les RIA, voici les RDA) pour gérer son compte et ses enchères sur eBay.

Copie d'écran de l'application d'eBay

Le résultat est extrêmement encourageant et nous amène à cette question : à quand un road show pour Apollo en France ? Je ne voudrais surtout pas mettre la pression aux équipes d’Adobe, mais leurs concurrents sur le créneau des RDA (deux petites start-up : IBM et Microsoft) ont déjà entamé un sérieux travail d’évangélisation…

Très belle campagne de marketing viral pour Nissan

Je viens de découvrir une campagne virale pour le lancement du nouveau SUV compact de Nissan : le Qashquai.

La campagne repose sur une opération de marketing viral via des vidéos très surprenantes :

http://www.metacafe.com/fplayer/316859/suicidal_car_stunts.swf

A la fin de cette vidéo, une URL pointe vers un autre site : Qashqai Car Games, où l’on retrouve encore plus de contenu : interview des pilotes, cascades du mois… Le thème de la campagne porte sur la maniabilité et la polyvalence de ce véhicule urbain.

Au niveau de la réalisation, je n’y trouve rien à redire : c’est original, ambitieux et très bien fait (peut-être un peu long à charger). Mais bon, n’oublions pas que ça reste tout de même un gros 4*4 qui pollue !

Microsoft sort son alternative à Flash

Nous venons de rentrer dans une nouvelle ère de prospérité pour les interfaces riches. Microsoft vient en effet de sortir une première version d’évaluation de sa technologie qui vient directement concurrencer Flash : WPF/E (Windows Presentation Foundation Everywhere). Cette version d’évaluation est disponible en téléchargement ici : WPF/E Community Technology Preview for Windows.

Deux choses sont à noter :

le plug-in est plutôt léger (à peine plus d’1 Mo)
ce plug-in est indépendant du navigateur puisqu’il fonctionne en théorie sur IE et Firefox (d’où le E comme Everywhere)

Des démonstrations sont déjà disponibles :

Démonstration de WPF/E

Mes premières impressions :

ça ne fonctionne pas sous Firefox ;
les démos sont très loin d’être impressionnantes ;
ces démos souffrent de gros problèmes ergonomiques comme l’absence d’un indicateur de téléchargement ou le curseur de la souris qui n’est plus modifié lorsqu’il survol un élément cliquable.

Vous l’aurez compris, cette technologie souffre de problèmes de jeunesse. C’est un peu normal dans la mesure où elle n’a que quelques heures ! Il serait en effet illusoire de pouvoir penser rattraper dès sa sortie les 10 ans d’expérience accumulés par le Flash Player comme le fait très justement remarqué Guillaume Plouin.

En tout cas ce qui est certain, c’est que nous allons assister à une très belle bataille entre Microsoft et Adobe autour des technologies d’interfaces riches. S’il veut rester dans la course, Adobe ferait bien de blinder ses partenariats pour ne pas se faire écraser par le rouleau compresseur de Microsoft comme bien d’autres avant lui (Netscape et cie). Et pourquoi pas se faire racheter par Google comme le suggère cet article publié sur Read/Write ?

Walmart adopte flash grâce à… OpenLazlo

Walmart (l’équivalent de notre Carrefour national mais en… 10 fois plus gros) vient de sortir une nouvelle version de son site qui exploite les interfaces riches : un bloc dynamique en page d’accueil et des panneaux flottants de découverte des produits dans les pages d’orientation (qui n’est pas sans rappeler ce que fait GAP sur ses différents sites).

Là où ça devient intéressant, c’est que Walmart utilise non pas la plateforme Flex d’Adobe, mais plutôt un équivalent open source : OpenLaszlo.

Ceux qui lisent mon blog régulièrement savent tout le bien que je pense de ce framework et je suis très content qu’un aussi gros annonceur (je crois bien que c’est le plus gros employeur du monde avec plus d’1 million d’employés) mise sur cette technologie.

En tout cas, cette annonce tombe à pic, juste quand l’inventeur du web (Tim Berners-Lee) est en train de nous expliquer qu’il faur ré-inventer le HTML : Reinventing HTML. (via OpenLaszlo Project Blog)