Boulanger.fr : le retrait en magasin, une mécanique complexe à mettre en place

Le retrait en magasin est une fonctionnalité pratique et appréciée des internautes, mais parfois complexe à gérer pour les enseignes marchandes. Le site e-commerce de Boulanger propose ce service à ses clients depuis un petit moment.

Sur la fiche produit, le bouton de retrait en magasin se trouve juste en dessous du bouton d’ajout au panier.

Un clic sur ce bouton me renvoie à la page de sélection de magasin (l’étape 1 du breadcrumb, situé tout en haut de la page). Le module est plutôt bien conçu : je choisis d’abord une région puis le magasin qui me convient.

Je m’attarde rapidement sur les boutons situés sous ce module.

Le libellé du bouton « annuler mes retraits et mon choix de magasin » est doublement mal choisi : je n’ai pas encore validé mon retrait que je peux déjà l’annuler, je n’ai pas encore validé mon choix de magasin que je peux déjà l’annuler.

Le deuxième bouton « valider mon choix et ajouter d’autres produits » me renvoie sur la fiche produit de l’article que je viens de sélectionner. Là encore, le libellé n’est pas adapté.

Pour tester la gestion des erreurs, je clique sur troisième le bouton « valider mon choix et finaliser mes retraits » sans avoir sélectionné de magasin : rien ne m’indique mon oubli, seule la mise en page du module change très légèrement sans que l’on comprenne vraiment pourquoi – en fait, ça ressemble plus à un bug.

Je choisis un magasin dans la liste et je clique sur ce dernier bouton pour passer à l’étape suivante.

Si j’en crois le breadcrumb, il s’agit de la page panier. Quelques éléments (le minuscule récapitulatif perdu en haut à droite, l’absence de bouton permettant de supprimer un article… et la balise <title> de la page, que je ne verrai que plus tard) me permettent dès à présent de constater que ce n’est pas le cas : cette page interstitielle est dédiée à l’ajout de produits complémentaires, à la présentation de services associés et d’opérations commerciales incongrues (20% de réduction sur les caves à vin alors que j’achète un autoradio ? Sans parler du look « bouton » du titre de l’opération, également inadapté.)

Par ailleurs, le module des produits complémentaires, mal placé sur la page (c’est la raison d’être de cette page, il devrait être davantage mis en valeur), ne fonctionne pas convenablement : l’onglet « transmetteur FM » est actif et présente… des services comme le retrait express en 1 heure. Quant à l’onglet « services B », il disparaît quand on clique dessus !

Cette page devrait être entièrement revue. Sa structure, son positionnement, son fonctionnement… Il n’y a pas grand chose à sauver en l’état.

Un clic sur le bouton « Voir mes retraits en magasin » me conduit à la véritable page panier, comme l’indique le breadcrumb (qui ne passe donc pas à la troisième étape alors que je suis bien sur la troisième page). Note : comme à l’étape précédente le véritable titre de la page se trouve dans la balise <title>, « ma liste de réservation ».

Là encore, la structure de la page mériterait une révision : on me recolle l’offre commerciale de la page précédente (qui n’a plus tout à fait le même look), on me recolle des services complémentaires… de façon plutôt désordonnée. Quant aux informations relatives au retrait de ma commande, elles se trouvent vraiment bas.

C’est seulement à cette étape que j’ai accès à la disponibilité du produit dans le magasin sélectionné, et c’est seulement maintenant que l’on me donne une date de retrait effective.
Note : j’ai effectué ce test un samedi vers 15h30, on me propose un retrait le mardi vers 10h30. Parler de retrait en 1h est un peu trompeur, même si j’imagine que certains produits sont effectivement disponibles dans l’heure.

C’est là que se situe le plus gros problème de la mécanique : il n’est pas possible de changer de magasin pour connaître la disponibilité de l’article dans un autre Boulanger, si par exemple attendre 3 jours pour retirer mon produit alors qu’on m’a vendu un retrait en 1h ne me satisfait pas.

A cette étape, je n’ai que 2 possibilités : « valider mes retraits en magasin » ou « annuler mes retraits et mon choix de magasin ». Pour changer de magasin, je dois donc vider ma liste de réservation, la refaire et sélectionner un autre magasin. Un client au panier bien garni sera enchanté de devoir tout refaire.

J’ai cherché un produit non disponible dans mon magasin (un appareil photo cette fois) pour savoir comment le cas de figure était traité. Sans surprise, le seul choix possible est de supprimer le produit du panier.

Note : bien que le produit ne soit pas disponible, le bouton « valider mes retraits en magasin » reste cliquable. Si je clique dessus, un layer m’indique heureusement que mon retrait n’est pas possible en l’état.

Bonus

J’ai effectué 2 retraits en magasin chez Boulanger ces dernières semaines. Le point de retrait du magasin concerné (ce n’est pas celui des captures d’écrans), mal indiqué, fait toc : un petit comptoir instable doté d’une sonnette, posé devant une double porte incendie ouverte donnant sur la zone de stockage du magasin. Après avoir sonné, un vendeur est intervenu ; il m’a apporté mes commandes plusieurs minutes plus tard, après avoir cherché et demandé conseil à d’autres personnes. Le plus ennuyeux ? J’ai été contraint de passer en caisse les 2 fois.
Rendre l’expérience de retrait en magasin plus agréable nécessitera encore un peu de travail.

Bilan

libellé approximatifs de certains boutons & de certaines pages
structures de plusieurs pages
quelques bugs
traitement de certaines erreurs
Impossible de changer de magasin sans refaire intégralement sa commande
Promesse du retrait en 1h ?

Vanessa Bruno pour La Redoute : un mini-site élégant mais perfectible

L’arrivée de produits Vanessa Bruno (attention : redimensionnement automatique du navigateur) sur le site de La Redoute a été largement commentée sur les sites et blogs spécialisés. Il y a quelques jours, c’est sur Facebook que j’ai trouvé le lien menant au mini-site dédié à cette collection. Je m’y rends pour jeter un œil.

Ma première impression est très positive : l’aspect franchement épuré de l’ensemble convient parfaitement à un créateur de mode (je lis ici que « ses créations sont épurées, sobres, parfois même minimalistes. Elle porte une attention toute particulière aux pastels chauds : pêche, chair, jaune claire sont des teintes qui colorent une majorité de ses pièces »).

Certains choix viennent cependant dégrader l’expérience utilisateur du visiteur, à commencer par la taille et la couleur de la police sélectionnée : les liens sont en Garamond 11pt gris clair sur fond blanc. Ce choix typographique, bien que cohérent, perturbe la navigation. Il est pourtant possible d’utiliser des textes un peu plus grands et plus contrastés sans remettre en cause l’aspect minimaliste de l’ensemble.

Autre problème, lié à la présentation sur 3 colonnes de cette homepage : le visiteur risque au premier coup d’œil d’associer chaque photo avec le texte qui le surmonte. Les titres et liens situés au dessus des images ne sont pourtant pas leurs légendes, il s’agit bien d’éléments distincts.

Je clique sur l’image de droite, une photo de femme donc, et je suis redirigé vers une page « Maison » (c’est le très -trop- léger contraste du lien du menu qui me l’indique). L’élément important de la photo (la couette, qui rappelle le linge de maison) aurait sans doute gagné à être mis en valeur.

Une fois encore, la page sur laquelle je me trouve désormais est très élégante. Une fois encore, les textes de la page sont trop petits et peu lisibles. Bizarrement, 2 des 7 produits mis en scène sur la photo sont des vêtements. Les clientes n’auront pas forcément l’idée d’aller les chercher dans la catégorie « Maison » du mini-site.

Je clique sur la taie d’oreiller afin d’afficher la description du produit. La structure de la page qui s’ouvre alors gagnerait à être revue : un bon tiers de l’espace disponible est inutilisé. Le titre du produit, cette fois bien lisible (police plus grande, en noir sur fond clair), se retrouve collé tout en bas de la page, surmontant une courte description difficilement déchiffrable. La taille de la fenêtre de zoom, affichée au survol, laisse songeur. Quant au bouton de retour à la page précédente, je vous laisse le soin de le trouver…

La plus grande déception de cette page vient toutefois du bouton « voir la fiche produit » : il n’est donc pas possible de commander directement via ce mini-site.

Je clique sur le lien « Tous les produits maison », pensant être redirigé vers la page « Maison » que j’ai consultée il y a quelques instants. Ce n’est pas le cas : je me trouve maintenant sur une page présentant les 8 produits de la collection. Le défilement automatique des articles permet de mieux distinguer la présence d’une scrollbar en bas de la page. Cette dernière est malheureusement beaucoup trop fine pour être utilisée facilement.

Étrangement, je retrouve dans cette liste un produit que j’ai vu sur la photo mais qu’il n’était pas possible d’acheter jusqu’à maintenant : la housse de couette. Je clique dessus, puis sur le bouton « Voir la fiche produit ».

Je suis alors basculé vers une fiche produit classique du site de La Redoute. Cette sortie brutale de la boutique dédiée, à la fois déroutante et peu élégante, est la source d’un problème gênant  : il n’est pas possible de revenir à la page précédente. Pire : si j’utilise le bouton « Page précédente » de mon navigateur, je suis renvoyé vers la homepage du mini-site et je dois me débrouiller pour revenir sur la page qui m’intéresse.

Un coup d’œil au breadcrumb en haut de la page me permet de constater que je ne me trouve pas au cœur d’une sélection de produits « Vanessa Bruno » mais dans la partie « housse de couette fantaisie » du site de La Redoute. Il ne me sera donc pas possible de retrouver tous les produits Maison par ce biais.

En dernier recours, je clique sur le logo « Vanessa Bruno » en haut à gauche : je suis redirigé vers une page présentant toutes les housses de couette fantaisie du site. Pas très logique.

Bonus

Retrouver la boutique Vanessa Bruno au milieu du site de La Redoute n’est pas chose facile, surtout en cette période de soldes. Un petit bandeau est présent en bas de la page des marques, mais le moyen le plus simple reste de taper « Vanessa Bruno » dans le moteur de recherche. Le visiteur est alors automatiquement redirigé sur le mini-site dédié.

Cette redirection instantanée peut être déroutante pour certains clients, qui s’attendent à l’affichage d’une liste de produits classique. Il est toutefois possible d’accéder à une liste de produits Vanessa Bruno : il suffit de ne taper que « Vanessa » dans le moteur de recherche.

Bilan

textes trop petits et peu lisibles
structures de certaines pages
sortie du mini-site pour commander
éléments d’interface à revoir (bouton précédent, scrollbar, zoom)
certains liens ne renvoient pas vers le bon contenu
bouton « page précédente » inutilisable

Sécurité et autres écueils sur ameli.fr

La sécurité sociale offre depuis plusieurs années à ses assurés la possibilité de s’inscrire sur son site internet afin de ne plus recevoir de relevés de remboursement par voie postale. Suite à la réception d’un courrier m’incitant à ouvrir mon compte en ligne, j’ai décidé de tester ce service il y a quelques jours.

Je me rends sur www.ameli.fr comme me le recommande le courrier, puis je clique sur l’encart en bas à gauche « Mes remboursements en temps réel … J’ouvre mon compte ».


(On ne met pas d’espace devant des points de suspension, mais ce n’est pas le propos.)

La page sur laquelle je suis redirigé me propose plusieurs choses :
• je peux commander un code provisoire (tiens, on me parle de code provisoire, alors que le courrier fait mention d’un simple code) si je n’ai pas encore de compte ameli ;
• je peux résoudre mes problèmes d’accès ;
• je peux consulter une démo pour connaître les avantages du compte ameli ;
• je peux me connecter à mon compte.
Et pour les gens qui ont reçu un code par courrier mais qui n’ont pas encore de compte ?

Cette page manque de précision. Un simple bouton « vous avez reçu un code par courrier et souhaitez créer votre compte » résoudrait cet écueil.


(Les astérisques présentes à côté des légendes ne renvoient à rien, mais ce n’est pas le propos.)

Par déduction, je choisis « connexion à votre compte » (compte que je n’ai pas encore créé : le choix des mots est à revoir.) Je saisis mon numéro de sécurité sociale, puis mon code confidentiel (tiens, on me parle de code confidentiel désormais), et je valide en cliquant sur « me connecter ».

La page suivante décrit les conditions d’utilisation du compte. Je clique sur continuer.


(Les boutons radio se baladent à droite des labels au lieu d’être proprement alignés à gauche, mais ce n’est pas le propos.)

Je suis désormais sur la page de création de compte. Première remarque : le langage utilisé dans le premier paragraphe ne correspond pas tout à fait à ce que l’on attend d’un organisme comme la sécurité sociale. La phrase « C’est votre première visite… » devrait être supprimée. Deuxième remarque : les 2 mentions « tous les champs sont à compléter obligatoirement », ainsi que le texte « de 8 à 13 chiffres » sont en verdana… 8pt ! Dire que la sécurité sociale ne rembourse quasiment pas les achats de lunettes…

Le premier champ à remplir est intitulé « Mon code confidentiel provisoire », le second « Mon code personnel ». Si je récapitule, jusqu’à maintenant, on m’a parlé de :
• code (dans le courrier que j’ai reçu) ;
• code confidentiel ;
• code provisoire ;
• code confidentiel provisoire ;
• code personnel.

Tout ceci est très confus. Il est indispensable d’utiliser un seul terme pour qualifier une seule chose. C’est d’autant plus vrai qu’ici le code personnel n’est pas le même que les 4 autres – qui eux se réfèrent tous au même code. Heureusement, la popup d’aide permet d’y voir un peu plus clair.

Je remplis le premier champ puis passe au second. Mon code personnel, de 8 à 13 chiffres ? Un second coup d’œil à l’aide me le confirmera, le code ne peut contenir que des chiffres ! D’un point de vue sécurité, c’est une catastrophe. Sans parler de la limitation de longueur, elle aussi très gênante. Une attaque type « bruteforce » viendrait à bout de cette sécurité en quelques heures.

L’aide précise qu’il n’est pas possible d’utiliser son numéro de sécurité sociale, une suite de chiffre ou sa date de naissance. Quelles possibilités reste-t-il ? Je me lance : je parie que plus de 80% des codes créés sont soit des dates de naissance (conjoint, enfant) soit des numéros de téléphone.

Des règles de sécurité pareilles sur le site de la sécurité sociale (63 millions d’assurés), en 2011, c’est difficile à croire. Pendant ce temps, la loi Hadopi sanctionne le défaut de sécurisation de l’accès à internet…

Je poursuis. Paragraphe suivant : « Votre question secrète vous sera demandée… ». Demander une question ? Il y a de gros efforts de français à fournir… Je poursuis (encore). « …en cas d’oubli ou de perte de votre code confidentiel ». De mon code confidentiel, ou de mon code personnel ?

Je poursuis (toujours). La question secrète permet donc de récupérer son code en cas d’oubli. Une fonctionnalité très pratique à laquelle il convient d’appliquer une règle de sécurité évidente : il ne faut pas que la réponse soit trop facile à trouver. C’est loin d’être le cas ici : le nom de votre chien, le prénom de votre premier enfant, le prénom de votre père etc. sont des données très faciles à retrouver sur internet.

Pour finir, un petit mot sur l’interface de l’ensemble. Le site utilise des codes plutôt datés : largeur limitée, polices minuscules… Une mise à jour semble nécessaire. Quant au bouton d’aide situé en haut à droite de toutes les pages, il peut induire en erreur : son contenu n’est pas relatif à la page consultée. Pas la peine d’y chercher des indications sur votre code personnel provisoire et confidentiel, il n’est question ici que de « résolution » (une aide sur la résolution d’affichage ?), de « compatibilité des environnements » et de « cookie ». Pas certain que cette popup aide qui que ce soit, finalement.

Bilan

langage peu adapté, fautes de français
taille de certaines polices
désignations approximatives de fonctionnalités et d’éléments importants
sécurité !