Archives par mot-clé : Ergonomie

Exemple de progrès à faire sur les sites marchands – Mémoriser les préférences entre les pages

Pas mal de sites proposent des outils permettant de naviguer dans les produits via des filtres.

Exemple sur Amazon, pour choisir ses chaussures en fonction de leurs tailles (pleins d’autres le font) :

Quand on sélectionne un produit, on arrive sur la fiche produit :

Comme vous pouvez le voir, la taille n’est pas sélectionnée, alors que qu’on a déjà indiqué, sur la pagé précédente, la taille recherchée.

Détail me direz vous ?

Oui, mais au final, une expérience d’achat de qualité, c’est tout un tas de petits détails bien pensés.

 

Applications mobiles : il reste du travail ;)

J’étais en déplacement ce week end.

Une bonne occasion pour tester quelques applications mobiles.

La bonne nouvelle c’est qu’il y a du travail, on sait quoi faire ;).

Ce que je veux dire, c’est que les applications que j’ai testées ne sont pas très au point au niveau ergonomie.

Deux exemples :

Premier exemple : Voyages-sncf. L’application est plus tôt pas mal pensée.

Mais pourquoi tout réinitialiser en cas de problème de connexion lors de la dernière étape ?

Plus grave : l’affichage d’une erreur, sur la saisie d’un champ, décale la page, et m’empêche de voir ce que je tappe dans le champ du formulaire !

Le choix du type de réduction, avec un widget joli mais pas du tout ergonomique est également à revoir.

Autre exemple : AlloCiné. J’ai créé un compte depuis l’application mobile. Première page, pas de problème. J’arrive sur la deuxième page, qui me demande de renseigner un Captcha. Là, je reçois un message d’erreur… qui concerne en fait la page précédente… Incompréhensible pour un internaute « lambda ».

Pourtant, il ne s’agit pas de petites applications, mais bien d’applications « pro ».

Bien développer des applications mobiles demande un savoir faire très particulier.

Si on doit être obsédé par la qualité d’un formulaire sur le web, il faut être carrément psycho-maniaque pour une application mobile. La recette prend ici toute son importance.

C’est d’autant plus dommage qu’une application mobile doit justement être faite pour offrir une expérience « fluide » aux internautes qui ont une attache suffisemment forte avec une marque pour télécharger l’application !

 

Vendre en quelques clics avec TinyPay.me

Il existe plusieurs solutions, permettant de créer un site e-commerce en quelques clics, de manière complètement gratuite.

TinyPay.me est l’une de ces solutions.

Voici un exemple de boutique, avec moins de 10 produits en vente :

Un clic sur un produit :

La présentation est simple et de bon gout, avec un bouton « Acheter » qu’on ne peut pas ne pas voir ;).

Un clic sur ce bouton permet d’entrer dans le processus achat :

Le format du formulaire est particulièrement bien fait :

Quand un champ a le focus, une bulle d’aide s’affiche au dessus.

C’est une très bonne idée, bien complémentaire par rapport au format choisi : les champs ne sont pas présentés par un texte extérieur. Ce texte est collé à l’intérieur du champ. Avantage : gros gain de place. Inconvénient : quand l’internaute a commencé à taper quelque chose, il ne voit plus ce texte. Ici, la bulle bleue règle ce problème.

Le processus est en deux étapes : une fois ce formulaire rempli, on est envoyé sur la page de paiement Paypal.

Simple et efficace.

Bon, après, il faut bien avoir en tête qu’une telle boutique ne permettra de vendre que si on fait venir du trafic !

 

De l’importance des filtres pour aider à (chercher) trouver le bon produit

Aider l’internaute à trouver le bon produit, voilà un bon sujet 😉

Il n’y a pas une bonne façon de faire. On ne sera jamais dans la tête de l’internaute, et le « chemin mantal » qui conduit l’internaute à choisir, au final, tel ou tel produit dépend de chacun.

Autre élément évidemment clé : le catalogue. Le problème n’est pas le même si vous avez 100 produits ou 10 millions.

Bon, mais au delà de ces généralités, certaines pratiques se sont bien développées, et permettent d’aider l’internaute.

Les filtres sont un bon moyen pour guider le client.

Les filtres sont présent sur pas mal de sites.

Sur la plupart des sites, les filtres sont affichés en colonne de gauche.

Exemple avec Fredhopper sur Alinéa :

Exemple avec Endeca, sur Vertbaudet  :

Mais on trouve aussi, sur certains sites, les filtres en ligne, en haut. Exemple avec Compario, sur Milonga :

Au fait, on n’a pas forcément besoin de prendre un outil de searchandising pour faire ça. Exemple sur Lepape, qui propose pas mal de filtres, avec Magento  :

 

On peut filtrer sur… pas mal de choses : le prix, la marque, la disponibilité, les avis consommateurs, la couleur, …

Mais si tout cela à l’air bien rodé, il se cache en fait derrière ces notions, des choix, qui, s’ils sont bien fait, permettent d’augmenter significativement le taux de transformation.

Déjà, l’ordre d’affichage des filtres est important. Quels sont les filtres à faire apparaitre en premier ?

Autre point important : bien choisir les filtres. Si on propose trop de filtres, l’internaute risque de s’y perdre. Pas assez de filtre, et il ne trouvera pas ce dont il a besoin.

Enfin, doit on permettre d’appliquer une recherche sur plusieurs valeurs pour un même critère ?

Exemple : je cherche un tee shirt, soit noir, soit marron.

Sur la couleur, je veux donc pouvoir ajouter deux valeurs. En terme informatique, il s’agit donc de pouvoir faire un « OU » : je cherche du noir OU du marron.

Certains sites proposent cette option. Exemple sur Sears, qui permet de sélectionner plusieurs valeurs pour les critères (marques dans l’exemple) :

Détail ? Non !

Ce sont bien ces détails qui permettent à l’internaute de trouver ce qu’il cherche rapidement.

 

Quand l’image sort du cadre

On le dit, on le répète : pour un site e-commerce, la qualité des photos est un élément clé.

Maintenant, quand on a de belles photos, il faut les mettre en avant !

Certains sites proposent des photos de plus en plus grandes.

Le site KillSpencer, trouvé au hasard de surfs, va très loin.

Page d’accueil  :

Un peu dans l’esprit de ce que fait Apple, la home met en avant un énorme visuel.

Bon, apple va plus loin puisque leur home ne met en avant qu’un seul produit, alors que là, il s’agit d’un slider, qui fait défiler 10 images XXL.

Sur sélection d’une catégorie, on arrive sur une page comme ça :

Là encore, ce qui est mis en avant, ce sont les photos des produits.

Et voilà la fiche produit :

On est sur une charte qui pousse le minimalisme jusqu’au bout. Il n’y a pas de texte de description sur cette fiche !

Et l’ensemble des actions sont en superposition, par dessus la photo, dont le bouton d’ajout au panier.

En fait, il faut cliquer sur le bouton, en bas à gauche, pour afficher une description en superposition :

Je vous épargne le processus achat, plus classique.

Alors, bonne idée ou pas ? Un des points à valider, c’est si cette façon d’afficher le texte est « SEO friendly ». Qu’en pensent les experts ?

 

 

Ergonomie et ergonomie incitative selon Google

ça ne vous aura pas échappé, Google est en train de déployer de nouvelles interfaces.

Ce qui m’a intéressé et marqué, c’est le travail sur l’ergonomie des services, et l’usage de ce qu’on appelle l’ergonomie incitative.

L’ergonomie incitative, c’est, sur les pages du site, mettre en avant une seule action.

Pour un site e-commerce, c’est particulièrement important de mettre ce type de pratique pour le processus achat.

GMail  :

L’ergonomie incitative, c’est le gros bouton rouge « COMPOSE MAIL ». On ne peut pas le louper.

Dans cette page, Google définit plusieurs types de boutons :

  • Rouge : c’est LE bouton a ne pas louper
  • Bleu : c’est la couleur qu’à choisi Google pour tous les boutons de recherche. C’est une couleur qui ressort plutôt bien, mais moins que le rouge 😉
  • Les boutons gris, pour les actions courantes.
Tous les boutons sont « actifs » au survol de la souris et au clic : ils changent de couleur, de « profondeur ». Voici les trois états du bouton « COMPOSE MAIL » :
Subtil ? Oui, mais ça fait parti des petites choses, qui améliorent l’expérience de l’utilisateur.
Autre détail : ces boutons sont construit en HTML / CSS. Avantage : bien plus léger qu’une image, et de plus, ça se comporte mieux quand on change la taille de l’affichage.
Cette ergonomie est reprise, sur le calendrier :
La cohérence entre les deux service est particulièrement soignée.
Google déploie progressivement cette nouvelle interface sur l’ensemble de ses services.

Amazon fait de l’AB Testing aux US sur sa nouvelle Home

Grâce à Benjamin, on c’est rendu compte que Amazon avait bien changé sa home US, mais pas pour tout le monde !

J’ai fait des tests, et réussi, sur la même machine, à avoir simultanément les deux versions :

Cela veut dire que l’AB testing d’Amazon n’est pas dépendant de l’adresse IP ;).

Je vous propose une analyse, complémentaire par rapport à ce que j’ai décrit hier.

Hier, j’ai principalement parlé du menu de gauche. Important ce menu, mais le header du site a bien changé, et cela vaut le coup de bien regarder les changements.

Les deux headers donc:

L’ancien :

 

 

Le nouveau : 

 

Ce qui saute aux yeux, c’est à quel point le nouveau header est dépouillé, sobre.

Le bouton, pour ouvrir le menu principal est discret, ce qui est un choix audacieux, parce que c’est la porte d’entrée sur l’ensemble du catalogue !

Fini également la barre bleue, qui permettait de bien mettre en avant le moteur de recherche, la panier et la wish list.

Bon, la barre est remplacée par une barre légèrement dégradée de gris, qui fait la part belle au moteur de recherche. Le bouton pour lancer la recherche est l’élément le plus visible. Le choix du rayon pour spécialiser la recherche est bien plus discret. Peut être Amazon c’est il rendu compte que finalement, les internautes utilisaient pas tant que ça cette fonction ?

A droite de la zone de recherche, un bloc permet de gérer l’identification. Cette identification se déplace donc par rapport à l’ancienne version (tout en haut sur l’ancienne version, à droite du logo).

Ensuite, on retouve le panier, et la wish list.

Le fonctionnement dynamique est changé, puisque maintenant, ces boutons s’ouvrent au survol de la souris :

J’y passerais des heures 😉

Alors, vous aimez mieux l’ancienne version ou la nouvelle ?

A suivre, il sera intéressant de voir ce que fera Amazon suite à cette campagne d’AB testing.

Amazon US change de look

Quand Amazon change sa charte, le moins que l’on puisse faire, c’est d’analyser les changements.

Amazon, c’est quand même le numéro un mondial !

Donc, la home et les menus du site US ont été revus :

C’est surtout le header qui a été revu, avec un bloc recherche retravaillé.

Le menu principale est bien changé aussi, et il apparait, sur la home, replié.

Si on le déplie, ça donne ça :

A comparer au menu d’avant, toujours en ligne sur le site Français :

Au delà des changements cosmétiques, ce qui marque, c’est la mise en avant de tout ce qui est digital : Amazon croit fortement en la vente de produits dématérialisés, et met cette offre bien en avant !

Ainsi, les 7 premiers items sont tous des offres dématérialisées !

A voir aussi, les sous menus, bien plus travaillés que dans l’ancienne version  :

C’est très sobre, très clean, avec du merchandising (push d’un produit en bas).

Le comportement dynamique du menu est également bien plus travaillé, avec des « tempo » donnant un comportement bien plus agréable que dans l’ancienne version :

Cette version devrait arriver en France d’ici quelques semaines / mois ?

Un formulaire vraiment bien fait !

Regardez cette page d’inscription :

La mise en page, et la mise en forme sont particulièrement soignés.

Pour rendre le formulaire léger, les libellés des champs apparaissent dans le champ lui même.

Problème de cette solution : si l’internaute commence à saisir un texte, qu’il passe à autre chose, il peut ne plus savoir ce qu’il faut mettre.

Ce site a trouvé une solution élégante :

Une bulle d’aide s’affiche dès que le curseur entre dans le champ.

Autre élément remarquable : la présentation des options.

Inspiré de l’ergonomie des iphones, elle propose simplement une liste d’options, très sobres :

Les paramètres, de chaque option, apparaissent quand on sélectionne une option :

Le traitement des erreurs est traité, ce qui est devenu plus classique, avec un changement de couleur, et un message d’erreur collé sous le champ :

Plutôt clean tout ça, non ?