Concevoir un site web performant, centré   « utilisateur »        Sept. 2012        www.nrblog.fr/pepito    thierry.picard...
ProgrammeBénéfice d ’être méthodique• Une conception performante• Des modèles éprouvés• Travaux pratiques                ...
Concevoir un site web performant centré utilisateurLE BÉNÉFICE D’ÊTRE MÉTHODIQUE                                          ...
Cadrage de projetBien cadrer un projet c’est commencerpar 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) : protectio...
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                                ...
Dans quel environnement parle-t-on ?-   Concurrence-   Ecosystème-   Marché-   Règlementations (cross canal : attention au...
Quelle réponse attend-on ?-   Génération de trafic en point de vente-   Vente-   Notoriété-   Prospection/ Connaissance cl...
Comment en parle-t-on ?- Les fonctions- Les textes, les images, les vidéos, les  animations- L’expérience- La mise en scèn...
Comment prend-on la parole ?- Les supports de l’information/ les canaux- Les fréquences- Les formes de prise de parole, le...
Quand prend on la parole ?                    Et avec quels moyens- Agenda de l’entreprise  (saisonnalité des produits, sa...
En résuméQuel est le besoin.                      13
Cadrage de projetBien cadrer un projet c’est bien leformaliser.                                      14
Le brief             Pour                        Contre• Créativité du prestataire   •   Trop de liberté• Rapidement forma...
Le cahier des charges            Pour                        Contre•   Précis                   • Plus long•   Fonctionnel...
Méthode1. Note de cadrage partagée entre les   directions impliquées : stratégie, objectifs,   moyens, etc.2. Questionnair...
Les 4 erreurs à éviter…- Ne pas impliquer les directions métiers/ les  maitrises d’ouvrage- Penser que n’importe qui peut ...
La consultation- Une réunion de présentation du cahier des charges,  une de questions-réponses et une de rendu- Un interlo...
Le choix…- Choisir le bon prestataire « tout en un »- Opter pour plusieurs prestataires « métiers »- Adopter une organisat...
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                ...
Concevoir un site web performant centré utilisateurUNE CONCEPTION PERFORMANTE                                             ...
Le benchmarkSurfer et relever les bonnes pratiques :-Des sites du même univers-En particulier des sites concurrents-Des si...
Les enseignements- Se forger des convictions en matière de  bonnes pratiques- Ouvrir des pistes créatives et fonctionnelle...
Conception orientée utilisateur- Définition de personas (profils types)- Schématisation de parcours clients répondant  aux...
Etude de casRefonte deCo…rama.fr                27
LILY, 34 ANS   THIBAUD, 27 ANS   MICHELLE, 51 ANSDes comportements bien différents en         matière de déco
1 cible, 3 comportements             Lily                          Thibaud                        Michelle             Déb...
L’architecture de l’information- Arborescence simple- Sémantique adaptée- Le cas particulier du catalogue de produit  (ass...
Le zoning- Paperboard- Powerpoint                           34
Le wireframe-   Balsamiq-   Axure-   Iplotz-   MockFlow-   Etc.                              35
Maquette et prototypePlus rarement la phase de spécification peutaller jusqu’à la réalisation d’une maquette htmlou celle ...
Pages à traiter-   Page d’accueil-   Pages de section-   Pages articles/ pages produits-   Plus largement tous les process...
Etude de cas- Parcours types C…- C… tunnel de conversion ecommerce- C… exemple d’application iPhone                       ...
Les processus « métiers »- Sites de contenu : monétisation d’audience,  vente d’espace publicitaires, services de  bookmar...
Une conception orientée             référencement- Front office : html, CSS, java-script, poids des  pages, contenus alter...
Un balisage méthodique du sitePour permettre une mesure ultérieure del’efficacité définir les KPIs et en déduire lesdonnée...
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                 ...
Notions d’architectures               applicatives-   Content Management System-   Framework-   CMS + Framework ecommerce-...
Une technologie ouverte-Affiliation-Agrégation-Curation-Interfaçage, Etc.Notamment pour le multicanal (tablette/smartphone...
Une technologie évolutive-   Marché volatile-   Péremption rapide des Bests Practices-   Conception Agile : apprendre en m...
L’importance du recettage- Définition des scenarii de test- Cahier de recette- Tests de charge                            ...
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                ...
Concevoir un site web performant centré utilisateurDES MODÈLES ÉPROUVÉS                                                   ...
Ecommerce ubiquitair     e?  Le consommateur est partout il est ubiquitaire
Pour les PME l’opportunité de la « long tail »                                                 Du best                    ...
Clefs de succès1) La verticalisation de l’activité : se concentrer sur son   métier, son savoir-faire, son expertise, etc....
Cas d’écolehttp://www.vauban-collections.com/Vauban Collections1) Présence en ligne site ecommerce de 22 000 références2) ...
Crowd sourcing/commerceUtiliser les internautesS’appuyer sur les compétences et les ressources des internautes   pour déve...
Crowd sourcing >> Amazon
Programme « pre-order 500 »Crowd sourcing >> GMT1.   vendre en direct : les chaînes ne référençaient plus les wargames sur...
Pour résumer1. Communauté :   • Offre forte et fidélisante - 30%   • Marché de niche2. Collaboration :   • Vote des client...
Enrichissement du CRM- Création de comptes- Enrichissement des profils- TrackingL’interactivité des génératrice d’informat...
Content Commerce ?Enrichir l’expérience par le contenu1.   Produire du contenu sur le/les produits (exemple : blog(s))2.  ...
Content Commerce >> SB    Etape 1 : Création d’un blog Objectifs : 1. Trafic qualifié 2. Bon SEO
Etape 2 : Lancement du site ecommerceObjectifs :1. Transfo.2. CA3. Fidélisation
Etape 3 : Lancement d’un portailObjectifs :1. Trafic   qualifié2. Renfort SEO3. Partenariats   marque/   mag
Social Commerce ?Utilisation des réseaux sociaux pour vendreLes réseaux sociaux favorisent :1. Le développement de la base...
2 entrées :1. Site de websocial2. Site de vente
Interfaces riches- html5 flash ajax- Réalité augmentée- Vidéo interactive ou parcours scénarisés pour  Ikea- Personnalisat...
Programme• Bénéfice d ’être méthodique• Une conception performante• Des modèles éprouvésTravaux pratiques                ...
Comment concevoir un site web performant
Comment concevoir un site web performant
Comment concevoir un site web performant
Comment concevoir un site web performant
Comment concevoir un site web performant
Comment concevoir un site web performant
Prochain SlideShare
Chargement dans…5
×

Comment concevoir un site web performant

1 137 vues

Publié le

Mes recettes de cuisine pour produire un site web performant, orienté utilisateur.

Publié dans : Business
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 137
Sur SlideShare
0
Issues des intégrations
0
Intégrations
150
Actions
Partages
0
Téléchargements
31
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Comment concevoir un site web performant

  1. 1. Concevoir un site web performant, centré « utilisateur » Sept. 2012 www.nrblog.fr/pepito thierry.picard@facebook.com 1
  2. 2. ProgrammeBénéfice d ’être méthodique• Une conception performante• Des modèles éprouvés• Travaux pratiques 2
  3. 3. Concevoir un site web performant centré utilisateurLE BÉNÉFICE D’ÊTRE MÉTHODIQUE 3
  4. 4. Cadrage de projetBien cadrer un projet c’est commencerpar bien cadrer son besoin. 4
  5. 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. 6. A qui parle-t-on ?- B2B- B2C- Com interne- Pays 6
  7. 7. De quoi parle-t-on ?- Les savoir-faire- Les expertises- Les produits- L’entreprise 7
  8. 8. Dans quel environnement parle-t-on ?- Concurrence- Ecosystème- Marché- Règlementations (cross canal : attention au canal de distribution physique) 8
  9. 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. 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. 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. 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. 13. En résuméQuel est le besoin. 13
  14. 14. Cadrage de projetBien cadrer un projet c’est bien leformaliser. 14
  15. 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. 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. 17. Méthode1. 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ération4. Spécifications fonctionnelles 17
  18. 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. 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. 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. 21. En résuméOptez pour un cahier des charges ROI garanti ! 21
  22. 22. Programme• Bénéfice d ’être méthodiqueUne conception performante• Des modèles éprouvés• Travaux pratiques 22
  23. 23. Concevoir un site web performant centré utilisateurUNE CONCEPTION PERFORMANTE 23
  24. 24. Le benchmarkSurfer 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. 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. 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. 27. Etude de casRefonte deCo…rama.fr 27
  28. 28. LILY, 34 ANS THIBAUD, 27 ANS MICHELLE, 51 ANSDes comportements bien différents en matière de déco
  29. 29. 1 cible, 3 comportements Lily Thibaud Michelle Débrouillarde Téméraire La No Idea, créative mais pas trop ! No riskSes attentes pour C. Ses attentes pour C. Ses attentes pour C.Facilité leur recherche Du conseil & de l’inspiration Un accompagnement persoL’usage media L’usage media L’usage mediaInternet Magazine & Point de Vente Vendeur / Personal ShopperL’insight pour changer L’insight pour changer L’insight pour changerChanger 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, onopportunité ! Changer j’ai besoin d’un petit coup ne sait pas ce que l’on vac’est craquer. de pied. avoir ! A suite
  30. 30. 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
  31. 31. Le zoning- Paperboard- Powerpoint 34
  32. 32. Le wireframe- Balsamiq- Axure- Iplotz- MockFlow- Etc. 35
  33. 33. Maquette et prototypePlus rarement la phase de spécification peutaller jusqu’à la réalisation d’une maquette htmlou celle d’un prototype pour la faisabilitétechnologique « POC » (notamment pour despanels) 36
  34. 34. 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
  35. 35. Etude de cas- Parcours types C…- C… tunnel de conversion ecommerce- C… exemple d’application iPhone 38
  36. 36. 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
  37. 37. 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
  38. 38. Un balisage méthodique du sitePour permettre une mesure ultérieure del’efficacité définir les KPIs et en déduire lesdonnées à extraire du site.Notion de tunnel de transformationExemples de KPIs 41
  39. 39. 42
  40. 40. 43
  41. 41. L’interfaçage avec un SI- Référentiel produit/ gestion de stock- CRM- GED Le cas de la reprise de donnée 44
  42. 42. 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
  43. 43. Une technologie ouverte-Affiliation-Agrégation-Curation-Interfaçage, Etc.Notamment pour le multicanal (tablette/smartphone) 46
  44. 44. 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
  45. 45. L’importance du recettage- Définition des scenarii de test- Cahier de recette- Tests de charge 48
  46. 46. La Tierce Maintenance Applicative- Correction- Evolution Organisation d’une roadmap 49
  47. 47. Programme• Bénéfice d ’être méthodique• Une conception performanteDes modèles éprouvés• Travaux pratiques 50
  48. 48. Concevoir un site web performant centré utilisateurDES MODÈLES ÉPROUVÉS 51
  49. 49. Ecommerce ubiquitair e? Le consommateur est partout il est ubiquitaire
  50. 50. Pour les PME l’opportunité de la « long tail » Du best seller au produit de niche…
  51. 51. Clefs de succès1) 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.
  52. 52. Cas d’écolehttp://www.vauban-collections.com/Vauban Collections1) Présence en ligne site ecommerce de 22 000 références2) Présence en marque blanche sur chapitre.com3) Utilisation d’ebay4) 2 librairies anciennes sur LilleBernard 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. »
  53. 53. Crowd sourcing/commerceUtiliser les internautesS’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 Amazon2. Création et sélection de l’offre produit Cas GMT Games3. Enrichissement de la base de données « clients »
  54. 54. Crowd sourcing >> Amazon
  55. 55. Programme « pre-order 500 »Crowd sourcing >> GMT1. 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 distributeur2. 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é.
  56. 56. Pour résumer1. Communauté : • Offre forte et fidélisante - 30% • Marché de niche2. Collaboration : • Vote des clients • Information permanente sur l’avancement/livraison3. Confiance : engagement moral réciproque= CA X 4 en 3 ans
  57. 57. Enrichissement du CRM- Création de comptes- Enrichissement des profils- TrackingL’interactivité des génératrice d’information. 61
  58. 58. Content Commerce ?Enrichir l’expérience par le contenu1. Produire du contenu sur le/les produits (exemple : blog(s))2. Le contenu génère du trafic3. Les internautes s’approprient le contenu et le commente4. Le contenu fait vendreLe 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’audience2. Lancement du site ecommerce3. Lancement du portail sur la bière (diversification du CA)
  59. 59. Content Commerce >> SB Etape 1 : Création d’un blog Objectifs : 1. Trafic qualifié 2. Bon SEO
  60. 60. Etape 2 : Lancement du site ecommerceObjectifs :1. Transfo.2. CA3. Fidélisation
  61. 61. Etape 3 : Lancement d’un portailObjectifs :1. Trafic qualifié2. Renfort SEO3. Partenariats marque/ mag
  62. 62. Social Commerce ?Utilisation des réseaux sociaux pour vendreLes réseaux sociaux favorisent :1. Le développement de la base prospect/client2. 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 inscrits2. Taux de conversion 6 à 8 fois supérieur au marché3. Plus de 150 Millions de dollars de CA en 2011
  63. 63. 2 entrées :1. Site de websocial2. Site de vente
  64. 64. Interfaces riches- html5 flash ajax- Réalité augmentée- Vidéo interactive ou parcours scénarisés pour Ikea- Personnalisation- etc. 70
  65. 65. Programme• Bénéfice d ’être méthodique• Une conception performante• Des modèles éprouvésTravaux pratiques 71

×