Your SlideShare is downloading. ×
0
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
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
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
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
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
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
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
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
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
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
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
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
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Comment concevoir un site web performant

733

Published on

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

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

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
733
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
23
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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é utilisateurLE BÉNÉFICE D’ÊTRE MÉTHODIQUE 3
  • 4. Cadrage de projetBien cadrer un projet c’est commencerpar 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 projetBien cadrer un projet c’est bien leformaliser. 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é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. 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é utilisateurUNE CONCEPTION PERFORMANTE 23
  • 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. 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 casRefonte deCo…rama.fr 27
  • 28. LILY, 34 ANS THIBAUD, 27 ANS MICHELLE, 51 ANSDes comportements bien différents en matière de déco
  • 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. 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. Le zoning- Paperboard- Powerpoint 34
  • 32. Le wireframe- Balsamiq- Axure- Iplotz- MockFlow- Etc. 35
  • 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. 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. Etude de cas- Parcours types C…- C… tunnel de conversion ecommerce- C… exemple d’application iPhone 38
  • 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. 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. 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. 42
  • 40. 43
  • 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. 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. Une technologie ouverte-Affiliation-Agrégation-Curation-Interfaçage, Etc.Notamment pour le multicanal (tablette/smartphone) 46
  • 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. L’importance du recettage- Définition des scenarii de test- Cahier de recette- Tests de charge 48
  • 46. La Tierce Maintenance Applicative- Correction- Evolution Organisation d’une roadmap 49
  • 47. Programme• Bénéfice d ’être méthodique• Une conception performanteDes modèles éprouvés• Travaux pratiques 50
  • 48. Concevoir un site web performant centré utilisateurDES MODÈLES ÉPROUVÉS 51
  • 49. Ecommerce ubiquitair e? Le consommateur est partout il est ubiquitaire
  • 50. Pour les PME l’opportunité de la « long tail » Du best seller au produit de niche…
  • 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. 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. 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. Crowd sourcing >> Amazon
  • 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. 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. Enrichissement du CRM- Création de comptes- Enrichissement des profils- TrackingL’interactivité des génératrice d’information. 61
  • 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. Content Commerce >> SB Etape 1 : Création d’un blog Objectifs : 1. Trafic qualifié 2. Bon SEO
  • 60. Etape 2 : Lancement du site ecommerceObjectifs :1. Transfo.2. CA3. Fidélisation
  • 61. Etape 3 : Lancement d’un portailObjectifs :1. Trafic qualifié2. Renfort SEO3. Partenariats marque/ mag
  • 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. 2 entrées :1. Site de websocial2. Site de vente
  • 64. Interfaces riches- html5 flash ajax- Réalité augmentée- Vidéo interactive ou parcours scénarisés pour Ikea- Personnalisation- etc. 70
  • 65. Programme• Bénéfice d ’être méthodique• Une conception performante• Des modèles éprouvésTravaux pratiques 71

×