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

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

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 »

57. Crowd sourcing >> Amazon

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é.

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

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