Archives par mot-clé : Interfaces riches

Amazon déploie la nouvelle interface « responsive » en France

Amazon avait mis à jour la version us du site il y a déjà plusieurs mois.

La voici qui débarque en France :

Pour rappel, la page s’adapte à la largeur de l’écran, avec affichage ou non du menu vertical, en fonction de la largeur de la fenêtre.

Je trouve l’approche d’Amazon très intéressante, et je dois le dire, parfaitement en phase avec la façon dont je vois les choses : le responsive n’est pas, de mon point de vue, une solution universelle qui permet de faire des templates qui fonctionnent des mobiles aux grands écrans.

C’est par contre une solution intelligente qui permet de définir des gabarits qui ont une certaine élasticité : un écran de PC moyen a grand, une tablette verticale ou horizontale, …

Cela permet d’améliorer la qualité des sites, sans exploser le nombre de templates.

Treepodia – une solution pour illustrer les produits avec des vidéos… sans vidéo ;)

Illustrer les produits, enrichir la présentation des produits, on le sait, fait parti des « bonnes pratiques » pour vendre plus.

Mais le marchand est pris entre deux feux :

D’un côté, bien sûr, il veut vendre plus, ça c’est sûr !

Mais de l’autre, le marchand, il doit gérer sa marge, et donc choisir avec soin ses investissements.

Faire de la vidéo, ça coûte cher !

C’est à ce problème délicat que ce propose de répondre Treepodia.

La solution, c’est de faire de la vidéo sans vidéo. Trop fort 😉

En fait, il s’agit de faire des vidéos à partir de photos. Le plus simple est de regarder un exemple, comme celui là :

(cliquez sur l’image pour aller voir la démo)

Donc, il ne s’agit pas de vrai vidéos, mais d’une vidéo générée à partir de photos, d’animations, et d’un enregistrement audio (commentaire).

Cela me semble un très bon compromis, et, quand c’est bien fait, ça peut donner des résultats très sympas.

La solution est plutôt simple à mettre en oeuvre.

Le prix démarre à 100 € par mois :

Mais le plus intéressant, c’est que la boite s’engage sur un ROI de x4 minimum : 1 € investi doit au minimum en rapporter 4, c’est dans le contrat !

La boite démarre en France, vous pouvez contacter Olivier de ma part :

oliviera@treepodia.com

(je n’ai pas de comm. Je devrais en demander ? 😉 )

 

Une nouvelle rupture dans le web : les écrans ultra haute résolution

Apple a sorti un nouveau portable, le macbook pro retina.

Avec ces 2 880 x 1 800 pixels, on est bien loin des écrans classiques d’ordinateurs.

Ce n’est pas le premier écran ultra haute résolution, puisqu’Apple a sorti, il y a quelques mois, le nouvel iPad, qui a également une très haute résolution (de 2 048 x 1 536 pixels).

C’est une vrai rupture, parce que cela change le contenu à gérer pour un site e-commerce (ou un site en général).

Pour avoir un affichage nickel, sur un tel écran, il faut envoyer des photos adaptées, avec une résolution bien plus élevée.

Cela touche les photos, mais également toutes les images du site : image pour les boutons, les éléments de décoration du site, …

Je ne vais pas entrer dans la technique, mais on peut adapter son site de manière a afficher de très belles photos sur de tels écrans.

Cela pose plusieurs problèmes :

  • Si on met les mêmes photos sur tous les écrans, on charge le poids de toutes les pages, alors que ces images ne sont utiles que pour certains écrans.
  • Un utilisateur peut avoir un écran ultra haute résolution, mais avoir un débit faible. Si on lui met des images trop lourdes, il aura un bel affichage, mais devra attendre trop longtemps.

On est donc en face d’une nouvelle rupture, qui impacte la façon de réaliser les sites web.

 

Amazon fait du Responsive Design

On sait tous qu’Amazon a un template élastique, qui s’adapte à la largeur de la page.

Je viens de découvrir que le nouveau template US du site pousse bien plus loin l’adaptation.

Premier exemple sur la page d’accueil :

En mode pleine largeur (1400 pixels) :

Vous voyez à gauche, le menu est déployé. Et bien en 1000 pixels de large, ça donne :

Le menu a disparu.

L’adaptation est sympa aussi au niveau de la fiche produit.

En 1400 pixels, ça donne :

Et en 1000 pixels :

Vous voyez, l’image à droite, ce n’est pas la même, elle n’a pas la même taille du tout.

Bref, Amazon s’inspire du Responsive Design pour enrichir l’expérience de l’internaute.

 

Responsive Web Design, mon grain de sel ;)

Les tailles des écrans varient énormément, et ce phénomène ne fait que s’amplifier.

Les nagigateurs se diversifient, sans qu’on voie de réelle convergence arriver. En fait, comme l’historique du web augmente (mécaniquement 😉 ) et qu’on ne contrôle pas les mises à jours des logiciels, le nombre de navigateurs augmente mécaniquement, au fil du temps.

Le contexte de l’internaute est de plus en plus varié : chez lui, avec un ordinateur, chez lui, avec une tablette, une console de jeux mobile ; en mobilité, avec un smartphone, …
Ce contexte est important, parce qu’en fonction de celui-ci, les problématiques ne sont pas les mêmes : la bande passante n’est pas du tout la même, entre un internaute qui accède à un réseau wifi et un internaute en mobilité, en 3G ou Edge.

Enfin, même quand l’internaute est chez lui, devant un bien classique ordinateur, la taille de la fenêtre du navigateur peut tout à fait ne couvrir qu’une partie de son écran.

Bref, le contexte de navigation devient de plus en plus varié, avec pas mal de paramètres à prendre en compte.

D’ou la tendance actuelle, intéressante, du Responsive Web Design.

Cette notion vient de l’architecture physique, ou l’on essaye de faire des éléments qui évoluent, en fonction des besoins ou usages.
Exemple : une vitre est transparente et peut devenir opaque, en fonction de l’usage de la pièce.

Je veux pas la ramener, mais c’est bien ce à quoi Wokup s’était attelé dès 1999 !

Donc, ce n’est pas un sujet nouveau, mais on peut dire que c’est un sujet qui devient de plus en plus important.

L’idée, du Responsive Web Design, c’est de changer la façon de concevoir un site web, de manière à ce qu’il soit « intrincèquement » adaptable aux différentes configurations.

On a bien l’idée d’un contenu unique, qui s’adapte à l’ensemble des situations.

 

Ce que j’en pense :

C’est un vrai sujet, c’est donc très bien qu’il soit traité 😉

Comme le dit ce très bon article (en Français en plus), cela ne concerne pas que la partie technique. Il faut que les designers pensent au site différemment, le conçoivent différemment.
Il faut dans le même temps que les décideurs, les manageurs, comprennent ces enjeux, et fassent des choix cohérent par rapport à ce besoin, qu’ils demandent à leurs agences : « comment le site s’adapte aux différentes tailles d’écrans » ?

Si le buzz actuel sur cette approche fait bouger les choses dans ce sens, et aide l’ensemble des acteurs : développeurs, designers, décideurs, c’est déjà très très bien !

Maintenant, l’approche est intéressante, mais n’est pas suffisante.

Je ne pense pas, pour ma part, que le seul sujet soit la mise en forme, aussi intelligente soit-elle.
Exemple : on ne va pas afficher le même nombre de produits, entre une interface pour smartphone et un ordinateur.

Je ne vois pas non plus pourquoi on envoie le même contenu à l’internaute, quelque soit sa configuration.

Je sais que ce n’est pas l’approche « standard », mais je pense qu’il est plus adapté, pour certains éléments, d’envoyer un contenu adapté à la configuration de l’internaute.

Exemples :

  • il est en mobilité, sur un petit écran : j’envoie des images petites, légères.
  • Il est chez lui, avec un bon réseau : j’envoie des images en haute définition, permettant d’avoir une qualité au top.
  • Il navigue depuis IE6 😉

Bref, je pense que la solution passe par un mixe entre ce que propose le Responsive Web Design, et des technologies côté serveur.

La partie Responsive Web Design permet d’avoir un contenu avec une certaine élasticité.

La partie serveur permet d’optimiser ce qu’on envoie à l’internaute, tant au niveau du poid qu’au niveau du format.

Maintenant, l’approche dont je parle n’exsite pas…. Pas encore !

Merci à

Quand l’image sort du cadre

On le dit, on le répète : pour un site e-commerce, la qualité des photos est un élément clé.

Maintenant, quand on a de belles photos, il faut les mettre en avant !

Certains sites proposent des photos de plus en plus grandes.

Le site KillSpencer, trouvé au hasard de surfs, va très loin.

Page d’accueil  :

Un peu dans l’esprit de ce que fait Apple, la home met en avant un énorme visuel.

Bon, apple va plus loin puisque leur home ne met en avant qu’un seul produit, alors que là, il s’agit d’un slider, qui fait défiler 10 images XXL.

Sur sélection d’une catégorie, on arrive sur une page comme ça :

Là encore, ce qui est mis en avant, ce sont les photos des produits.

Et voilà la fiche produit :

On est sur une charte qui pousse le minimalisme jusqu’au bout. Il n’y a pas de texte de description sur cette fiche !

Et l’ensemble des actions sont en superposition, par dessus la photo, dont le bouton d’ajout au panier.

En fait, il faut cliquer sur le bouton, en bas à gauche, pour afficher une description en superposition :

Je vous épargne le processus achat, plus classique.

Alors, bonne idée ou pas ? Un des points à valider, c’est si cette façon d’afficher le texte est « SEO friendly ». Qu’en pensent les experts ?

 

 

Une idée du e-commerce en HTML 5

Le HTML 5, qui devrait aboutir à une norme en 2014, est déjà bien présent dans les navigateurs modernes, Google Chrome en tête.

Le web a d’ailleurs pratiquement toujours évolué comme ça, tiré par les navigateurs plus que par la normalisation (qui est donc plutôt une normalisation « a posteriori »).

Voici quelques sites, qui, je pense, donne une idée de ce qu’on peut faire, en HTML 5 dans notre secteur du e-commerce.

Premier exemple : manufacturedessai.it

Le site propose une navigation verticale plutôt étonnante, faite de plusieurs couches (calques) transparents, ce qui donne une impression dynamique nouvelle. A tester pour comprendre ;).

Autre site  : www.gforce.be

La navigation est là encore différente, avec un slider plein écran, et les différents éléments qui apparaissent en superposition.

Autres sites intéressants :

Tout ça pour avoir un petit aperçu de ce que permet le HTML 5, et des évolutions à venir pour les sites e-commerce… A suivre de très près ;).
Au, fait, je donne une formation HTML 5 le 16 Septembre…

Affichage avancé des pages dans le navigateur

Vous dessinez votre site avec une largeur fixe ?

Cette largeur augmente, et aujourd’hui, la plupart des sites sont réalisés pour un écran de 1024 pixels de large.

La hauteur est habituellement variable : il est « commun » de réaliser des sites avec une hauteur variable et une largeur fixe : les internautes sont habitués à « scroller » verticalement, et pas horizontalement.

Ceci dit, rien d’obligatoire : certains sites ont essayés la navigation horizontale, comme Gucci :

Donc, votre site, il a des pages avec une hauteur variable, et une largeur fixe. Point.

C’est un bon début, mais on peut aller bien plus loin.

Pour vous en convaincre, ouvrez une page d’un service de Google, GMail, par exemple.

L’occupation de l’espace est bien différent :

La page est complètement remplie, sur toute la largeur, quelque soit la taille de la fenêtre.

Bon, en dessous d’un minimum, il y a un scroller horizontal, mais dès qu’on a une largeur raisonnable, la page s’affiche simplement en pleine largeur.

Au niveau vertical, la page déborde, avec un ascenceur donc.

Mais quand on dessend dans la page, un bloc reste collé en haut :

(j’ai entouré en rouge la partie qui reste fixe, quand on scroll la page)

On peut également voir ce type de mise en forme avec le back office de magento.

C’est là ou je voulais en venir : c’est, il me semble, une tendance clé des nouveaux services : cet usage de morceaux « scotchés ».

On peut, comme GMail, scotcher un bandeau, permettant de garder des actions clés toujours visibles (ici, ce sont les boutons pour naviguer dans les mails : envoyer, forwarder, …).

On peut aussi scotcher un bandeau en bas. Headict l’avait fait avec un footer toujours visible. Bon, ils l’ont enlevé pour remonter ces éléments dans le header, et je n’ai pas trouvé d’autres exemples ;). Salomon a sur son site e-commerce, un exemple de footer scotché :

On peut encore scotcher un morceau a gauche ou à droite.

Exemple, avec le service Feedback 2.0, sur Beansight :

Le bouton a gauche est « collé » au bord de la fenêtre, et se déplace, en fonction du scroll de la fenêtre.

Ces fonctions sont très riches, et très utiles.

Quelques bémoles cependant :

  • D’expérience, il faut une mise en oeuvre impeccable. J’ai vu pas mal de site avec une mise en oeuvre approximative. Cela donne, à mon avis, un rendu très amateur. Si on n’a pas les moyens de faire un truc bien travaillé, il vaut mieux s’abstenir.
  • Comme toujours quand il s’agit d’interfaces, le diable se cache dans les détails. Il faut tester le service dans des configurations et des usages limites. Que va-t-il se passer si la fenêtre est toute petite ? Et si l’internaute agrandit l’affichage ? Ou s’il le réduit ? Il faut penser à tout.
  • Enfin, ça peut être super utile de garder des espaces scotché, mais c’est de la place qui ne pourra pas être utilisé pour autre chose. La place sur l’écran, elle est « chère ». C’est donc une super idée d’utiliser ces fonctions pour garder afficher des choses escentiels, pas pour le superflux.

Conférence sur l’expérience client « riche »

C’est quoi une expérience client « riche » ?

C’est, de mon point de vue, apporter un service complet, du point de vue du client.

C’est une expérience qui crée de la proximité avec le produit, par la qualité de la navigation et des interfaces.

Comme vous le voyez, je mets en fait la performance au coeur de ce qu’on appelle une « expérience client riche ».

Bon, on va discuter de tout ça, avec tous pleins d’experts du sujet : Yuseo, Wexperience (Capitaine Commerce), SQLI, et bien sûr Adobe Scene 7.

Infos pratiques : 16 Mars, au Trocadero, de 9h30 à 11h30.

L’invitation complète :

Les bonnes pratiques et solutions émergentes autour de l’ergonomie et de l’expérience client enrichie.

L’e-commerce Français est en très bonne santé et a bel et bien passé le cap des 30 milliards d’euros de transaction réalisées sur les sites de commerce en ligne français en 2010, la Fevad estime à 45 milliards le montant total des transactions en ligne pour la fin 2012.

Il est intéressant d’observer l’augmentation de la confiance des acheteurs en ligne qui ont acheté en moyenne 12 fois sur internet ce qui représente un achat par mois. La Fevad à recensé un peu plus de 27 millions d’acheteurs en ligne au courant de cette année, ce qui fait 3 millions de plus qu’en 2009.

Comment surfer sereinement sur cette vague au travers d’expériences clients toujours plus riches et contextuelles, attendues par les internautes ?
Programme : Mercredi 16 mars – Paris Trocadéro – 9h30- 11h30

9h Accueil
9h30 – 10h30 Table ronde #1 – De l’importance de l’ergonomie et du testing pour les sites eCommerce
Au travers de témoignages et de cas concrets d’agences spécialisées dans l’ergonomie et l’optimisation de la performance des sites, venez découvrir les meilleures pratiques en matière de benchmark, de collecte d’information, de tests (quali/quanti) avec pour objectif commun : l’enrichissement de l’expérience client.
Intervenants :
Jean-Pierre LE BORGNE, Directeur général Yuseo
Olivier SAUVAGE, Directeur associé Wexperience
Laurent BARBAT, Consultant e-commerce, Sqli Agency

Animateur :François ZISERMAN, Consultant e-commerce (BLOG E-COMMERCEhttp://www.ziserman.com/blog/)

10h30-11h30 Table ronde #2 – De la performance des dispositifs rich media (RIA) pour les sites eCommerce
ROI du rich-media : réduction des coûts mais surtout croissance de la transformation
Table ronde avec 3 experts Adobe autour du cycle vertueux de déploiement projet:
– Etat de l’art
– Considération / Etude préliminaire
– Conception
– Mesure du « ROI des RIA »
– Optimisation
Des exemples concrets de sites e-Commerce ayant implémenté avec succès des dispositifs Rich Media et Vidéo seront présentés pour illustrer le débat.
Témoignage d’Emery Jacquillat (Groupe Matelsom)

Intervenants :
Cedric DROUOT : Regional Manager ADOBE SCENE7
Patrick CHANCELIER : Directeur Commercial France – Omniture BU
Michaël CHAIZE : Représentant de la technologie Flash en Europe ADOBE

TémoinEmery JACQUILLAT Président GROUPE MATELSOM

La table ronde sera suivie d’un cocktail

>> INSCRIPTION >>