Archives par mot-clé : Interface

Formulaire : le cas du mot de passe

Bon, j’ai la pression maintenant sur ce blog : j’ai intérêt à être aussi intéressant que les autres auteurs 😉

Les formulaires, cela reste un sujet, un vrai sujet.

Entre ce qu’on peut faire, ce qu’on doit faire, et ce qui existe, il y a un monde…

Chaque détail compte, tout doit être bien fait.

Exemple avec la saisie du mot de passe.

Rien de plus simple me direz vous ?

Erreur !

Beaucoup de formulaires sont mal fait sur ce point là (entre autre 😉 ).

Une des erreurs, les plus agaçante, est la réinitialisation de ce champ, après traitement des erreurs : l’internaute renseigne une fois ce champ et d’autres champs du formulaire, et valide celui-ci. Il y a des erreurs, on lui ré-affiche le formulaire, mais pas avec tous les champs saisis !

J’ai trouvé cet exemple particulièrement réussi :

Ce formulaire se met à jour en temps réel (ajax).

Pour le premier champ, il indique la qualité du mot de passe, au fil de la saisie des caractères. C’est encourageant, et pédagogique. C’est bien plus malin que de mettre un message du genre « votre mot de passe doit contenir au moins 7 caractères patati patata ».

Et pour le deuxième champ, il informe, toujours en temps réel, si les deux champs correspondent.

Ce sont des petits détails, qui rendent un tel formulaire bien plus sympathique, non ?

Nespresso.com n’est plus « la » référence e-commerce…

Cet article est écrit par Christophe Davy, dirigeant de Brand Online Commerce, qui est « l’invité permanent » de François sur ce blog.

nespresso-george-clooney
Il n’y a pas si longtemps – je vous parle des années 2005/2006 – un projet de création de site e-commerce haut-de-gamme prenait forcément le site Nespresso.com comme référence. On ne pouvait pas passer à côté, c’était le site le plus visible en France, voire en Europe, dans le monde des marques de luxe. Toutes les agences web de la place avait leur Powerpoint sur le cas Nespresso…

On louait à l’époque son approche très qualitative de la vente, avec un site au design très léché, une relation client sans faille, une logistique impeccable et un CRM déjà bien rôdé.

Oui mais voilà, nous sommes en 2011, et le constat est sans appel : le site nespresso.com est aujourd’hui à la rue ! Les bonnes pratiques du e-commerce, définies et mises en place par des dizaines de sites e-commerce depuis 5 ans, n’ont pas leur place sur le site de Nespresso, qui n’a absolument pas évolué depuis des lustres

Et voici quelques exemples pour illustrer mon propos.

La conception du site oblige à entrer son mail et son mot de passe pour avoir accès à la section e-commerce du site. Même si on peut y voir un côté positif pouvant valoriser le consommateur (appartenance au « club »), l’évolution récente du marché avec l’apparition de compétiteurs (suite à la perte de l’exclusivité sur le brevet des capsules) devrait pousser Nespresso à rendre plus visible l’achat en ligne de ses capsules ; impossible notamment de voir le prix des produits sans créer au préalable un compte !

Une fois entré dans la partie boutique en ligne, là c’est la fête aux mauvaises pratiques : un double menu sur le haut de l’écran propose différentes options dans un ordre et selon une arborescence propres à faire disjoncter le plus patient des clients en ligne.

Nespresso - menu1

Par exemple, la sous-option « Ma Dernière Commande » n’est en fait pas une vraie option de menu ! C’est en fait une action (ça devrait donc être un bouton, pas un choix dans le menu) ayant pour résultat de placer dans le panier le contenu de la dernière commande. Du coup, lorsqu’on clique sur « Ma Dernière Commande », on a droit à un inquiétant message précisant que le panier en cours va être effacé et remplacé par le contenu de la dernière commande. On aurait pu imaginer visualiser cette dernière commande (on ne se souvient pas forcément de ce qu’on y avait mis) avant de forcer la mise à jour du panier, mais ce n’est pas le cas.

On peut tout de même consulter le contenu des anciennes commandes, me direz-vous ! Et c’est vrai, on peut le faire par la sous-option « Mon Historique », qui, elle, fonctionne bien comme une option de menu (et pas comme un bouton d’action), en nous affichant la liste des dernières commandes. Avec même un bouton « Effectuer la même commande » à côté de chaque ancienne commande !

Oui, mais :
– je ne sais pas pourquoi, on ne me propose dans mon « historique » que mes 3 dernières commandes, alors que je suis client depuis de nombreuses années…
– contrairement à la sous-option « Ma Dernière Commande » du menu, le bouton « Effectuer la même commande » ne me met pas en garde sur le fait que mon panier va être effacé et remplacé par le contenu de l’ancienne commande ; un clic, et le panier éventuellement en cours (au hasard, avec des capsules de la série limitée du moment, souvent vantée en ouverture de la boutique) est remplacé par le contenu de l’ancienne commande… Enervant !

Autre curiosité concernant le double menu du haut de l’écran, le sous-menu de l’option « Contactez-nous » est exactement le même que celui de l’option « Mon compte ». Allez savoir pourquoi…

Nespresso - menu2

Nespresso - menu3

Entre les deux, l’option « Aide en ligne » ouvre, elle, une fenêtre par dessus l’écran… Top !

Et tout est comme cela sur ce site : rien n’est intuitif, tout les menus et boutons doivent être testés pour en comprendre le fonctionnement.

Et si l’on regarde les emails envoyés, ce n’est pas mieux : l’email de confirmation de commande est d’une telle sobriété, qu’il ne reprend même pas le contenu de la commande ! Tout juste a-t-on le droit à un numéro « Référence Internet », qui se trouve être en fait le numéro de la commande… Que l’on cherchera d’ailleurs en vain dans la sous-option « Mon Historique » (de l’option « Ma Commande »)… Mais  qui est en revanche visible dans la sous-option « Suivi de mes commandes » (de l’option « Mon Compte »)… Vite, de l’aspirine !

Bref, on a vraiment l’impression que Nespresso.com se repose depuis plusieurs années sur ses acquis, et que les investissements technologiques et ergonomiques sur le site ont été plus que réduits. Bon, d’un autre côté, il y a le contrat publicitaire de George Clooney à payer, ceci explique peut-être cela… 😉

Et heureusement pour le business Nespresso, leur Service Client téléphonique reste l’un des plus efficaces et customer-oriented du marché, ce qui doit certainement aider à compenser la faiblesse ergonomique du site ! Pour le moment, en tout cas…

Sur ce, je vais me faire couler un petit Nespresso, car chez Brand Online Commerce, c’est un acquis social !

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.

Tester son site sur tous les navigateurs en un clic

Un site Internet doit s’afficher sur une sacré liste de navigateurs… Et la liste a plutôt tendance à s’allonger.

Comment tester un site sur tous ces navigateurs ?

La seule vrais solution, c’est de faire effectivement des tests, sur les différents systèmes.

On peut faire ça avec très peu de machines, en installant plusieurs machines virtuelles sur un seul PC.

Mais il existe plusieurs services qui permettent de voir ce que donne le service, sur tout un tas de navigateurs.

http://www.browsercam.com/

http://www.scapture.com/

et http://www.browsershots.org/

Exemple avec Browsercam :

Après création du projet, on sélectionne les configurations à tester  :

Et après quelques minutes, on a le résultat :

Bon, ça marche plus ou moins bien, mais ça permet quand même de gagner pas mal de temps.

Dans cet exemple, Araok.com n’est pas compatible avec Internet Explorer 5.2 sur Mac ;).

(Merci cyber vinvin !)

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 !

Cohérence de l’interface

Cela fait quelque temps que j’ai en tête un billet, sur la cohérence de l’interface d’un site.

Mais j’ai du mal à l’écrire : j’ai des idées qui me semblent trop théoriques, …

Et puis, miracle, je suis tombé sur ce site…

Premier bouton pour acheter :

Deuxième bouton, sur la page suivante donc :

Troisième bouton :

Et enfin dernier (probablement le plus réussi) :

Voila. rien ne vaut un bon exemple…

Donc, pour faire simple, la cohérence, c’est « pas ça ».

Même les pros font de grosses erreurs

L’iPhone est un appareil incroyablement bien réussi.

L’ergonomie est réellement bien faite.

Mais il y a des failles, d’incroyables failles.

Ainsi, le truc qui m’énerve, plusieurs fois par jours, c’est le bouton pour afficher la barre de recherche, dans les contacts :

Pour afficher cette barre, indispensable pour chercher un contact, il faut « cliquer » sur la petite loupe.

Mais ce bouton est tout petit, et ça rate jamais : soit c’est le « + » qui est sélectionné (création d’un nouveau contact), soit c’est le premier contact sous la loupe…

Bref, il faut systématiquement 3 ou 4 essais avant de chopper ce p… de bouton.

Ce monde qui bouge, comme une vague…

On croit que les choses sont bien établies…

Mais non, tout bouge, tout change, tout évolue, très vite.

Ainsi, le mail existe depuis 1973… Bien avant Internet donc.

C’est basé sur un protocole simple…. Et c’est devenu un média d’échange incroyablement populaire et riche (vous recevez combien d’eMails par jours, vous ?).

Google a déjà pas mal fait évoluer les usages, avec son GMail.

GMail a ainsi poussé très loin l’idée que le meilleur outil pour gérer ces emails, c’est le navigateur Internet.

GMail a apporté pas mal d’innovations : les tags, le regroupement automatique des emails par sujet de discussion, …

Ces derniers temps, Google a pas mal travaillé pour atténuer l’écart entre l’Instant Messaging et le mail.

Mais voilà, ça n’était pas suffisent.

Google vient donc d’annoncer Google Wave.

Ils n’ont pas eu peur de repartir de zero… Google Wave n’est donc pas basé sur un protocol de mail.

C’est un protocole spécifique, et ouvert.

Il y a plusieurs idées fondatrices derrière Google Wave :

  • On n’est plus sur une communication One-To-One comme pour l’eMail, mais sur une place d’échange. On peut dire que Google Wave est donc une communication Many-To-Many.
  • La communication est soit temps réel (pour ceux qui sont connectés), soit différée. Il n’y a donc plus du tout de différence entre le mail et le chat
  • Le support est fondamentalement un arbre, et non un texte comme pour le Mail. Dans cet arbre (un « wave »), chaque nœud représente un élément, ajouté par l’un des membres de la discussion, à un instant donné. Cette notion est très riche, et permet d’avoir nativement des documents riches, écrits à plusieurs, ou l’on peut retracer l’historique des modifications.

La notion d’arbre semble particulièrement clé, et permet de gérer des documents composites, mais également des jeux, et probablement pleins de nouvelles choses à inventer, puisque Google Wave est fourni avec une API. Rien d’étonnant là dedans, quand on sait que l’un des gars à l’origine de ce projet n’est autre que le celui qui a développé les API pour Google Maps…

Google Wave, c’est probablement un énorme changement dont on ne mesure pas encore bien toutes les concéquences…

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.