Bien appliquer sa stratégie 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 ? Exemples : 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 Fonctions de tri 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 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 : Les champs additionnels : 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 : Voir un tutoriel ici 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 : E-commerce : 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) 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