Concevoir des interfaces riches : nouveau métier ou déjà vu ?

Discussion enflammée lors du buffet, après le lancement de AIR et de Flex 3.

La thèse de mes interlocuteurs : rien de neuf sous le soleil. Concevoir une application riche, c’est du déjà vu. On faisait déjà ça au 18ème siècle (sic) !

Mes interlocuteurs : un ergonome et un consultant.

Je ne partage pas du tout leur point de vue.

Je pense qu’au contraire, la conception d’un service web, et encore plus d’un service web riche, c’est un vrai nouveau métier.

Je ne crois pas qu’on peut concevoir l’intelligence, l’ergonomie, la fluidité, la beauté d’un service comme on concevait un meuble.

Je pense que c’est fondamentalement des métiers différents, qui demandent des cultures différentes, des outils différents…

Le futur des applications en ligne / Lancement d’AIR demain

Demain soir a lieu le lancement officiel d’AIR d’Adobe (vous y serez ? Moi, oui !).

L’occasion de se reposer la question : quel est l’avenir des applications en ligne ?

On peut utiliser une application qui va se jouer dans le navigateur (un service Internet quoi).

Avantages :

  • L’utilisateur n’a rien à installer, donc un accès rapide à l’application, un accès depuis n’importe quel ordinateur, et pas de problème de mise à jour ;
  • On bénéficie de facto de toute les fonctions autour des URL (bookmark, copier / coller, et les effets viraux, en avec la transmission très facile de l’adresse du site) ;
  • L’utilisateur est (normalement) en sécurité, l’application en ligne ne peut pas accéder aux ressources locales de l’ordinateur : ni les fichiers sur le disque dur, ni les périphériques (micro, caméra, …). Rien excepté la zone graphique contenu dans la fenêtre du navigateur, la souris et le clavier pour entrer des données ;
  • L’interface est assez bien balisée (là aussi, normalement ;) ), et l’utilisateur a des repères, il sait ce que c’est qu’un formulaire, qu’un lien, une page, …
  • L’application est la même, quelque soit l’ordinateur, le système d’exploitation, le navigateur (ok, je simplifie ;) ).

Inconvénients :

  • Avec les applications évoluées, le navigateur est “décalé” : le bouton back est inutilisable, l’application a besoin d’accéder à plus de ressources (caméra, …) et l’interface est un peu limité ;
  • L’application n’est accessible que quand il y a une connexion Internet (a modérer, avec les propositions de Google).

C’est donc pour donner “plus d’air” aux applications en ligne qu’Adobe a développé son AIR.

L’idée est d’avoir le beurre et l’argent du beurre.

En fait, c’est évidement pas si simple :

  • L’utilisateur doit installer l’application AIR (ok, très peu de clics) ;
  • Les mises à jour sont pratiquement transparentes : comme il y a une application locale, il faut bien mettre à jour l’application. Mais cette mise à jour est automatisée (comme la plupart des applications, aujourd’hui) ;
  • L’interface n’est plus du tout banalisée. Ce n’est pas une critique, puisque justement c’est le but, de sortir des limites du navigateur. Le résultat sera dépendant de ce que feront les éditeurs… On verra le meilleur et le pire !
  • L’application est bien la même, quelque soit la plate-forme, c’est ce qu’apporte le moteur AIR.
  • L’application peut fonctionner en mode off-line, cela dépend de l’application (l’application eBay en mode off-line n’est pas opérationnelle) ;
  • On peut bien sûr se passer l’url qui pointe vers la page d’installation de l’application, mais il est certain qu’on n’aura pas le même niveau de viralité par rapport aux URL…
  • La sécurité : ah, je suis impatient d’en savoir plus demain. Adobe devait y travailler, c’est évidement un sujet clé.

Dans une application AIR, le runtime AIR n’est pas visible, seule l’application apparait sur le bureau de l’ordinateur.

La gestion des applications est donc laissée au gestionnaire de fichier de l’ordinateur.

C’est là que je reviens avec mon idée, d’un navigateur sans bord de fenêtre… C’est peut être un compromis plus intéressant : garder la notion de navigateur, d’URL, mais avec certaines applications en ligne, qui prendraient la main sur la fenêtre du navigateur.

Pourquoi ?

  • Pour garder justement la notion d’URL et tous les avantages associés ;
  • Pour avoir le double mode : service Internet ou service “application” ;
  • Pour simplifier encore plus les processus d’installation ;

Mais voilà, Adobe ne me demande pas mon avis pour spécifier ses produits. Microsoft non plus remarquez !

La valse des Captchas

Vous savez, ce sont ces codes, qu’on vous demande d’entrer, pour vérifier que vous êtes “humains” !

Les formulaires des différents services internet sont en effet parfois remplis par des robots, des programmes informatiques quoi.

Pour empêcher ça, on peut ajouter dans un formulaire un code, un Captchas.

Ce code doit être facile à comprendre pour un homme, et difficile à interpréter pour une machine.

Mais parfois, c’est difficile pour tout le monde.

Exemples :

Captchas 1

Captchas 2

Captchas 3

Captchas 4

Captchas 5

Captchas 6

Captchas 7

(trouvé sur http://www.johnmwillis.com/other/top-10-worst-captchas/ via Romain)

Nouvelle rechute ;)

Comme vous le savez sans doute, je suis en pleine préparation de notre p’tit dej Rich commerce.

On a clairement choisi avec Fred une orientation plutôt “non technologique”.

J’ai pas pu m’empêcher, j’avais préparé tout un tas de slides sur l’architecture MVC adéquate pour décliner les interfaces riches…

En relisant notre présentation, on s’est rendu compte que c’était décallé !

Zut !

Alors je publie une image sur ce blog, et vous ne la verrez pas demain lors de la présentation !

Architecture MVC et interfacs riches

Compréhensible sans explication de texte ?

Multi-écran : avantage… Windows !

Cela fait maintenant quelques années qu’on peut utiliser plusieurs moniteurs sur son ordinateur.

C’est particulièrement utile sur un ordinateur portable, avec un écran interne par définition limité, et un grand écran que l’on branche quand on est en poste fixe.

Sur Windows comme sur Mac, les systèmes doivent s’adapter à cette fonction, et c’est fait avec plus ou moins de bonheur.

En fait, je trouve qu’aujourd’hui, ce n’est satisfaisant ni sur Mac, ni sur PC.

Il y a toujours des applications qui pilotent mal cette fonction, et qui ouvrent des fenêtres un coup sur un écran, un coup sur l’autre écran…

Mais comment le système d’exploitation s’en sort-il ?

Et bien je trouve que le Mac ne s’en sort pas très bien…

Une différence entre Mac et Windows, c’est le système de menu.

Sur Windows, chaque fenêtre possède sa propre barre de menus.

Sur Mac, il n’y a qu’une seule barre de menu, en haut du moniteur principal. Cette barre change, en fonction de l’application active.

Et voilà, tout est dit : si j’ai deux moniteurs, et que je suis sur une application qui est sur mon moniteur secondaire, pour utiliser le menu, je dois aller chercher ça sur l’autre moniteur.

Allez, Steve, toi qui est le roi des interfaces bien foutues, fait quelque chose !

Flash ou Flex ?

Quand on parle d’interfaces riches, il faut parler des technologies permettant de les mettre en oeuvre.

L’une des technologies phare, c’est le Flash.

On connait tous plus ou moins Flash, mais on parle de plus en plus de Flex.

Quelle est la différence ?

Qu’apporte Flex par rapport à Flash ?

Flash recouvre plusieurs choses :

  • Un format de fichier, le SWF, qui contient le média animé proprement dit (les images, les annimations, les films, …) ;
  • Un éditeur : c’est une application Mac ou PC, qui permet de créer des fichier Flash (SWF donc). L’éditeur est orienté design. On pose des images, des objets graphiques, sur une time -line, et on déplace les objets graphiques sur l’échelle de temps ;
  •  Un player : c’est l’application qui permet de lire le Flash. On peut lire un fichier SWF avec une application spécifique, mais le plus souvent, on utilise un plug-ins, intégré au navigateur. C’est donc le navigateur qui joue le rôle de player Flash.
  • Un langage de programmation : ActionScript. On écrit ses programmes depuis l’éditeur, et le langage est interprété par le player.

Flash est donc un ensemble permettant de réaliser des interfaces riches et animées. Flash est orienté design.
Et Flex alors ?

Flex, c’est la déclinaison Flash pour les programmeurs.

Quand on fait du Flex, on travaille en fait sur le même format qu’avec Flash : le SWF.

Pour le client, le résultat est donc exactement le même : c’est un contenu Flash qui apparait dans le navigateur Internet.

La différence, c’est sur la façon dé générer ce fichier SWF.

Flex introduit un nouveau langage, le MXML.

C’est un langage qui permet de décrire l’application Flash que l’on souhaite, et les comportements associés.

On se retrouve donc à faire du Flash, sans l’éditeur graphique, mais plutôt depuis un environnement de développement (Eclipse, …).

Donc, si le résultat est le même, la façon de le faire est complètement différente, et complémentaire.

Dans la réalité d’un projet, les deux approches doivent cohabiter : la partie graphique pourra être réalisée avec l’éditeur Flash, et la partie dynamique pourra être réalisée avec Flex.

Matinée sur le RichCommerce

Actualité riche !

Non seulement on ouvre avec Fred un nouveau site, mais en plus on organise un évènement sur le “rich-commerce”, avec une petite startup américaine comme sponsor : Adobe ;).

Au programme : tout savoir sur les nouvelles interfaces, et sur les opportunités qu’elles apportent au commerce en ligne.

Avec la participation de Fred Cavazza et moi même, plus le témoignage de BPI / Jean Paul Gaultier Parfum. Que du beau monde quoi ;).

C’est le 19 Février, à 9h, proche du trocadero (dans les locaux d’Adobe).

Pour en savoir plus, c’est ici.

Pour s’inscrire, c’est  là.

PS : c’est quoi la différence entre une matinée et un p’tit dej ?

  • Le p’tit dej, c’est un format court et très matinal (8h 10h30 par exemple).
  • La matinée, c’est une demi journée, c’est donc plus … riche !

Vous en voulez encore ?

Mon billet précédent (celui là bien sûr) a eu son petit succès.

On est tous bien d’accord, la question, c’est comment vendre plus, comment utiliser les interfaces riches pour mieux mettre en valeur le produit.

Dans ce nouvel exemple, le produit est mis en valeur avec une interface 3D, sous flash :

ShokwaveAbsorber utilise les interfaces riches pour mettre en avant le produit

Vous trouvez pas qu’ils sont bien présentés les produits ?

En tout cas, on est en plein sur le sujet de RichCommerce.fr.

Bon, je suis sur la mauvaise pente moi, qu’est-ce que je vais vous montrer demain ?

Fred + François = Nouveau site RichCommerce !

J’en avais parlé à plusieurs reprises (ici par exemple)…

Fred en avait également parlé (là par exemple)…

C’est parti : voici le nouveau site “RichCommerce”, en collaboration avec Mr Fred Cavazza himself.

Copie d'écran du nouveau site richcommerce.fr

Un nouveau blog sur le RichCommerce donc. Un blog de plus ?

Le rich-commerce, c’est la contraction des interfaces riches et du e-commerce.

L’objet de ce nouveau blog, c’est de porter nos réflexions, à Fred et moi, sur l’avenir des nouvelles interfaces, au service de la vente en ligne.

Des interfaces riches : pour vendre plus ?

On parle souvent d’interfaces riches, des services qui intègrent de la 3D, de la vidéo, des animations.

Mais est-ce que cela fait vendre ?

Je vous propose, pour s’en convaincre, de passer faire tour sur www.knickerpicker.com

Copie d'écran du site www.knickerpicker.com/, utilisant les interfaces riches...

Le mélange de flash, de petits films, d’animations, est très… convaincant !

D’accord, le sujet s’y prête, d’accord, c’est plus facile que pour des sacs poubelles, mais il est bien évident qu’on peut utiliser ces technologies pour tout un tas de produits.

Merci Manu (encore ! ;) ).

Cette news tombe à pic pour faire un peu de “teasing” : les interfaces riches, et le e-commerce, voilà un sujet sur lequel je vais bien vite revenir… Stay tuned !