Archives par mot-clé : Ergonomie

Contrôler la validité d’une adresse mail

L’internaute saisie son adresse mail… et ne reçoit jamais rien.

Normal, il a mal saisie son adresse avec une faute de frappe…

Première solution, lui demander de saisir deux fois son adresse. Pour ma part, je ne suis pas fan de cette solution, parce qu’elle rajoute un champ, et que l’idée, c’est surtout d’en enlever.

De plus, en ce qui me concerne, quand on me demande ça, je fais un rapide copier – coller entre les deux demandes… Bref, c’est pas la solution géniale.

L’autre solution, c’est de valider, de tester la validité de l’adresse.

Le premier travail est un contrôle « lexical » : on peut facilement vérifier, directement dans le navigateur du client, que l’adresse est « plausible » : elle doit comporter des lettres, un « @ » suivi d’un domaine (c’est un peu simplifié mais c’est l’idée générale).

On peut aller plus loin, en testant si le domaine est correct, et si un serveur de mail est « branché » dessus.

Mais c’est à peu près tout. On ne peut pas, à ma connaissance, être certain que l’adresse saisie est ok.

Bon, on peut demander à l’internaute un double opt-in : on envoie un mail à l’adresse saisie, et le client doit aller sur sa messagerie, ouvrir le mail (ou attendre qu’il arrive), puis cliquer sur un lien contenu dans le mail.

C’est LA méthode pour être sûr… Mais c’est également LA méthode pour baisser le taux de transformation…

(Merci Thomas, plus d’infos ici pour les développeurs)

Nouveau très beau site avec Demandware

Demandware se développe bien… Mais pas encore en France.

Ils viennent de mettre en ligne le site Mirapodo.de, site de vente de chaussures du groupe Otto :

Je ne peux juger que sur la partie visible, le Front, mais ce que j’ai vu est vraiment très très bien :

  • Moteur de recherche avec suggestions,
  • Résultats très rapides et bien mis en scènes,
  • Navigation à facettes, bien adaptées au produit (couleur, marque, taille, prix, … plus pleins d’autres que je ne comprends pas, parce que c’est en Allemand 😉 ),

La fiche produit est un modèle de « bonnes pratiques » :

  • Zoom automatique, au survol de l’image
  • Changement automatique des photos, au survol des imagettes
  • Mécanisme pour choisir les couleurs et les tailles très bien fait, ou l’on voit bien les choix, ce qui est en stock (les options qui ne sont pas en stocks apparaissent grisées), et le visuel principal qui change, là encore, au survol de l’imagette ;
  • Et enfin, une zone vente, à droite, avec toutes les infos pour l’achat, et un bouton d’achat bien incitatif.

Les menus sont également un modèle du genre :

Ils sont très clairs, avec un code couleur discret et de bon gout…

Sur les pages vignettes, petit détail sympathique : on peut voir la chaussure sous tous les angles, en déplaçant la souris !

Bref, un site très bien fait donc.

Ah, j’aimerais bien voir le back office !

Autre article sur Demandware :

Comment naviguer dans le catalogue sur iPhone ?

Petite étude par fonction, sur l’iPhone.

Au lieu d’étudier un site dans son ensemble, il me semble intéressant de prendre une fonction, et de voir comment elle est traitée sur différentes applications.

Premier cas avec la navigation dans le catalogue donc.

Cette fonction est évidement fondamentale : l’objectif est de permettre à l’utilisateur de trouver ce qu’il cherche.

Et comme on est en mobilité, le challenge n’est pas évident :

  • Petit écran (comparé à un ordinateur) ;
  • Souvent beaucoup de produits ;
  • Pas de clavier ni de souris…

C’est parti !

Premier exemple avec Yoox :

Pas le choix : l’utilisateur doit trouver son bonheur dans une liste de catégories.

De catégories en sous catégories, on finit par arriver à une page de vignettes :

Ce choix peut se justifier par la taille du catalogue de Yoox, qui doit être réduit (ça reste à vérifier, c’est une hypothèse) ?

Deuxième exemple avec Rue Du commerce (découverte grâce à un commentaire sur ce billet) :

Ici encore, on nous propose avant tout un ensemble de catégories.

Petite fonction complémentaire, quand on est sur l’avant dernier niveau : on peut déplier la sous catégorie sans sortir de la page :

En bas de l’écran, la barre d’options propose un moteur de recherche :

Cette fonction est très basique :

  • Pas de recherche prédictive
  • Ce qui est proposé, ce sont les catégories, les produits ne sont donc pas mis en avant

Pas de merchandising de la recherche donc, ce qui est dommage en mobilité, ou l’efficacité est pourtant prépondérante. Mais bon, c’est une première version…

Passons à nos amis américains : eBay en premier :

Ce coup ci, ce qui est mis en avant, c’est bien le moteur de recherche. On ne nous parle plus de catégories !

Deux façon de chercher : le champ de recherche en haut de l’écran, et une navigation dans des images, pour choisir parmi des best sellers.

Quand on commence à saisir un mot, les résultats s’affichent bien en temps réel, au fil de la saisie.

Et les résultats proposés sont bien directement des produits, ce qui doit permettre de mieux transformer.

Sur sélection d’un produit, on arrive bien sur les annonces, avec éventuellement des outils pour affiner la recherche :

Suite de la visite US avec Amazon :

Ici encore, la priorité est à la recherche, même si Amazon utilise pas mal d’espace pour pousser quelques produits clés (le Kindle en l’occurence).

Comme pour eBay, la recherche est assistée :

On arrive bien directement sur une liste de produits, avec, dès la liste, pas mal d’infos en fait :

Bon, je ne reviens pas sur la fonction innovante proposée par Amazon, qui consiste à prendre une photo d’un produit pour lancer une recherche sur des produits similaires.

On a fini ? Non ! Deux autres applications méritent le détour à mon avis : ce sont les applications proposées par Apple, iTunes et App Stores :

Et bien Apple, qui doit pourtant proposer une navigation dans un catalogue très profond ne met pas en avant la recherche, mais propose plutôt une animation, avec mise en avant de produits.

Bon, la recherche est bien présente en barre de contrôle :

On a bien une recherche assistée très efficace, et surtout, un résultat de recherche particulièrement travaillé, comme sur le site web d’Apple d’ailleur :

La bonne vieille technique du pied dans la porte, ou l’art de la promesse qui fait rêver, avec ZiJob

Je suis passé voir le service ZiJob, de l’ami Thibault.

Le site est super propre, et rend le service très très simple, ce qui est une super bonne idée.

Autre bonne idée, la promesse : mettre en ligne son annonce pour 1 €.

C’est une très belle promesse, en droite ligne d’une approche marketing de « pied dans la porte ».

L’idée est d’attirer le client avec une promesse très attractive, peu engageante.

Des études ont montré que peu de monde change d’avis, une fois qu’on a choisi de s’engager, même si les conditions sont, in fine,  différentes de ce qu’on pensait initialement.

Les mauvaises fréquentations

Allez, un exemple à ne pas suivre pour cette rentrée :

C’est une belle marque française, qui dit ne pas avoir besoin d’accompagnement.

Voici le formulaire de demande d’abonnement à la newsletter :

C’est bien, hein ?

Tout est parfait, la présentation, la demande de désinscription quand on demande de s’inscrire…

Bon, allez, quand on est bon, on ne s’arrête pas là. Voici le mail reçu suite à une inscription :

Là encore, tout est parfait : le titre du mail avec un message de bienvenue (434c4…), le style du message, les explications techniques.

Et que croyez vous qu’il se passe quand vous cliquez sur le lien d’abonnement ?

Vous arrivez sur cette page :

C’est beau, non ?

Ah c’est sûr, ça n’a pas coûté cher !

(merci Christophe pour cette pépite, Christophe a comme un flair pour dénicher ce genre de trucs 😉 )

Le panier en haut à droite ?

Sur la plupart des sites marchands, le panier est en haut et à droite.

Exemple avec Timefy :

Autre exemple avec Amazon :

Et pour quelle raison faudrait il toujours mettre le panier à cet endroit ?

D’ailleurs, certains sites ne respectent pas cette règle, comme Crate Barrel :

Bon, vous remarquerez que le panier est en bas de la fenêtre, mais que le bouton Checkout est bien repris en haut ;).

Autre exemple de site ayant un panier en bas : Chanel, dont nous avons déjà parlé dans ce billet.

Alors, faut il absolument mettre le panier en haut à droite, ou est-ce du pur dogmatisme, et peut on le mettre là ou l’on veut  ?

Si vous avez peu de temps, alors la réponse est : mettez le en haut à droite ;-).

Si vous avez plus de temps, alors on peut en discuter.

C’est un sujet qui nous a valu une discussion en interne, chez Araok!.

Au delà du panier, c’est toute la question du respect de standards de fait qui est posée. Faut il respecter ces règles, communément utilisées, ou est-il raisonnable de « tout casser » ?

En fait, a mon sens, c’est surtout une question de performance commerciale que l’on doit se poser.

Vos clients fidèles feront sans doute l’effort de chercher, de comprendre, votre site « innovant ».

Mes les nouveaux clients risquent de ne pas chercher très longtemps, et d’avoir un avis mitigé sur un site ou ils ne retrouvent pas leurs repères.

Tout le problème est bien là : les clients ont maintenant leurs habitudes, et ce n’est pas très commercial de tout changer.

C’est donc un compromis, entre la créativité, l’innovation, et la performance commerciale.

Si vous êtes e-marchand établi, et que l’envie vous prend de changer un tel élément, comme le panier, la barre de recherche, …, je serais vous, je ne le ferais pas sans le tester via de l’AB Testing. Au moins, là, vous saurez exactement l’impact d’une telle « révolution ».

Et si vous vous lancez, faites simple, et respectez les standards de fait !

Maintenant, pour ceux dont la performance commerciale n’est pas LE critère, alors là, vous pouvez bien vous « amuser » à tout déstructurer !

Pas de fiche produit ?

Toujours en exploration sur Sears, je me suis baladé sur KMart, un site de la galaxie Sears.

La page qui affiche un ensemble de produits d’une catégorie présente chaque produit dans une colonne verticale assez haute :

Les photos sont bien alignées en haut, mais ensuite, c’est en « accordéon » : les boutons et les zones ne sont pas alignées horizontalement.

Quand on rapproche la souris d’une photo, un bouton apparait :

On parle bien de « quick view » : vue rapide. Ce n’est donc pas une invitation à voir en détail le produit.

Effectivement, si on clique sur le bouton, un « popup calc » s’ouvre (fenêtre Javascript) avec quelques informations sur le produit :

Cette fenêtre s’ouvre par dessus la page catégorie donc. Son positionnement dans la page est un peu bizare. Dans mes essais, cette fenêtre c’est souvent ouverte tout en haut de la page.

Cette fenêtre affiche le trict minimum pour le produit. Visuel, prix, petite description, et bien sûr, le bouton pour acheter.

Comment aller sur la page produit ?

Et bien la seule façon, c’est de chercher le petit lien, en haut (go to product page).

Chez Sears, on veut donc « gagner des clics ». Pas la peine d’aller sur la fiche produit : et hop, un clic de moins !

Ainsi, on peut même choisir la déclinaison d’un produit depuis la page catégorie :

Au final, deux idées sont donc mises en œuvre ici :

  • On peut acheter un produit directement depuis la page catégorie ;
  • L’interface pousse l’internaute à rester sur la page catégorie, en affichant des mini pages produits.

Au niveau de l’efficacité, je pense que ce type d’outils sont très bien pour certains produits, comme les produits de grande consommation par exemple. La fiche produit pour le litre d’huile n’est probablement pas complètement fondamentale…

Des fiches « catégories » riches et tellement réussies !

Bon, d’abord, un peu de vocabulaire :

On appelle les fiches catégories les pages qui affichent plusieurs produits, quand on navigue dans les catégories de produits donc.

Ces pages sont très importantes bien sûr.

L’internaute doit avoir une bonne vision sur les produits, de chaque produit, mais également de ce qui différencie les produits les uns des autres.

Et, sincèrement, ne comptez pas trop que les fonctions de comparaisons : elles sont tellement mal faites en général que les internautes ont perdu l’espoir d’y trouver de l’information intéressante.

Sur ce site, les pages catégories sont particulièrement intéressantes :

Les visuels sont gros, de très très bonne qualités, et sont parfaitement homogènes.

L’internaute peut avoir une bonne perception de chaque produit, et des différences entre les produits.

Le visuel est l’élément clé, très peu d’informations complémentaires : un prix et le nom du produit, d’une couleur qui « appelle le clic ».

Si l’internaute survole la photo avec sa souris, une popup calc s’ouvre (fenêtre javascript) :

A ce stade, tout est réussi :

La zone s’ouvre, parfaitement positionnée par rapport au reste de la page (je ne dis pas ça par hasard : dans beaucoup de site, ce type de popup s’ouvre en donnant une impression de brouillon).

Les informations sont claires, bien structurées, et reste dans l’esprit très sobre du reste du site.

Remarquez également qu’un nouveau visuel vient d’apparaitre, en bas à droite de la photo principale. L’internaute à donc la possibilité, sans quitter la page catégorie, d’avoir une autre vue sur le produit.

Cette photo apparait tout simplement au survol de la vignette. Elle n’est pas affichée brutalement, mais apparait avec un léger effet (type « dissolve » sur powerpoint).

Tout cela est très bien et ne remplace pas la fiche produit, qui reste le seul endroit pour acheter effectivement le produit (en choisissant la taille).

rien à redire, c’est tout simplement… Parfait !

Et tout cela n’est surement pas du au hasard. Il y a eu à l’évidence du travail de préparation, un processus implacable de décision, pour arriver à la bonne solution, et une équipe technique au top niveau pour faire une réalisation aussi propre.

Nouvelle barre « magique » chez Sears ?

Sears est l’un des top e-marchands aux US (ils viennent d’ailleurs d’ouvrir la vente à l’international).

Le site affiche, tout à droite, une drôle de barre de contrôle :

Vous voyez, la barre, à gauche du menu ?

Bon, petite digression : le site est en largeur variable, avec un minimum à 1036 pixels. C’est à mon avis une erreur. La plupart des écrans sont encore en 1024 de large, et quand on ajoute les bords des fenêtres et autres ascenseurs, il vaut mieux rester sur une largeur autour de 950 pixels maximum.

Revenons à nos moutons : à quoi sert cette barre ?

Déjà, c’est une barre active, qui peut s’ouvrir simplement en plaçant la souris dessus :

Le premier item est un panier. Un panier ? Alors que le « standard de fait » place le panier en haut à droite ?

Et bien, chez Sears, on a deux paniers pour le prix d’un : le panier classique en haut à droite, et le panier dans la barre de contrôle de gauche.

Ici, ce premier onglet « Panier » est en fait un peu plus « riche », puisqu’on peut également consulter son historique de navigation.

Les onglets sur cette barre sont :

  • Panier
  • Compte
  • Wishlist
  • Historique (recherche et navigation)
  • Contact (outils pour dialoguer avec l’enseigne)

Au final, je dois dire que je ne suis pas convaincu par cette nouveauté.

Le fonctionnement, en « scroll horisontal » n’est pas très bien réglé. ça s’ouvre, se referme un peu tout seul.

Ce mode d’animation est de plus extrêmement gourmand en ressources, et n’est donc pas fluide (pourtant, je n’ai pas l’ordinateur le moins puissant…).

Enfin, et c’est le plus important, les fonctions présentes dans cette barre restent affichées à d’autres endroits. C’est donc une barre qui alourdi la page, sans ajouter de fonction clé.

A suivre. Soit cette barre est améliorée, soit elle va disparaitre.

Le formulaire qui m’a tué

J’ai essayé de m’inscrire à l’évènement….

J’ai validé une première fois… J’ai clairement eu l’impression qu’il ne se passait rien.

Nouvelle tentative : toujours rien.

Ah si, tout en haut, regardez bien : un message d’erreurs, pas mis en valeur, qui me dit que je dois saisir mon prénom.

J’essaye sans le « ç »…

Le message reste là.

J’ai abandonné…