Stratégie

e-commerce :
CHAPITRE 2

un site optimal
 INTRODUCTION
Concevoir un site suppose d’écouter les besoins internes des
équipes, et externes des visiteurs et clients, de les traduire en
termes d’architecture et de navigabilité, d’intégrer les
fonctionnalités clés et bonnes pratiques, de mettre en
production et de gérer les évolutions
 Partie 1
La définition des
besoins
 -A. Un site user centric
• Le site est un pilier de la stratégie marketing de l’entreprise et doit être centré sur l’utilisateur. C’est au
marketing qu’il incombe de créer le contenu, de le faire vivre et enfin, de prévoir le cadencement et les
modalités internes de production de contenus : quels produits, promotions et événements mettre en avant à
quel moment… Le site est une composante de la stratégie omnicanale ou 360° : il est fondamental que la
cohérence soit assurée par le marketing.
• Le site doit autant satisfaire les besoins et contraintes de l’interne (équipes) que ceux des visiteurs/clients. Les
attentes côté interne sont d’avoir un site :
• ▶ robuste : capable de supporter la charge (grand nombre de requêtes, mailings importants…) ;
• ▶ évolutif : facile à faire évoluer (ajout de fonctions, changement de l’ordre des pages, changement de
l’organisation des catégories de produits…) ;
• ▶ souple : permettant la prise en main simple par les équipes pour s’adapter à la créativité des équipes et aux
nouvelles fonctionnalités proposées régulièrement par les médias sociaux.
 -B. Les personae
Le site doit également plaire aux visiteurs. Il doit être adapté aux attentes des utilisateurs (end-users), c’est-à-dire
être user centric. Pour cela, la marque devra effectuer des études d’usages prospectifs pour comprendre les
attentes en matière de navigation des visiteurs et leurs usages. Pour modéliser les différents parcours clients, on
utilise des scénarios ou des personae

Définition : Un persona est un archétype représentant un groupe de personnes dont les comportements,
motivations et buts sont proches. Utilisés en design, ergonomie, marketing et informatique notamment, les
personae permettent aux concepteurs de déterminer ce que le produit ou service doit faire et comment il doit
fonctionner. Créer des fiches persona permet de mettre la cible au cœur de la stratégie marketing

Exemple : Les motivations, attentes et comportements vis-à-vis d’une voiture peuvent être d’avoir une voiture
pour s’amuser et aller vite, pour être confortablement installé en toute sécurité ou encore d’avoir un véhicule
robuste pour transporter des objets lourds. Le constructeur automobile devra tenir compte de ces trois personae.
En sociologie, on parle d’idéal-type au sens de Max Weber pour désigner les personae
 -B. Construire un persona
Choisir sa cible Étape indispensable à faire avant de se lancer dans la construction d’un personae.
Qui l’entreprise veut toucher? C’est une réflexion stratégique qui se fait notamment à travers un positionnement précis, une étude de vos
concurrents, un état des lieux de votre marché, etc.
Même dans le cas où l’entreprise cherche à agrandir son audience, elle doit d’abord identifier la cible au préalable.
Recueillir des Il faut mener des enquêtes et récolter de l’information :
informations Différents moyens sont à votre disposition : il faut effectuer des études quantitatives, des études qualitatives et des Recherches
détaillées sur la documentaires d’études existantes pour compléter (Insee, Google Analytics par exemple)
cible
Analyser Identifier les variables comportementales, répartir les participants sur des échelles et identifier des schémas de
comportements/motivations/attentes proches
Modéliser : Il •Comment s’appelle-t-il ? Donner un nom qui incarne la personae, cela peut être un nom prénom ou un qualificatif comme par exemple
faut se mettre « Hélène la work addict ».
dans la peau de •A quoi ressemble-t-il ? Ajouter une photo pour pouvoir l’identifier visuellement.
•Quelle est sa phrase fétiche, sa devise ? Cibler la personnalité du personae et ce qu’il incarne.
sa cible et se •Qui est-il et que fait-il dans sa vie ? Raconter de manière concise l’histoire du personnage, sa vie, ses intérêts, son parcours pro et perso, son
poser plusieurs âge, sa CSP…
questions •Quelles sont ses motivations d’achats ? Préciser ce qui pousse le personae à passer à l’acte d’achat.
•Quels sont ses objectifs ? Imaginer à quoi aspire le personae, ce qui important pour lui.
•Quelles sont ses frustrations ? Cibler ce qui l’irrite, le dérange et les points de frictions qu’il peut rencontrer (à l’achat, à l’utilisation,etc.).
•Quelles sont ses marques préférées ? Identifier les marques, offres et services qui correspondent à son profil.
•Quels sont les moyens de communication qu’il utilise ? Lister ces canaux d’interactions et mesurez son appétence avec ceux-ci.
En B2B, ce sera essentiellement les mêmes questions mais diriger plus d’un point de vue professionnel. Les demandes et attentes ne seront
pas que liées à un ressenti personnel, même si des biais cognitifs restent présents. D’autres facteurs seront à prendre en compte comme : Le
budget alloué - La qualité de prestation - Le suivi de prestation - Le rapport qualité prix - La gestion des stocks et des approvisionnements, Etc.
En fonction du secteur d’activité et de la cible B2B, il faudra identifier l’ensemble des attentes, contraintes et besoins de la cible, de la même
manière qu’on le fait pour un persona en B2C.
-B. Exemple de persona
 -C. Le wireframe et l’usabilité
Définition : Le Wireframe est la maquette « fil-de-fer »
de l’interface. C’est un schéma de la structure et des
fonctionnalités de l’application mobile ou du site. Ces
maquettes, dessinées sur du papier ou digitales,
présentent un degré d’interactivité variable. Lors de la
conception d’interfaces, les wireframes sont des outils
de design. Le wireframe se présente comme un croquis
papier, un schéma fonctionnel ou un collage papier.

Il permet de :
• ▶ valider que les possibilités et les exigences de
l’interface utilisateur sont satisfaisantes ;
• ▶ s’assurer que le fonctionnement du site Web
correspond aux objectifs initiaux ;
• ▶ évaluer le coût et le temps de développement.
 -C. Le wireframe et l’usabilité
Le wireframe est un élément du
cahier des charges fonctionnel très
visuel, et compréhensible par tous. Il
est d’ailleurs souvent utilisé comme fil
conducteur et devient une base de
travail pour la conception de
maquette et dans le développement
 -C. Le wireframe et l’usabilité
• S’appuyant sur les travaux de Jakob Nielsen,
la norme ISO 9241-11 définit l’usabilité d’une
interface homme-machine, d’un produit,
d’un site ou d’une application.
• Définition : L’usabilité est le degré selon
lequel un produit peut être utilisé, par
des utilisateurs identifiés, pour
atteindre des buts définis avec
efficacité, efficience et satisfaction,
dans un contexte d’utilisation spécifié.
• La législation ajoute des contraintes, notamment
l’article 47 de la loi du 11 février 2005 (2005 – 102)
concernant le handicap et les discriminations. Un site
doit être accessible à tous, comme un magasin doit
l’être pour les fauteuils roulants. En pratique, on
estime que 10 % de la population est malvoyante. On
compte également une part importante de daltoniens
chez les hommes. La conception d’un site doit en tenir
compte au-delà des obligations de base
 Partie 2
L’architecture du
site et la
navigabilité
 -A. Le sitemap
L’étape suivante consiste à rédiger le diagramme structurel du site ou plan du site ou sitemap. Il fixe :
• ▶ les relations entre les pages ;
• ▶ les systèmes d’organisation ;
• ▶ les systèmes de navigation ;
• ▶ les systèmes d’indexation.

Le sitemap permet :
• ▶ de fixer les éléments présents sur la page ;
• ▶ d’ordonner les types d’éléments et de fixer leurs relations ;
• ▶ de développer une structure de page que les développeurs pourront réutiliser en documentant les choix.

La conception détermine aussi quelles pages seront des landing pages et quel sera leur format. Une landing page est une page
d’atterrissage : l’internaute peut arriver sur le site directement sur cette page et pas seulement sur la page d’accueil. En effet,
contrairement au magasin où tous les clients entrent par la ou les portes, sur un site, de très nombreuses pages peuvent être le
premier contact avec la marque.

Exemple : Un magazine féminin présente un modèle de sac à main et donne le lien direct vers le produit sur le site sous forme
d’une adresse (URL). L’internaute arrive directement sur la fiche produit du sac.
 -B. Le fil d’Ariane
• Pour permettre aux internautes de savoir où ils se trouvent lorsqu’ils naviguent sur le site, le concepteur intègre
un fil d’Ariane. Ce fil permet de se situer à n’importe quel moment et de revenir en arrière. Les Anglo-saxons
parlent plutôt de breadcrumb ou miettes de pain. C’est un terme venant des ergonomes.

• Définition
• Un fil d’Ariane sur un site est une aide à la navigation, permettant à l’utilisateur de se localiser dans le
site/programme/document et de garder une trace de leur emplacement et chemin parcouru à l’intérieur d’un
site/programme/document. Il fournit les liens permettant de revenir sur ses pas depuis le point d’entrée du
site/programme/document.

• Les fils d’Ariane sont générés automatiquement par les outils de conception de sites. Ils apparaissent le plus
souvent horizontalement en haut d’une page Web, sous une barre de titre ou sous les en-têtes de page. Un fil
d’Ariane se visualise graphiquement sur le site comme une arborescence des rubriques parcourues utilisant des
chevrons : » Accueil > Spectacles > Concert > Bénabar
• Il permet également de revenir rapidement à l’accueil par un simple clic sur le terme « Accueil » dans le fil lui-
même ou sur le logo. Ces astuces sont peu connues des internautes et peuvent être mises en avant
 Partie 3
Le contenu
 -A. Le footer ?

Définir le contenu suppose aussi de réfléchir au design des pages puis au design des contenus, c’est-à-dire que les
éléments suivants doivent être précisés :
•▶ design des pages : concerne l’aspect visuel de chaque page ;
•▶ design des contenus : concerne les textes, éléments graphiques des pages.

Le design des pages suppose également de penser précisément le footer. Tout comme le fil d’Ariane, le footer ou
pied de page doit être soigné car il permet d’améliorer l’accessibilité et la navigation. Il joue aussi un rôle important
en termes d’image de l’entreprise et de première impression
 -A. Le footer :

Le footer doit être :

-1. Visuellement attractif : le code couleur doit changer du reste du site pour se
détacher et créer une rupture.
-2. Structuré et rapidement compréhensible : le design doit être simple pour être
immédiatement compréhensible. Le footer doit êtres très structuré en rubriques
claires.
-3. Facilement consultable mais aussi facile à quitter : un lien direct vers le haut de
page sera prévu pour éviter à l’internaute de scroller depuis le début. (scroller :
Faire défiler, en parlant d'un texte affiché sur un écran d'ordinateur.)
-4. Engageant vers d’autres actions : Le footer doit inciter à entrer en contact et à
s’engager via des widgets (Application interactive qui peut s'intégrer dans un
système d'exploitation ou une page web), des boutons call to action, des liens vers
les médias sociaux clairement visibles ….
 -A. Le footer :
Les objectifs du
footer

Vecteur de la
Vecteur de Faciliter la
communication Inviter à la prise de Légalement
promotion et navigation
institutionnelle de contact et à l’action respectueux
d’actualité
l’entreprise

Le footer doit refléter les Soit indiquer clairement

Mettre en avant quelques
valeurs de l’entreprise et les coordonnées, soit un Il doit donner le plan du
produits (nouveautés, best Il devra intégrer les
fournir rapidement les formulaire simple à site pour permettre un
off..), des promotions du mentions légales
informations les plus remplir ou un call to action accès direct à une rubrique
moment ou des actualités obligatoires
couramment demandées rapide, un accès direct aux donnée.
de l’entreprise
(adresse, contact, etc… médias sociaux
 -B. Header et carrousel
Le header désigne le haut de la page sur le Le logo en haut à gauche qui doit permettre de revenir à la page
site. C’est une zone importante, car elle d’accueil et une baseline c’est – à dire une courte phrase sous le logo
capte l’attention des visiteurs, leur donne

Éléments à mettre dans le

envie de rester sur le site et d’explorer les
autres pages ou les produits. Un Un menu avec des catégories organisées de manière logique pour le
visiteur en fonction du parcours client le plus courant.
bon header réduit le taux de rebond.

header
Définition : Le header désigne le haut Un fond avec l’identité visuelle de la marque. Le visuel
d’une page sur un site Web doit retrouver l’univers de la marque. Pour ne pas
fatiguer les yeux des visiteurs, les fonds clairs et épurés
sont à privilégier.

Un panier client

Une barre de recherche

 -B. Header et carrousel

Un header performant invite à naviguer et ne donne pas trop d’informations d’emblée : il sera donc
épuré, élégant, aéré, avec des images de qualité, du texte en minuscules plutôt qu’en majuscules et un
nombre limité de polices de caractères différentes.

Le header contient des invitations à cliquer via des call to action ou click to action matérialisés par des
boutons visibles. Il est conseillé de laisser des espaces vides.

Le header pourra contenir un slider ou carrousel. Un slider ou carrousel est un élément

graphique d’un site permettant le défilement de plusieurs images.
Les images peuvent défiler automatiquement ou doivent être activées en passant la souris
dessus. Il est alors de type roll-over.
Un slider ou carrousel est généralement placé sur la page d’accueil sous la barre des menus,
plutôt dans la zone chaude. Il se compose de deux à quatre images en moyenne.
Un slider ou carrousel est efficace si le défilement des images ne se fait pas trop rapidement
(sauf s’il est en roll-over évidemment !) pour que le visiteur puisse y accorder l’attention
nécessaire. Chaque image ne doit contenir qu’un seul message à la fois pour ne pas saturer
 -B. Header et carrousel

Un header performant invite à naviguer et ne donne pas trop d’informations d’emblée : il sera donc
épuré, élégant, aéré, avec des images de qualité, du texte en minuscules plutôt qu’en majuscules et
un nombre limité de polices de caractères différentes.

Le header contient des invitations à cliquer via des call to action ou click to action matérialisés par
des boutons visibles. Il est conseillé de laisser des espaces vides.
 -B. Header et carrousel

Le header pourra contenir un slider ou carrousel. Un slider ou carrousel est un élément graphique d’un
site permettant le défilement de plusieurs images.
Les images peuvent défiler automatiquement ou doivent être activées en passant la souris dessus. Il
est alors de type roll-over.
Un slider ou carrousel est généralement placé sur la page d’accueil sous la barre des menus, plutôt
dans la zone chaude. Il se compose de deux à quatre images en moyenne.
Un slider ou carrousel est efficace si le défilement des images ne se fait pas trop rapidement (sauf s’il
est en roll-over évidemment !) pour que le visiteur puisse y accorder l’attention nécessaire. Chaque
image ne doit contenir qu’un seul message à la fois pour ne pas saturer l’attention du visiteur.
 -C. La zone chaude du site WEB
Définition
La zone chaude sur une page Web ou un mail correspond à la zone qui attire l’œil du
visiteur. En général, le haut et le centre d’une page Web attire le regard et la partie
supérieure du mail

La zone chaude est déterminée par un logiciel d’eye traking comme la zone maximale de fixation du
regard et du temps de fixation ou en utilisant l’A/B Testing. C’est un terme qui existe
en merchandising et qui est transposé en digital.
 -D La méthode A/B Testing
• La méthode A/B testing ou test A/B ou encore split testing est une méthode
marketing très utilisée en digital permettant de tester simultanément plusieurs
versions d’un produit ou d’une communication. Dans le cas du Web, on teste
différentes versions d’une même page Web sur différents échantillons
d’internautes afin de comparer l’efficacité de chacune. Chaque groupe de
visiteurs ne sera exposé qu’à une seule version de la page, soit complètement
différente soit partiellement différente. Par extension, le test A/Z permet de
tester plus de deux versions et le test multivarié permet de tester plusieurs
combinaisons d’un même élément.
• Les éléments à faire varier peuvent être par exemple :
• ▶ les boutons d’actions ;
• ▶ les images ;
• ▶ la couleur du produit (voiture noire ou rouge) ;
• ▶ la taille des éléments (photo, texte…) ;
• ▶ un texte ;
• ▶ la présence de vidéo.

• Exemple
• Renault a utilisé la méthode A/B testing pour réorganiser sa page d’accueil.
Les facteurs clés de succès ont été :
▶ une seule variante, la couleur de la voiture mise en avant (blanche ou
rouge) ;
▶ durée du test suffisante : vingt jours hors de tout salon de l’automobile ;
▶ résultat : + 20 % de demandes d’essai de la voiture ;
▶ + 9 % d’inscriptions à la newsletter.
 -E Définir la page courante
• Au-delà de la page d’accueil et du header, le design et le contenu des pages courantes
doivent être définis. La stratégie de production de contenus tient compte :
• ▶ des caractéristiques et comportements des visiteurs et des cibles ainsi que de
l’engagement et de la participation attendus des visiteurs – par exemple, les
générations Y et Z auront davantage envie de produire du contenu et de participer pour
des marques de grande consommation que la génération X ;
• ▶ des terminaux et supports d’accès afin que le résultat s’adapte au visiteur ;
• ▶ des capacités de production internes : quantité et qualité des images et vidéos, taille
de l’équipe en charge des mises à jour de contenus et de la production de contenus
frais
 Partie 4
La mise en
production
 -A. Choix sémantique
La mise en œuvre nécessite de choisir les requêtes de positionnement pour
promouvoir les offres sur les moteurs de recherche. On parle de related keywords ou
de mots clés contextuels pour désigner les mots clés relatifs à l’entreprise, au
produit, à la marque et utiles en référencement naturel.

Pour chaque catégorie et sous-catégorie, les équipes marketing doivent rédiger une
liste d’une cinquantaine de mots relatifs à l’offre. Ces mots seront entrés dans
Google Adwords et dans les autres interfaces avec les moteurs de recherche. Cette
liste est établie par le marketing qui peut interroger les commerciaux et les forces de
vente en contact avec les clients pour savoir quels mots ceux-ci utilisent lorsqu’ils
expriment leurs besoins.
 -A. Choix sémantique
Le merchandising optimise le nom des rayons pour que la signalétique facilite la recherche des produits en
magasin. Cette liste est la transposition digitale de la signalétique. Les pages et les catégories de produits doivent
porter des noms qui parlent au visiteur.
Ce travail de sémantique effectué, le choix des mots sur lesquels se positionner se fait :
•▶ en vérifiant dans Google Adwords (recherche) le volume de recherche sur la zone de texte proposée (un mot
ou groupe de mots) : ceci donne une indication précise de la concurrence sur ce mot ou groupe de mots, c’est-à-
dire le nombre de pages déjà indexées sous ce ou ces mots ;
•▶ en testant les résultats sur l’association de mots clés contextuels. Par exemple : on comparera « appareil
photo pas cher » et « appareil photo numérique professionnel pas cher ».

En effet :
•▶ si la demande (requêtes sur le moteur de recherche) est importante et le nombre de résultats faible (l’offre)
alors remporter des parts de visiteurs sera facile ;
•▶ les mots au singulier et au pluriel n’ont pas le même nombre de requêtes, ni les mots avec ou sans accent – il
faut absolument tester la totalité pour choisir les mots les plus pertinent ;
 -B. Le balisage
Optimisation du balisage :
 -C Choix du nom de domaine
L’objectif du nom de domaine est de :
•▶ véhiculer les valeurs et l’image de l’entreprise ;
•▶ être facilement mémorisable par les visiteurs et clients ;
•▶ être optimisé pour être facilement indexé par les moteurs de recherche.
Le choix se fait en respectant les valeurs et territoires de l’entreprise. La réflexion porte également sur la
dimension nationale ou internationale. De quels pays le site doit-il être accessible ? Faut-il opter pour un nom de
domaine national en .fr (français) ou aller vers l’ouverture internationale voire des déclinaisons par pays ? Au
contraire, faut-il privilégier un positionnement commercial international avec un .com? Dans le cas d’une
association, le .org est préférable.
Des sites de suggestions existent tel que Queldomaine.com pour les sites français.
Ce choix suppose :
•▶ de valider la disponibilité du nom de domaine – les noms de domaine avec accents sont désormais
disponibles ;
•▶ d’effectuer l’enregistrement auprès des bureaux d’enregistrement officiellement agrées par l’ICANN (Internet
Corporation for Assigned Names and Numbers). La durée est d’un à dix ans en général ;
•▶ de noter la date d’expiration pour renouveler en temps utile
 -D Choix d’un hébergeur
L’hébergeur doit être fiable, offrir une solution robuste et sécurisée. Le choix dépend
des besoins de la marque.
 -D Choix d’un hébergeur
L’hébergeur doit être fiable, offrir une solution robuste et sécurisée. Le choix dépend
des besoins de la marque.