Cahier des charges

Bien appliquer sa stratégie

Cahier des charges site web

• Etudier le marché = benchmark• Définir les choix technologiques• Préparer l’architecture du site, l’organisation

des modules, l’agencement des pages• Optimiser le taux de transformation• Passer du temps sur un cahier des charges,

c’est en gagner par la suite

Le Benchmark

• Etudier les forces et faiblesses des sites des concurrents directs et indirects, des partenaires (fournisseurs, revendeurs…), du domaine (prescripteurs, analystes…).

• Faire une grille d’analyse pertinente pour avoir un état des lieux des forces en présences et déterminer des opportunités ou menaces pour son site.

• Lien vers la grille d’analyse

Architecture du site

• L’arborescence du site ne doit pas être une conséquence de sa mise place mais bien le point de départ.

• Faire un plan sur papier pour vérifier qu’il n’y a ni impasse ni page perdue. => règle des 3 clics (2 c’est encore mieux)

• Le rubriquage• Types de pages et la question du contenu

éditorial

Le rubriquage

• Rubriques logiques : le benchmark (élargi) est important

• Rubriques et sous-rubriques : attention au dédale• Rubriques croisées : un maillage dense pour

répondre à toutes les logiques des internautes. Ex. : type de produits (veste, pantalon, chaussures) et type de fabrication (haut de gamme, écologique, premier prix) et saison (automne/hiver, printemps/été).

Types de page et contenu éditorial

• La page d’accueil• La page de catégorie• La page d’article• Le module de paiement• Les dossiers thématiques• La F.A.Q.• La page de contact• Les mentions légales• La page Qui sommes-nous ?

La page d’accueil– Objectif #1 : donner envie d’en voir plus

• En général (Ex. : Le Monde)– Identification rapide de la marque– Identification rapide du domaine d’activité– Identification possible du positionnement (souvent au travers d’un slogan.

Ex. : Le Monde Diplomatique, Les Cahiers du Football)

• E-commerce : vitrine de la boutique (Ex. : Sarenza)– Types de produits/services proposés– Produits phares (même si longue traîne)– Promos– Aperçu de la profondeur du catalogue (surtout si longue traîne)– Infos de sécurité/confiance : téléphone, labels…

• En particulier : selon le modèle économique– Ventes privées => Formulaire d’identification (Ex. : Vente-privee.com)– Achats groupés => Les réductions du moments (Ex. : Groupon)

La page de catégorie

• Page de résultats de recherche aussi• Elle est très importante en e-commerce• Quels éléments mettre en place ?– Liste de produits– Fonctions de tri et fonctions de choix– Comparatif– Texte d’accompagnement

Liste de produit– Quelles infos succinctes présenter ?

• Titre• Prix• Photo(s)• Rubriques ?• Infos techniques ?• Slogan ?• Logo de la marque ? (si revendeur)• Note des internautes ?• Nombre de ventes ?

– Exemples :• Spartoo• JeffChaussures

Sélectionner et trier– Fonctions de choix

• Dépendent du rubriquage simple ou complexe– Simple : Ex. : Homme => pantalon => Jeans (Ex. : Celio)– Complexe : Ex. Promo => Bio (Ex. : Chronodrive)

• Colonne de choix croisés– Le rubriquage complexe est présenté dans une colonne qui permet de faire un choix très fin

» Ex. : Fotolia, Adidas

• Tendances actuelles : rendre ces choix plus ludiques– Echelle de prix avec bornes à déplacer (Ex. : Darty)– Drag n’ Drop de catégorie

– Fonctions de tri• Fonction simple :

– Du plus cher au moins cher– Du plus récent au plus ancien– Du mieux noté au moins bien noté– Du plus vendus au moins vendus…

• Et inversement

Comparer

• Quelle présentation ?

(comment mettre le produit à forte marge en avant sans dénigrer les autres?)

– Avec symboles ?• Flèche verte, sens interdit, signe nul ou rien ?• Attention au message envoyé• Exemples : Le Monde, Avast, Plugin Wordpress

– Sans symboles ?• Exemple : Rue du Commerce

Texte d’accompagnement

• C’est la page la plus difficile à référencer car la plus concurrentielle– Ex. : recherche « téléviseur plasma » (page 12 environ)– Ex. : recherche « LG 50PA6500 TV Plasma »

• La page de catégorie contient les infos, propres à chaque produit, désignées précédemment. Le référencement est donc axé sur des termes de recherche très précis

• Il mettre en place un texte généraliste reprenant les différents termes de recherche large et lui trouver une place. Le plus souvent, sous la liste de produits.

La page d’article

• Le titre• Le slogan• Le prix• Les photos• Le descriptif technique• L’argumentaire• Les avis• Les outils de cross-selling

Le titre, le slogan et le prix

• Un titre– Très souvent, le nom du produit ou service

• Un slogan– Définir le produit/service en une phrase courte d’accroche– Rendre la lecture de l’argumentaire non nécessaire– Définir un ton commun à l’ensemble du site, une « marque de

fabrique »– Technique peu utilisée car nécessitant beaucoup de travail

• Selon le positionnement du site (de la marque), la place donnée au prix varie– En retrait (Ex. : Dior, American Apparel)– En avant (Ex. : Cdiscount)

Les photos• La présence de photos est essentielle. Le conseil du Bon Coin est

une règle étendue à tout le e-commerce et même aux contenus non marchands : Une annonce avec photo est 7 fois plus consultée qu'une annonce sans photo.

• Le nombre de photos est un choix à faire entre la précision de la démonstration et le poids de la page. En général : entre 3 et 6 photos.

• La présentation des photos varient d’un site à un autre :– Miniatures + une photo en grand format. (Ex. : Decathlon)– Zoom sur une partie. (Ex. : Adidas)– Vue panoramique / 3D. (Ex. : Ex. Spartoo)

• Les photos aident à la vente et augmentent l’expérience utilisateur.

Le descriptif technique

• Etre exhaustif• Etre lisible : regrouper par thème– La puissance– L’autonomie et le chargement– Les dimensions et le poids– Les composants– La durée de contrat, de suivi…

• Exemple : Boulanger

L’argumentaire

• Prévoir les objections• Ecrire en paragraphes courts et petits titres,

idée par idée• L’argumentaire est aussi un plus pour le

référencement• Exemple avec argumentaire : Darty• Exemple sans argumentaire : Boulanger

Les avis et interactions• Commentaires

– Contenu textuel aidant au référencement– Avis + ou – argumenté : aide à la vente selon l’intérêt porté par l’internaute– Ouverts à tous / Nécessitant inscription

• Fichier non qualifié ou frein à l’action– Modérés (humain ou programme) / Non modérés

• ressources humaines nécessaires ou risques de dérives– Les commentaires sont aujourd’hui soumis à la notation (Ex. : Tripadvisor)

• Notes– Vue rapide des avis des consommateurs– Facilité de l’interaction– Très peu détaillé– Pas d’aide au référencement– Gestion plus simple des avis négatifs (+/- ou étoiles ou autres). (Ex. : Sephora)

• Les réseaux sociaux : nombre de +1, Tweets et J’aime– Avis relayés sur les réseaux sociaux– Preuve de l’intérêt de l’article– Facilité de l’interaction– Exemple : Zara

Les outils de cross-selling

– Avant l’ajout au panier• Produits similaires• Packs promotionnels

– Après l’ajout au panier• Produits complémentaires• Produits conseillés par les autres acheteurs• Services additionnels (garantie, assurance…)

– Hors e-commerce• « à lire sur le même sujet »• « du même auteur »• « articles payants »• Exemple : Mediapart

Le module de paiement

• Quelles informations demandées (taux d’abandon VS qualification du fichier) ?– Adresse email et mot de passe pour création d’un compte

d’accès– Coordonnées complètes ou presque (téléphone ?)– Coordonnées optionnelles (adresse de facturation différente ?)– Stockage des informations bancaires et sécurité (est-ce bien

raisonnable ?)– Vidéo

• Une page complète ou plusieurs étapes ?– Exemple : Vinatis

Les dossiers thématiques

• Quel contenu ?– Définir du contenu suffisamment attractif pour générer du trafic

(importance du benchmark élargi pour sortir des logiques habituelles et innover un peu)

• Quelle place dans le site ?– En marge : création de trafic et liens vers les produits– En soutien : en savoir plus sur le sujet– Au cœur : dans l’argumentaire

• Quel coût de production ?– Web 2.0– Calcul de rentabilité (comparer le nombre de visites générées VS

Adwords)

La F.A.Q.

• Outil de confiance et de réponse aux objections• La F.A.Q. se doit d’être la plus complète

– Nécessité de regrouper les questions par thèmes– Ne pas standardiser les réponses (Ex. : Mais si…, Mais non…)– Laisser les internautes poser les questions sans réponse et mettre à

jour la F.A.Q.• Une F.A.Q. bien conçue peut générer beaucoup de trafic =>

penser à rentabiliser la page– Présentation de produits– Promos– Inscription newsletter

• Exemples : FNAC, Leroy Merlin

La page de contact• Les champs usuels :

– Nom– Email– Sujet libre– Message

• Les champs additionnels :– Coordonnées– Liste de sujets (=> permet d’orienter automatiquement le mail reçu ou

de le classer dans une boîte email ou de répondre instantanément à la demande)

– Upload de fichier (=> pour traitement d’une info précise)– Captcha

• Exemple : leboncoin.fr

Les mentions légales

• Les éléments :– Identification du site– Informatique et libertés

=> Protection des internautes et respect des lois

– Propriété intellectuelle=> Protéger les contenus du site

– Limitation de responsabilité=> Protéger le(s) responsable(s) du site

• Voir un tutoriel ici• L’outil de la CNIL

La page Qui sommes-nous ?• Se diriger vers un descriptif style Wikipédia

– Historique– Organigramme– Chiffres-clés

• Humanisation– Portraits des membres– Dixit de chaque membre

• Les valeurs– Mettre en avant les valeurs fondamentales de l’entreprise => création de lien

avec l’internaute• L’univers de l’entreprise

– Mise en avant de la présence sur les réseaux sociaux• Nous rejoindre• Extraits des derniers Tweets, Commentaires Facebook

Le design du site

• Choix technologiques• Déclinaisons selon les supports• La créa• Outils de transformation• Outils de fidélisation

Design : choix technologiques

• Flash : technologie d’Adobe basé sur l’animation• Html + JavaScript : technologies de base du web

Design : choix technologiques

• CMS Open Source : logiciel libre utilisé par de nombreuses personnes.

• CMS Propriétaire : logiciel créé par une agence pour ses clients ou sur mesure pour chaque client.

CMS Open source

• Sites classiques :– Spip : l’ancêtre (dépassé)– Joomla! : l’ancien leader (usine à gaz)– Wordpress : la nouvelle coqueluche (vidéo)– Drupal : la référence des sites institutionnels

• E-commerce :– Magento : la référence– Prestashop : la solution légère qui monte

Design : déclinaison selon les supports

• Les supports à prendre en considération– Ordinateur personnel

• Tailles d’écran : voir le graph

– Tablette• Taille d’écran : 1024 pixels X 768 pixels

– Smartphone• Taille d’écran : 320 pixels X 480 pixels

– Voir la source• La mode du responsive

– Adaptation de l’affichage à la taille de l’écran via les CSS– Exemple de site responsive– Site de test sur les différents supports– Attention au poids de la page

• Choisir un design par support– Plus lourd à mettre en place mais parfaitement adapté à chaque support

Design : la créa

• E-commerce : Faire sobre– La star n’est pas le site mais le produit ou l’offre– Très souvent : fond de page blanc

• Sites vitrines : Place à la créativité– Pas de limites particulières– Protéger l’information importante en ne

surchargeant pas le reste (trop d’animation tue l’animation)

Outils de transformation• Cross-selling : modules placés le plus souvent sous la description du

produit consulté• Les promotions sont mises en avant dans les zones les plus visibles :

– Pop-up (Ex. : Spartoo – mais pour le jeu –)– Slider (Ex. : Castorama)– Page d’accueil (Ex. : Rue du Commerce)– Habillage du site (Ex. : Cdiscount)

• Module donnant confiance aux internautes :– Numéro de téléphone, zone de chat et offres de retour des produits se

trouvent le plus souvent en haut de page en évidence (Ex. : Direct-Optic)– Les labels de certification et de sécurité sont habituellement placés en

bas de page. Pourtant, il ne faut pas négliger leur impact et ne pas hésiter à la positionner en haut de page, comme des « trophées ». (Ex. : GrosBill)

Outils de fidélisation

• Les outils de fidélisation sont principalement hors du site :– Newsletter– Courrier commercial– Blog

• La mise en avant d’un module de connexion explicitement destiné aux abonnés met le statut de ceux-ci en valeur (Ex. : Le Figaro)

La méthode de paiement

• Choix de paiement– CB : classique– Virement : + fastidieux mais plus rassurant– Chèque : + lent mais plus rassurant– Espèce : seulement pour le retrait sur place– Solutions en ligne : + simple et sécurisé mais

moins répandu

Paypal VS systèmes bancaires

• Paypal : image et notoriété importante– Simplicité de mise en place du compte et de la solution sur le

site (natif sur tous les systèmes)– Paiement par carte de manière habituelle– Tarifs

• Systèmes bancaires : la sécurité– Mise en place additionnelle (Ex. : Pour Wordpress)– Paiement par carte de manière habituelle– Tarifs :

• Frais d’installation : entre 100€ et 300€• Abonnement mensuel : entre 20€ et 40€• Commissions : entre 0,20% et 1%

La méthode de livraison

• Frais de livraison– Selon le poids– Selon le prix– Selon la destination– Selon plusieurs critères

• Frais de livraison offerts– Promotion permanente : améliore le taux de transformation– Nécessite d’inclure les frais dans le calcul du coût de revient

et donc dans le prix affiché– Offerts le plus souvent pour une livraison en relais colis– Exemple : FNAC

Optimisation du référencement

• L’optimisation du référencement naturel repose sur plusieurs points :– Le nom de domaine– Le code Html– La rédaction du contenu– Le mapping– Le netlinking

Référencement – Le nom de domaine

• L’extension n’est pas essentielle. Elle compte uniquement pour la transmission orale de l’URL.– Les extensions nationales : FR, DE, EU…– Les extensions internationales : COM, NET, INFO…

• Le choix du nom de domaine est crucial : Google y accorde beaucoup d’importance dans son algorithme de référencement :– Nom de marque (Ex. sarenza.com)– Sémantique ou mixte (Ex. : chaussures-desmazieres.fr)

Référencement – Le code Html• Balise <title>

– Titre de la page• Balise <meta> (moins importantes)

– Mots-clés– Description

• Balises de titre : <h1>, <h2>, <h3>…– <h1>Titre principal</h1>

• <h2>titre secondaire</h2>

• Balises de mise en forme : <em>, <strong>– <em>expression en italique</em>– <strong>expression en gras</strong>

• Attributs de description : alt, title– Pour les liens et les images principalement– Améliorer l’accessibilité du site aux mal voyants– Valable aussi pour les robots de Google

Référencement – La rédaction du contenu

• Il n’y a pas de règle précise puisque l’algorithme de Google est secret.

• Quelques recommandations :– 2 à 3 mots-clés maximum visés par page– 250 mots minimum par page– Mots-clés répétés 2 fois– Un titre de première importance– Texte découpé en paragraphes– Mettre un titre de faible niveau avant chaque paragraphe– Un mot-clé débute chaque paragraphe– Mettre en place un sommaire avec des ancres– Faire 2 ou 3 liens internes vers d’autres pages du site– Faire au moins lien externe

Référencement – Le mapping

• Il est important que toute page d’un site soit accessible en 3 clics maximum.

• Pour le référencement, un bon maillage du site sera bénéfique.– Menu complet en haut de page (Ex. : Cdiscount)– Menu annexe dans le footer (Ex. : L’Equipe)

• Le plan de site peut aider les internaute• La sitemap (version xml) est un outil important pour

avertir Google des mises à jour du site avec le service Webmaster Tools

Référencement – Le netlinking• Le netlinking sauvage repose sur 3 critères :

– Quantitatif : plus il y a de liens vers un site, plus celui-ci doit être intéressant

– Qualitatif : plus un site faisant un lien vers un autre est bien référencé (pagerank) plus cela profite au site de destination

– Sémantique : plus le lien est bien « codé », plus il a d’impact sur le référencement

• L’angoisse Panda (mise à jour de Google en 2012)– Google ne tient plus ou presque plus compte des échanges de liens entre

2 sites– Google ne tient plus ou presque plus compte des liens provenant d’un

site hébergé sur le même serveur– Google pénalise les mauvaises pratiques de netlinking sauvage

• Voir les recommandations de WebRankInfo