Archives par mot-clé : Ergonomie

La qualité d’une interface est dans le détail – Exemple avec Sears.

Sears, vous ne connaissez peut être pas… Mais c’est le huitième plus gros site e-commerce, avec probablement 3 milliard $ de revenus annuel, 20 millions de visiteurs uniques par mois, … Bref, c’est du « lourd ».

L’interface du site est intéressante, avec en particulier le menu des catégories, un peu inspiré d’Amazon : le menu est à gauche, en colonne. Cela permet de libérer un peu de place en hauteur.

Bon, je m’égare : ce n’est pas le sujet de ce billet.

Ce dont je veux vous parler, c’est de la qualité de mise en œuvre de ce menu.

Si on déplace la souris sur ce menu, la catégorie juste sous la souris change de couleur. Intuitivement, c’est dire à l’internaute : « clique moi dessus » :

Ensuite, si la souris reste un peu plus de temps, le menu se déplie vers la droite :

Si on vous demande de décrire comment ce menu s’ouvre ou se ferme, vous allez dire un truc du genre :

Le menu s’ouvre quand la souris passe sur une catégorie

Il se ferme quand la souris quitte la ligne de la catégorie ou quand la souris quitte la zone du menu.

Et bien ça, ça fait une interface pas très agréable à utiliser, parce qu’il arrive qu’on bouge un peu vite sa souris. Une telle mise en œuvre n’est pas qualitative. C’est pourtant celle qu’on trouve sur la majorité des sites.

Sur le site de sears, il y a comme un amortisseur. Des petits « timer » sont posés, pour que l’interface réagisse de manière plus « arrondie ».

Exemple : quand la souris quitte, pour une fraction de seconde, le menu, celui ci ne se referme pas.

Le résultat est une vrai réussite. Et ne vous y trompez pas : au final, c’est tout sauf du détail !

Un configurateur avancé pour Home Depot

Tout chaud, le nouveau configurateur avancé, développé par Scene 7 pour Home Depot.

De quoi s’agit-il ?

Il s’agit d’un outil, permettant de concevoir complètement la décoration d’une pièce.

L’internaute peut choisir la matière et la couleur du sol, des murs, les décorations pour les meubles, …

Bien, allons-y.

Premier écran, il faut choisir la pièce que l’on va décorer :

J’ai choisi « cuisine » pour la suite de cette visite guidée.

On doit ensuite choisir un modèle de pièce :

Ici, l’intérêt est de ne pas avoir à dessiner l’ensemble de la pièce, ce qui est nécessairement long et fastidieux.

Une fois qu’on en est là, on va pouvoir choisir ses décorations pour le sol, les murs et les meubles :

Si on choisi le sol, on va avoir à choisir le type de revêtement :

Une fois qu’on a choisi un revêtement donné, on peut choisir précisément la déclinaison :

On pose le parquet choisi par drag & drop. La zone affectée apparait en contour vert. Si le système estime que l’application est impossible, la zone apparaît en contour rouge.

Naturellement, on peut aller voir directement la fiche produit associée au produit sélectionné.

Voici le résultat final pour cet exemple, avec le planché, les carreaux aux murs, et le choix du revêtement pour l’électroménager :

Au final, l’application est plutôt bien faite.

Il y a en particulier une vrai volonté pour guider l’internaute.

Je trouve cependant que l’interface n’est pas toujours si clair que ça.

Il faut dire que, sans qu’on s’en rende nécessairement compte, ce type d’application est réellement très complexe. Il y a donc un gros travail à faire pour rendre tout ça simple.


Personnalisation de produits – l’exemple de usineadesign

L’un des avantages de la vente en ligne, c’est la possibilité de proposer des outils, interactifs, pour aider l’internaute à faire son choix.

Exemple avec usineadesign, qui propose des configurateurs plutôt bien fait, pour complètement personnaliser le produit.

Dès la page catégorie, le fait qu’on peut personnaliser le produit est mis en avant :

La personnalisation est mise en avant de deux manières :

  • Le bouton « personnaliser » bien visible
  • Un « nuancié » pour mettre en avant des exemples de couleurs et de matières

Exemple de fiche produit :

La partie du haut affiche le produit, et l’internaute peut choisir ces options en dessous.

Dans l’exemple, on peut personnaliser le revêtement, et chacun des coussins. Évidemment, les options sont différentes en fonction des produits.

Le paramétrage des différentes options se fait via les onglets, juste en dessous l’affichage du produit.

Quand on clique sur une option, le produit est modifié en temps réel :

Il est pas beau mon canapé 😉 ?

Pour faire ça, ce site utilise Scene7.

Avantage, entre autre, de cette solution : pas besoin de « shooter » toutes les combinaisons. Scene7 permet de plaquer une couleur sur une photo, en prenant en compte les contours, et également les matières, les formes.

Autre point original : ce configurateur est réalisé en Ajax. D’habitude, on a plutôt des outils Flash.

Sur ce dernier point, j’ai bien souvent tendance à conseiller Flash (en Flex) pour ce type de fonction.

D’ailleurs, le configurateur m’a plusieurs fois affiché des messages d’erreur Ajax…

Mais bon, ne soyons pas perfectionniste : cette interface est plutôt réussie, et permet d’offrir un choix assez riche, de manière assez simple.

Petit tour d’horizon pour la déclinaison des produits

Certains produits se déclinent, via plusieurs critères.

L’exemple classique  : les habits, avec la déclinaison par taille et par couleur.

Déjà, avant tout, on peut choisir de faire autant de produit que déclinaison.

Avantage : on aura du référencement naturel sur chaque déclinaison (polo rose par exemple).

Gros inconvénient : les pages catégories seront surchargé par des listes de produits très semblables…

Donc, bien souvent, il est plus intéressant de créer une fiche produit configurable.

La redoute fait plutôt simple pour traiter cette fonction : elle affiche une liste déroulante pour chaque type de déclinaison.

C’est basique, et ça a fait ses preuves ;).

Juste, dommage quand même d’afficher une liste quand il n’y a qu’une valeur :

On donne l’impression à l’internaute qu’il va avoir le choix, alors qu’en fait, non ;).

La limite d’une telle présentation est qu’on ne présente pas graphiquement les choix des différentes couleurs.

Cette copie d’écran vient du site Nars.

Il s’agit de choisir une couleur de rouge à lèvre, et le choix est ici forcément fondamental, et très large.

Ici, les couleurs sont en fait regroupées par matières, sous forme d’onglets.

Bon, c’est bien tout ça, mais une information importante par rapport à ce choix de la déclinaison, c’est la disponibilité du produit.

Et oui, le stock varie pour chaque déclinaison du produit.

Décathlon (dans son site d’achat avec retrait en magasin) n’aide pas l’internaute sur ce sujet. Je voulais acheter le kit pour jouer au ping pong chez soi, et bien j’ai du essayer chaque couleur, une à une, pour savoir si le produit était disponible :

On peut répondre à ce problème soit en retirant de la liste les déclinaisons indisponibles, soit en insérant le texte de disponibilité, pour chaque ligne de la liste.

Pour voir comment traiter toutes ces fontions, allons voir sur Amazon :

Ici, on a bien un produit qui se décline en couleur et en taille.

Les différentes déclinaisons sont affichées en clair sur la page. Gros avantage : l’internaute voit d’un coup d’œil les choix à sa disposition.

De plus, cette présentation permet d’afficher de manière très synthétique la disponibilité des produits.

Exemple : dans la copie d’écran ci-dessus, j’ai cliqué sur une déclinaison couleur (la première, qui est mise en valeur), et en temps réel, l’affichage des tailles est mis à jour : les tailles non disponibles apparaissent de manière atténuées.

Cette mise en forme est, comme souvent chez Amazon, réalisée de manière dynamique : la zone qui affiche les tailles change de hauteur en fonction de la largeur de la fenêtre.

Bon, ce qui est plus étonnant, pour Amazon, c’est que cette mise en forme n’est pas utilisée partout.

Pourquoi pour cette chaussure les déclinaisons en taille sont elles affichées sous forme de liste déroulante ?

Une hypothèse : le mode d’affichage bascule d’un mode à l’autre en fonction du nombre de déclinaisons.

Une autre hypothèse : chez amazon également il reste des zones de progrès ;).

Nouvelle année, nouvelle interface

Bon, je sais bien que pour la plupart d’entre vous, cette information n’est pas du tout intéressante.

Pourquoi ?

Parce que vous lisez ce blog depuis un agrégateur RSS (Google Reader en tête).

Mais bon, quand même.

Le design actuel ne me convient plus.

On se lasse…

Et puis, je trouve la colonne de présentation principale des billets trop étroite.

Je trouve également dommage que le format soit fixe.

enfin, c’est à mon gout trop chargé. Je voulais du « dépouillé », hyper basique.

Alors voilà, la nouvelle version est prête :

Cela répond à mes attentes :

  • Très simple, épuré
  • Largeur de taille variable
  • Pratiquement à 100% basé sur du texte, plus d’images
  • Ergonomie simple

Alors, vous aimez ?

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 !

Configurateur de tee shirts

Benjamin a dégoté un configurateur pour tee shirt de rugby :

rugby - Page d'accueil

Passionnant, le sujet des configurateurs. J’ai donc joué un peu avec.

rugby - entrée dans le configurateur

rugby - Détail

Il apparait tout de suite clair que cet outil a été conçu avec l’envie de :

  • Faire une page agréable, claire
  • Faire un système facile à utiliser
  • Avoir un bon taux de transformation

Certains aspects sont plutôt réussis. Le logiciel est ainsi effectivement esthétique, et les dégradés de gris sont plutôt réussis.

A noter également les couleurs « incitatives » rouges, pour ajouter le polo au panier.

Mais, à mon humble avis, on pourrai encore bien améliorer cet outil.

Ainsi, je pense que les options, présentés en « accordéon » en colonne de droite ne sont pas assez visibles. En arrivant sur le configurateur, on ne comprend pas naturellement ce qu’il faut faire pour entrer les différents paramètres.

Autre détail important : le configurateur ne semble pas être « réentrant ». Imaginez, vous avez passé du temps pour configurer le tee shirt de vos rêves, il est dans le panier.

Et bien on ne peut pas revenir dans le configurateur une fois le produit mis au panier. On ne peut donc pas modifier le tee shirt.

Erreur classique d’ergonomie dans un formulaire

Ah là là, les formulaires, on en parlera jamais assez !

Pas si facile de faire un bon formulaire, clair, lisible, et qui transforme bien.

Une erreur très classique est, pour gagner de la place, de mettre des boutons radios en ligne :

bugboutonradio

Erreur, car en regardant rapidement, la sélection n’est pas du tout intuitive. Le bouton du milieu permet il de sélectionner le brun ou le vert ?

Pareil en fait avec des boites à cocher :

bugboiteacocher

ça n’a l’air de rien, mais ce sont bien ce type d’erreurs qui attaquent le taux de transformation d’un site, parce que l’impression de l’internaute n’est pas « rassurante ».

La solution en occurrence, c’est soit de mettre une option par ligne, soit de bien séparer les options, de manière à ce que l’association entre le bouton et le libellé soit évidente.