Archives par mot-clé : Ergonomie

Page produit avec photo XXL

Très intéressant le site Martin & Osa.

On parle souvent de l’importance de mettre de belles et grandes photos pour les produits.

Et bien sur ce site, ils ont poussé très loin cette idée, puisque la photo produit devient carrément le fond de la page :

Le cadrage a été calculé pour être compatible avec cette présentation, ou les informations sur le produit apparaissent en transparence, sur la partie droite de la page.

Autre exemple sur le même produit :

Sur cet exemple là, c’est donc un zoom qui s’affiche en fond de page.

Génial, non ?

Déclinaison Taille / Couleur chez Amazon

Vous ne le savez peut être pas, mais Amazon vend des chaussures :

Les chaussures, comme bien d’autres produits, on la caractéristique de se décliner, en taille et couleur.

Comment Amazon traite ce sujet ?

D’abord, ce qui est « remarquable », c’est que l’écran est « élastique », le contenu s’adapte à la largeur de la fenêtre :

Autre élément intéressant : le bouton « Acheter ». Il a son apparence normale, mais quand on rapproche la souris sans avoir choisi le couple couleur / Taille, un petit message s’affiche, au niveau de la souris :

Autre élément très dynamique : la synchronisation « Ajax » des combinaisons taille couleur.

Je m’explique :

Quand on déplace sa souris sur les tailles, dynamiquement, les couleurs associées sont mises à jour.

Réciproquement, quand on déplace sa souris sur les couleurs, les tailles disponibles sont mises en avant, et la grande photo est mise à jour !

Le mieux est d’essayer ici.

GMail et le langage de requêtes

Google est une boite créé par des gars qui ont une vraie culture informatique, et ça laisse des traces 😉

Exemple : savez vous rechercher les mails, dans la boite de réception, non lues ?

Il faut saisir dans le champ de recherche :

in:inbox is:unread

Et oui, on peut taper de véritables requêtes dans le champ de recherche GMail !

C’est à mon sens une interface vraiment réussie, parce qu’elle a plusieurs niveaux d’accès :

  • Le débutant peut simplement taper le mot qu’il recherche ;
  • Le gars plus expérimenté peut aller beaucoup plus loin ;
  • La page qui affiche la recherche avancée affiche la requête associée, c’est donc une interface didactique.

Les nuls du e-commerce…

Bon, j’ai pas l’habitude de « dégommer » les sites sur ce blog. Ce n’est pas l’esprit.

Et puis c’est toujours facile de critiquer…

Mais bon, il y en a qui poussent loin…

Exemple, ce formulaire :

Bon, jusqu’ici, rien de catastrophique.

Il y aurait bien des tas de trucs à dire, mais bon, « pourquoi pas » pourrait on dire….

J’ai donc rempli sagement ce formulaire…

Et non, il y a une erreur : il faut ajouter une région.

Ah zut, il n’y a pas de champ Région dans le formulaire !

Voilà donc une équipe marketing qui ne fera pas trop de spam…

Des menus dynamiques pour naviguer dans les catégories

Suite au billet sur Estée Lauder, je me suis dit que c’était sans doute une bonne idée de creuser un peu plus cette histoire de menus de navigation dans les catégories.

Donc, la question, c’est comment présenter les catégories, pour que l’utilisateur s’y retrouve.

La question devient de plus en plus critique quand le nombre de références augmente : on risque d’avoir alors des « listes à la Prévert »…

Une première question est : ou mettre ces menus.

Le standard de fait est de les mettre en haut de la page, sur une barre :

On peut également mettre ces catégories sur deux lignes :

Sur ce sujet, Amazon innove, en plaçant ce menu en colonne, à gauche :

De plus en plus, les boutons des catégories sont en fait actifs, et permettent d’afficher un menu plus complet (Merci Javascript).

Quelques exemples :

L’étude attentive de ces exemples est super intéressante, et mine de rien, les différences sont nombreuses :

  • Certains menus font pro, d’autres non (je vous laisse vous faire votre opinion…) ;
  • Pour certains sites, il faut cliquer pour ouvrir le menu. Sur d’autres sites, le menu s’ouvre tout seul.
  • Certains menu s’ouvrent avec une mise en scène : comme un rideau, … Alors que d’autres s’affichent d’un coup.
  • Certains menus présente une simple liste, alors que d’autres sont beaucoup plus structurés, avec des espaces différents, …
  • Sur certains sites, les menus ne s’ouvrent pas tout de suite : il faut charger des éléments. Sur d’autres, les éléments ont été pré-chargés.
  • Quand on déplace la souris sur les lignes, la ligne peut être mise en valeur… ou pas.

Voilà, je pense que ma démonstration est faite : pour un résultat de bonne qualité, il faut un savant mixe entre plusieurs métiers :

  • Une bonne analyse du catalogue, pour faire les bons regroupements et créer les bonnes catégories. Bonne pour le Web !
  • Une bonne conception, ergonomique, avec un travail précis sur la dynamique des menus.
  • Une excellente réalisation technique, qui ne doit pas être traité à la fin… mais au fil de l’eau, avec une approche eXtreme programming, pour que la réalisation de très bonne qualité sorte, après nécessairement plusieurs itérations.

Actuellement, on ne peut pas décoreler les différents métiers. Il faut assurer une cohérence globale pour avoir un résultat … qui transforme.

Remplir les formulaires contact automatiquement avec Reversoform

On le sait tous : les formulaires de création de compte représentent une véritable corvée pour le client, et un challenge pour le e-commerce.

C’est une zone de fuite importante dans le processus achat.

Alors, pour avoir plus de clients qui achètent, soit vous suivez les conseils avisés de notre capitaine préféré, soit vous pouvez utiliser des solutions qui facilite la vie de l’internaute.

Reversoform entre dans la deuxième catégorie.

L’idée est simple : l’internaute renseigne juste un numéro de téléphone fixe, et le reste du formulaire est automatiquement renseigné :

Dans cet exemple, j’ai a peine eu le temps de saisir mon numéro de téléphone que déjà, sans avoir à cliquer, le formulaire est rempli.

Pour le e-commerçant, c’est l’assurance d’avoir un formulaire bien renseigné.

Pour le client, c’est facile et bien plus rapide.

Combien ça coute ?

Le e-commerçant paye à l’usage (nombre de formulaire renseigné).

Checkout en une page ?

Vous pensez quoi de cette copie d’écran, reprenant le processus de checkout d’un site marchand us ?

Ouf, vous êtes encore là, après avoir eu le courrage de « scroller » : bravo !

Donc, vous en pensez quoi de ce processus d’achat, avec un choix très fort : une seule page pour l’ensemble du processus achat, quite à avoir une page forcément très longue…

Vous pensez que ça va pas bien transformer ? Qu’il vaudrait mieux découper ça en plusieurs pages, plus digestes ?

Erreur !

L’AB Testing a parlé : cette page transforme beaucoup, beaucoup plus pour ce site que la version avec plusieurs pages.

Améliorer le taux de transformation des formulaires : moins de clics ?

Les fomulaires constituent une étape clé dans nos chers sites marchands (et autres d’ailleur).

Comme ils causent beaucoup de fuites de clients, il est raisonnable d’y consacrer une attention toute particulière.

Bien entendu, il est super important de retirer des formulaires tous les champs qui peuvent l’être (au risque de mécontenter votre responsable e-marketing, qui demande l’ajout de tout un tas d’informations, comme la date de naissance, …).

Mais une fois ce nettoyage fait, comment améliorer le taux de transformation ?

Vaut-il mieux un seul formulaire, qui mécaniquement ne peut pas tenir sur l’écran, ou alors découper le formulaire en plusieurs pages, chacune affichant un formulaire court, qui lui, peut tenir à l’écran ?

Comme toujours, il n’y a pas de recette miracle, et la réponse peut varier suivant le contexte.

Néanmoins, dans la majorité des cas, la deuxième solution est bien souvent la meilleure.

Et puis, la solution visant à découper le formulaire en plusieurs étapes apporte un autre avantage : vous récupérez une partie des informations rapidement… Et ces informations peuvent être précieuses pour essayer de « rattraper » un client qui n’a pas été jusqu’au bout du processus.

Cela montre que l’adage visant à réduire au maximum le nombre de clics est simpliste… et parfois faux.

Autres articles sur le sujet

Un site avec une très bonne ergonomie !

Chaque fois que ma chère épouse revient de Bretagne, cela me donne l’occasion de tester bien à fond le site www.amendes.gouv.fr :

Pas grand chose à redire :

  • L’ergonomie est claire ;
  • Le service est simple ;
  • Le « chemin » est bien balisé, on trouve facilement les options dont on a besoin.

Allez, quelques pistes d’amélioration :

  • Une option pour payer à la chaîne plusieurs amendes, en ne saisissant qu’une seule fois le numéro de carte bleue ;
  • Une option, pour pouvoir préciser, que très bien, je paye, mais pouvoir dire qui est le conducteur concerné par le retrait des points…

Chiffre d’affaires : X2 en 6 mois !

C’est le magnifique retour que m’a fait un client (hello C.) : en travaillant ensemble sur son site marchand, en 6 mois, les ventes ont été multipliées par 2 !

La clé d’une telle réussite ?

Un mixe entre plusieurs paramètres. On a retravaillé complètement le parcours du client, de manière à rendre ce parcours aussi fluide que possible.

On a également complètement revu l’ergonomie : « faire que l’internaute comprenne, instantanément, ce qu’on attend de lui, à chaque instant ».

On a également travaillé sous l’angle de l’ergonomie incitative : que le client soit guidé pour pouvoir acheter très simplement, sans avoir à se poser des questions.

On a enfin travaillé la fiche produit, avec des produits très bien mis en avant, bien mis en scènes.

Une belle référence, et un beau témoignage. Celà donne du courrage pour la suite !