SlideShare une entreprise Scribd logo
1  sur  33
LE E-COMMERCE ET SES SOLUTIONS ONT LEUR ACADEMY.




                    SEO

                                      ERGONOMIE




LES BEST PRACTICES DE L’E-COMMERCE ACADEMY POUR 2013



             Samuel Dubois                                   Richard Cohen
             Expert ergonomie                                Expert référencement
Depuis plusieurs mois, nous avons passé en revue l'ensemble
      des méthodologies et leviers d’optimisation, cela nous
      permet de vous livrer les meilleurs chantiers pour 2013.
                        L’e-Commerce Academy
         TECHNOS Magento, Oxid eSales, PrestaShop, Drupal Commerce
            & ECOMMERCE Référencement, ergonomie, e-marketing


Focus des technologies et des méthodes

Les indicateurs de prédiction, augmentez vos visites qualifiées

Gérer le flux d’acquisition vers le panier

Comprendre en 5 min une baisse de CA

Check-list d’optimisation 2013
Focus des technologies et des méthodes

Conventions ERGONOMIE & SEO

Architecture de l'information
 • Organisation du contenu & flux d’interactions

Maquettage & tests utilisateurs
 • test exploratoire
 • test scénarisé
Webanalytics

Tests A/B et multivariés

Analyse SEO
 • Interne ( Logs, WEBA, CRAWL)
 • Externe (WMT, ADWORDS, SERPS...)
Les conventions & règles en ergonomie

                                     Onglets de
                                     catégories


                                                               Accès au compte
 Logo + baseline
en haut à gauche
                                                                                 Panier


                                                            Moteur de
                       menus de sous
                                                         recherche interne
                        catégories




  Salon e-Commerce Paris 2012 - The e-Commerce Academy
Les conventions & règles en ergonomie



   Rassurance                                              Suivi de commande
    Livraisons                  Mentions légales +                et SAV
                                      infos




  Rassurance
   Paiement                                                    Réseaux sociaux




                  Pourquoi vouloir réinventer ce qui fonctionne ?
               En Ergonomie, le Mieux est souvent l’ennemi du Bien
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Les conventions & règles en ergonomie



   18Bastien et Scapin
                        critères de                      3     Lois de
                                                         l’Utilisabilité




  3           « Fact Of Life »
                                                       Les règles existent
                                                       pour être brisées…


Salon e-Commerce Paris 2012 - The e-Commerce Academy
Organisation du contenu

         En fonction du type de site, il convient de :
Enumérer

Lister les fonctionnalités

Inventorier les contenus

Catégoriser le tout

Hiérarchiser / Structurer :
 • Accueil
   • Univers 1 / Rubrique 1 / Rubrique 2 ...
                   Univers 2 / Rubrique 1 / Rubrique

 Salon e-Commerce Paris 2012 - The e-Commerce Academy
Organigramme de contenu

                Macro                                  Micro




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Méthode du tri de cartes ("Card Sorting")


1            Identifier                  2      Catégoriser   3   Structurer




                                   Et aussi :
                                    •  focus-groups
 iCardsort




                                    •  Entretiens
                                    •  Mindmapping…
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Flux d'interactions / Parcours client




                              Est-ce si simple ? ?
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Flux d’interactions : organigrammes logiques


75% des visiteurs
arrivent sur une page
intermédiaire




 Salon e-Commerce Paris 2012 - The e-Commerce Academy
Maquettage : Zoning & WireFrame


              Zoning                                   Wireframe




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Maquettage : Wireframe simple

Exemple : Mockflow




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Maquettage : Wireframe avancé




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Maquettage : Mock-up




                                                       Source : IAFactory
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Quel outil pour quoi faire ?


  Zoning
  Wireframe                                              €
  Mock-up                                              €€€
  Prototype                                             €€
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Tests utilisateur : exploratoire & scénarisé


Tests                                                  Tests
exploratoires                                          scénarisés




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Tests utilisateur : exploratoire & scénarisé

                                                         Développeur observant
                                                       le déroulement d’un test
                                                                     utilisateur




Ce n’est pas à l’utilisateur de s’adapter au site,
c’est le site qui doit s’adapter à l’utilisateur
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Cycle d’analyse des données
          analytiques
5- Innover:                                                                          1- Mesurer :
Tester de nouvelles idées                                                            Capturer les KPI,
pour générer plus de valeur                                                          indicateurs clés de
(ou minimiser les coûts)                           Mesurer                           performance




                            Innover                              Reporting

4- Optimiser :                                                                       2- Reporting :
Exploiter les                                                                        Tableaux de bord,
stratégies                                                                           alertes.
gagnantes,                                                                           Leviers générant les
Éliminer les freins.
                                  Optimiser               Analyser                   meilleurs RSI



                                                         3- Analyser :
                                                         Identifier les facteurs du succès de votre site et
  Salon e-Commerce Paris 2012 - The e-Commerce Academy   les points bloquants
Tests A/B & Tests multivariés




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Cas Blume2000.de

   +6% de C.A
   Les internautes étaient plus intéressés par l'offre avec les chocolats (version B) malgré son prix plus élevé




L'équipe a cherché à savoir si les internautes préféreraient associer des fleurs à un CD de chants de Noël (version A) ou choisir
une offre légèrement plus chère, comprenant des fleurs et une boîte de chocolats (version B)…
     Salon e-Commerce Paris 2012 - The e-Commerce Academy
Eyetracking


                                      Amélioration
                                      de la navigation par :




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Les indicateurs de prédiction,
        augmentez vos visites qualifiées




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Caffeine, Panda, Pinguin & Serp




                                          Structure

                               Linking
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Crawl



                     VOLUMETRIE

                            GESTION

                                 TAUX

                                INDEX

Salon e-Commerce Paris 2012 - The e-Commerce Academy
Indexation


90%                                                                        1%
Gestion du crawl                                              Des pages crawlées
                                                                    sont cliquées

                                                        SEO



85% Des visites proviennent de pages
crawlées sous 15 jours*
 Salon e-Commerce Paris 2012 - The e-Commerce Academy
Rétention : du crawl à l'indexation




50%               Des contenus sont invisibles pour les moteurs*

              …dommage !
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Gérer le flux d’acquisition vers le
        panier
          Optimisation du parcours-client

          Trouver ce que l'on cherche
            • Provenance de l’internaute !

          Savoir où nous sommes
            • Provenance de l’internaute !

          Savoir quel est le contenu du site

          Savoir comment utiliser le site

          Avoir un bouton "Panic"

          Donner confiance dans le site

          Les facilitateurs d'achat
Salon e-Commerce Paris 2012 - The e-Commerce Academy
Comprendre en 5 min une baisse de CA




                                                       404


Salon e-Commerce Paris 2012 - The e-Commerce Academy
Check-list d’optimisation 2013




Salon e-Commerce Paris 2012 - The e-Commerce Academy
Prioriser le SEO pour 2013

1 seconde
 • Le temps de téléchargement ‘MAX’ d’une page

5e position
 • Le rang minimum de transformation et d’indexation persistante

80%
 • De la réussite d’un site est liée à l’état de crawl des pages

55% ‘Seulement’
 • Du catalogue marchand est visible en permanence dans l’index de Google

175%
 • Des problématiques de SEO sont liées à la méconnaissance des algorithmes

80%
 • Des landing pages ne transforment pas correctement la provenance

 Salon e-Commerce Paris 2012 - The e-Commerce Academy
Taux et causes d’abandons de panier
          en 2012
44% des abandons > Frais de livraison
  • Frais de livraison : gratuité, diversité, rapidité

41% des abandons > Interruption de l’achat
  • Persistance du panier

25% Prix / Spam & Crash
  • Positionnement, ethique e-marketing, audit technique

14% Tunnel d'Achat : complexité & coercition
  • Processus d’évolution par étapes
  • Aucune navigation ou arborescence
  • Guest Checkout

12% Formulaires : Trop d'infos tue l'info
  • Le minimum utile

7% Moyens de paiement
  • Diversité, tiers de confiance (Paypal, et cie), Paiement en plusieurs fois



 Salon e-Commerce Paris 2012 - The e-Commerce Academy                            Source : Invesp.com
A tout de suite : Stand N57


        Formation. Conseil. Audit.
   Le centre e-Commerce de référence.



              blog.academy-ecommerce.com
              www.academy-ecommerce.com
              contact@academy-ecommerce.com
              Twitter @ecommerce_acdmy
 Samuel Dubois : @sdubois_teca - samuel.dubois@ecommerce-academy.fr
 Richard Cohen : @richardcohenbiz – richard.cohen@ecommerce-academy.fr

Salon e-Commerce Paris 2012 - The e-Commerce Academy

Contenu connexe

Similaire à Ergonomie et référencement, les meilleures pratiques pour 2013

COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCE
COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCECOMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCE
COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCESQLI DIGITAL EXPERIENCE
 
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...Déployer les meilleures pratiques du Merchandising avec Compario et Performan...
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...Compario devient Sparkow
 
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovante
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovanteSeminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovante
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovanteSmile I.T is open
 
Atelier 2 commerce électronique - décembre
Atelier 2   commerce électronique - décembreAtelier 2   commerce électronique - décembre
Atelier 2 commerce électronique - décembreGetting to Global
 
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0CUSTOMER INSIGHT
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Redpoint
 
Web Analytics : Générer de la valeur en allant au-delà du reporting
Web Analytics : Générer de la valeur en allant au-delà du reportingWeb Analytics : Générer de la valeur en allant au-delà du reporting
Web Analytics : Générer de la valeur en allant au-delà du reportingaltima°
 
Catalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your dataCatalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your dataFabien BOURGOIS
 
Catalogue formations analytics & tag management 2014 2015 show me your data
Catalogue formations analytics & tag management 2014 2015 show me your dataCatalogue formations analytics & tag management 2014 2015 show me your data
Catalogue formations analytics & tag management 2014 2015 show me your dataFabien BOURGOIS
 
Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)David Hachez
 
Webcom 2011 - Audit marketing électronique
Webcom 2011 - Audit marketing électroniqueWebcom 2011 - Audit marketing électronique
Webcom 2011 - Audit marketing électroniqueSylvain Senecal
 
8 points clés pour créer un site e-commerce
8 points clés pour créer un site e-commerce8 points clés pour créer un site e-commerce
8 points clés pour créer un site e-commerceVaisonet
 
8 points clés pour la création d'un site e-commerce
8 points clés pour la création d'un site e-commerce8 points clés pour la création d'un site e-commerce
8 points clés pour la création d'un site e-commerceAvignon Delta Numérique
 
Catalogue Formation S1-2024 Show Me Your Data.pdf
Catalogue Formation S1-2024 Show Me Your Data.pdfCatalogue Formation S1-2024 Show Me Your Data.pdf
Catalogue Formation S1-2024 Show Me Your Data.pdfFabien BOURGOIS
 
2010-03-04 comment développer son référencement en 2010 by competitic
2010-03-04  comment développer son référencement en 2010 by competitic 2010-03-04  comment développer son référencement en 2010 by competitic
2010-03-04 comment développer son référencement en 2010 by competitic COMPETITIC
 
2011 04 03 Referencement naturel ou payant by competitic
2011 04 03 Referencement naturel ou payant by competitic2011 04 03 Referencement naturel ou payant by competitic
2011 04 03 Referencement naturel ou payant by competiticCOMPETITIC
 
Y a t il un pilote dans l'e-boutique ?
Y a t il un pilote dans l'e-boutique ?Y a t il un pilote dans l'e-boutique ?
Y a t il un pilote dans l'e-boutique ?Malinea
 
Le Product Portfolio Management au-delà du Produit Numérique
Le Product Portfolio Management au-delà du Produit NumériqueLe Product Portfolio Management au-delà du Produit Numérique
Le Product Portfolio Management au-delà du Produit NumériqueAgile En Seine
 
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerce
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerceEnjeux e commerce 2012 - CCI Grenoble eCobiz eCommerce
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerceRaphaël Fétique
 

Similaire à Ergonomie et référencement, les meilleures pratiques pour 2013 (20)

COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCE
COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCECOMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCE
COMMENT GERER PROJET DE MISE EN PLACE D'UN SITE E-COMMERCE
 
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...Déployer les meilleures pratiques du Merchandising avec Compario et Performan...
Déployer les meilleures pratiques du Merchandising avec Compario et Performan...
 
Introduction à Lean Startup
Introduction à Lean StartupIntroduction à Lean Startup
Introduction à Lean Startup
 
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovante
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovanteSeminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovante
Seminaire Smile Lille : Mettre en œuvre une stratégie e-commerce innovante
 
Atelier 2 commerce électronique - décembre
Atelier 2   commerce électronique - décembreAtelier 2   commerce électronique - décembre
Atelier 2 commerce électronique - décembre
 
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0
Aumentez l'efficacité de votre site de marque et de sa stratégie Web 2.0
 
Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)Cours Google Analytics - IUT Vannes (février 2014)
Cours Google Analytics - IUT Vannes (février 2014)
 
Web Analytics : Générer de la valeur en allant au-delà du reporting
Web Analytics : Générer de la valeur en allant au-delà du reportingWeb Analytics : Générer de la valeur en allant au-delà du reporting
Web Analytics : Générer de la valeur en allant au-delà du reporting
 
Catalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your dataCatalogue formations analytics 2015 show me your data
Catalogue formations analytics 2015 show me your data
 
Catalogue formations analytics & tag management 2014 2015 show me your data
Catalogue formations analytics & tag management 2014 2015 show me your dataCatalogue formations analytics & tag management 2014 2015 show me your data
Catalogue formations analytics & tag management 2014 2015 show me your data
 
Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)Une introduction au e-commerce (ICHEC 2012)
Une introduction au e-commerce (ICHEC 2012)
 
Webcom 2011 - Audit marketing électronique
Webcom 2011 - Audit marketing électroniqueWebcom 2011 - Audit marketing électronique
Webcom 2011 - Audit marketing électronique
 
8 points clés pour créer un site e-commerce
8 points clés pour créer un site e-commerce8 points clés pour créer un site e-commerce
8 points clés pour créer un site e-commerce
 
8 points clés pour la création d'un site e-commerce
8 points clés pour la création d'un site e-commerce8 points clés pour la création d'un site e-commerce
8 points clés pour la création d'un site e-commerce
 
Catalogue Formation S1-2024 Show Me Your Data.pdf
Catalogue Formation S1-2024 Show Me Your Data.pdfCatalogue Formation S1-2024 Show Me Your Data.pdf
Catalogue Formation S1-2024 Show Me Your Data.pdf
 
2010-03-04 comment développer son référencement en 2010 by competitic
2010-03-04  comment développer son référencement en 2010 by competitic 2010-03-04  comment développer son référencement en 2010 by competitic
2010-03-04 comment développer son référencement en 2010 by competitic
 
2011 04 03 Referencement naturel ou payant by competitic
2011 04 03 Referencement naturel ou payant by competitic2011 04 03 Referencement naturel ou payant by competitic
2011 04 03 Referencement naturel ou payant by competitic
 
Y a t il un pilote dans l'e-boutique ?
Y a t il un pilote dans l'e-boutique ?Y a t il un pilote dans l'e-boutique ?
Y a t il un pilote dans l'e-boutique ?
 
Le Product Portfolio Management au-delà du Produit Numérique
Le Product Portfolio Management au-delà du Produit NumériqueLe Product Portfolio Management au-delà du Produit Numérique
Le Product Portfolio Management au-delà du Produit Numérique
 
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerce
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerceEnjeux e commerce 2012 - CCI Grenoble eCobiz eCommerce
Enjeux e commerce 2012 - CCI Grenoble eCobiz eCommerce
 

Plus de The e-Commerce Academy

Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...
Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...
Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...The e-Commerce Academy
 
Magento 2 : au-delà du changement de version, un changement de paradigme ?
Magento 2 : au-delà du changement de version, un changement de paradigme ?Magento 2 : au-delà du changement de version, un changement de paradigme ?
Magento 2 : au-delà du changement de version, un changement de paradigme ?The e-Commerce Academy
 
Magento 2 is to migrate or not to migrate, the right question ?
Magento 2 is to migrate or not to migrate, the right question ?Magento 2 is to migrate or not to migrate, the right question ?
Magento 2 is to migrate or not to migrate, the right question ?The e-Commerce Academy
 
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...The e-Commerce Academy
 
Devenir e-Commerçant : c’est (encore) possible !
Devenir e-Commerçant : c’est (encore) possible !Devenir e-Commerçant : c’est (encore) possible !
Devenir e-Commerçant : c’est (encore) possible !The e-Commerce Academy
 
Caches et indexes : optimisez (vraiment) vos performances Magento
Caches et indexes : optimisez (vraiment) vos performances MagentoCaches et indexes : optimisez (vraiment) vos performances Magento
Caches et indexes : optimisez (vraiment) vos performances MagentoThe e-Commerce Academy
 

Plus de The e-Commerce Academy (7)

Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...
Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...
Magento 2 à l’essai ! Conférence Bargento 2015 par les experts Magento de l'e...
 
Magento 2 : au-delà du changement de version, un changement de paradigme ?
Magento 2 : au-delà du changement de version, un changement de paradigme ?Magento 2 : au-delà du changement de version, un changement de paradigme ?
Magento 2 : au-delà du changement de version, un changement de paradigme ?
 
Magento 2 is to migrate or not to migrate, the right question ?
Magento 2 is to migrate or not to migrate, the right question ?Magento 2 is to migrate or not to migrate, the right question ?
Magento 2 is to migrate or not to migrate, the right question ?
 
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
Pourquoi & est-ce vrai que Magento 1.x est considéré comme une plateforme lou...
 
Devenir e-Commerçant : c’est (encore) possible !
Devenir e-Commerçant : c’est (encore) possible !Devenir e-Commerçant : c’est (encore) possible !
Devenir e-Commerçant : c’est (encore) possible !
 
Caches et indexes : optimisez (vraiment) vos performances Magento
Caches et indexes : optimisez (vraiment) vos performances MagentoCaches et indexes : optimisez (vraiment) vos performances Magento
Caches et indexes : optimisez (vraiment) vos performances Magento
 
Magento 2 : ce qui va changer
Magento 2 : ce qui va changerMagento 2 : ce qui va changer
Magento 2 : ce qui va changer
 

Ergonomie et référencement, les meilleures pratiques pour 2013

  • 1. LE E-COMMERCE ET SES SOLUTIONS ONT LEUR ACADEMY. SEO ERGONOMIE LES BEST PRACTICES DE L’E-COMMERCE ACADEMY POUR 2013 Samuel Dubois Richard Cohen Expert ergonomie Expert référencement
  • 2. Depuis plusieurs mois, nous avons passé en revue l'ensemble des méthodologies et leviers d’optimisation, cela nous permet de vous livrer les meilleurs chantiers pour 2013. L’e-Commerce Academy TECHNOS Magento, Oxid eSales, PrestaShop, Drupal Commerce & ECOMMERCE Référencement, ergonomie, e-marketing Focus des technologies et des méthodes Les indicateurs de prédiction, augmentez vos visites qualifiées Gérer le flux d’acquisition vers le panier Comprendre en 5 min une baisse de CA Check-list d’optimisation 2013
  • 3. Focus des technologies et des méthodes Conventions ERGONOMIE & SEO Architecture de l'information • Organisation du contenu & flux d’interactions Maquettage & tests utilisateurs • test exploratoire • test scénarisé Webanalytics Tests A/B et multivariés Analyse SEO • Interne ( Logs, WEBA, CRAWL) • Externe (WMT, ADWORDS, SERPS...)
  • 4. Les conventions & règles en ergonomie Onglets de catégories Accès au compte Logo + baseline en haut à gauche Panier Moteur de menus de sous recherche interne catégories Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 5. Les conventions & règles en ergonomie Rassurance Suivi de commande Livraisons Mentions légales + et SAV infos Rassurance Paiement Réseaux sociaux Pourquoi vouloir réinventer ce qui fonctionne ? En Ergonomie, le Mieux est souvent l’ennemi du Bien Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 6. Les conventions & règles en ergonomie 18Bastien et Scapin critères de 3 Lois de l’Utilisabilité 3 « Fact Of Life » Les règles existent pour être brisées… Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 7. Organisation du contenu En fonction du type de site, il convient de : Enumérer Lister les fonctionnalités Inventorier les contenus Catégoriser le tout Hiérarchiser / Structurer : • Accueil • Univers 1 / Rubrique 1 / Rubrique 2 ... Univers 2 / Rubrique 1 / Rubrique Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 8. Organigramme de contenu Macro Micro Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 9. Méthode du tri de cartes ("Card Sorting") 1 Identifier 2 Catégoriser 3 Structurer Et aussi : • focus-groups iCardsort • Entretiens • Mindmapping… Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 10. Flux d'interactions / Parcours client Est-ce si simple ? ? Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 11. Flux d’interactions : organigrammes logiques 75% des visiteurs arrivent sur une page intermédiaire Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 12. Maquettage : Zoning & WireFrame Zoning Wireframe Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 13. Maquettage : Wireframe simple Exemple : Mockflow Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 14. Maquettage : Wireframe avancé Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 15. Maquettage : Mock-up Source : IAFactory Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 16. Quel outil pour quoi faire ? Zoning Wireframe € Mock-up €€€ Prototype €€ Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 17. Tests utilisateur : exploratoire & scénarisé Tests Tests exploratoires scénarisés Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 18. Tests utilisateur : exploratoire & scénarisé Développeur observant le déroulement d’un test utilisateur Ce n’est pas à l’utilisateur de s’adapter au site, c’est le site qui doit s’adapter à l’utilisateur Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 19. Cycle d’analyse des données analytiques 5- Innover: 1- Mesurer : Tester de nouvelles idées Capturer les KPI, pour générer plus de valeur indicateurs clés de (ou minimiser les coûts) Mesurer performance Innover Reporting 4- Optimiser : 2- Reporting : Exploiter les Tableaux de bord, stratégies alertes. gagnantes, Leviers générant les Éliminer les freins. Optimiser Analyser meilleurs RSI 3- Analyser : Identifier les facteurs du succès de votre site et Salon e-Commerce Paris 2012 - The e-Commerce Academy les points bloquants
  • 20. Tests A/B & Tests multivariés Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 21. Cas Blume2000.de +6% de C.A Les internautes étaient plus intéressés par l'offre avec les chocolats (version B) malgré son prix plus élevé L'équipe a cherché à savoir si les internautes préféreraient associer des fleurs à un CD de chants de Noël (version A) ou choisir une offre légèrement plus chère, comprenant des fleurs et une boîte de chocolats (version B)… Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 22. Eyetracking Amélioration de la navigation par : Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 23. Les indicateurs de prédiction, augmentez vos visites qualifiées Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 24. Caffeine, Panda, Pinguin & Serp Structure Linking Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 25. Crawl VOLUMETRIE GESTION TAUX INDEX Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 26. Indexation 90% 1% Gestion du crawl Des pages crawlées sont cliquées SEO 85% Des visites proviennent de pages crawlées sous 15 jours* Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 27. Rétention : du crawl à l'indexation 50% Des contenus sont invisibles pour les moteurs* …dommage ! Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 28. Gérer le flux d’acquisition vers le panier Optimisation du parcours-client Trouver ce que l'on cherche • Provenance de l’internaute ! Savoir où nous sommes • Provenance de l’internaute ! Savoir quel est le contenu du site Savoir comment utiliser le site Avoir un bouton "Panic" Donner confiance dans le site Les facilitateurs d'achat Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 29. Comprendre en 5 min une baisse de CA 404 Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 30. Check-list d’optimisation 2013 Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 31. Prioriser le SEO pour 2013 1 seconde • Le temps de téléchargement ‘MAX’ d’une page 5e position • Le rang minimum de transformation et d’indexation persistante 80% • De la réussite d’un site est liée à l’état de crawl des pages 55% ‘Seulement’ • Du catalogue marchand est visible en permanence dans l’index de Google 175% • Des problématiques de SEO sont liées à la méconnaissance des algorithmes 80% • Des landing pages ne transforment pas correctement la provenance Salon e-Commerce Paris 2012 - The e-Commerce Academy
  • 32. Taux et causes d’abandons de panier en 2012 44% des abandons > Frais de livraison • Frais de livraison : gratuité, diversité, rapidité 41% des abandons > Interruption de l’achat • Persistance du panier 25% Prix / Spam & Crash • Positionnement, ethique e-marketing, audit technique 14% Tunnel d'Achat : complexité & coercition • Processus d’évolution par étapes • Aucune navigation ou arborescence • Guest Checkout 12% Formulaires : Trop d'infos tue l'info • Le minimum utile 7% Moyens de paiement • Diversité, tiers de confiance (Paypal, et cie), Paiement en plusieurs fois Salon e-Commerce Paris 2012 - The e-Commerce Academy Source : Invesp.com
  • 33. A tout de suite : Stand N57 Formation. Conseil. Audit. Le centre e-Commerce de référence. blog.academy-ecommerce.com www.academy-ecommerce.com contact@academy-ecommerce.com Twitter @ecommerce_acdmy Samuel Dubois : @sdubois_teca - samuel.dubois@ecommerce-academy.fr Richard Cohen : @richardcohenbiz – richard.cohen@ecommerce-academy.fr Salon e-Commerce Paris 2012 - The e-Commerce Academy

Notes de l'éditeur

  1. Bonjour, Merci de votre présence sur cette 7° édition du Bargento , merci de votre intérêt pour cette conférence.
  2. Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptés et appliqués par tous en 2013 L’architecture de l’information : comment lister vos contenus et leurs fonctionnalités grâce à la Méthode du tri de cartes : présentation et explications rapides Conception : Utilisation du Maquettage avec les outils de Zoning – Wireframes – Mock-Up – Prototype ==> présentation Tests utilisateurs : présentation et explications rapides Webanalytics : les KPI et les statistiques clés à vérifier Tests A/B & tests multivariés : présentation et explications rapides Eye tracking : présentation, explications , coûts
  3. Les conventions en Ergonomie : des règles de bon sens qui doivent être adoptés et appliqués par tous en 2013
  4. Bastien & Scapin : Christian Bastien & Dominique Scapin, chercheurs en ergonomie des IHM à l'INRIA ont procédé en 1997 à la synthèse de plus de 900 recommandations en 18 critères regroupés en 8 dimensions Leur étude a prouvé qu'une analyse ergonomique était plus efficace (plus de problèmes de conception détectés) lorsque cette liste de critères était utilisé plutôt qu'une évaluation libre ou une évaluation basée sur la partie 10 de la norme ISO 9241 18 critères : 1. Guidage : Incitation - Groupement/ Distinction entre Items - Feedback immédiat - Lisibilité 2. Charge de travail : Brieveté - Concision - Sections minimales 3. Contrôle explicite : Actions explicites - Contrôle utilisateur 4. Adaptabilité : Flexibilité - Prise en compte de l'expérience utilisateur 5. Gestion des erreurs : Protection contre les erreurs - Qualités des messages d'erreur - Correction des erreurs 6. Homogénéité / Cohérence 7. Signifiance des Codes et Dénominations 8. Compatibilité #1 Law Of Usability : Don't Make Me Think / Ne me Faites Pas Réfléchir #2 Law Of Usability : Don't Waste My Time / Ne me Faites Pas Perdre Mon Temps #3 Law Of Usability : Get Rid Of 50% Of The Words On Each Page, then get rid of half what's left / Débarrassez vous de 50% des mots de chacune de vos pages, puis retirez encore la moitié de ce qui reste Fact Of Life #1 : On ne lit pas les pages. On les "scan". Fact Of Life #2 : Nous n'optimisons pas nos choix. Nous faisons des choix "au mieux", quelque part entre satisfaisant et suffisant. ( satisficing ) Fact Of Life #3 : Nous ne lisons pas les manuels. On apprend la façon dont ça fonctionne sur le tas.
  5. Afin de bien identifier le contenu de votre site et d’en lister toutes les fontionnalités , il conviendra de mettre en place des organigrammes verticaux de contenu. L’un de ces organigrammes, dit « macro », devra représenter l’ensemble des contenus & fonctionnalités de votre site. Il est souhaitable en suite d’établir des organigrammes « micro » pour les principales fonctionnalités : Landing Page, Page Catégorie, Fiche Produit, Panier, etc
  6. Cette méthode simple et efficace fonctionne de la façon suivante : Inscrivez vos contenus envisagés sur des cartes de dimensions identiques. Laissez des cartes vierges (afin que le testé puisse rajouter du contenu). Laissez également un stylo à disposition pour que le testé renomme à volonté le contenu. Vous avez également la possibilité de laisser toutes les cartes vierges. Demandez au testé de rassembler les cartes en grande catégories par associations d’idées. Dernière étape : une fois les catégories bien définies, demandez lui de les relier entre-elles. Votre organigramme apparaitra « comme par magie ». Répétez ce test à l’envie, avec ou sans guide, avec ou sans contraintes.
  7. Voici un schéma exposant un flux d’interactions très basiques pour un e-consommateur. Les choses sont un peu plus complexes en fait….
  8. Afin d’optimiser le « parcours client », il convient de mettre à plat le « flux d’interactions » sous la forme d’organigrammes logiques. Partez du point d’entrée du visiteur (quelque soit ce point d’entrée et quique soit ce visiteur) et listez toutes les interactions possibles. Amusez-vous à établir toutes ses possibilités en raisonnant logiquement : « si il clique sur ça, il pourra accéder à ça. Sinon, il pourra faire ça ». Là encore, on peut l’établir au niveau macro et micro. Notez que pour un site disposant d’un nombre de fonctionnalités importantes, la complexité et la charge de travail peut demander une simplification du macro et de se concentrer sur les principales fonctions pour le micro. Notez également que les organigrammes logiques ne sont pas forcément verticaux (exemple : Paypal , process de check-out).
  9. Parmi les outils et techniques permettant d’optimiser l’ergonomie durant la phase de conception, on retrouve le maquettage avec : Le Zoning (sert à délimiter les principaux blocs de fonctionnalité) Le Wireframe (littéralement « fil de fer », il permet de rentrer dans le détail des fonctionnalités en question. A noter qu’il est encore souvent effectuer manuellement, alors que de très bon programmes existent aujourd’hui)
  10. Mockflow n’est que l’un des nombreux logiciels existant permettant d’obtenir un Wireframe professionnel et d’une fidélité déjà intéressante. A noter que ces logiciels peuvent être en application à télécharger ou en Saas .
  11. Comme l’on peut le constater ici, le Wireframe peut être d’une fidélité très avancée.
  12. Avant dernière étape d’un projet, le Mock -up (toujours en noir et blanc) permet d’obtenir un rendu extrêmement fidèle visuellement à ce que sera le produit final. Il est important de travailler en N&B afin d’éviter toutes les tergiversations liées aux problématiques couleurs (les goûts et les couleurs ne se discutant pas, comme l’on le sait bien, ou alors le plus tard possible pour ne pas perdre trop de temps durant la conception).
  13. Voici un récapitulatif des outils vus précédemment et de leur fidélité/coût. A noter que le prototype est moins couteux que le Mock -up, même si l’investissement et le temps passé peut être supérieur, car une partie du code est pratiquement toujours réutilisé pour le produit final.
  14. On rentre ici dans la partie « qualitative » de l’ergonomie. Nous allons chercher à « débusquer » des problèmes ergonomiques en mettant des utilisateurs face au site e-commerce qui nous intéresse (ces tests peuvent être faits également sur le prototype, et même sur Mock -up ou Wireframe , mais l’intérêt est moindre pour ces derniers). Pour se faire, il y a 2 sortes de tests : le test exploratoire qui met l’utilisateur face à la Landing Page, sans autorisation de cliquer, mais avec possibilité de scroller. Le but de ce test est de demander à l’utilisateur de « penser à voix haute » et de voir s’il a bien compris l’utilité du site. Quel est l’offre, quel est le positionnement ? Pourquoi ce site est mieux que le concurrent qui est à un clic de distance ? Tous ces éléments sont vérifiés à travers le flot de remarques de l’utilisateur. Gardez vous bien d’intervenir pour ne pas l’influencer. S’il vous pose des questions, dites lui que pour le bien du test vous répondrez à la fin à ses question (que vous n’oublierez pas de noter), mais que pour le moment le « but du jeu » est de le laisser tel qu’il serait en conditions réelles : livré à lui-même. Tests scénarisés : dans cette 2 ème phase, on va demander à l’utilisateur d’effectuer certaines actions sur le site. Le but de ce test est de vérifier l’utilisabilité du site ou d’une fonctionnalité bien précise de celui-ci. La complexité de ces actions est librement paramétrables par la personne guidant le test. Il est néanmoins souhaitable d’établir une progression logique dans la difficulté, qui prend en compte l’effet d’apprentissage. Dans les 2 cas, ces tests devront faire l’objet d’un accompagnement par un guide-fil. Ils devront être enregistrés tant pour la vidéo (affichage de l’écran) que l’audio (réactions de l’utilisateur). A noter qu’un enregistrement de l’utilisateur lui-même peut être un plus si vous le souhaitez (et s’il en donne l’autorisation écrite). Il est particulièrement pertinent que les équipes de développement et marketing observent le test soit en temps réel (à travers une vitre teintée ou en diffusion simultanée de l’écran de l’utilisateur dans une autre pièce). Ils pourront alors réagit entre eux librement, sans impact sur l’utilisateur, et échanger entre eux sur ce qu’ils observent « en live ». Notez que la même chose en différé (diffuser l’enregistrement de l’affichage écran) ne donne bizarrement pas un résultat aussi « vivant ». Enfin retenez 2 choses extrêmement importantes : - Les tests d’utilisabilité ne sont pas une option. Ils ne coûtent pratiquement rien, et peuvent rapporter très très gros. Best- Buy (géant américain de la distribution en ligne) en a fait les frais avec son fameux « bouton à 300 millions de $ » (si vous ne connaissez pas cette anecdote, je vous suggère de la rechercher sur Google) - Il vaut mieux en faire un peu tout au long du projet que beaucoup à la dernière minute. Exemple : Un test avec 8 utilisateurs à la fin du projet et qui trouve 4 problème ergonomiques, c’est certes mieux que rien du tout. Mais 3 tests avec 4 utilisateurs à 1 mois d’ interval tout au long du développement, ça fera environ 12 à 15 problèmes trouvés PARCE QUE d’autres problèmes ergonomiques sont fatalement cachés derrière les 1ers découvertes et que tant qu’ils ne sont pas corrigés, les utilisateurs ne les verront pas durant les tests…
  15. Lors des diffusions en simultanée aux équipes de développement et de marketing, vous serez souvent confrontés à ce genre de réaction. Il est presque « normal » pour un développeur de « penser » un site à travers son expérience, son feeling et sa vision personnelle. Néanmoins, il faudra toujours autant que faire se peut garder en tête que l’expérience utilisateur prévaut sur toute autre considération, et qu’il n’existe pas « d’utilisateur moyen », mais plutôt des « utilisateurs lambda » ce qui peut recouper à peu près tout et n’importe quoi. Jamais il ne faudra partir du principe que c’est à l’utilisateur de s’adapter à l’outil, mais que c’est bel et bien l’outil qui doit s’adapter à l’utilisateur. C’est ce qui s’appelle « penser orienté utilisateur ».
  16. Les webanalytics permettent essentiellement en ergonomie de repérer des problèmes. Une fois ces problèmes repérés, il va bien falloir émettre des hypothèses de solution. L’ennui, c’est que généralement les personnes concernées par un projet sont rarement d’accord entre-elles sur les solutions, ce qui est compréhensible vu que chacun les étudiera en fonction de son point de vue et donc de sa psyché propre à son domaine d’activité…
  17. Une fois les problèmes découverts, les solutions proposées doivent donc être départagées. Pour cela, il existe un outil qui s’appelle le « A/B testing  ». Les tests multivariés n’en sont qu’une variante un peu plus complexe. Nous sommes ici dans la partie « quantitative » de l’ergonomie. Cet outil consiste en un test de 2 versions différentes d’une page (ou d’un élément de cette page) et d’observer, après un laps de temps ou un nombre de visiteurs donné, le résultat en terme de taux de transformation (ou tout autre critère pertinent). La pratique habituelle dans le business tourne entre 2 et 3 semaines (hors saisonnalités impactantes sur le business). Le test multivarié propose X combinaisons possibles de différents éléments d’une même page.
  18. Voici le résutat d’un test A/B sur le site blume2000.de
  19. L’ eyetracking est un outil fort couteux. Non-indispensable mais particulièrement utile lorsqu’il s’agit de savoir si l’information que l’on souhaite passer à l’utilisateur lui arrive bien, et à quel moment elle lui arrive. L’avantage de l’ eyetracking comparé à, disons, le mousetracking , c’est que ce dernier résulte d’un traitement cognitif : le cerveau aura déjà « digérer » l’information perçue et aura demandé (ou non) à la main de faire bouger la souris. A travers les yeux, on a le récepteur primaire d’informations AVANT-MÊME que le cognitif ait eu l’occasion d’intervenir. Bien-sûr, cela se traduit en nanosecondes, mais dans les faits vous obtenez une information brute, tout à fait pertinente au regard des sujets qui nous préoccupent. Vous obtenez donc à gauche une carte de chaleur agrégée, indiquant où le regard de l’ utilisteur s’est porté et avec quelle intensitée . Si l’on applique un « négatif » sur cette image, on obtiendra une page toute noire, sauf sur les points de chaleur qui deviendront des « trous » par lesquels l’utilisateur a « vu » la page. Cette dernière technique est sûrement la plus visuellement parlante. A droite, on a le parcours chronologique de l’œil de l’utilisateur qui s’est balladé sur toute l’image. La taille du cercle indique l’intensité, le numéro l’ordre chronologique et il est un jeu d’ enfait de retracer le parcours visuel de l’utilisateur. Notez que beaucoup beaucoup d’autres informations statistiques sont disponibles au cours d’une telle séance (taux de clics, intensité du regard, délai entre chaque déplacement d’œil, moyenne, etc etc etc. Tout est mesurable et plus encore !), et que l’on peut tester tant des sites internet que des vidéos, des Mock -up, des Wireframe , etc…
  20. - Optimisation du parcours-client : cf. la diapo « flux d’interactions » - trouver ce que l'on cherche : Il faut que le site soit « utile » à l’utilisateur, qu’il comprenne tant son offre que son positionnement de façon intuitive. Et la raison pour laquelle il fait bien d’être là que plutôt chez la concurrence. N’oubliez pas que chaque offre et chaque cile ont leur spécificités. On ne vend pas sur chronodrive (achat fréquent, peu impliquant, pas cher) comme l'on va vendre sur Sarenza (achat annuel, emotionnel, image, prix conséquent), ou comme l'on va vendre sur GIVENCHY (achat rare, très émotionnel, prix très conséquent ). Il faut également respecter l es conventions avec notamment un moteur de recherche interne intuitif & efficace. - savoir où nous sommes : 25% seulement des visiteurs arrivent sur la Landing Page. Donc, pour prendre en compte ce phénomène : identité visuelle partout avec logo + baseline, le fil d'ariane doit être également présent partout. La navigation et ses menus doivent également prendre en compte ce détail. - avoir un bouton "Panic" : le clic sur le logo pour retourner à la Page d'accueil est là pour ça et l'utilisation intensive de la fonction "Page Précédente » impose une stricte analyse de la bonn e marche de ce bouton sur l’ENSEMBLE des pages du site (formulaires compris, et surtout même !) - savoir quel est le contenu du site : les grandes familles de produits, la hiérarchie du contenu doit êter claire : onglet avec catégories, menus de sous-catégories - savoir comment utiliser le reste : Il faut que le point d'entrée par où la navigation va débuter, ainsi que les différentes étapes et options qui vont se présenter, soient intuitifs et clairs. Personne ne va lire la FAQ, le plan du site ou le guide de 1ère visite . Et si quelqu’un le fait, c’est que vous avez mal fait votre boulot. - donner confiance dans le site : éléments de réassurance, personnification du e-commerçant, donner de la valeur ajoutée dans le rédactionnel, afficher votre "expertise" produits - les facilitateurs d'achat : les cadeaux, les codes réduction, les avis utilisateurs, frais de livraison offert, paiement en plusieurs fois…
  21. Taux de rebond du site Conversions dans le tunnel d'achat Taux d'ajout au panier (valeur et volume) Taux de transformation de la page panier Utilisabilité du moteur de recherche interne Engagement des visiteurs Taux d’erreurs 404
  22. - Frais de livraison : gratuité ou offerts à partir de XX€ (ne pas oublier d'ajouter une "milestone" dans le panier) - Persistance du panier : laisser la possibilité à l'acheteur de différer son achat (plutôt que le perdre) - Prix : La raison pour laquelle un consommateur va choisir de passer par le commerce électronique - Moyens de paiement : trop de sites ne proposent toujours pas un tiers de confiance (Paypal, et cie) ===> réassurance et spontanéité - Informations personnelles : attention à ne pas demander trop d'infos persos ===> dealbreaker - Tunnel d'Achat : un processus d'évolution dans le tunnel clairement indiqué. Pas de navigation/arborescence du site apparente durant le tunnel d'achat. Attention à respecter le "eyeflow". Bannir la multiplication des boutons et des sollicitations : 1 bouton = 1 étape. Pas de code de réduction en aval du processus d'achat. Proposer de la vente croisée ou options dans le tunnel d'achat. La sécurisation du processus d'achat est inconditionnelle.