Test ooshop.com : technique et ergonomie A REVOIR !

Un test catastrophique du site de courses en ligne ooshop.com, le site de Carrefour.

Habituée depuis les débuts aux courses en ligne, je suis passée par (feu) telemarket, puis houra.fr, site excellent, plutôt infaillible à tout point de vue, avec de nombreuses références, mais plus cher en moyenne que les autres. J’ai donc choisi de tester ooshop.com pour mes prochaines courses, quelque-uns de mes produits favoris étant moins chers.

Voici les points à revoir d’urgence :

1. Lenteurs extrêmes du site :
Que ce soit en envoyant une recherche (touche entrée ou clic sur le bouton OK), en mettant un produit en panier, en souhaitant afficher le détail d’un produit (fenêtre modal), … la réactivité du site doit en faire fuir plus d’un.
Il est très difficile au final de faire ses courses sur ooshop.
Par exemple on clique sur le bouton panier sur une fiche produit, et rien ne se passe avant un bon bout de temps (de 1 à 12 secondes pour réagir, 7 à 10 secondes en moyenne !!!) Aucun indicateur de prise en compte du clic, donc on re-clic, plusieurs fois, pour avoir finalement 3 fois le même produit en panier. Et comme c’est le même temps de réaction pour modifier les quantités ou supprimer un produit, cela peut devenir TRÈS énervant.
Les URL (au passage non réécrites !) faisant apparaitre des extensions aspx, on peut estimer que le site est développé en .NET et utilise des technologies Microsoft. Vu les lenteurs, je me demande quel système de bases de données ils utilisent.
En faisant quelques recherches on constate que la lenteur du site ooshop, qui a pourtant connu plusieurs refontes, a toujours été pointée du doigt, que ce soit en 2008 ou en 2015

En faisant une petite analyse rapide YSlow et PageSpeed, je dirais que le serveur répond correctement, qu’il a des performances d’optimisation ne sont ni meilleures ni moins bonnes que houra.fr, en revanche la page d’accueil fait quand même 1,83Mo (vs 945Ko pour houra) -ce qui est énorme- pour 104 requêtes (vs 57).
Mais je ne pense pas que le problème soit là.

Quand on pense que l’internaute fuit et ne revient pas lorsqu’une page met plus de 3 secondes à charger, cela fait méditer sur le CA perdu par ce site.
Je pense qu’il est sérieusement temps de faire quelque chose. Vous n’avez pas non plus plusieurs dizaines de millions de référence que diable !!!

edit : Quelques jours après le site a plus de répondant. Était-ce un jour particulier ?

2. Navigation à revoir complètement
Exemple 1 : je veux des dosettes de café type Nespresso. Le site me propose un onglet avec un croissant pour « Le petit-déjeuner », puis un lien « Café ».
Déjà il n’y a AUCUN produit d’affiché ! Je re-clic sur Café et ça m’affiche une page d’erreur (très moche) « Le site web a rencontré une erreur inattendue, veuillez nous en excuser. ». Je rencontrerai cette page maintes fois dans mon parcours.
Allez je re-clic Café… Et là j’ai des produits affichés sur… 15 pages !

Et je ne peux pas choisir le nombre de produits par page (évidemment avec leurs problèmes de perf c’est pas le genre de fonctionnalités qu’on aime laisser…) ARGH !
Heureusement on me propose un espèce de sous-menu designé sous forme d’un espèce de breadcrumb, donc je clic sur « Dosettes, capsules », puis sur Capsules dans la 3ème partie de ce sous-menu horizontal étrange. Et là HO MON DIEU ça me propose des casules de thé !
Mais ils sont fous ! Pourquoi ? Ça me rend dingue…

FireShot Screen Capture #034 - 'Vos courses en ligne sur Carrefour Ooshop livrées à domicile' - www_ooshop_com_courses-en-ligne_ContentNavigation_aspx

Exemple 2 : Si je choisis un type de tri sur une liste produit, elle ne sera pas enregistrée et remise automatiquement sur les autres pages, c’est énervant ! Surtout sur un site très lent !
Et sur un site de courses en ligne les internautes je choisissent souvent un tri par prix ou par prix au kilo sur toutes les listes, donc il faut le mémoriser !

3. Fiche produit loin d’être complète :
C’est bien beau de proposer du merchandising un peu partout (en bas des pages : 1 produit « Coup de coeur », 1 « Nouveauté », 1 « Promotion », 1 « A découvrir aussi »), encore faut-il avoir les informations qu’on veut pour faire nos choix.
Reprenons ma recherche de café. Je clic sur un des produits L’Or Espresso.
Cela ouvre une fenêtre modale (ouf pas de changement de page !)
FireShot Screen Capture #035 - 'Vos courses en ligne sur Carrefour Ooshop livrées à domicile' - www_ooshop_com_courses-en-ligne_ContentNavigation_aspx
Moi ce qui m’intéresse c’est de savoir la « force » du café. Dans le titre rien, dans la description rien, et sur l’image produit c’est pas mieux : C’EST FLOU, C’EST PETIT ! Et il n’y a qu’une seule image fixe. Je crois voir un « 05 » mais je ne suis pas sûre.
Là je suis bien obligée de comparer avec les excellentes modales produit de houra :
FireShot Screen Capture #036 - 'Résultats de recherche pour Sontuoso, L'or Espresso - Achat Sontuoso, L'or Espresso sur houra_fr' - www_houra_fr_reche
Et le produit en 3D, qui me permet d’aller voir toutes les informations présentes sur le packaging :
FireShot Screen Capture #037 - 'Résultats de recherche pour Sontuoso, L'or Espresso - Achat Sontuoso, L'or Espresso sur houra_fr' - www_houra_fr_reche

4. Des fonctionnalités inabouties
Lorsque je veux ajouter un produit à une liste (et cela arrive souvent quand on fait ses courses en ligne), nous avons un menu déroulant « Ajouter à la liste (ce qui déjà en soit n’est pas du tout ergonomique puisque ce serait le texte d’un bouton et pas du 1er choix d’un menu déroulant) donc je clic, et là j’ai « Ma liste », ET C’EST TOUT. Et pas de bouton donc si je clic pas erreur le produit est ajouté à une liste par défaut « Ma liste » et pis c’est tout. Et pas de possibilité de créer une autre liste.
listeooshop
Encore une fois comparons avec houra :
FireShot Screen Capture #043 - 'houra_fr - Mon Compte' - www_houra_fr_cpt_index_php_c=produits-5-dernieres-commandes
Voici la petite modale qui s’affiche lorsque je clic sur un bouton detail-liste dont le title est « Ajouter cet article à une liste ».

5. Un moteur de recherche des années 80
– Pas de suggestion durant la frappe, ni produit, ni catégories, ni correction orthographique
– Si problème orthographique suggestion de lien(s) pour relancer la recherche (nooon pitié !)
– Si résultat partiel (n mots trouvés sur m tapés), pas d’indication transparente
– Affichage des produits PAR CATÉGORIE. Et donc si je trie je ne comprends pas la cohérence

En parlant du tri, encore, il n’y a pas d’option par Nouveautés ou Promotions, ce qui est très intéressant pour ce genre de site.

BREF : Il se fait tard, et c’est tellement lent que je n’ai pas finalisé ma commande. Je suis suis pas rentré dans le processus de commande à part rentrer des produits en panier. Je suis très déçue, et autant surprise.
Je pense sérieusement qu’OOSHOP doit avoir le taux d’abandon le plus important du web.
Donc je n’irai pas au bout de ce test non plus. Je vais continuer à utiliser houra, bien que plus cher, au moins je perdrai moins mon temps (et le temps…)

Cloud9 php/MySQL basics

Cloud9 est sans doute le meilleur IDE de développement web en cloud.
Voici comment créer rapidement une application basique php/MySQL.

– Ouvrir un compte c9

– Créer un nouveau workspace php/Apache/MySQL (à partir du dashboard)

Cloud9 php Apache MySQL

Cloud9 php Apache MySQL

– Dans le terminal (bash) du workspace, démarrer le serveur MySQL avec la commande : mysql-ctl start

– Si besoin, installer phpmyadmin avec la commande : phpmyadmin-ctl install

Cloud9 bash install phpmyadmin

Cloud9 bash install phpmyadmin

– Pour ouvrir une commande MySQL taper la commande : mysql-ctl cli

– L’url du phpmyadmin est : http://(workspace)-(username).c9.io/phpmyadmin

– Voici les identifiants nécessaires à la connexion à une bdd de MySQL à partir de votre code source :
$host = "127.0.0.1";
$user = "votre_username_c9";
$pass = ""; //mot de passe vide par défaut
$db = "votre_base_de_donnees";
$port = 3306; //Le port sur Cloud9 est toujours 3306

Autres petites choses :
– pour installer par exemple curl, tapez sudo apt-get install php5curl
– pour faire un dump utiliser les raccourcis c9 : mysqldump db_name > export_filename.sql

HAVE FUN !

Importer un dump MySql volumineux

Phpmyadmin c’est bien mignon mais l’utiliser pour importer un backup volumineux c’est risqué…
Les limites sont souvent atteintes, et en prod il est parfois difficile d’accéder à la config.
Et parfois on n’a qu’un accès web et un compte ftp, pas de ssh rien, donc j’ai trouvé un petit script php qui va tout bien faire pour nous :
http://www.ozerov.de/bigdump/

– Modifier le script avec les identifiants de la bdd en question ;
– L’envoyer sur le serveur web avec (ou pas) le dump .sql ou .gz ;
Et c’est parti.

Growth hacking

De beaux résultats pour un de mes clients pour un peu plus d’un mois de travail.
(les plages de date des chiffres sont volontairement masqués)

Croissance générale commerce électronique

Tunnel de conversion (2 périodes comparées)

ROI Google adwords

A noter que lte taux de conversion mobile est passé de 8% à 14% !
Et le taux de conversion tablettes de 1,46% à 2,42%.

La travail a porté sur plusieurs fronts :
– mise en place d’un suivi analytics plus poussé ;
– modification de la navigation à facette pour créer des landing pages référençables, customisables et propres ;
– optimisation quotidienne des campagnes adwords (regroupement de mots-clés, modification des annonces pour intégrer les landing pages adéquates, augmentation d’enchères, suppression de mots-clés non rentables…) ;
– modifications ergonomiques de la page de liste de produits (plus de produits, plus de visuels, et optimisations SEO) ;
– ajout de la date de livraison précise sur la fiche produit ;
– optimisation Webmaster Tools (insertion sitemap avec nouvelles landing pages, balisage page produit et liste produits) ;
– optimisation/debuggage mobiles et tablettes ;
– suivi analytics, encore, encore et encore ;
– …

Et… bonjour Google !

indexation Google – Search console

+20 000 pages indexées sur Google (passage de ~60 000 à ~80 000)

De l’avantage d’être full-full-stack.

Bug Prestashop Google analytics commandes en double

Un debug qui vaut bien un article.

Prestashop 1.5.2
module gAnalytics 2.1.1
Commandes en doublon

Depuis plusieurs semaines sur le compte Analytics d’un client je voyais une commande en particulier qui était renvoyée régulièrement, plusieurs fois par jour, mais pas tout le temps.

1er debuggage corrigé par le nouvelle version du certes perfectible mais déjà excellent module gAnalytics pour Prestashop : les commandes pouvaient être envoyées plusieurs fois si le client se reconnectait sur la page de confirmation de commande. C’est bête hein, mais il faut faire une bonne petite routine pour éviter ça.

Avant cette correction c’était ainsi beaucoup de commandes qui étaient envoyées en plusieurs exemplaires (vive le taux de transformation).
Mais même après je voyais CETTE commande en particulier qui continuait à fausser énormément mes stats si bien que je devais segmenter mes rapports (avec id_transaction=…), mais je constatais alors que ça retirait aussi d’autres transactions.
A savoir que la segmentation d’un rapport porte sur les sessions répondant aux critères.
Une même session renvoyant une ancienne commande mais aussi des commandes du jour ? Comportement très étrange, je ne comprenais pas.

En isolant bien ce segment sur une seule journée pour plus de visibilité, j’ai pu afficher les pages vues dans le détail de cette session.
Et là j’ai constaté qu’il s’agissait d’une session admin. (L’admin envoie des stats analytics ?! Me dis-je d’un coup, interloquée que j’étais)
J’ai affiché une des pages vues incriminée et ouvert le code source… Et là stupeur je vois de mes yeux vus qu’effectivement la dite transaction est envoyée, le code analytics est là et… je viens donc de renvoyer la transaction à Analytics, super.

Et je décide donc d’aller debugger le module, screugneugneu.
J’avais bien sûr parcouru depuis plusieurs semaines le web à la recherche d’autres gentils développeurs qui auraient trouvé des solutions mais je n’ai rien trouvé à part des « oui moi aussi j’ai le même problème et je ne trouve pas de solution »

Mais là j’en avais juste marre.
Donc, pour résumer :
– Il y a une table [ps_]ganalytics qui enregistre -tout bêtement- les transactions à envoyer ou envoyées à GA.
– Il y a une colonne ‘sent’ qui passe de 0 à 1 lorsque la transaction est envoyée (au cas où elle n’aurait pas été envoyée par l’internaute lui même s’il n’a pas afficher la page de confirmation de commande, problème très courant) et avec un timestamp
– Dans le hook du header de l’admin s’exécute ceci :
1. select les transactions dans [ps_]ganalytics qui sont à sent=0 enregistrées il y a plus de 30 mn (le DATE_ADD(date_add, INTERVAL 30 minute) < NOW() )
2. envoie ces commandes à GA (addtrans)
3. update [ps_]ganalytics : met date_add = NOW() (et sent=1 sans doute quelque part à un moment donné…) pour ces id_transaction et avec LIMIT 1

La cause de nos soucis CAR :
– ma screugneugneu commande était en DOUBLON dans cette table [ps_]ganalytics
– une ligne avec sent à 0, une ligne avec sent à 1
– DONC il prenait la commande, il la renvoyait à GA, et… il updatait une ligne car la requête porte sur l’id_transaction et non l’id_google_analytics qui est la clé primaire ET qu’il y a ce LIMIT 1 donc au hasard il prenait la ligne qui était déjà à sent=1
– donc il y avait toujours la ligne avec sent=0
– donc il recommençait à l’envoyer encore et encore…

Résolution du problème : supprimer la ligne avec sent=0 dans la table [ps_]ganalytics, c’est tout.
Et pourquoi pas modifier les requêtes de ganalytics.php > hookBackOfficeHeader() et de controllers\admin\AdminGanalyticsAjax.php en retirant les LIMIT 1 si le coeur vous en dit.

CONCLUSION :
Si vous avez des commandes qui ne cessent de s’envoyer, que vous avez bien la dernière version du module ganalytics (2.1.1 ou supérieur) : vérifiez que vous n’avez pas des commandes en doublons dans la table [ps_]ganalytics. Voici une requête pour cela :
SELECT count(*), id_order from ps_ganalytics group by id_order having count(*)>1
Si c’est le cas et qu’il s’agit comme par miracle des commandes qui vous embêtent sur GA, bha supprimez les lignes des doublons qui ont sent à 0.

Et pourquoi pas si le coeur vous en dit supprimer les LIMIT 1 des requêtes UPDATE dans
– \modules\ganalytics\ganalytics.php > hookBackOfficeHeader()
– \modules\ganalytics\controllers\admin\AdminGanalyticsAjax.php

ps : Si vous avez un problème inverse, c’est-à-dire des commandes qui ne sont pas envoyées à Google Analytics, quelque soit votre site, CMS ou outil de développement, pratiquement tous les services de paiement en ligne incluent maintenant une option pour renvoyer directement l’internaute sur le site après avoir payé.
Ce qui a pour conséquence qu’il affiche la page de confirmation de commande, qui peut envoyer le bon code à GA lié à la bonne session.
Je gère cette problématique depuis 15 ans ! Sur Paypal il y a une option, et les modules bancaires proposent aussi cette option, souvent appelée la redirection automatique. Parlez-en à… qui de droit (ou à moi si vous vous sentez seuls !)

Fondamentaux pour le Big Data

Ayant suivi des études de mathématiques et d’informatique, et ayant un intérêt spécial pour les données, je suis avec attention l’essor du Big Data.
Je participe donc en ce moment au MOOC de l’institut Mines-Télécom « Fondamentaux pour le Big Data » où je revois mes lointains cours de proba/stats et algèbre linéaire :)

Plus d’infos sur le MOOC :
https://www.france-universite-numerique-mooc.fr/courses/MinesTelecom/04006/Trimestre_1_2015/about

Plus d’infos sur FUN :

France Université Numérique

France Université Numérique

Plus d’infos sur les MOOC de l’Institut Mines-Télécom :

Institut Mines-Télécom

Institut Mines-Télécom

Ecole Supérieur du Digital

Je suis enseignante à l’ESD
7928
J’interviens en e-commerce et CRM/PRM pour les Masters Expert et innovation et Stratégie Web & Social Média.

J’interviens également à l’Ecole Supérieur de la Publicité, l’ESP en Master 2 Digital pour le module technique.
logo-new

Merci à Coralie Boulay, Sylvie Broze et Boris Bergeot pour leur confiance.

ecofolio.fr Rubrique Annonces Reprises

J’ai développé la nouvelle rubrique du site de l’organisation Ecofolio.
rubrique-annonces.ecofolio.fr

Ecofolio est l’éco-organisme des papiers en France. Il met en oeuvre la Responsabilité Élargie du Producteur (REP) en incitant à recycler plus, en améliorant les dispositifs de tri et collecte et en encourageant à trier mieux tous les papiers.

Ecofolio avait besoin d’un mini-site pour les collectivités et les repreneurs, leur permettant de poster et de consulter des annonces.

FireShot Screen Capture #023 - 'Ecofolio Rubrique Annonces Reprise' - rubrique-annonces_ecofolio_fr

Fonctionnalités : Dépôt des annonces, modération, personnalisation du back-office, consultation des annonces, qualification des visiteurs, expiration des annonces…
Outils : WordPress, Custom Post Types, développements personnalisés…
Gestion de projet avec trello

Merci à Jean-François Robert pour sa gentillesse.

sano-solutions.com

Une création de site e-commerce distribuant des produits innovants pour se protéger des ondes au bureau comme à la maison.
Découvrez le earthing grâce à Sano-solutions !

Missions :
– Mise en place Prestashop 1.5.3.1
– création globale du design, recherche d’images, graphisme
– fonctionnalités : systèmes de paiement Ogone, Paypal, blog…
– e-marketing : SEO et SEM via Adwords
– conseil et suivi

avantapres

milledoudou.com

Merci à Sandrine Vacher pour sa confiance et sa patience, pour une mission de refonte totale + migration Prestashop 1.3.2 à 1.5.2 qui n’a pas été facile !
On peut d’ailleurs se demander si quelqu’un d’autre au monde a réussi à faire cette migration ! (sans vantardise aucune…)

www.milledoudou.com

Je me suis fait plaisir à créer ce design dans lequel on retrouve bien ma patte : des images istock pleines de vie et une navigation avancée à facettes :)

Voici un avant/après !

Milledoudou avant migration prestashop 1.3.2 à 1.5.2

Milledoudou avant

Milledoudou après