Archives par mot-clé : Ergonomie incitative

Luxe et performance avec Tiffany

Je donnais une formation la semaine dernière, et l’une des personnes de la salle m’a parlé du site Tiffany :

De manière générale, les sites liés au luxe ne respectent pas les standards du e-commerce, avec comme résultat prévisible des taux de transformations… adaptés ;).

Ici, c’est à mon sens un des meilleurs exemple, entre luxe et performance.

Le site, comme vous pouvez le voir sur la home, est extrêmement dépouillé.

Et les visuels produits sont les plus grands possibles.

Les pages catégories sont également très dépouillées… A l’extrême, même, puis qu’aucun texte n’est affiché.

Très joli. On notera juste que ce n’est pas la meilleure solution pour le référencement naturel.

Au passage de la souris, une autre photo est affichée, montrant le produit en détail.

Cette zone est gérée en Flash.

Au dessus, quelques options permettent de naviguer dans la catégorie avec des filtres : matière, prix, …

Dernière page analysée : la page produit :

Très propre également. Cela n’empêche pas le site de mettre en oeuvre de l’ergonomie incitative, avec un bouton « ajouter au panier » bien visible.

Bon, la photo du produit ne permet pas de voir le produit « d’assez près » à mon gout.

Très bon exemple en tout cas, qui montre qu’on peut faire un site classe et efficace.

Nouvelle boutique Lacoste

Lacoste vient d’ouvrir sa boutique en ligne :

Premier point, Lacoste a decidé de séparer la boutique en ligne du site « société ».

C’est, pour ce type de marque, une bonne idée. Cela permet à la boutique de se concentrer sur son rôle : vendre.

La boutique est plutôt bien faite. Le moteur derrière la boutique est Demandware.

Le moteur de recherche propose, dès la saisie des premières lettres, une liste de suggestions (comme google).

La page de résultat propose des filtres d’aide à la sélection :

C’est une bonne idée. même si je pense qu’il serait mieux de masquer les critères non discriminant (Type ici, qui n’a qu’une valeur).

Autre bonne idée, les vignettes qui présentent les produits proposent de voir directement les déclinaisons couleurs (le visuel change dynamiquement au passage de la souris sur une vignette couleur).

Visite de la page produit :

C’est très pro :

De grands visuels, de qualité.

La mise en page, clair, structurée.

La mise en œuvre d’une ergonomie incitative, avec un bouton « ajouter au panier » d’une couleur bien visible, qu’on ne retrouve nul part ailleurs.

La fonction Zoom est mise en œuvre de deux manières :

Au survol de la grande photo, et avec des photos de détails.

Quand on ajoute le produit au panier, celui ci se déroule, pour afficher son contenu :

La page panier propose une fonction originale :on peut modifier son article, sans sortir de la page :

Il est donc possible d’ajuster la couleur, la taille ou la quantité, sans sortir de la page panier. C’est une bonne idée !

Bravo donc pour cette réalisation.

A mon avis, on peut améliorer la navigation dans le catalogue : l’accès aux catégories est un peu long.

Secouer un peu le modèle : et si vous mettiez le bouton « ajout au panier » à gauche ?

Les sites e-commerce se copient beaucoup les uns les autres.

Ca peut être une bonne idée… Mais le danger, c’est de copier une mauvaise idée, ou de copier une idée, qui n’est pas applicable dans le contexte.

Bref, méfiance !

Le site babyage a fait des tests A/B sur l’emplacement du bouton « ajouter au panier ».

Ils sont parti là dessus après avoir lu une étude expliquant que la partie gauche de l’écran est « plus chaude » que celle de droite.

Le résultat de leur test : la transfo est meilleure avec un bouton à gauche !

Et le test semble avoir été bien fait, puisqu’il prenait en compte le taux réel de transformation : c’est à dire le taux de clients qui vont jusqu’à l’achat du produit (et pas simplement l’ajout au panier).

L’amélioration mesurée est de 16.7% !

Vous remarquerez que la zone d’ajout au panier est particulièrement bien mise en valeur, avec un prix qu’on ne peut pas rater. autre remarque : le bouton d’ajout au panier est particulièrement incitatif, avec une couleur unique qu’on ne retrouve nul part ailleurs dans le site.

(source GetElastic et Whichtestwon.com)

Nouveau très beau site avec Demandware

Demandware se développe bien… Mais pas encore en France.

Ils viennent de mettre en ligne le site Mirapodo.de, site de vente de chaussures du groupe Otto :

Je ne peux juger que sur la partie visible, le Front, mais ce que j’ai vu est vraiment très très bien :

  • Moteur de recherche avec suggestions,
  • Résultats très rapides et bien mis en scènes,
  • Navigation à facettes, bien adaptées au produit (couleur, marque, taille, prix, … plus pleins d’autres que je ne comprends pas, parce que c’est en Allemand 😉 ),

La fiche produit est un modèle de « bonnes pratiques » :

  • Zoom automatique, au survol de l’image
  • Changement automatique des photos, au survol des imagettes
  • Mécanisme pour choisir les couleurs et les tailles très bien fait, ou l’on voit bien les choix, ce qui est en stock (les options qui ne sont pas en stocks apparaissent grisées), et le visuel principal qui change, là encore, au survol de l’imagette ;
  • Et enfin, une zone vente, à droite, avec toutes les infos pour l’achat, et un bouton d’achat bien incitatif.

Les menus sont également un modèle du genre :

Ils sont très clairs, avec un code couleur discret et de bon gout…

Sur les pages vignettes, petit détail sympathique : on peut voir la chaussure sous tous les angles, en déplaçant la souris !

Bref, un site très bien fait donc.

Ah, j’aimerais bien voir le back office !

Autre article sur Demandware :

Comment naviguer dans le catalogue sur iPhone ?

Petite étude par fonction, sur l’iPhone.

Au lieu d’étudier un site dans son ensemble, il me semble intéressant de prendre une fonction, et de voir comment elle est traitée sur différentes applications.

Premier cas avec la navigation dans le catalogue donc.

Cette fonction est évidement fondamentale : l’objectif est de permettre à l’utilisateur de trouver ce qu’il cherche.

Et comme on est en mobilité, le challenge n’est pas évident :

  • Petit écran (comparé à un ordinateur) ;
  • Souvent beaucoup de produits ;
  • Pas de clavier ni de souris…

C’est parti !

Premier exemple avec Yoox :

Pas le choix : l’utilisateur doit trouver son bonheur dans une liste de catégories.

De catégories en sous catégories, on finit par arriver à une page de vignettes :

Ce choix peut se justifier par la taille du catalogue de Yoox, qui doit être réduit (ça reste à vérifier, c’est une hypothèse) ?

Deuxième exemple avec Rue Du commerce (découverte grâce à un commentaire sur ce billet) :

Ici encore, on nous propose avant tout un ensemble de catégories.

Petite fonction complémentaire, quand on est sur l’avant dernier niveau : on peut déplier la sous catégorie sans sortir de la page :

En bas de l’écran, la barre d’options propose un moteur de recherche :

Cette fonction est très basique :

  • Pas de recherche prédictive
  • Ce qui est proposé, ce sont les catégories, les produits ne sont donc pas mis en avant

Pas de merchandising de la recherche donc, ce qui est dommage en mobilité, ou l’efficacité est pourtant prépondérante. Mais bon, c’est une première version…

Passons à nos amis américains : eBay en premier :

Ce coup ci, ce qui est mis en avant, c’est bien le moteur de recherche. On ne nous parle plus de catégories !

Deux façon de chercher : le champ de recherche en haut de l’écran, et une navigation dans des images, pour choisir parmi des best sellers.

Quand on commence à saisir un mot, les résultats s’affichent bien en temps réel, au fil de la saisie.

Et les résultats proposés sont bien directement des produits, ce qui doit permettre de mieux transformer.

Sur sélection d’un produit, on arrive bien sur les annonces, avec éventuellement des outils pour affiner la recherche :

Suite de la visite US avec Amazon :

Ici encore, la priorité est à la recherche, même si Amazon utilise pas mal d’espace pour pousser quelques produits clés (le Kindle en l’occurence).

Comme pour eBay, la recherche est assistée :

On arrive bien directement sur une liste de produits, avec, dès la liste, pas mal d’infos en fait :

Bon, je ne reviens pas sur la fonction innovante proposée par Amazon, qui consiste à prendre une photo d’un produit pour lancer une recherche sur des produits similaires.

On a fini ? Non ! Deux autres applications méritent le détour à mon avis : ce sont les applications proposées par Apple, iTunes et App Stores :

Et bien Apple, qui doit pourtant proposer une navigation dans un catalogue très profond ne met pas en avant la recherche, mais propose plutôt une animation, avec mise en avant de produits.

Bon, la recherche est bien présente en barre de contrôle :

On a bien une recherche assistée très efficace, et surtout, un résultat de recherche particulièrement travaillé, comme sur le site web d’Apple d’ailleur :

Pas de fiche produit ?

Toujours en exploration sur Sears, je me suis baladé sur KMart, un site de la galaxie Sears.

La page qui affiche un ensemble de produits d’une catégorie présente chaque produit dans une colonne verticale assez haute :

Les photos sont bien alignées en haut, mais ensuite, c’est en « accordéon » : les boutons et les zones ne sont pas alignées horizontalement.

Quand on rapproche la souris d’une photo, un bouton apparait :

On parle bien de « quick view » : vue rapide. Ce n’est donc pas une invitation à voir en détail le produit.

Effectivement, si on clique sur le bouton, un « popup calc » s’ouvre (fenêtre Javascript) avec quelques informations sur le produit :

Cette fenêtre s’ouvre par dessus la page catégorie donc. Son positionnement dans la page est un peu bizare. Dans mes essais, cette fenêtre c’est souvent ouverte tout en haut de la page.

Cette fenêtre affiche le trict minimum pour le produit. Visuel, prix, petite description, et bien sûr, le bouton pour acheter.

Comment aller sur la page produit ?

Et bien la seule façon, c’est de chercher le petit lien, en haut (go to product page).

Chez Sears, on veut donc « gagner des clics ». Pas la peine d’aller sur la fiche produit : et hop, un clic de moins !

Ainsi, on peut même choisir la déclinaison d’un produit depuis la page catégorie :

Au final, deux idées sont donc mises en œuvre ici :

  • On peut acheter un produit directement depuis la page catégorie ;
  • L’interface pousse l’internaute à rester sur la page catégorie, en affichant des mini pages produits.

Au niveau de l’efficacité, je pense que ce type d’outils sont très bien pour certains produits, comme les produits de grande consommation par exemple. La fiche produit pour le litre d’huile n’est probablement pas complètement fondamentale…

Des fiches « catégories » riches et tellement réussies !

Bon, d’abord, un peu de vocabulaire :

On appelle les fiches catégories les pages qui affichent plusieurs produits, quand on navigue dans les catégories de produits donc.

Ces pages sont très importantes bien sûr.

L’internaute doit avoir une bonne vision sur les produits, de chaque produit, mais également de ce qui différencie les produits les uns des autres.

Et, sincèrement, ne comptez pas trop que les fonctions de comparaisons : elles sont tellement mal faites en général que les internautes ont perdu l’espoir d’y trouver de l’information intéressante.

Sur ce site, les pages catégories sont particulièrement intéressantes :

Les visuels sont gros, de très très bonne qualités, et sont parfaitement homogènes.

L’internaute peut avoir une bonne perception de chaque produit, et des différences entre les produits.

Le visuel est l’élément clé, très peu d’informations complémentaires : un prix et le nom du produit, d’une couleur qui « appelle le clic ».

Si l’internaute survole la photo avec sa souris, une popup calc s’ouvre (fenêtre javascript) :

A ce stade, tout est réussi :

La zone s’ouvre, parfaitement positionnée par rapport au reste de la page (je ne dis pas ça par hasard : dans beaucoup de site, ce type de popup s’ouvre en donnant une impression de brouillon).

Les informations sont claires, bien structurées, et reste dans l’esprit très sobre du reste du site.

Remarquez également qu’un nouveau visuel vient d’apparaitre, en bas à droite de la photo principale. L’internaute à donc la possibilité, sans quitter la page catégorie, d’avoir une autre vue sur le produit.

Cette photo apparait tout simplement au survol de la vignette. Elle n’est pas affichée brutalement, mais apparait avec un léger effet (type « dissolve » sur powerpoint).

Tout cela est très bien et ne remplace pas la fiche produit, qui reste le seul endroit pour acheter effectivement le produit (en choisissant la taille).

rien à redire, c’est tout simplement… Parfait !

Et tout cela n’est surement pas du au hasard. Il y a eu à l’évidence du travail de préparation, un processus implacable de décision, pour arriver à la bonne solution, et une équipe technique au top niveau pour faire une réalisation aussi propre.

Stratégie Web : quand la simplicité paye

On a tous (en tout cas, ceux qui suivent l’actualité du e-commerce) suivi les exploits du site leboncoin.fr.

Comment ce site, plutôt simple (simpliste ?) a-t-il pu détrôner des « mastodontes » comme ebay, ou priceminister ?

Mon analyse est la suivante.

A l’origine, pour vendre sur Internet, il y avait eBay, point.

PriceMinister c’est positionné à côté d’eBay, en ajoutant un élément clé : le tier de confiance.

Là ou eBay ne garanti rien du tout, PriceMinister garanti que le vendeur sera bien payé, et que l’acheteur aura bien le produit commandé.

leboncoin à joué sur un tout autre axe : l’extrême simplicité, la gratuité, et la localisation des annonces.

Voici le formulaire de création d’une annonce :

Si on compare à eBay, il doit y avoir un rapport 1000 en terme de complexité…

Sur eBay, il m’est arrivé de ne pas réussir à activer certaines options….

Vous avez vu, pas de lien facebook, pas de twitter…

Le résultat est là…

A tout ceux qui veulent toujours plus de fonctions, leboncoin doit aider à réfléchir, à simplifier, toujours plus !

Pour en savoir plus, interview d’Olivier Aizac.

Les vidéos du Bargento 3

Olivier et moi avons animé la dernière conférence, lors du dernier bargento.

Avec Olivier, on a passé en revu pas mal de sites, réalisés sous Magento.

Objectif :

  • Montrer qu’on pouvait faire pleins de choses avec Magento
  • Analyser ce qui se fait, identifier les bonnes pratiques, alerter sur les moins bonnes idées.

Voici la vidéo, découpée en 4 parties :

Attention aux gadgets !

Vous avez envie d’ajouter des gadgets sur votre site ?

Attention à ne pas suivre l’exemple d’un site que je viens de tester, et qui affiche dans le coin « en bas à droite » un triangle, pour voir les avis des consommateurs :

bugavisclient

Moui…. Mais il se trouve que les navigateurs ne savent pas traiter les triangles. La zone est en fait un rectangle, avec une partie transparente.

Vous avez compris d’où venait le problème ? Le résultat, c’est que le bouton « Valider mon panier » n’est plus accessible !

Dommage !