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