Archives pour la catégorie Interfaces

Tailles : Women’secret chouchoute ses clients européens

Le site Women’secret est un site de e-commerce assez classique. Ses concepteurs ont toutefois eu une très bonne idée concernant les tailles affichées sur les fiches des différents produits.

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…

women-secret-taille

La page d’erreur de ma banque

Quand un soucis technique pointe le bout de son nez lors d’une connexion à mon compte sur le site de la Caisse d’Epargne, il apparait cette page. J’ai du mal à trouver mes mots pour qualifier ça.

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.

banque

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…

Tris de produits : classements et filtres

La plupart des solutions de e-commerce propose la possibilité de trier les produits grâce à une arborescence plus ou moins large de catégories et sous-catégories.

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é.

look-zippy-tri

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).

amazon-filtre

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).

magento-filtre

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.

gap-filtre

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 :

Visite de Diapers.com

Diapers.com est un site américain spécialisé dans les produits pour bébés. Comme il n’y pas d’équivalent en France, il faut imaginer que Vert Baudet ou Aubert auraient décidé de proposer de l’alimentaire et des cosmétiques.

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 :

Menus déroulants intégrant des formulaires

Les formulaires intégrés dans un menu déroulant, comme sur le site de Walmart (www.walmart.com, copies d’écran ci-dessous), présentent deux avantages :

  • 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.

Collection de menus déroulants étendus

Voici une collection de menus déroulants qui ne se contentent pas d’une simple liste de sous-catégories. Certains montrent la largeur de gamme proposée par les sites et d’autres sont enrichis d’élements multimédias qui apportent en image ou lisibilité.

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 :

Moteurs de recherche prédictifs

Petit à petit, la recherche prédictive arrive sur certains sites marchands. Voici un petit tour d’horizon de mises en oeuvre de cette fonctionnalité sur les formulaires de recherche de différentes sites.

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 :

A lire ailleurs sur Internet :

Zoom époustouflant chez Rushcollection

Le zoom produit chez Rushcollection est sans doute un des plus réussis parmi ceux rencontrés sur des sites de vente en ligne :

  • 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.

Navigation horizontale (portant web ?)

Un portant, c’est une barre supportée qui sert à ranger les vêtements en les suspendant à des cintres.

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 ?

Les bonnes idées de Taillissime

Taillissime est une marque de La Redoute pour les grandes tailles. Le catalogue en ligne propose quelques bonnes idées de navigation.

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.