comment concevoir un site web performant
Post on 25-Dec-2014
618 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related