Par contre, l’inverse est extrèmement rare : tout afficher à l’exception des éléments correspondants aux critères cochés ou sélectionnés. Cette possibilité serait pourtant utile et synonyme de gain de temps sur de nombreuses interfaces…

La page d’accueil me rappelle celle de La Redoute en place depuis plusieurs mois : un visuel qui prend toute la largeur de la page et des mises en avant en superposition.

Voici la page de La Redoute, en ce moment c’est du mobilier de jardin qui est mis en avant, mais la mise en forme est très proche.

Cdiscount fait aussi ça à sa manière avec son style reconnaissable même la nuit par temps de brouillard.

Avez-vous d’autres exemples de gros visuels utilisés en page d’accueil sur toute la largeur avec superposition de mises en avant ?

La bonne idée de GAP, c’est d’autoriser la modification des caractéristiques de produit sans quitter le panier. Les copies d’écran ci-dessous parlent d’elles-mêmes, l’idée est vraiment excellente et la mise en œuvre parfaite. Well done !

Avez-vous déjà vu ça ailleurs ?

Une double zone d’ajout au panier

Du coup, en plus de la traditionnelle zone d’ajout située en haut de page, Electricshopping.com a décidé d’en ajouter une sous le descriptif produit, juste avant les commentaires clients. Cela permet d’éviter de remonter tout en haut si le visiteur est convaincu par les explications qu’il vient juste de lire et souhaite commander.

Je n’ai pas de données chiffrées pour vérifier si ce choix est judicieux, mais je le trouve intelligent. C’est typiquement le type de fonctionnalité qui ne demande presque aucun développement et qui peut donc être mis en place et testé rapidement.

Et vous, que proposez-vous à vos visiteurs quand vos fiches sont très longues ?

Le principe de l’essayage en réalité augmentée est simple : permettre à l’internaute de tester et manipuler un produit en le superposant à un environnement familier.

Il peut par exemple s’agir de coller un sticker sur le mur de son salon après avoir envoyé une photo chez le commerçant, de placer un meuble dans une pièce ou encore de superposer un vêtement sur son corps pour avoir une idée de son look avant de commander.

L’essayage/mannequin virtuel bis ?

Il y a quelques années sont apparues les premières applications de mannequins virtuels. Le principe là aussi est simple : on crée un avatar correspondant à ses mensurations et à son look, puis on place sur cet avatar les vêtements proposés pour mieux imaginer le résultat comme si on se trouvait dans la cabine d’un magasin.

Si le concept est intéressant, je n’ai jamais eu la patience d’aller jusqu’au bout, à commencer par le téléchargement d’applets java assez lourdes et l’installation de plugins supplémentaires d’éditeurs méconnus. Si l’on ajoute à cela le temps consacré à créer un compte, paramétrer un avatar et la pauvreté des collections proposées…

L’essayage virtuel via un avatar n’a jamais constitué un avantage concurrentiel (je ne sais pas où est passé celui de La Redoute, ci-dessus celui du portail Potoroze) et la technologie n’a pas réussi à créer un besoin indispensable côté consommateurs.

Les internautes sont-t-il prêts ?

D’un point de vie technique, je serais curieux de connaitre le taux d’équipement en webcams bien configurées quand la capture de l’environnement passe par ce moyen, ou le pourcentage d’internautes capables de prendre une photo correcte (bien cadrée, éclairée, répondant aux contraintes de l’outil) via leur appareil et d’uploader un fichier souvent immense.

Ensuite, le temps et l’investissement demandé par ce type d’application est déjà en soi un obstacle à leur adoption massive. A part les enfants, les ados ou des spécialistes du web, j’ai du mal à imaginer qui peut bien avoir du temps à consacrer à ce type d’application, si tenté que cela corresponde à un besoin auquel ne répond pas la photo produit sous toutes ses formes.

Et du côté des marchands ?

Du côté du marchand, les freins à une adoption massive se trouvent plus du côté du coût de la technologie elle-même et de la nécessité d’avoir des photos produits ou des modèles 3D adaptés pour les intégrer dans l’environnement de l’utilisateur.

Si la technologie donne des résultats satisfaisants, est-ce-que cela boostera suffisamment les taux de transformations pour espérer un retour sur investissement rapide notamment avec des rotations de collections fréquentes ?

J’ai tendance à penser qu’en empilant des technologies toujours plus sophistiquées, on sacrifie souvent sa marge et/ou son taux de transformation plus vite qu’on augmente ses ventes…

Notoriété, buzz & social shopping !

Pour une marque qui décide de faire sa promo sur Facebook, je vois bien l’intérêt de ce type d’application avec un choix limité d’articles. Plutôt que d’attendre patiemment que la base de fans grossisse naturellement, on pourra proposer un outil permettant de partager un essayage avec ses amis sur Facebook, via le site de l’enseigne mais aussi directement dans Facebook via une application.

Dans un cadre de recherche de notoriété (les médias adorent parler de ce type de service) ou de recrutement de membres via du marketing viral couplé à un réseau social ou un jeu concours, l’essayage « réalité augmentée » version 2010 trouvera peut-être sa voie, mais ce ne sera certainement pas chez tous les marchands.

Qu’en dites-vous ?

French Connection (usa.frenchconnection.com)

Ce site d’habillement a trouvé une solution habile en proposant un tableau à double entrée couleur/taille qui permet en même temps la disponibilité de chaque déclinaison du produit.

1800 Flowers (www.1800flowers.com)

Le marchand américain 1800 Flowers a conçu un ajout au panier qui inclut la vérification de disponibilité et l’indication des frais de port directement sur la fiche du produit, ainsi que le choix de l’adresse de livraison si le client l’a déjà renseigné sur son compte.

Musician Friend (www.musiciansfriend.com)

Ce site spécialisé dans les instruments et le matériel de musique propose d’ajouter une garantie facultative en même temps que l’ajout au panier et indique clairement les frais de port additionnels appliqués (selon la taille du produit). C’est sans surprise et sans forcer la main, j’en connais qui pourraient prendre exemple !

Wine.com (www.wine.com)

L’ajout dans le panier a une petite originalité. Le bouton lui-même change de libellé à chaque étape de l’ajout et incite à continuer. C’est très ludique, on gagne à tous les coups !

Widget marchand / Shoplet

Contrairement aux applications Facebook, la boutique ne semble pas interagir avec Facebook pour récupérer les données des membres, par exemple lors de la saisie des coordonnées. Il s’agit plutôt d’un widget marchand (nommé « shoplet » par Internet Retailing, c’est plutôt bien trouvé) inséré dans une page Facebook et autonome.

La solution de shoplet développée par Alvenda, toute en flash, permet d’intégrer le même type de boutique sur n’importe quel site. Intéressant non ?

Aperçu de la boutique Facebook de 1-800-Flower

Et Facebook dans tout ça ?

Je suis bien curieux de savoir comment Facebook monétise ce type d’intégration. On pourrait imaginer le même type de boutique interagissant avec Facebook sur l’échange de coordonnées, via des messages sur les murs des acheteurs comme « Robert offre un bouquet French Countryside de 1-800-Flower à Gilberte, offrez vous aussi un bouquet à vos amis » et pourquoi pas un jour prochain le paiement via une carte bancaire enregistrée sur Facebook.

L’intérêt du shoplet

Internet Retailing donne des chiffres sur un widget similaire utilisé par 1-800-Flower lors de la Fête des mères et intégré à des bannières publicitaires. Selon l’article, ce widget aurait permis 41% de ventes en plus et 10,5 fois plus d’interactions que des bannières classiques (ce dernier point doit être le nombre d’usages de la bannière en comparaison du nombre de clics).

En affiliation ou en intégration dans des portails, le widget marchand a peut-être un avenir, en supprimant l’étape de passage sur le site marchand. Et si le futur un des futurs du e-commerce consistait non plus à aller chercher le client sur ses sites favoris pour le faire venir sur le site marchand, mais d’être directement là où il se trouve…

Qu’en pensez-vous ? Y croyez-vous ?

Zoom inutile

La fiche produit me plait particulièrement, ou plutôt la manière d’intégrer la photo du produit sur la fiche. L’image, la description, le sélecteur de taille et le bouton d’ajout au panier forment un tout utilisant toute la largeur disponible sur la page.

Avec environ 650 pixels de largeur réservés à la photo, la mise en place d’un zoom devient inutile  pour mieux apprécier le produit. L’espace réservé au visuel est même plus large que la majorité des zooms existant chez d’autres marchands.

N’hésitez pas à partager les adresses d’exemples similaires, car il me semble avoir vu cela récemment ailleurs mais j’ai un trou de mémoire.

Comme le public du site est européen, Women’secret permet à ses clients, lors de l’ajout au panier, de choisir le système de tailles qu’ils ont l’habitude d’utiliser… qui n’est pas forcément par défaut celui utilisé par la marque.

Cette mise en forme a pour mérite de ne pas obliger le visiteur a déchiffrer un tableau de correspondance de tailles sur une autre page ou dans une fenêtre pop-up. Après la mise en place de cette interface, le taux de conversion a dû très fortement augmenter dans les pays concernés par les systèmes de taille additionnels…

Notez bien le « Netscape » dans les navigateurs proposés, deux images manquantes, le problème d’encodage des accents, une information d’erreur très parlante (CI 2-1, c’est un robot dans Star Wars ?) et enfin aucun lien pour rediriger le visiteur, sauf pour télécharger un navigateur sur le site de Microsoft ou de Netscape.

Les banques ne sont pas les spécialistes du message d’erreur, à l’exception peut-être des automates de distribution. Il n’y a qu’à voir les interfaces Atos lors de problèmes de disponibilité. Certaines s’affichent encore en gros caractères rouges sur fond jaune…

Quand le nombre de produits classés dans une catégorie devient conséquent, ceux-ci sont répartis sur plusieurs pages. Toute la difficulté des sites marchands consiste alors à proposer des outils permettant aux visiteurs de parcourir rapidement les listes de produits jusqu’à trouver celui recherché.

Les fonctionnalités de classement

Présentées sous la forme de listes déroulantes, les fonctions de classement permettent d’ordonner la liste des produits de façon différente, sans diminuer le nombre total de produits présentés.

Les fonctionnalités de classement sont souvent identiques d’un site e-commerce à l’autre. Parmi celles-ci, on retrouve par exemple :

• Prix (croissant ou décroissant),
• Meilleurs ventes,
• Alphabétique (A-Z ou Z-A),
• Nombre de produits affichés par page,
• Note des membres du site,
• Popularité (produits les plus consultés ou tout simplement un classement choisi par le marchand).

Les filtres génériques

Les filtres génériques permettent de n’afficher que les produits de la liste initiale répondant au filtre sélectionné. Ce type de filtre générique peut être utilisé sur n’importe quel site de e-commerce :

• Tranches de prix,
• Disponibilité des produits (en stock, sous 3 semaines, etc.),
• Promotions (les produits bénéficiant d’une réduction),
• Sémantique (nuage de tags de la catégorie).

Les filtres spécialisés

Les filtres spécialisés réduisent eux aussi le nombre de produits affichés, mais ils correspondent aux caractéristiques propres des produits proposés dans la catégorie :

• Marque,
• Couleur,
• Puissance,
• Matière,
• Taille,
• Usage,
• Terroir,
• Année de fabrication,
• Style,
• Etc.

Peu nombreuses sont les solutions de vente en ligne qui intègrent automatiquement ces filtres en fonction des produits de la catégorie affichée. Dans les solutions open-source, Magento apporte un plus en la matière avec une mise en place relativement facile.

Ce type de filtre apporte un véritable plus au visiteur à la recherche d’un produit correspondant à un besoin très précis  comme une chaussure à sa pointure, un canapé 3 places en cuir, un vin d’une région et d’une année… et réduit la frustration de l’acheteur obligé de parcourir les fiches produits une par une pour vérifier que sa taille est disponible, dans le cas des sites de vente de textile par exemple.

Filtres spécialisés et SEO

En plus de faciliter le choix des futurs clients, ces filtres sont très intéressants pour générer des pages de catalogue optimisées sur des expressions croisant le nom de la catégorie et d’un ou plusieurs filtres :

• Chaussures de ville roses,
• Chaussures de ville roses taille 43,
• Chaussures de ville roses taille 43 de marque Geox,
• Etc.

Les possibilités de croissements sont très nombreuses, particulièrement dans le cas de catalogues très fournis. Les filtres peuvent permettre de multiplier le nombre de pages de façon conséquente, et de travailler sa « longue traîne » de mots clés.

Il faut quand même veiller à ne pas créer trop de pages vides de produits, car les visiteurs pourraient repartir très vite de votre site vers le moteur par lesquels ils sont arrivés…

A lire aussi sur eCommerce404 :

• Filtrer les produits par couleur

Selon Internet Retailer, ce site a connu en 2007 une des plus fortes croissances du web US.

Zoom produit

Ce type de zoom devient de plus en plus fréquent sur de nombreux sites marchands. Il a pour avantage de seulement demander un survol de l’image pour être activé.

Contrairement à d’autres solutions, il ne nécessite aucun clic pour s’ouvrir et surtout aucun clic pour se fermer et permettre à l’utilisateur de continuer sa visite.

Personnalisation en fonction de l’âge de l’enfant

Le principe est très simple. Lors de l’ouverture d’un compte sur le site, celui-ci vous demande de saisir la date de naissance d’un ou plusieurs enfants. Lors de la navigation sur le site, Diapers vous propose, quand c’est utile, une sélection de produits en fonction de l’âge des enfants.

Au delà de la personnalisation du catalogue, l’information recueillie sera très utile pour des campagnes email.

Mise en valeur du panier

Clin d’œil graphique sur la mise en avant du panier, bien visible et très bien intégré au reste du site.

Menu déroulant

Pour compléter ma collection de menus déroulants étendus, celui-ci propose les marques phares du rayon à côté des catégories. Les clients réguliers apprécieront cette mise en avant pour renouveler des produits précédemment commandés.

Classification des auteurs des commentaires sur les produits

De petits pictogrammes différencient les auteurs de commentaires sur les différents produits du site, avec d’un côté les acheteurs et de l’autre les visiteurs qui ont confirmé leur adresse email (explications ici sur le site du prestataire qui gère les commentaires).

A lire sur eCommerce404 :

• Les bonnes idées de Taillissime

• Le processus de recherche est raccourci en évitant une page intermédiaire qui reprendrait le même formulaire,
• Cela évite d’intégrer directement dans la page un formulaire et de multiplier les formulaires affichés sur une même page.

Cette fonctionnalité n’est bien sûr efficace qu’avec des menus suffisamment explicites et bien positionnés dans la page pour que l’utilisateur n’ait pas à chercher.

Babies « R » Us (www.toysrus.com)

D’un seul coup d’oeil, le visiteur peut découvrir l’ensemble des catégories et sous-catégories de produits vendues sur le site. Le menu recouvre l’ensemble du contenu de la page et permet de découvrir la largeur de gamme proposée par le marchand.

Saveur Bière (www.saveur-biere.com)

Le nombre de choix restreint et la présentation graphique à l’aide de photos facilitent la lecture et la présentation. Je suis très client du choix opéré par Saveur Bière.

The North Face (www.thenorthface.com)

Le menu déroulant classique est illustré d’une photo des produits en situation d’utilisation. En supplément du visuel très fort utilisé en fond de page, The North Face utilise un visuel dans chacun des ses menus pour travailler encore un peu plus son image.

Nike Store (store.nike.com)

Nike un utilise un grand menu pour proposer différentes entrées dans son catalogue : par type de produit, style, collection, sport…

Walmart (www.walmart.com)

Classique, mais très lisible.

QVC (www.qvc.com)

Comme Nike, QVC propose de naviguer dans un rayon par différents critères de recherche : type de produit, matière, designer et marque. Le menu est complété par des liens nouveautés et soldes.

A lire ailleurs sur Internet :

• Est-ce que la mode des menus déroulants surdimmensionnés ?, par Fred Cavazza

Amazon (www.amazon.com)

La recherche prédictive d’Amazon est très classique et propose d’affiner la recherche en fonction des premiers mots saisis.

Dell (www.dell.fr)

Le principe est assez similaire à Amazon, avec une coloration des termes saisis un peu moins intelligente.

Deezer (www.deezer.com)

Que ce soit un nom de chanteur, de titre ou d’album, Deezer liste les réponses potentielles avec le nombre de titres correspondants.

Newegg (www.newegg.com)

Ce marchand de matériel informatique affiche le nombre de produits pour chaque suggestion de mot clé. La recherche semble tenir compte des recherches précédemment faites par les internautes.

BabyAge (www.babyage.com)

Le moteur de recherche du site BabyAge est particulièrement bien fait. En plus d’indiquer le nom du produit, le site affiche directement sa photo et son prix.

Apple (www.apple.fr)

Je remets ici le moteur prédictif d’Apple déjà évoqué sur ce blog tant son fonctionnement est réussi. Les résultats de recherche sont classés en catégories, avec les produits en premier présentés en photo avec une description.

A lire sur eCommerce404 :

• Champs de recherche

A lire ailleurs sur Internet :

• Apple et la recherche prédictive enriche, par Frédéric Cavazza
• Ergonomie d’un formulaire de recherche : la recherche prédictive, par Frédéric de Villamil

• Utilisation d’une très grosse photo pour présenter le produit,
• Pas de distraction visuelle causée par le contenu de la page du site lorsque le zoom est activé,
• Utilisation à la souris uniquement
• Pas de difficulté à fermer ou quitter la fonction zoom

Voici une capture vidéo pour montrer comment le fonctionnement du zoom et un lien vers une fiche produit pour tester cela en live.

La navigation proposée sur les sites de deux marques de vêtements rappelle cette façon de ranger les habits, chez Diesel et Abercrombie Kids.

A la différence du portant, les vêtements peuvent être présentés de face sur le web. Une barre de défilement horizontale permet de passer d’un modèle à l’autre.

Seules des données chiffrées permettraient de savoir si cette présentation est plus efficace que les grilles de produits que l’on trouve sur la plupart des sites. Cette façon de présenter les produits est en tout cas originale et assez naturelle à utiliser pour l’internaute que je suis. Les photos plus grosses qui peuvent être utilisées ne sont sans doute pas étrangères à ce sentiment.

Abercrombie Kids

8 modèles de jeans sont affichés côte à côte. Avec les différents coloris sous chaque jean, ce sont 19 jeans qui sont présentés sur la page. Un clic sur chaque coloris affiche le jean dans le coloris choisi sans rechargement de la page. Le survol d’un modèle à la souris affiche le prix et le nom du modèle cachés par défaut.

L’ajout du produit au panier se fait sur la fiche produit de chaque jean. Ajouter à cette interface la possibilité de sélectionner une taille n’aurait pas été une mince affaire.

Diesel

Aucune possibilité de changer de coloris, mais le nom du modèle et son prix sont immédiatement visibles. Le survol de la souris sur chaque modèle ouvre une fenêtre qui indique les coloris existants (en texte, dommage) ainsi que les tailles disponibles.

Je préfère le choix de photos de Diesel, qui ne se contente pas de montrer le jean seul, mais suggère un look complet.

Que pensez-vous de cette façon de présenter une catégorie de produits ?

Le catalogue adapté à la morphologie

En plus de la navigation classique via des catégories produits, Taillissime propose de parcourir le catalogue en affichant les produits les plus adaptés à une stature donnée. Sur la page suivante, la stature est décrite plus explicitement. Par exemple, la stature 1, moins de 1m76, équivaut à « Petit ventre généreux ».

Je crois beaucoup que le succès des marchands passera de plus en plus par des catalogues s’adaptant le plus possible aux besoins des clients et aux produits vendus. Le défi pour les agences de conception de sites sera d’arriver à proposer des interfaces adaptées à ces besoins qui vont bien au delà de la simple classification de produits en catégories/sous-catégories.

Les catégories produits visuelles

Cette mise en forme est plus anecdotique, mais j’ai trouvé plus la lecture des différentes catégories plus aisée à l’aide d’une simple image représentative de la catégorie. Cette mise en forme pose quand même un problème : il faut scroller pour voir tous les éléments qui ne sont pas tous visibles immédiatement dans une résolution 1024×768.