Comment concevoir un site web performant

Concevoir un site web performant, centré « utilisateur »

Sept. 2012www.nrblog.fr/pepito

thierry.picard@facebook.com

1

Programme

2

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

LE BÉNÉFICE D’ÊTRE MÉTHODIQUEConcevoir un site web performant centré utilisateur

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 briefPour

• Créativité du prestataire• Rapidement formalisé• Ne demande pas

d’expertise métier « internet »

• Peu coûteux

Contre• Trop de liberté• Manque de précision• Trop conceptuel• Pas assez fonctionnel• Rarement technique

15

Le cahier des chargesPour

• Précis• Fonctionnel• Technique• contractuel

Contre

• Plus long• Plus coûteux• Plus compliqué à organiser

16

Pas d’opposition le cahier des charges =brief + specs fonctionnelles

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

22

• Bénéfice d ’être méthodiqueUne conception performante• Des modèles éprouvés• Travaux pratiques

UNE CONCEPTION PERFORMANTEConcevoir un site web performant centré utilisateur

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 deCo…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

LilyDébrouillarde créative

ThibaudTéméraire mais pas trop !

MichelleLa No Idea,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’insight pour changer L’insight pour changer L’insight pour changer

Changer ce n’est pas une envie, c’est une opportunité ! Changer c’est craquer.

Je suis sûre de mes goûts mais pour oser changer, j’ai besoin d’un petit coup de pied.

Changer ? Pour quoi faire ? On sait ce que l’on a, on ne sait pas ce que l’on va avoir !

L’usage media L’usage media L’usage media

Internet Magazine & Point de Vente

Vendeur / Personal Shopper

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 transformationExemples 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

50

• Bénéfice d ’être méthodique• Une conception performanteDes modèles éprouvés• Travaux pratiques

DES MODÈLES ÉPROUVÉSConcevoir un site web performant centré utilisateur

51

Le consommateur Le consommateur est partout il est est partout il est

ubiquitaireubiquitaire

EcommerEcommerce ce

ubiquitaubiquitaire?ire?

Pour les PME l’opportunité de la « long tail »

Du best seller au produit deniche…

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

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 produitCas GMT Games

3. Enrichissement de la base de données « clients »

Crowd sourcing/commerceCrowd sourcing/commerce

Crowd sourcing >> AmazonCrowd sourcing >> Amazon

Crowd sourcing >> GMTCrowd sourcing >> GMT

Programme « pre-order 500 »

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- TrackingL’interactivité des génératrice d’information.

61

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 trafic3. Les internautes s’approprient le contenu et le commente4. 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’audience2. Lancement du site ecommerce3. Lancement du portail sur la bière (diversification du CA)

Content Commerce ?Content Commerce ?

Content Commerce >> SBContent 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. CA3. Fidélisation

Etape 3 : Lancement d’un portail

Objectifs :1. Trafic

qualifié2. Renfort

SEO3. Partenariat

s marque/mag

Utilisation des réseaux sociaux pour vendre

Les 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

Social Commerce ?Social Commerce ?

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- Personnalisation- etc.

70

Programme

71

• Bénéfice d ’être méthodique• Une conception performante• Des modèles éprouvésTravaux pratiques