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 ?

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 !

Interface riche avec Sylverlight

Microsoft préfère utiliser ses produits pour présenter ses évènements… et c’est bien normal.

Pour présenter les Techdays 2008, Microsoft a développé ce site :

TechDays riches avec Sylverlight

Dans ce site, Microsoft met en avant la force de Sylverlight, à savoir la manipulation de video dans des contenus rich-media. Chaque “pola” est une video, et un clic sur l’une des image lance le petit film. On peut bien entendu déplacer, redimensionner, tourner chaque imagette en toute liberté. sympa.

Cerise sur le gateau, ça marche très très bien sur Mac (installation en deux ou trois clics, puis comportement très fluide).

C’est Brainsonic qui a développé ce petit site.

(Merci Manu pour le lien)

Des interfaces très très riches…

Je suis tombé sur ce site :

Copie du site Universalmind

C’est beau, c’est une belle démo de ce qu’on peut faire avec Flex (animations temps réel, multi fenêtres, transparence, calques, vidéo, …).

Mais soyons clair : c’est surtout une belle prouesse technique ; pas réellement un service orienté usage, ergonomie.

(via Fabien)

Un site Flash extraordinaire

Je suis tombé sur ce site :

Image du site flash de 2Advenced

Incroyable à plusieurs niveaux :

  • Une beauté à couper le souffle ;
  • Une navigation et une ergonomie soignée, intuitive ;
  • Un référencement excellent, pour ne rien gacher, avec un page rank de 8 sur plusieurs pages !

Quelle maîtrise !

(via Eric)

Des effets visuels pour améliorer l’ergonomie : l’exemple d’Apple et de son Time Machine

Peu de concepteurs d’applications arrivent à vraiment bien utiliser les animations (effets de zoom, de “disparition”, de fondu, 3d, …).

En général, ces effets sont utilisés pour “faire joli”.

Sur Léopard, le dernier OS d’Apple, les effets visuels sont là pour aider l’utilisateur, pour enrichir la métaphore.

Ils sont beaux, ok, mais surtout, ils ont du sens !

Le plus bel exemple est, à mon sens, Time Machine :

Je l’ai installé ce Week-End, et c’est réellement impressionnant. Comme souvent pour Apple, on se dit : “mais pourquoi personne n’avait fait ça avant” ? Il y a pourtant des sociétés spécialisées dans les systèmes de sauvegarde, et certaines font des produits “soit disant” grand public (avec des centaines de paramètres à régler…).

L’idée de Time Machine, c’est qu’un système de backup, c’est en fait un système qui permet de voyager dans le temps : on peut reculer, reculer, et voir les fichiers dans l’état où ils étaient à un moment donné, dans le passé.

Ensuite, tout est fait pour que l’utilisateur soit en plein dans cette métaphore. Le produit a ainsi une mise en scène incroyable.

  • Au lancement de Time Machine, le bureau s’efface pour laisser place à la machine à voyager dans le temps ;
  • La machine elle même est mise en scène avec un effet 3D : plus on est au fond du tunnel, et plus on remonte dans le temps ;
  • Quand on quitte l’application et qu’on revient sur le bureau, une animation nous fait “rebasculer dans le présent”.

Tout cela permet d’illustrer plusieurs points :

  • Les interfaces riches permettent de simplifier l’expérience de l’utilisateur ;
  • Pour arriver à ce résultat, il faut un véritable travail, mêlant ergonomie, fonctionnel, technique ;
  • Tout cela peut complètement être appliqué au e-commerce !

Une boutique intéressante : Abercrombie & fitch

Premier élément intéressant, la page d’accueil.

Page d'accueil du site Abercrombie : grande photo

Techniquement, l’image n’est pas une image, c’est du flash. Intérêt ? la scallabilité : l’imager s’adapte à la taille de l’écran.

A mon humble avis, la barre de navigation dans les catégories, tout en haut, n’est pas tellement incitative.

Les catégories ensuite :

Exemple de catégorie dans la boutique Abercrombie

La zone du milieu est encore du Flash, et encore ici, se retaille en fonction de la largeur de l’écran, avec un minimum de 900 pixels.

On navigue dans les produits avec le “scroller” horizontal, pltôt bien fait.

En cliquant sur un produit, on arrive à une sous-catégorie :

Exemple de sous catégorie

Très proche de la catégorie : l’utilisateur n’est pas déconcentré par de nouveaux modes de navigation. Autre point tout à fait clé : la taille des visuels et la qualité des photos : excellent !

En cliquant sur les petits “échantillons” sous les vêtements, on peut directement voir le vêtement dans les différentes couleurs.

On arrive sur la fiche produit en cliquant sur un produit :

Exemple de fiche produit

Vous voyez quoi ?Une grande photo bien sûr. Elle est simplement énorme, et de très grande qualité.

On peut la voir encore plus grande, en cliquant dessus (on ouvre alors une popup, c’est pas la solution que j’aurais recommandé mais bon…).

Un bel exemple d’une mise en page très sobre, axée sur la mise en avant des produits par des photos bien faites et bien mises en avant.

e-commerce 3D “immersif” avec Kinset

Kinset est une nouvelle startup, qui propose une technologie permettant de créer des boutiques 3D.Logo Kinset

Le système fait un peu penser à Second Life : il faut télécharger un logiciel spécifique (uniquement sur PC…) qui permet ensuite de naviguer dans des espaces marchands 3D.

Exemple d'espace 3D avec Kinset

Exemple d'espace 3D avec Kinset

Comme le montre ces images, un des problèmes majeur de ces espaces virtuels, c’est de rendre ces espaces vivants. Pour l’instant, les allées sont bien vides, on se sent vite très seul !

L’autre point délicat, c’est évidement la 3D elle même : comment naviguer simplement, comment manipuler les objets que l’on veut acheter…

Aujourd’hui, je dois dire que je suis plus convaincu de l’intérêt de ces technos pour présenter les produits, voire de les manipuler, dans un site web classique… Je vous présenterais dans un tout prochain billet une boite française qui propose une solution qui va dans ce sens…

Plus de 40%…

Quand on demande aux internautes :

“pourquoi avez vous abandonné votre achat en cours de route ?”

Plus de 40% répondent :

“C’est à cause des formulaires :

trop long, trop compliqués.”

C’est l’un des fondamentaux du e-commerce.

Impact de l’ergonomie sur le taux de transformation : l’avis de Jacob Nielsen

“Le travail sur l’ergonomie d’un site peut-être la plus rentable source de gains en terme de taux de transformation”

Jacob Nielsen

(via Capitaine Commerce)