Archives par mot-clé : Nouvelles interfaces

Le New York Times lance une application WPF

WPF, c’est le nouveau format de Microsoft, concurrent d’Apollo d’Adobe, qui permet de réaliser des applications, hors du navigateur Internet.

J’ai déjà parlé de cette technologie, par exemple dans ce billet sur l’application de la Fnac.

Ces nouvelles technologies sont importantes pour le e-commerce, car elles promettent de nouvelles façons d’interagir avec les clients.

Le New York Times vient de lancer sa propre application, et j’ai un peu joué avec.

Comme toujours avec ces technologies, il faut commencer par télécharger une application. Le processus est assez rapide, pour peu qu’on ait déjà Windows Vista, ou bien alors il faut installer le dernier framework .NET de Microsoft (plus de 80 Mo !).

Une fois cette étape franchie, on peut lancer l’application du New York Times depuis le menu démarrer de Windows. Au lancement, l’application est « vide » : il faut synchroniser les données. C’est cette synchronisation qui permettra par la suite un usage mixte On-line / Off-line, c’est à dire pouvoir lancer l’application, naviguer dans les contenus même quand l’ordinateur n’est pas connecté.

Page d'accueil de l'application du New York Times, avec téléchargement progressif

Première bonne surprise, le contenu s’affiche au fur et à mesure que les contenus sont synchronisés (pas la peine donc d’attendre que la synchronisation soit finie).

Page d'accueil de l'application du New York Times, avec téléchargement terminé

La page d’accueil, c’est la une du quotidien. On peut cliquer sur chaque grand titre, pour voir l’article en détail.

On peut également cliquer sur les boutons du haut, soit pour afficher une page d’accueil sur un thème particulier (monde, éco, sport, …), soit pour afficher un menu qui permet d’accéder directement à un article du thème chois. Exemple  :
Menu pour accéder à un article

Une fois sur un article, l’utilisateur a la possibilité de choisir la taille de la police. La pagination des articles est automatiquement recalculée, en fonction de la taille de la fenêtre, de la taille de la police, et évidement de la taille de l’article. Dans cette application, pas d’ascenseur : on navigue de page en page.

L’option d’impression est également très propre avec une mise en page très soignée, bien loin des impressions de pages Web :

Impression d'un article

Certaines pages contiennent des publicités :

Publicité dans un article

Au final, j’ai trouvé l’ergonomie du service vraiment très bonne, très claire, très intuitive. J’ai en particulier apprécié l’idée d’une navigation « plate » sans effet 3D inutile.

Un exemple à suivre donc…

Flex et le navigateur Internet

Flex permet de réaliser de véritables applications qui, incidemment, tournent dans la fenêtre du navigateur Internet.

Mais avec Flex, on est bien loin du mode pour lequel le navigateur avait été fait : consulter des pages, avec des liens.

Résultat, des fonctions fondamentales du Web et du navigateur sont un peu bousculées :

  • Les moteurs de recherches sont largués : un peu comme si on voulait chercher dans une application (ça veut dire quoi chercher dans l’application Word par exemple ?) ;
  • Les liens (bookmarks) ne marchent plus : Et oui, une application n’est pas faite de pages. Un lien n’a donc pas de sens.
  • Le bouton back ne marche pas : effectivement, si le bouton back a tout son sens quand on navique dans des pages, cela perd tout son sens quand on utilise une véritable application.

Alors, pourquoi utiliser le navigateur pour exécuter des applications de type Flex ?

D’abord, cela reste une question ouverte, puisque plusieurs acteurs majeurs (Adobe, Microsoft) travaillent sur la question (ex : Apollo pour Adobe), et qu’on peut déjà tester quelques résultats (ex : l’application de la Fnac).

Ensuite, le navigateur apporte pas mal d’avantages :

  • Règles de sécurité : le navigateur garantit, peu ou prou, que ce qui est exécuté dans le navigateur n’ira pas « polluer » le reste de l’ordinateur (accéder aux fichiers locaux, …). Concrètement, pour les utilisateurs, c’est une garantie contre les virus ;
  • Simplicité d’accès à l’application : l’utilisateur n’a pas besoin d’installer l’application. Elle se lance automatiquement dans la fenêtre du navigateur ;
  • L’application sera toujours à jour puisqu’elle est chargée à chaque exécution ;
  • Pour beaucoup d’utilisateurs, devoir installer une application est un frein (risque de virus, de déstabiliser le fragile équilibre du PC, …). Avoir une application qui s’exécute dans le navigateur, sans rien avoir à installer permet donc d’atteindre beaucoup plus d’utilisateurs.

Alors, dans le navigateur ou hors de celui-ci ?

Je pense que :

  • Les deux modes vont vivre en parallèle un bon bout de temps.
  • Cela fait pas mal de temps que divers acteurs essayent de sortir de ce sacré navigateur, et le mode ‘dedans’ survit bien.
  • Un environnement pour lancer des applications directement depuis le bureau de l’ordinateur, c’était bien l’une des promesses de Java, non ?
  • Flex (ou équivalent) peut être utilisé pour faire des « micro applications » à l’intérieur de pages Web (CF les services financiers de Yahoo). Dans ce cas, on est clairement dans le mode ‘dedans’ ;
  • Flex peut également être utilisé pour réaliser des applications plus complètes. Dans ce cas, la question du « dedans ou dehors » prend tout son sens ;

(j’ai écrit ce billet suite à la lecture de ce billet de Ryan Stewart)

DLinkTV : la vidéo pour aider les utilisateurs

Les équipements vendues par DLink sont très techniques (modems, routers, …).

DLink vient d’ouvrir un portail vidéo pour mieux expliquer aux clients comment choisir un équipement, et comment l’installer :

DLinkTV

Bon, d’accord, les gars qui font la présentation ne sont probablement pas des grands pros, ils semblent un peu coincés, un peu gênés d’être là. Et puis, la présentation du site n’est pas très « fun ».

Mais c’est clairement une bonne idée que d’utiliser la vidéo pour aider les utilisateurs, soit pour l’avant vente, soit pour l’après vente.

(trouvé sur radio-canada)

Dell 2.0 ?

Dell utilise les interfaces riches sur son site de vente depuis quelques mois déjà (je vous en avais déjà parlé ici).

Mais depuis quelques jours, Dell a également ouvert de nouveaux espaces d’échanges :

C’est un site d’échange d’idées, entre Dell et ses clients. Chacun peut proposer des idées, qui pour lesquelles on peut voter (à la façon Digg). Dell s’offre donc la possibilité d’écouter ses clients, et d’imaginer les nouveaux produits avec eux.

C’est un blog qui permet d’échanger, entre Dell et ses clients.

Enfin, DellStudio est un espace pour partager des vidéos sur les produits Dell (comment installer un écran plat, …).

(info trouvée sur readwriteweb également reprise par techcrunch)

La vidéo sort du cadre

Toujours sur le Forum e-marketing, j’ai assisté à une présentation de la société onePoint marketing.

On parle beaucoup du pouvoir de la vidéo, sa capacité à capter l’attention des utilisateurs… et d’ailleur, la vidéo commence à apparaître dans pas mal de sites.

Mais avec Flash, on peut aller beaucoup plus loin :

  • Chapitrer la vidéo, comme dans un DVD, avec la possibilité d’aller directement sur une séquence donnée ;
  • Synchroniser la vidéo avec d’autres éléments graphiques, des images, des formulaires, d’autres animations…
  • Faire se chevaucher la vidéo et d’autres éléments graphiques, statiques ou animés, de manière à ce que la vidéo soit complètement intégrée dans l’ensemble de la page Web.

Tout celà donne un côté vraiment riche, attractif, vivant, et étonnant.

Premier exemple, de présentation de l’offre onePoint :

One Point TV

Le fond, derrière la présentatrice, est actif, on peut cliquer que les différentes zones.

Deuxième exemple avec Elite Auto :

One Point TV

A gauche, le menu permet d’accéder directement à la séquence voulue. A droite, la vidéo présente l’offre. Pour Elite Auto, qui est un marchand 100% virtuel, celà donne une impression beaucoup plus réelle, avec un grand magasin… 100% digital.

Dernier exemple, c’est une publicité pour McAfee :

One Point TV

On voit deux vidéos en parallèle (a gauche sans anti-virus, à droite avec : l’anti virus est donc directement lié au noeud de cravate). A la fin de la vidéo, un formulaire apparait sur la vidéo.

Les différents cas d’utilisations :

  • eMailing (publicité, …) : le mail est léger car il ne contient qu’un lien ves la vidéo. Le taux de transformation est beaucoup plus élever qu’avec une campagne d’emailing plus traditionnelle.
  • Formation : la RATP a par exemple réalisé une formation de ses équipes qu’elles soient mieux pour les aveugles.
  • Enrichissement d’un site web.

Tout celà est réalisé avec des moyens très légers, car tout est fait avec un écran bleu, en studio.

Lors de la présentation, le « client heureux », c’est le patron de SOS PC Assistance, qui a utilisé les services de onePoint pour faire de la pub pour un scanner Fujitsu, intégrant une fonction permettant de transférer directement les documents scannés dans des formats adaptés (Word, Excel, PDF, …). Ces fonctions ne sont pas très simple à expliquer (la preuve !), mais avec une petite vidéo, tout devient plus clair !

Si la vidéo est utilisée pour de la publicité, le business model peut être le suivant :

  • Réalisation de la vidéo : entre 5000 et 10000 euros. Celà inclus le prix de l’écriture du scénario, le tournage, la réalisation du film et des annimations, et la mise en ligne sur le serveur onePoint.
  • CPC (Coût au clic) ou CPA (Coût à l’achat).

IBM et Second Life

IBM et Second Life : c’est quoi le rapport ?

SL IBM

Bon, d’accord, IBM a des batiments dans Second Life, et alors ?

Lors d’une conférence sur le e-commerce 2.0, IBM nous a parlé de sa vision du futur, et du V-commerce (pour Virtual commerce).

Et dans le lot, il y avait SecondLife.

IBM propose d’explorer le lien entre le e-commerce et Second Life, mis en oeuvre par la solution IBM Websphere Commerce.

Pour faire du commerce virtuel ? Non non, pour acheter des produits bien réels, depuis Second Life.

Pour l’instant, quand on veut faire ça, on sort de Second Life, pour terminer la transaction dans une page Web bien classique.

IBM travaillerai donc à une intégration plus forte et plus fine entre sa solution e-commerce et Second Life. Le speaker dIBM (Philippe Bournhonesque, du software Goup), nous a également dit qu’IBM travaille au développement de son propre espace virtuel pour e-commerce, qu’ils hébergeraient, et qui permettrait d’inter-connecter les différentes boutiques virtuels (un « Second Life » bis quoi).

Le contexte, c’est qu’IBM à lancé un programme d’innovation, sur près de trois ans (2006 – 2008). Ils ont commencés par un gigantesque brainstorm avec 150.000 personnes (!) : des employés d’IBM plus des partenaires.

Il en est sorti quelquechose comme 40.000 idées !

Les gars d’IBM, ils ont tout trié, catégorisés, filtré… pour retenir 10 idées, avec chacune 10 Millions de $ de budget.

L’expérimentation de la Fnac avec une première « boutique riche »

Fred vous en avait parlé ici.

La Fnac préparait la sortie d’une application, appelée « guide d’achat interactif« . Et bien elle est sortie, et vous pouvez la trouver .

Bon, pour démarrer, il faut être 100% Microsoft : avoir Internet Explorer à jour, et surtout, avoir XP (ou Vista bien sûr) et la dernière version du framework .NET installé (plus de 80 Mo !).

Une fois qu’on a montré « pate blanche », on peut installer et lancer l’application.

On arrive devant un carrousel, qui permet de choisir le type de produit que l’on souhaite acheter :

Pour cette première version, seul le rayon des ordinateur est actif.

Première démarche, il faut synchroniser les contenus. Cette application permet d’expérimenter une utilisation mixte, on-line / off-line.

Une fois cette synchronisation effectuée, on peut cliquer sur l’ordinateur portable, et entrer dans le rayon proprement dit, ou l’on peut consulter les différents modèles proposés :

On peut raffiner les recherches, en cliquant sur l’un des boutons vert du haut (type d’usage, OS, marque, ….) :

Enfin, en cliquant sur une fiche, on arrive sur une fenêtre qui détaille le produit :

On peut acheter, mais on est alors redirigé vers une page web, dans notre bon vieux navigateur préféré.

En synthèse…

Bon, il faut prendre cette application pour ce qu’elle est : une simple expérimentation.

Cette application est incomplète mais permet d’explorer de nouveaux usages :

  • Une interface plus riche, avec des effets 3D et autres fondus enchaînés.
  • Une application qui permet une navigation on-line / off-line.
  • Une application hors du navigateur : c’est le rêve du marchand, que d’être directement sur le bureau de l’ordinateur. Est-ce le rêve du client ? qu’est-ce que cela va lui apporter ?
  • L’ergonomie d’une telle application est très délicate à définir et mettre au point, et dans ce genre d’environnement, il faut tout faire, tout définir (exemple : l’action quand on clique sur une flèche n’est pas forcément intuitive…).

Bien entendu, avant de se lancer réellement dans le développement d’une telle application, il faudra bien mesurer les différents paramètres (coût, délais, cible de clients, …).

Il me semble certains que ce genre d’initiative va se généraliser, et qu’un client, habitué à un marchand, pourra trouver son intérêt à ce type d’application, pour peu que celle-ci soit bien faite, et lui apporte donc un vrai service.

Vers un formulaire parfait ?

L’ergonomie du site marchand : c’est évidement tout à fait fondamental.

Dans la panoplie des points importants, il y a les formulaires. Si l’utilisateur ne sait pas comment le renseigner, où cliquer, où il s’est trompé, … Il peut bien vite se décourager, et « aller voir ailleur ».

Le service Eyojot propose un formulaire d’inscription intéressant :

Vous avez vu : le petit icône apparait au cour de la saisie dans le champ ou juste après avoir changé de champ.

Voila le formulaire complètement rempli :
Tous les champs sont correctement renseignés, et à ce moment là, le bouton pour valider le formulaire devient actif.

On a donc un traitement des erreurs en temps réel, et on ne laisse pas l’utilisateur valider un formulaire qui n’est pas correctement renseigné.

Si en cour de saisie la valeur est incorrecte, la zone est entourée en rouge :

Si l’utilisateur sort du champ de saisie malgrés l’erreur, un popup indique quelle est l’erreur :

Le bonheur s’arrête là ! le formulaire n’est pas parfait, et voici par exemple la situation dans laquelle je me suis retrouvé :

Les zones erronées n’apparaissent pas en rouge (en l’occurence, erreur entre les deux valeurs de l’adresse mail), et le bouton pour valider est innactif…

Dommage, c’était pourtant bien parti !

Le mélange d’Ajax et de Javascript permet d’améliorer l’expérience de l’utilisateur et de l’informer, en temps réel, sur la validité ou non d’une saisie.

C‘est à mon sens une vrai amélioration pour l’utilisateur, et ça doit permettre d’augmenter les ventes.

Reste à faire ça de manière plus professionnelle, avec des tests plus poussés, pour atteindre l’excellence logicielle.

Sortir du navigateur avec Apollo ?

Fusée ApolloFred vous en a parlé ici : Adobe prépare une nouvelle technologie, appelée Apollo.

Cette technologie permet de développer des services, qui ressemblent aux services Flash que l’on trouve déjà sur le Web, mais avec une différence majeure : le service apparait comme une application. Une fois l’application installée sur l’ordinateur, on la lance comme on lance n’importe quelle application, et elle s’exécute avec sa propre interface, hors du navigateur donc.

Sortir du navigateur, c’est un enjeu majeur pour pleins d’acteurs, comme Adobe, mais également pour les fournisseurs de services.

Les freins du navigateur Internet

Pour Adobe, comme pour d’autres acteurs, le navigateur (IE, Firefox…) impose des limites qui ne sont plus adaptés au contexte actuel :

  • Mode connecté uniquement : Les navigateurs sont fait pour accéder à des documents sur Internet. Ils ne permettent pas une expérience utilisateur agréable, entre un mode déconnecté et un mode connecté, ce qui est pourtant un cas d’usage très fréquent ;
  • Construit pour naviguer dans des documents : le Web, c’est à la base des documents texte avec des images. Toute l’ergonomie du navigateur reste très fortement marquée par cet historique.
  • Contrôle très strict sur l’accès aux ressources locales : le navigateur contrôle de manière très rigoureuse l’accès aux ressources locales (disque dur, micro, webcam, …).

Par exemple, quand un service Flash doit accéder au micro et à la webcam de l’utilisateur, la fenêtre suivante s’ouvre pour demander l’autorisation à l’utilisateur :

Exemple d’alerte « sécurité » lors de l’utilisation du service Odeo.

Ce genre d’alerte est très pénalisant pour les utilisateurs, et donc pour les fournisseurs de services. C’est d’autant plus vrai que les choix de l’utilisateur ne peuvent pas être mémorisés : les alertes seront affichées pour chaque utilisation du service.

Aujourd’hui, on est bien loin des documents Web des débuts (voir la première page web de l’histoire trouvée chez presse-citron). les services en ligne sont bien souvent de véritables applications, de plus en plus riches, et de plus en plus multimédia.

Aujourd’hui on jongle avec les navigateur pour faire tourner des applications riches, en utilisant par exemple l’Ajax et le Javascript, ou le Flash.

Mais cette situation n’est pas raisonnable et va très certainement évoluer rapidement.

La solution d’Adobe : Apollo

Apollo est un logiciel qui, une fois installé sur le PC, permet d’exécuter des applications rich-media (flash en particulier).

Pour l’utilisateur, le scénario d’usage est le suivant :

  • Installer le logiciel Apollo : on peut faire confiance à Adobe pour proposer une installation rapide, stable et simple.
  • Télécharger et installer un service Apollo. Les grands acteurs (eBay, Amazon, …) s’y préparent déjà.
  • Après, il suffit de lancer le service Apollo, qui apparait comme une application locale.

Pour Adobe et pour les fournisseurs de services, ça permet de régler pleins de problèmes et de proposer des services plus riches et plus conviviaux :

  • Contrôle total sur l’interface et l’ergonomie : ces services pourront donc avoir un niveau de finition impossible à atteindre aujourd’hui
  • Accès aux ressources locales : cela permettra de faire tourner les services en mode connectés ou déconnectés, d’utiliser les périphériques de l’ordinateur (micro, webcam)…

Pour les fournisseurs de services (et donc les marchands), c’est la possibilité d’avoir son « magasin » directement sur le bureau du client, toujours visible et toujours à un clic.

Mais l’utilisateur restera maître du jeu : il faudra trouver les arguments pour le convaincre de télécharger une telle application, et il faudra que cette application lui apporte réellement de la valeur si l’on souhaite rester « visible » dans la durée.

Pixsta : recherche et navigation visuelle pour sites marchands

Info trouvée sur ReadWriteWeb.

Pixsta propose un moteur qui permet de naviguer dans l’arborescence des produits par un nuage d’imagettes.

Exemple avec le site Elle.uk.com :

Visual Search avec Pixsta su le site Elle.uk.com

Quand on clique sur une catégorie (en haut à gauche), le nuage d’imagettes est mis à jour.

On peut directement voir une grande image du produit en passant la souris sur l’imagette correspondante.

Autre fonction : on peut recentrer la recherche en cliquant sur un produit.

Exemple avec les sacs à main :

Visual Search avec Pixsta su le site Elle.uk.com

En cliquant sur une imagette, on ouvre un popup qui permet de voir le produit en grand, de mettre le produit dans le panier, ou de recentrer la recherche sur des produits similaires :

Visual Search avec Pixsta su le site Elle.uk.com

Cela fait un site très sympa, avec une navigation simple et intuitive, et surtout très rapide.