SlideShare une entreprise Scribd logo
1  sur  71
Concevoir un site web
 performant, centré
   « utilisateur »
        Sept. 2012
        www.nrblog.fr/pepito
    thierry.picard@facebook.com




                                  1
Programme
Bénéfice d ’être méthodique
• Une conception performante
• Des modèles éprouvés
• Travaux pratiques


                               2
Concevoir un site web performant centré utilisateur

LE BÉNÉFICE D’ÊTRE MÉTHODIQUE
                                                      3
Cadrage de projet

Bien cadrer un projet c’est commencer
par bien cadrer son besoin.



                                    4
De qui parle-t-on ?
- Adresse(s) internet : exemple.com/fr,
  exemple.fr, fr.exemple.com, del.icio.us
- Marque(s) : protection, antériorité
- Charte(s) graphique(s) : charte graphique
  crossmedia, charte graphique web

                                              5
A qui parle-t-on ?
-   B2B
-   B2C
-   Com interne
-   Pays


                                  6
De quoi parle-t-on ?
-   Les savoir-faire
-   Les expertises
-   Les produits
-   L’entreprise


                                    7
Dans quel environnement parle-t-on ?
-   Concurrence
-   Ecosystème
-   Marché
-   Règlementations (cross canal : attention au
    canal de distribution physique)

                                                  8
Quelle réponse attend-on ?
-   Génération de trafic en point de vente
-   Vente
-   Notoriété
-   Prospection/ Connaissance client
-   CA publicitaire

                                             9
Comment en parle-t-on ?
- Les fonctions
- Les textes, les images, les vidéos, les
  animations
- L’expérience
- La mise en scène

                                            10
Comment prend-on la parole ?
- Les supports de l’information/ les canaux
- Les fréquences
- Les formes de prise de parole, le ton : charte
  éditoriale



                                                   11
Quand prend on la parole ?
                    Et avec quels moyens
- Agenda de l’entreprise
  (saisonnalité des produits, salons, etc.)
- Planning global
- Planning prestataire



                                              12
En résumé



Quel est le besoin.

                      13
Cadrage de projet

Bien cadrer un projet c’est bien le
formaliser.



                                      14
Le brief
             Pour                        Contre
• Créativité du prestataire   •   Trop de liberté
• Rapidement formalisé        •   Manque de précision
• Ne demande pas              •   Trop conceptuel
  d’expertise métier          •   Pas assez fonctionnel
  « internet »                •   Rarement technique
• Peu coûteux


                                                          15
Le cahier des charges
            Pour                        Contre
•   Précis                   • Plus long
•   Fonctionnel              • Plus coûteux
•   Technique                • Plus compliqué à organiser
•   contractuel
        Pas d’opposition le cahier des charges =
              brief + specs fonctionnelles
                                                        16
Méthode
1. Note de cadrage partagée entre les
   directions impliquées : stratégie, objectifs,
   moyens, etc.
2. Questionnaire exploratoire sur le besoin de
   chaque direction (accompagnement ?)
3. Note de synthèse/ itération
4. Spécifications fonctionnelles                   17
Les 4 erreurs à éviter…
- Ne pas impliquer les directions métiers/ les
  maitrises d’ouvrage
- Penser que n’importe qui peut faire un cahier des
  charges
- Demander au prestataire retenu de faire le cahier
   des charges (juge et parti)
- Penser qu’on peut tout mettre dans un cahier
  des charges
                                                 18
La consultation
- Une réunion de présentation du cahier des charges,
  une de questions-réponses et une de rendu
- Un interlocuteur « métier » dédié au projet pendant la
  phase d’étude du prestataire
- Une analyse « métier » du rendu : choix
  technologiques, budget, planning, etc.
- Une grille de notation avec des critères objectifs,
  bonus possible pour le subjectif
                                                      19
Le choix…
- Choisir le bon prestataire « tout en un »
- Opter pour plusieurs prestataires « métiers »
- Adopter une organisation « mixte » interne +
  ss-traitance
- Développement interne (sans doute le plus
  complexe)
                                                  20
En résumé


Optez pour un cahier des
        charges
      ROI garanti !
                       21
Programme
• Bénéfice d ’être méthodique
Une conception performante
• Des modèles éprouvés
• Travaux pratiques


                                22
Concevoir un site web performant centré utilisateur

UNE CONCEPTION PERFORMANTE
                                                      23
Le benchmark
Surfer et relever les bonnes pratiques :
-Des sites du même univers
-En particulier des sites concurrents
-Des sites « en vogue »
-Ouvrez vous sur le monde…

                                           24
Les enseignements
- Se forger des convictions en matière de
  bonnes pratiques
- Ouvrir des pistes créatives et fonctionnelles
- Eprouver la faisabilité des fonctions et du
  besoin

                                                  25
Conception orientée utilisateur
- Définition de personas (profils types)
- Schématisation de parcours clients répondant
  aux attentes des personas
- Les parcours clients intègrent l’écosystème
  digital (email, FB, Twitter, app mobile, etc.) et
  réel (distribution, implantation, gestion de
  stock, etc.)
                                                  26
Etude de cas

Refonte de
Co…rama.fr

                27
LILY, 34 ANS   THIBAUD, 27 ANS   MICHELLE, 51 ANS


Des comportements bien différents en
         matière de déco
1 cible, 3 comportements

             Lily                          Thibaud                        Michelle
             Débrouillarde                 Téméraire                      La No Idea,
             créative                      mais pas trop !                No risk


Ses attentes pour C.         Ses attentes pour C.            Ses attentes pour C.
Facilité leur recherche      Du conseil & de l’inspiration   Un accompagnement perso


L’usage media                L’usage media                   L’usage media
Internet                     Magazine & Point de Vente       Vendeur / Personal Shopper

L’insight pour changer       L’insight pour changer          L’insight pour changer
Changer ce n’est pas une     Je suis sûre de mes goûts       Changer ? Pour quoi faire ?
envie, c’est une             mais pour oser changer,         On sait ce que l’on a, on
opportunité ! Changer        j’ai besoin d’un petit coup     ne sait pas ce que l’on va
c’est craquer.               de pied.                        avoir !



                                                                       A suite
L’architecture de l’information
- Arborescence simple
- Sémantique adaptée
- Le cas particulier du catalogue de produit
  (associations de produits, plusieurs références pour
  un produit couleur/taille, etc.)
- Le cas des sites de contenu : les dossiers
- Le cas particulier des sites internationaux
                                                         33
Le zoning
- Paperboard
- Powerpoint




                           34
Le wireframe
-   Balsamiq
-   Axure
-   Iplotz
-   MockFlow
-   Etc.

                              35
Maquette et prototype
Plus rarement la phase de spécification peut
aller jusqu’à la réalisation d’une maquette html
ou celle d’un prototype pour la faisabilité
technologique « POC » (notamment pour des
panels)


                                               36
Pages à traiter
-   Page d’accueil
-   Pages de section
-   Pages articles/ pages produits
-   Plus largement tous les processus métiers :
    tunnel de conversion, Pages de formulaires

                                                  37
Etude de cas
- Parcours types C…
- C… tunnel de conversion ecommerce
- C… exemple d’application iPhone




                                      38
Les processus « métiers »
- Sites de contenu : monétisation d’audience,
  vente d’espace publicitaires, services de
  bookmark, gestion de compte utilisateurs, etc.
- Sites ecommerce : le tunnel de conversion, le
  merchandising, la logistique, le retour de
  marchandise, le SAV, le multicanal, etc.

                                              39
Une conception orientée
             référencement
- Front office : html, CSS, java-script, poids des
  pages, contenus alternatifs, etc.
- BO : URL rewriting, sitemap, title, meta
  description, etc.
- Interfaçage avec les réseaux sociaux


                                                     40
Un balisage méthodique du site
Pour permettre une mesure ultérieure de
l’efficacité définir les KPIs et en déduire les
données à extraire du site.
Notion de tunnel de transformation
Exemples de KPIs

                                                  41
42
43
L’interfaçage avec un SI
- Référentiel produit/ gestion de stock
- CRM
- GED
 Le cas de la reprise de donnée


                                          44
Notions d’architectures
               applicatives
-   Content Management System
-   Framework
-   CMS + Framework ecommerce
-   Libre ou licence
-   Notions de langage informatique
-   Hébergement et Haute disponibilité
-   Et le Cloud ? (SaaS/ PaaS/ IaaS)
                                         45
Une technologie ouverte
-Affiliation
-Agrégation
-Curation
-Interfaçage, Etc.
Notamment pour le multicanal
 (tablette/smartphone)
                                46
Une technologie évolutive
-   Marché volatile
-   Péremption rapide des Bests Practices
-   Conception Agile : apprendre en marchant
-   Adaptée à l’audience et au besoin (mises à
    jour fréquente, catalogue riche, etc.)

                                                 47
L’importance du recettage
- Définition des scenarii de test
- Cahier de recette
- Tests de charge




                                    48
La Tierce Maintenance Applicative
- Correction
- Evolution

 Organisation d’une roadmap


                                49
Programme
• Bénéfice d ’être méthodique
• Une conception performante
Des modèles éprouvés
• Travaux pratiques


                                50
Concevoir un site web performant centré utilisateur

DES MODÈLES ÉPROUVÉS
                                                      51
Ecommerce
 ubiquitair
     e?
  Le consommateur est
 partout il est ubiquitaire
Pour les PME l’opportunité de la « long tail »




                                                 Du best
                                                 seller au
                                                 produit de
                                                 niche…
Clefs de succès

1) La verticalisation de l’activité : se concentrer sur son
   métier, son savoir-faire, son expertise, etc.
2) Se recentrer sur sa/ses niche(s)
3) Mettre en ligne l’ensemble des contenus métiers
    • Contenus produits, guides, argumentaires, etc.
    • Tarifs
    • Animations des ventes
    • Médias associés au catalogue
    • Etc.
Cas d’école
http://www.vauban-collections.com/

Vauban Collections
1) Présence en ligne site ecommerce de 22 000 références
2) Présence en marque blanche sur chapitre.com
3) Utilisation d’ebay
4) 2 librairies anciennes sur Lille

Bernard Musa : « Sans internet nous ne serions plus là. Le résultat
  est criant, ce canal représente la 3° boutique qui est une réelle
  source de CA, en faisant tourner le stock, en touchant des
  clients nationaux et de nouvelles cibles,(…) en participant
  fortement à l’image et à la notoriété de l’enseigne. »
Crowd sourcing/commerce
Utiliser les internautes

S’appuyer sur les compétences et les ressources des internautes
   pour développer votre produit, votre marché, etc. en résumer
   votre activité

Les internautes peuvent être source :
1. De contenu (commentaires, critiques, images, guides, etc.)
   Cas Amazon
2. Création et sélection de l’offre produit
   Cas GMT Games
3. Enrichissement de la base de données « clients »
Crowd sourcing >> Amazon
Programme « pre-order 500 »

Crowd sourcing >> GMT
1.   vendre en direct : les chaînes ne référençaient plus les wargames sur papier, il fallait adresser
     directement le public des joueurs, cela permettait également de ne plus avoir à gérer les retours
     d’invendus. Cela permettait d’améliorer très sensiblement le taux de marge en récupérant la
     marge de l’intermédiaire distributeur

2.   impliquer les clients acheteurs dans le process de conception et de fabrication du produit, la
     proposition de GMT Games est la suivante : sur la base des propositions de l’éditeur, les clients
     potentiels réservent des produits non encore conçus et encore moins fabriqués. Le deal est alors
     le suivant :
     •     vous réservez le produit
     •     vous bénéficiez d’un prix préférentiel (-30% en moyenne) qui sera débité à l’expédition du
           produit
     •     vous pouvez changer d’avis jusqu’à l’expédition du produit
     •     L’éditeur ne lance la fabrication que sur la base de 500 réservations minimum.

Le programme P500 (pre-order 500) était né.
Pour résumer


1. Communauté :
   • Offre forte et fidélisante - 30%
   • Marché de niche

2. Collaboration :
   • Vote des clients
   • Information permanente sur l’avancement/livraison

3. Confiance : engagement moral réciproque


= CA X 4 en 3 ans
Enrichissement du CRM
- Création de comptes
- Enrichissement des profils
- Tracking
L’interactivité des génératrice d’information.


                                                 61
Content Commerce ?
Enrichir l’expérience par le contenu

1.   Produire du contenu sur le/les produits (exemple : blog(s))
2.   Le contenu génère du trafic
3.   Les internautes s’approprient le contenu et le commente
4.   Le contenu fait vendre

Le contenu, « l’éditorialisation » de la vente EST un vecteur de
   vente (ex: prescription).
Cas saveur-biere.com BM en 3 étapes :
1. Blog sur la bière pour le référencement naturel et l’audience
2. Lancement du site ecommerce
3. Lancement du portail sur la bière (diversification du CA)
Content Commerce >> SB
    Etape 1 : Création d’un blog

 Objectifs :
 1. Trafic qualifié
 2. Bon SEO
Etape 2 : Lancement du site ecommerce


Objectifs :
1. Transfo.
2. CA
3. Fidélisation
Etape 3 : Lancement d’un portail


Objectifs :
1. Trafic
   qualifié
2. Renfort SEO
3. Partenariats
   marque/
   mag
Social Commerce ?
Utilisation des réseaux sociaux pour vendre

Les réseaux sociaux favorisent :
1. Le développement de la base prospect/client
2. La création de notoriété
3. L’implication des prospects/clients en devenant acteur de la
    marque et de son développement (commentaires, incarnation,
    prescription, etc.)
4. CA en « longue traîne »

Cela marche pour tout type d’activité, cas Bodybuilding.com avec
    pour résultat :
1.   120 000 membres actifs, 30 000 blogs, 800 000 inscrits
2.   Taux de conversion 6 à 8 fois supérieur au marché
3.   Plus de 150 Millions de dollars de CA en 2011
2 entrées :
1. Site de websocial
2. Site de vente
Interfaces riches
- html5 flash ajax
- Réalité augmentée
- Vidéo interactive ou parcours scénarisés pour
  Ikea
- Personnalisation
- etc.
                                              70
Programme
• Bénéfice d ’être méthodique
• Une conception performante
• Des modèles éprouvés
Travaux pratiques


                                71

Contenu connexe

Tendances

Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
walouziz
 
Les polypodes bd
Les polypodes bdLes polypodes bd
Les polypodes bd
Chumroo
 

Tendances (19)

Modèle cahier des charges site web
Modèle cahier des charges site webModèle cahier des charges site web
Modèle cahier des charges site web
 
Atelier comment choisir et déployer un erp - CCI Bordeaux et Prodware - 07 ...
Atelier   comment choisir et déployer un erp - CCI Bordeaux et Prodware - 07 ...Atelier   comment choisir et déployer un erp - CCI Bordeaux et Prodware - 07 ...
Atelier comment choisir et déployer un erp - CCI Bordeaux et Prodware - 07 ...
 
Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !Cahier des charges modèle gratuit - préparez votre projet web facilement !
Cahier des charges modèle gratuit - préparez votre projet web facilement !
 
Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?Quelle solution technique pour un projet web ?
Quelle solution technique pour un projet web ?
 
Plan cahier-des-charges
Plan cahier-des-chargesPlan cahier-des-charges
Plan cahier-des-charges
 
Rédaction d'un cahier des charges web
Rédaction d'un cahier des charges webRédaction d'un cahier des charges web
Rédaction d'un cahier des charges web
 
Comment bien rédiger le cahier des charges pour construire votre site interne...
Comment bien rédiger le cahier des chargespour construire votre site interne...Comment bien rédiger le cahier des chargespour construire votre site interne...
Comment bien rédiger le cahier des charges pour construire votre site interne...
 
Comment rédiger un cahier des charges de site web
Comment rédiger un cahier des charges de site webComment rédiger un cahier des charges de site web
Comment rédiger un cahier des charges de site web
 
Realiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-webRealiser un-site-internet-chef-de-projet-web
Realiser un-site-internet-chef-de-projet-web
 
Les polypodes bd
Les polypodes bdLes polypodes bd
Les polypodes bd
 
L'intervention de Damien Melich
L'intervention de Damien MelichL'intervention de Damien Melich
L'intervention de Damien Melich
 
Rédiger un bon cahier des charge pour développer son site Web, conférence Avi...
Rédiger un bon cahier des charge pour développer son site Web, conférence Avi...Rédiger un bon cahier des charge pour développer son site Web, conférence Avi...
Rédiger un bon cahier des charge pour développer son site Web, conférence Avi...
 
Cci Bordeaux atelier projet site web cahier des charges 18/09/2014
Cci Bordeaux atelier projet site web cahier des charges 18/09/2014Cci Bordeaux atelier projet site web cahier des charges 18/09/2014
Cci Bordeaux atelier projet site web cahier des charges 18/09/2014
 
Cahier de charges Site web DRUPAL
Cahier de charges Site web DRUPALCahier de charges Site web DRUPAL
Cahier de charges Site web DRUPAL
 
Cahier des charges design
Cahier des charges designCahier des charges design
Cahier des charges design
 
2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic2011 06 30 cahier des charges site internet by competitic
2011 06 30 cahier des charges site internet by competitic
 
3 Outils et Méthodes pour faire le bon choix de votre solution Ecommerce
3 Outils et Méthodes pour faire le bon choix de votre solution Ecommerce3 Outils et Méthodes pour faire le bon choix de votre solution Ecommerce
3 Outils et Méthodes pour faire le bon choix de votre solution Ecommerce
 
Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?Comment optimiser la Création ou la refonte de son site internet ?
Comment optimiser la Création ou la refonte de son site internet ?
 
Enjeux et tendances du numérique pour les PME - 7 juin 2016
Enjeux et tendances du numérique pour les PME - 7 juin 2016Enjeux et tendances du numérique pour les PME - 7 juin 2016
Enjeux et tendances du numérique pour les PME - 7 juin 2016
 

En vedette

Desarrollo Curricular julio 2013
Desarrollo Curricular julio 2013Desarrollo Curricular julio 2013
Desarrollo Curricular julio 2013
silmar2011
 
Lascompetenciastextuales
LascompetenciastextualesLascompetenciastextuales
Lascompetenciastextuales
Javier Ninaja
 
Code du-tavail-2008--nouveau--fec-juill-2008
Code du-tavail-2008--nouveau--fec-juill-2008Code du-tavail-2008--nouveau--fec-juill-2008
Code du-tavail-2008--nouveau--fec-juill-2008
Simon Bozic
 
Boletín febrero 2012
Boletín febrero 2012Boletín febrero 2012
Boletín febrero 2012
Yovani Gerena
 
Qzedia: la Plateforme Web Mondialement Localisée
Qzedia: la Plateforme Web Mondialement LocaliséeQzedia: la Plateforme Web Mondialement Localisée
Qzedia: la Plateforme Web Mondialement Localisée
Qzedia
 
Banco común de conocimiento
Banco común de conocimientoBanco común de conocimiento
Banco común de conocimiento
Yusra Abderrazak
 
Principio lúdico y principio de socialización rica
Principio lúdico y principio de socialización ricaPrincipio lúdico y principio de socialización rica
Principio lúdico y principio de socialización rica
Yusra Abderrazak
 
Livret de mes_droits
Livret de mes_droitsLivret de mes_droits
Livret de mes_droits
tamaloukte
 

En vedette (20)

éTude de cas site web 2011 - 1
éTude de cas site web   2011 - 1éTude de cas site web   2011 - 1
éTude de cas site web 2011 - 1
 
Etude de faisabilité et analyse de l'existant
Etude de faisabilité et analyse de l'existantEtude de faisabilité et analyse de l'existant
Etude de faisabilité et analyse de l'existant
 
SDTAN Jura
SDTAN JuraSDTAN Jura
SDTAN Jura
 
Anuncios sorprendentes
Anuncios sorprendentesAnuncios sorprendentes
Anuncios sorprendentes
 
Desarrollo Curricular julio 2013
Desarrollo Curricular julio 2013Desarrollo Curricular julio 2013
Desarrollo Curricular julio 2013
 
Presentation ujde 2015
Presentation ujde 2015Presentation ujde 2015
Presentation ujde 2015
 
Les années 60
Les années 60Les années 60
Les années 60
 
Lascompetenciastextuales
LascompetenciastextualesLascompetenciastextuales
Lascompetenciastextuales
 
Code du-tavail-2008--nouveau--fec-juill-2008
Code du-tavail-2008--nouveau--fec-juill-2008Code du-tavail-2008--nouveau--fec-juill-2008
Code du-tavail-2008--nouveau--fec-juill-2008
 
eBooks and Web Standards
eBooks and Web StandardseBooks and Web Standards
eBooks and Web Standards
 
Boletín febrero 2012
Boletín febrero 2012Boletín febrero 2012
Boletín febrero 2012
 
Qzedia: la Plateforme Web Mondialement Localisée
Qzedia: la Plateforme Web Mondialement LocaliséeQzedia: la Plateforme Web Mondialement Localisée
Qzedia: la Plateforme Web Mondialement Localisée
 
Banco común de conocimiento
Banco común de conocimientoBanco común de conocimiento
Banco común de conocimiento
 
Discipulado General 1
Discipulado General 1Discipulado General 1
Discipulado General 1
 
Principio lúdico y principio de socialización rica
Principio lúdico y principio de socialización ricaPrincipio lúdico y principio de socialización rica
Principio lúdico y principio de socialización rica
 
مقاولة
مقاولةمقاولة
مقاولة
 
Dr Pierre Dupont
Dr Pierre DupontDr Pierre Dupont
Dr Pierre Dupont
 
Mission d’évaluation et d’expertise du programme Pratic
Mission d’évaluation et d’expertise du programme PraticMission d’évaluation et d’expertise du programme Pratic
Mission d’évaluation et d’expertise du programme Pratic
 
Livret de mes_droits
Livret de mes_droitsLivret de mes_droits
Livret de mes_droits
 
Resultados investigación My Happy Cloud
Resultados investigación My Happy CloudResultados investigación My Happy Cloud
Resultados investigación My Happy Cloud
 

Similaire à Comment concevoir un site web performant

Entrepreneuriat : entre philosophie et technologie
Entrepreneuriat : entre philosophie et technologieEntrepreneuriat : entre philosophie et technologie
Entrepreneuriat : entre philosophie et technologie
Etilux
 
Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]
guest9879ad
 

Similaire à Comment concevoir un site web performant (20)

10 conseils pour ne pas rater son projet web
10 conseils pour ne pas rater son projet web10 conseils pour ne pas rater son projet web
10 conseils pour ne pas rater son projet web
 
Entrepreneuriat : entre philosophie et technologie
Entrepreneuriat : entre philosophie et technologieEntrepreneuriat : entre philosophie et technologie
Entrepreneuriat : entre philosophie et technologie
 
Intranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisationIntranet : définition, outils, usage, organisation
Intranet : définition, outils, usage, organisation
 
Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?Site internet : Comment créer un contenu qui rendra votre site efficace ?
Site internet : Comment créer un contenu qui rendra votre site efficace ?
 
Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)Formation : Réaliser et promouvoir un site internet (V2)
Formation : Réaliser et promouvoir un site internet (V2)
 
Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3Formation : "Concevoir et promouvoir votre site internet" V3
Formation : "Concevoir et promouvoir votre site internet" V3
 
Offre studio digital juillet 2017
Offre studio digital juillet 2017Offre studio digital juillet 2017
Offre studio digital juillet 2017
 
Eim360 Gestion de l'information & collaboratif
Eim360 Gestion de l'information & collaboratif Eim360 Gestion de l'information & collaboratif
Eim360 Gestion de l'information & collaboratif
 
Projet et strategie
Projet et strategieProjet et strategie
Projet et strategie
 
03 mdn2018 - table ronde prospection digitale - ugo malavar
03 mdn2018 - table ronde prospection digitale - ugo malavar03 mdn2018 - table ronde prospection digitale - ugo malavar
03 mdn2018 - table ronde prospection digitale - ugo malavar
 
La gestion de projet informatique 2015
La gestion de projet informatique 2015La gestion de projet informatique 2015
La gestion de projet informatique 2015
 
Jalios - De l'intranet de communication à l'intranet collaboratif
Jalios - De l'intranet de communication à l'intranet collaboratifJalios - De l'intranet de communication à l'intranet collaboratif
Jalios - De l'intranet de communication à l'intranet collaboratif
 
Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]Dossier Produit Knowledge Manager[1]
Dossier Produit Knowledge Manager[1]
 
Lesclsdevotrestratgieebusinesslinternational 131209074509-phpapp02
Lesclsdevotrestratgieebusinesslinternational 131209074509-phpapp02Lesclsdevotrestratgieebusinesslinternational 131209074509-phpapp02
Lesclsdevotrestratgieebusinesslinternational 131209074509-phpapp02
 
Atelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site WebAtelier Info Tonic : Les règles d’or pour créer son site Web
Atelier Info Tonic : Les règles d’or pour créer son site Web
 
Doxa inter2019-le e-marketing performant
Doxa inter2019-le e-marketing performantDoxa inter2019-le e-marketing performant
Doxa inter2019-le e-marketing performant
 
ATELIER 6 - site web efficace
ATELIER 6 - site web efficaceATELIER 6 - site web efficace
ATELIER 6 - site web efficace
 
Formation : Réaliser et promouvoir un site internet (V1)
Formation : Réaliser et promouvoir un site internet (V1)Formation : Réaliser et promouvoir un site internet (V1)
Formation : Réaliser et promouvoir un site internet (V1)
 
Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !Le marketing digital pour les nuls et les fauchés !
Le marketing digital pour les nuls et les fauchés !
 
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganiséeE2 - Vision : un sacré attracteur pour une équipe autoorganisée
E2 - Vision : un sacré attracteur pour une équipe autoorganisée
 

Comment concevoir un site web performant

  • 1. Concevoir un site web performant, centré « utilisateur » Sept. 2012 www.nrblog.fr/pepito thierry.picard@facebook.com 1
  • 2. Programme Bénéfice d ’être méthodique • Une conception performante • Des modèles éprouvés • Travaux pratiques 2
  • 3. Concevoir un site web performant centré utilisateur LE BÉNÉFICE D’ÊTRE MÉTHODIQUE 3
  • 4. Cadrage de projet Bien cadrer un projet c’est commencer par bien cadrer son besoin. 4
  • 5. De qui parle-t-on ? - Adresse(s) internet : exemple.com/fr, exemple.fr, fr.exemple.com, del.icio.us - Marque(s) : protection, antériorité - Charte(s) graphique(s) : charte graphique crossmedia, charte graphique web 5
  • 6. A qui parle-t-on ? - B2B - B2C - Com interne - Pays 6
  • 7. De quoi parle-t-on ? - Les savoir-faire - Les expertises - Les produits - L’entreprise 7
  • 8. Dans quel environnement parle-t-on ? - Concurrence - Ecosystème - Marché - Règlementations (cross canal : attention au canal de distribution physique) 8
  • 9. Quelle réponse attend-on ? - Génération de trafic en point de vente - Vente - Notoriété - Prospection/ Connaissance client - CA publicitaire 9
  • 10. Comment en parle-t-on ? - Les fonctions - Les textes, les images, les vidéos, les animations - L’expérience - La mise en scène 10
  • 11. Comment prend-on la parole ? - Les supports de l’information/ les canaux - Les fréquences - Les formes de prise de parole, le ton : charte éditoriale 11
  • 12. Quand prend on la parole ? Et avec quels moyens - Agenda de l’entreprise (saisonnalité des produits, salons, etc.) - Planning global - Planning prestataire 12
  • 13. En résumé Quel est le besoin. 13
  • 14. Cadrage de projet Bien cadrer un projet c’est bien le formaliser. 14
  • 15. Le brief Pour Contre • Créativité du prestataire • Trop de liberté • Rapidement formalisé • Manque de précision • Ne demande pas • Trop conceptuel d’expertise métier • Pas assez fonctionnel « internet » • Rarement technique • Peu coûteux 15
  • 16. Le cahier des charges Pour Contre • Précis • Plus long • Fonctionnel • Plus coûteux • Technique • Plus compliqué à organiser • contractuel Pas d’opposition le cahier des charges = brief + specs fonctionnelles 16
  • 17. Méthode 1. Note de cadrage partagée entre les directions impliquées : stratégie, objectifs, moyens, etc. 2. Questionnaire exploratoire sur le besoin de chaque direction (accompagnement ?) 3. Note de synthèse/ itération 4. Spécifications fonctionnelles 17
  • 18. Les 4 erreurs à éviter… - Ne pas impliquer les directions métiers/ les maitrises d’ouvrage - Penser que n’importe qui peut faire un cahier des charges - Demander au prestataire retenu de faire le cahier des charges (juge et parti) - Penser qu’on peut tout mettre dans un cahier des charges 18
  • 19. La consultation - Une réunion de présentation du cahier des charges, une de questions-réponses et une de rendu - Un interlocuteur « métier » dédié au projet pendant la phase d’étude du prestataire - Une analyse « métier » du rendu : choix technologiques, budget, planning, etc. - Une grille de notation avec des critères objectifs, bonus possible pour le subjectif 19
  • 20. Le choix… - Choisir le bon prestataire « tout en un » - Opter pour plusieurs prestataires « métiers » - Adopter une organisation « mixte » interne + ss-traitance - Développement interne (sans doute le plus complexe) 20
  • 21. En résumé Optez pour un cahier des charges ROI garanti ! 21
  • 22. Programme • Bénéfice d ’être méthodique Une conception performante • Des modèles éprouvés • Travaux pratiques 22
  • 23. Concevoir un site web performant centré utilisateur UNE CONCEPTION PERFORMANTE 23
  • 24. Le benchmark Surfer et relever les bonnes pratiques : -Des sites du même univers -En particulier des sites concurrents -Des sites « en vogue » -Ouvrez vous sur le monde… 24
  • 25. Les enseignements - Se forger des convictions en matière de bonnes pratiques - Ouvrir des pistes créatives et fonctionnelles - Eprouver la faisabilité des fonctions et du besoin 25
  • 26. Conception orientée utilisateur - Définition de personas (profils types) - Schématisation de parcours clients répondant aux attentes des personas - Les parcours clients intègrent l’écosystème digital (email, FB, Twitter, app mobile, etc.) et réel (distribution, implantation, gestion de stock, etc.) 26
  • 27. Etude de cas Refonte de Co…rama.fr 27
  • 28. LILY, 34 ANS THIBAUD, 27 ANS MICHELLE, 51 ANS Des comportements bien différents en matière de déco
  • 29.
  • 30.
  • 31.
  • 32. 1 cible, 3 comportements Lily Thibaud Michelle Débrouillarde Téméraire La No Idea, créative mais pas trop ! No risk Ses attentes pour C. Ses attentes pour C. Ses attentes pour C. Facilité leur recherche Du conseil & de l’inspiration Un accompagnement perso L’usage media L’usage media L’usage media Internet Magazine & Point de Vente Vendeur / Personal Shopper L’insight pour changer L’insight pour changer L’insight pour changer Changer ce n’est pas une Je suis sûre de mes goûts Changer ? Pour quoi faire ? envie, c’est une mais pour oser changer, On sait ce que l’on a, on opportunité ! Changer j’ai besoin d’un petit coup ne sait pas ce que l’on va c’est craquer. de pied. avoir ! A suite
  • 33. L’architecture de l’information - Arborescence simple - Sémantique adaptée - Le cas particulier du catalogue de produit (associations de produits, plusieurs références pour un produit couleur/taille, etc.) - Le cas des sites de contenu : les dossiers - Le cas particulier des sites internationaux 33
  • 34. Le zoning - Paperboard - Powerpoint 34
  • 35. Le wireframe - Balsamiq - Axure - Iplotz - MockFlow - Etc. 35
  • 36. Maquette et prototype Plus rarement la phase de spécification peut aller jusqu’à la réalisation d’une maquette html ou celle d’un prototype pour la faisabilité technologique « POC » (notamment pour des panels) 36
  • 37. Pages à traiter - Page d’accueil - Pages de section - Pages articles/ pages produits - Plus largement tous les processus métiers : tunnel de conversion, Pages de formulaires 37
  • 38. Etude de cas - Parcours types C… - C… tunnel de conversion ecommerce - C… exemple d’application iPhone 38
  • 39. Les processus « métiers » - Sites de contenu : monétisation d’audience, vente d’espace publicitaires, services de bookmark, gestion de compte utilisateurs, etc. - Sites ecommerce : le tunnel de conversion, le merchandising, la logistique, le retour de marchandise, le SAV, le multicanal, etc. 39
  • 40. Une conception orientée référencement - Front office : html, CSS, java-script, poids des pages, contenus alternatifs, etc. - BO : URL rewriting, sitemap, title, meta description, etc. - Interfaçage avec les réseaux sociaux 40
  • 41. Un balisage méthodique du site Pour permettre une mesure ultérieure de l’efficacité définir les KPIs et en déduire les données à extraire du site. Notion de tunnel de transformation Exemples de KPIs 41
  • 42. 42
  • 43. 43
  • 44. L’interfaçage avec un SI - Référentiel produit/ gestion de stock - CRM - GED  Le cas de la reprise de donnée 44
  • 45. Notions d’architectures applicatives - Content Management System - Framework - CMS + Framework ecommerce - Libre ou licence - Notions de langage informatique - Hébergement et Haute disponibilité - Et le Cloud ? (SaaS/ PaaS/ IaaS) 45
  • 46. Une technologie ouverte -Affiliation -Agrégation -Curation -Interfaçage, Etc. Notamment pour le multicanal (tablette/smartphone) 46
  • 47. Une technologie évolutive - Marché volatile - Péremption rapide des Bests Practices - Conception Agile : apprendre en marchant - Adaptée à l’audience et au besoin (mises à jour fréquente, catalogue riche, etc.) 47
  • 48. L’importance du recettage - Définition des scenarii de test - Cahier de recette - Tests de charge 48
  • 49. La Tierce Maintenance Applicative - Correction - Evolution  Organisation d’une roadmap 49
  • 50. Programme • Bénéfice d ’être méthodique • Une conception performante Des modèles éprouvés • Travaux pratiques 50
  • 51. Concevoir un site web performant centré utilisateur DES MODÈLES ÉPROUVÉS 51
  • 52. Ecommerce ubiquitair e? Le consommateur est partout il est ubiquitaire
  • 53. Pour les PME l’opportunité de la « long tail » Du best seller au produit de niche…
  • 54. Clefs de succès 1) La verticalisation de l’activité : se concentrer sur son métier, son savoir-faire, son expertise, etc. 2) Se recentrer sur sa/ses niche(s) 3) Mettre en ligne l’ensemble des contenus métiers • Contenus produits, guides, argumentaires, etc. • Tarifs • Animations des ventes • Médias associés au catalogue • Etc.
  • 55. Cas d’école http://www.vauban-collections.com/ Vauban Collections 1) Présence en ligne site ecommerce de 22 000 références 2) Présence en marque blanche sur chapitre.com 3) Utilisation d’ebay 4) 2 librairies anciennes sur Lille Bernard Musa : « Sans internet nous ne serions plus là. Le résultat est criant, ce canal représente la 3° boutique qui est une réelle source de CA, en faisant tourner le stock, en touchant des clients nationaux et de nouvelles cibles,(…) en participant fortement à l’image et à la notoriété de l’enseigne. »
  • 56. Crowd sourcing/commerce Utiliser les internautes S’appuyer sur les compétences et les ressources des internautes pour développer votre produit, votre marché, etc. en résumer votre activité Les internautes peuvent être source : 1. De contenu (commentaires, critiques, images, guides, etc.) Cas Amazon 2. Création et sélection de l’offre produit Cas GMT Games 3. Enrichissement de la base de données « clients »
  • 58. Programme « pre-order 500 » Crowd sourcing >> GMT 1. vendre en direct : les chaînes ne référençaient plus les wargames sur papier, il fallait adresser directement le public des joueurs, cela permettait également de ne plus avoir à gérer les retours d’invendus. Cela permettait d’améliorer très sensiblement le taux de marge en récupérant la marge de l’intermédiaire distributeur 2. impliquer les clients acheteurs dans le process de conception et de fabrication du produit, la proposition de GMT Games est la suivante : sur la base des propositions de l’éditeur, les clients potentiels réservent des produits non encore conçus et encore moins fabriqués. Le deal est alors le suivant : • vous réservez le produit • vous bénéficiez d’un prix préférentiel (-30% en moyenne) qui sera débité à l’expédition du produit • vous pouvez changer d’avis jusqu’à l’expédition du produit • L’éditeur ne lance la fabrication que sur la base de 500 réservations minimum. Le programme P500 (pre-order 500) était né.
  • 59.
  • 60. Pour résumer 1. Communauté : • Offre forte et fidélisante - 30% • Marché de niche 2. Collaboration : • Vote des clients • Information permanente sur l’avancement/livraison 3. Confiance : engagement moral réciproque = CA X 4 en 3 ans
  • 61. Enrichissement du CRM - Création de comptes - Enrichissement des profils - Tracking L’interactivité des génératrice d’information. 61
  • 62. Content Commerce ? Enrichir l’expérience par le contenu 1. Produire du contenu sur le/les produits (exemple : blog(s)) 2. Le contenu génère du trafic 3. Les internautes s’approprient le contenu et le commente 4. Le contenu fait vendre Le contenu, « l’éditorialisation » de la vente EST un vecteur de vente (ex: prescription). Cas saveur-biere.com BM en 3 étapes : 1. Blog sur la bière pour le référencement naturel et l’audience 2. Lancement du site ecommerce 3. Lancement du portail sur la bière (diversification du CA)
  • 63. Content Commerce >> SB Etape 1 : Création d’un blog Objectifs : 1. Trafic qualifié 2. Bon SEO
  • 64. Etape 2 : Lancement du site ecommerce Objectifs : 1. Transfo. 2. CA 3. Fidélisation
  • 65. Etape 3 : Lancement d’un portail Objectifs : 1. Trafic qualifié 2. Renfort SEO 3. Partenariats marque/ mag
  • 66. Social Commerce ? Utilisation des réseaux sociaux pour vendre Les réseaux sociaux favorisent : 1. Le développement de la base prospect/client 2. La création de notoriété 3. L’implication des prospects/clients en devenant acteur de la marque et de son développement (commentaires, incarnation, prescription, etc.) 4. CA en « longue traîne » Cela marche pour tout type d’activité, cas Bodybuilding.com avec pour résultat : 1. 120 000 membres actifs, 30 000 blogs, 800 000 inscrits 2. Taux de conversion 6 à 8 fois supérieur au marché 3. Plus de 150 Millions de dollars de CA en 2011
  • 67. 2 entrées : 1. Site de websocial 2. Site de vente
  • 68.
  • 69.
  • 70. Interfaces riches - html5 flash ajax - Réalité augmentée - Vidéo interactive ou parcours scénarisés pour Ikea - Personnalisation - etc. 70
  • 71. Programme • Bénéfice d ’être méthodique • Une conception performante • Des modèles éprouvés Travaux pratiques 71