logo IAFACTORY
booster de site
expertise UX
design UX

Animation commerciale ecommerce

icone conception UX design

L'animation commercial ecommerce fait partie des techniques de conception UX design de monétisation.
Découvrez des exemples pour animer et dynamiser l'efficacité commerciale de votre site web.

Animations commerciales, ecommerce, site web

Révisé en Mars 2024

L'importance de l'animation commerciale dans l'UX

animation commerciale de site web

L'animation commerciale ecommerce est cruciale pour les performances économiques de votre dispositif digital. Vos animations commerciales doivent être parfaitement adaptées à vos sites web, et idéalement en synergie avec les actions commerciales réalisées au sein du réseau physique de magasins. La dynamisation et l'animation d'un site web à travers des événements et des offres commerciales sont une composante fondamentale de l'attractivité d'un dispositif digital.
L'UX designer et l'architecte de l'information doivent ainsi prévoir, en amont de la conception du support numérique, une interface utilisateur suffisamment flexible pour accueillir efficacement les offres promotionnelles. L'UX design des animations commerciales doit être particulièrement soignée et planifiée ponctuellement pour une attention maximale et éviter de saturer l'attention des clients...

Comment animer efficacement votre site web ?
Quel plan d'animation marketing pour dispositif digital ?
Quels sont les bons élèves du commerce et quels sont les exemples d'animations commerciales à suivre ? Quelles techniques d'animation commerciale devez-vous utiliser pour votre site ?
Nous allons développer quelques pistes pour vous aider à développer des animations commerciales et marketing au sein de votre dispositif digital.
Ces travaux dépassent le cadre de la conception fonctionnelle et s'inscrivent dans la stratégie marketing. Les animations commerciales d'un support numérique relèvent du design stratégique, de l'ebusiness. La mise en scène et la matérialisation numérique des actions commerciales au sein de l'interface utilisateur passent naturellement par une bonne architecture de l'information, et une optimisation du design de l'interaction orientée vers les performances...

Dans la conception d'un dispositif digital, y compris dans le cadre de la méthode UX design, les équipes de conception tendent à construire des interfaces fonctionnelles sur la base d'informations génériques. Il est rare qu'un concepteur dispose d'une vision élargie des actions marketing du commanditaire. Le travail se concentre alors principalement sur la dimension fonctionnelle sans prise en compte de la dynamique commerciale (fréquence des opérations commerciales, envergure des actions emarketing).
C'est évidemment un problème de design. Et il peut avoir des conséquences lourdes sur le business model d'une entreprise.

Les animations commerciales permettent de dynamiser votre support digital : soldes, promotions, déstockage, offres limitées, vente flash, événement, jeu concours...
Les campagnes commerciales doivent s'inscrire dans le temps et être planifiées au sein du plan d'animation commercial. Le planning des opérations commerciales permet d'animer le dispositif digital tout au long de l'année en créant des événements thématisés suffisamment forts pour susciter la revisite de l'internaute.

Le rôle des concepteurs d'interface est de relayer efficacement ces actions marketing au travers de l'interface utilisateur :

  • Visibilité au sein de l'architecture de l'information : labels flexibles dédié aux animations commerciales.
  • Flexibilité du design de l'information : formats communicationnels consacrés à la valorisation des opérations marketing.
  • Parcours d'utilisation optimisé : design de l'interaction orienté sur la mise en valeur des événements éphémères et des promotions.

Or, comme nous l'avons pointé, le calendrier des actions commerciales est rarement une priorité des équipes de conception.
Les concepteurs passent du temps à travailler l'architecture de l'information du catalogue et les modalités d'exploration du référentiel produit (parcours, filtre). Il y a tout un volet qui échappe souvent au maquettage fonctionnel : signalétique des prix, catalogues de vente, chartes des stickers promotionnels, animations commerciales...
Si ces informations ne sont pas prises en compte en amont du projet, la conception risque de ne pas être assez flexible pour accueillir et valoriser efficacement le plan d'animation commercial.

Parcours utilisateurs et animation commerciale

Les études d'usages croisées aux indicateurs de performances démontrent que :

  • Les utilisateurs arrivent directement sur les fiches produits depuis les moteurs de recherche... Le scénario principal correspond à une requête sur Google, une arrivée sur la page produit d'un site ecommerce, et un taux de rebond qui dépasse les 75% (3 utilisateurs sur 4 repartent directement sans consulter une autre page).
  • Les utilisateurs sont très volatiles et suivent une stratégie comparative radicale (aller-retour entre Google et les différents supports marchands positionnés sur la première page du moteur pour le produit considéré).
  • Les incitations commerciales sur le prix et les promotions augmentent considérablement le taux de transformation.
  • Les périodes d'animations commerciales observent des performances transactionnelles supérieures aux périodes ordinaires, hors promotion.
  • Les publicités imprimées - print et les catalogues hors-ligne offline ont un potentiel de trafic entrant considérable dans le business d'une entreprise.
  • La descente du catalogue digital suit rarement un parcours complet : le référentiel produit est rarement appréhendé dans une logique de consultation rationnelle.

Sur un site ecommerce, le consommateur est rarement exposé aux animations commerciales directement. Le design de l'information et la ventilation des éléments à l'écran donnent une place limitée aux animations commerciales. En résulte des problèmes de visibilité des actions emarketing. Les parcours et le design de l'interaction ne permettent pas d'accéder de façon fluide aux grandes animations commerciales.

Pire, lorsque les concepteurs octroient des espaces visuels pour matérialiser les animations commerciales, les équipes de design les traitent autour du format publicitaire : le phénomène de banner blindness qui prévaut dans un environnement saturé de messages publicitaires est un facteur limitatif supplémentaire...

Ergonomie Vs Commerce : quand l'ergonomie commerciale n'existe pas

Les mécanismes élémentaires du marketing et les bases du commerce ne sont pas maitrisés par les concepteurs d'interface.
Le principe qui prévaut dans les universités, dès la formation initiale, s'applique au modèle de l'entreprise : cloisonnement des disciplines, cloisonnement des métiers...
Les équipes de conception, qu'ils s'agissent des concepteurs de l'interface (User interface design) ou des concepteurs de l'expérience (User experience design), privilégient des travaux d'organisation du catalogue et d'exploration du référentiel produit.

Le concepteur travaille sa maquette fonctionnelle autour d'une logique de boîte générique (boîte dans des boîtes, concept des matriochkas) sans considérer l'activité réelle de l'entreprise. Ce sont les limites du templating... Le designer prévoit l'emplacement pour les ventes croisées, mais faut de parfaitement connaitre le business de son commanditaire, il passe à côté de l'essentiel : les cas réels...

Les équipes de conception ne travaillent pas les logiques d'animation commerciale car elles n'apparaissent pas dans la documentation projet. Les process de conception et de production sont orientés sur le caractère flexible de l'interface, sensé épouser tous les cas de figure...
Les références ergonomiques et les gourous de l'ergonomie exhortent à bien ranger le site : bonne architecture de l'information du catalogue, pages lissées, homogènes. C'est louable.
Mais ce n'est pas ce qui prime dans l'expérience du commerce. Les consommateurs traquent les opportunités... dans une logique d'homo-economicus.

Pourquoi de tels propos ?
Tout simplement parce que les designers privilégient actuellement l'ergonomie au commerce. Les codes de ces deux secteurs ne sont pas 100% compatibles sur tous les points. Il est intéressant, à cet effet, de comparer Amazon et Cdiscount. L'un est piloté par la technologie, l'autre par le commerce. Les deux fonctionnent très bien, mais sur des modèles différents. On loue plus l'ergonomie d'Amazon que celle de Cdiscount, mais qu'en est-il de la maîtrise des codes fondamentaux du commerce ?

Plan d'animation commercial numérique

Avoir un large référentiel de produit au sein de votre site ecommerce n'est pas suffisant pour déclencher des ventes. Il convient de coupler une stratégie d’animation commerciale au catalogue pour décupler les performances de votre support marchand.
Il en va de même pour les portails éditoriaux. Une envergure de contenus importante gagne à être relayée par des animations thématiques (dans ce cas on parle plutôt de calendrier éditorial, ou de plan d'animation éditorial).

L'interface doit avoir la capacité à exposer chaque visiteur à l'animation commerciale (ou l'animation éditoriale) du moment. Cela passe par :

  • Un design agressif (push) pour valoriser l'animation commerciale. On court-circuite ici certaines règles d'ergonomie dans lesquelles les messages intempestifs doivent être proscrits. C'est un exemple de contradiction entre approche commerce et approche ergonomique.
  • Une architecture de l'information adaptative capable de valoriser les items saisonniers de façon très contrastée. C'est rarement le cas.
  • Une mise en scène avancée des animations commerciales au sein de tout le site (semaine du, fête de, X% sûr). Les modèles d'ergonomie sans relief ne valorisent pas efficacement ce type d'incitation.
  • Un rattachement systématique des produits et des articles éditoriaux aux animations commerciales et événementielles.

Il est important de travailler la conception fonctionnelle du dispositif digital sur la base du plan d'animation commercial : le site est le support des animations commerciales. Ce n'est pas les animations commerciales qui doivent rentrer dans le design du site : or, c'est ce trend qui est aujourd'hui à l'oeuvre dans la conception des sites marchands, même les dispositifs transactionnels de grande envergure.
Pour cela, les équipes marketing et les équipes de conception doivent s'entendre sur les typologies d'animation commerciale, leur saisonnalité, leur fréquence, leurs implications en matière commerciale.

Un plan d'animation commercial définit annuellement est un outil puissant pour orienter la conception vers la performance (ou un calendrier d'animation éditorial pour un site de contenus).
Aujourd'hui, ce support est tout à fait anecdotique dans sa capacité à influencer la conception d'un support digital (cf. problématique Commerce vs. Ergonomie)...

Objectifs d'une animation commerciale de site web

Améliorer l'efficacité commerciale du site web

L'animation commerciale de votre site web vise à créer des événements à forts impacts pour capter l'intention des internautes et augmenter les performances du dispositif. C'est la base du commerce.
Mais ce n'est pas la priorité des ergonomes...

Il s'agit de déterminer, sur un axe des temps, pour une période donnée, les actions commerciales et leur étendue. Les opérations marketing hors-ligne et leurs synergies en ligne, ainsi que les campagnes exclusivement en ligne.
Le calendrier des actions commerciales en ligne est un outil de conception aussi important que la définition de persona ou la modélisation des parcours utilisateurs. C'est un élément fondamental dans la performance d'un dispositif marchand ou transactionnel.

Le travail de conception en matière d'animation commerciale porte à la fois sur la définition des animations commerciales, leur mise en place, et les modalités de relais au sein du site. Sur le plan de l'interface utilisateur, les équipes de conception doivent réussir à valoriser fortement les campagnes commerciales :

  • Contraster l'architecture de l'information pour valoriser les animations commerciales.
  • Concevoir des espaces modulaires pour accueillir les opérations marketing.
  • Dynamiser les vitrines et les contenus thématisés.
  • Créer les passerelles avec les mécaniques de relation client et de fidélsation (compte utilisateur, relation client digitale, cagnottage, fidélisation, rewarding).
  • Offrir des espaces pour prolonger les campagnes communicationnelles.
  • [...]

Il n'est pas concevable que les ergonomes continuent à botter en touche pour tout ce qui relève des problématiques commerciales, sous couvert de dogme de l'expérience utilisateur... Les concepteurs d'interfaces et les équipes UX design gagnent à travailler en harmonie avec les équipes du commerce (chef de produit) :

  • Créer des espaces commerciaux événementiels personnalisés.
  • Travailler les ventes complémentaires.
  • Développer les mécaniques de vente des produits dits chewing-gum (à la caisse).
  • Améliorer l'agressivité commerciale sur les assurances et les produits de rassurance (personnellement nous détestons cela, mais c'est un enjeu économique important pour un acteur ecommerce).
  • Approfondir les règles des bundle produits.
  • Concevoir des fiches produits valorisant l'appartenance d'un article à une opération commerciale.
  • Offrir des mises en scènes avancées pour valoriser une opération commerciale au sein de tout le site.
  • Matraquer (!) les produits tête de gondole.

Sur un plan métaphysique, nous avons pu constater que les métiers d'ergonome et de chef de produit ont très peu de points communs...
En résulte des produits conçus par des ergonomes centrés sur l'ergonomie, pour des chefs de produits centrés sur le commerce. Or Commerce et Ergonomie ne font pas toujours bon ménage. C'est important de le souligner, même si personne n'est prêt à l'entendre :).
A quand l'ergonomie commerciale plutôt que le commerce ergonomique (qui ne donne pas de bons résultats) ?

Exemples d'animation de dispositif

animation site web exemple d'animation commerciale
animation commerciale de site web
iafactory - Julien MUCKENSTURM

Méthode pour animer un site web

Planification des actions commerciales pour animer le site

La planification des actions commerciales est une démarche en deux temps.
D'abord, définir toutes les actions commerciales possibles et imaginables (et anticiper celles auxquelles on ne va pas penser :), pour les séquencer dans le temps, tout simplement. Ce travail débouche sur la formalisation du retro planning de l'animation commerciale.
Ensuite, modéliser l'interface en considérant tous les cas de figures... afin d'accueillir avec efficacité ces alléchantes animations commerciales...

L'animation commerciale sur le web est loin d'avoir rejoint le puissance modèle des supermarchés : catalogue promotionnel et trafic en magasin. Le trafic en ligne est aujourd'hui assez mal adressé dans le cas des campagnes d'animation commerciale. Les catalogues promotionnels ne sont pas toujours en synergie avec le site web. On en revient à la difficulté de canaliser les actions commerciales.

La première étape du travail d'animation commerciale consiste à établir le calendrier des actions marketing pérennes dans le temps. Toutes les campagnes qui impactent directement et indirectement le site web doivent figurer dans le plan d'animation commercial.
C'est exactement la même approche qu'utilisent toutes les grandes surfaces de distribution à travers l'animation commerciale en magasin (dans le magasin, et en dehors du magasin avec les catalogues).
Dans le commerce, il y a des fondamentaux :)

  • Solde de début d'année.
  • Pâques.
  • Solde d'été.
  • Rentrée des classes.
  • Période de Noël.

A cela s'ajoute les fêtes immuables du calendrier commercial de la société de consommation :

  • Fête des mères, fêtes des pères, fête des grands-mères.
  • Saint-Valentin.
  • Haloween.
  • ...

Si toutes les entreprises ne sont pas nécessairement concernées par chaque temps fort du calendrier commercial global, il reste un incontournable du travail de planification des actions marketing.
On place les fêtes, les événements et les animations importantes sur un calendrier. On ajoute les événements spécifiques de l'enseigne... Cela donne une vision d'ensemble des grandes actions commerciales sur un axe des temps. C'est une base du commerce.

La démarche n'a rien de révolutionnaire : en revanche, combien de concepteurs considèrent la capacité d'une interface à répondre aux grandes animations commerciales ?
Le problème se situe à ce niveau-là...
Si l'interface doit être en mesure d'apporter des réponses aux différents parcours de visite d'un utilisateur type, elle doit également être en capacité de mettre en scène toute la diversité des animations commerciales...

Les concepteurs ont pris l'habitude de confronter une interface aux scénarios d'usage des personas types d'un support digital. C'est un point positif qui va dans le sens des méthodes de l'UX design. La popularité de l'ergonomie confère aux personas et aux tests d'interface une toute puissance qui n'a pas d'équivalent sur le plan de l'approche commerce.

Or, dans le design d'expérience utilisateur, le flux business est aussi important que le flux utilisateur. Il y a longtemps eu un problème d'équilibre entre le flux business et le flux utilisateur (conception centrée donneur d'ordre). La tendance et la mode UX résolvent actuellement l'équation sur la variable de l'usager, et la balance n'est toujours pas équilibrée...

Animation commerciale et interface utilisateur

Un site marchand efficace se doit de proposer des zones d’animation commerciale, comme le font tous les magasins physiques via l'aménagement des espaces de vente, afin de valoriser certaines catégories de produits et pousser les offres les plus attractives (en fonction du prix, de la saison, d’une opération spécifique…).

Sur le plan de la conception d'interface, vous devez d'abord concevoir tous les espaces fonctionnels classiques. Il convient ensuite de théâtraliser l’animation commerciale pour chacun des espaces fonctionnels.
Sur le plan des méthodes de conception, c'est une différence notoire. En effet, on va considérer que le site ecommerce ou le dispositif marchand doit être en capacité de réagir à une animation commerciale au sein de tous les gabarits du support interactif.

Les impacts en matière de design de l'interaction et de design de l'information sont importants. Sur le plan du design de l'interaction, le concepteur doit considérer une animation commerciale comme un parcours complet. Dans la plupart des cas, une animation commerciale est traitée comme une publicité, avec une redirection vers l'espace en question. C'est loin d'être une logique de parcours... Tout au plus un appel à l'action distillé discrètement au sein d'un ou deux écrans types...
En matière de design de l'information, la ventilation des éléments à l'écran doit être en capacité d'absorber visuellement tout type d'animation commerciale.

  • Habillage transversal aux couleurs de l'animation commerciale.
  • Call to action permanent vers l'accueil de l'animation commerciale.
  • Signalétique de prix, stickers spécifiques, chartage de l'animation commerciale.
  • Module fonctionnel du bundle (lot de produit) capable de répondre aux spécificités de l'opération (2 achetés, 3ème offert. -10% sur le lot X...).
  • Produits chewing-gum.
  • Ventes complémentaires. Cross selling Up-selling.

Démarche pour animer votre dispositif digital

Comme évoqué, en matière d'animation commerciale de site web, il y a deux axes à considérer :

  • Plan d’animation commercial modélisé sous forme de diagramme : c'est le retro planning des actions marketing qui implique un travail stratégique.
  • Maquettage fonctionnel du dispositif digital comme support de l'animation commerciale : conception détaillée des parcours et des écrans.

Les résultats d’une animation commerciale bien conçue :

  • Augmentation des performances transactionnelles du dispositif,
  • Meilleure exposition de l’utilisateur aux messages communicationnels,
  • Conception du site tenant compte des parcours d’achat impulsifs.

Travaux complémentaires à l'animation commerciale

Une pige de toutes les actions emarketing de l'annonceur paraît incontournable : recueil des besoins métier et spécificités marketing.

Un travail d'inventaire des fonctionnalités et une mise à plat de tout le scope fonctionnel du projet doit être effectué pour considérer la capacité de l'interface à supporter efficacement les animations commerciales : inventaire fonctionnel.

Les synergies marketing passent par la création de page d'atterrissage - landing page : conception ux landing page. De même, une mécanique marketing bien ficelée considère les problématiques de fidélisation, ce qui pose la question de la relation client en ligne : conception ux espace client.

Tout cela va de pair avec la modélisation de la conception fonctionnelle des animations commerciales via maquettage des écrans : wireframing.

Ressources pour l'animation commerciale

APPROFONDIR
la conception

Livre : Les éléments de l'expérience utilisateur
les éléments de l'expérience utilisateur

Aller plus loin dans l'animation commerciale

Articles du journal à méditer :

Etudes de cas à lire :

Supports de cours (débutant) à étudier :

Compétences métier pour l'animation commerciale :

Fiche métier :

Plus de techniques de conception
ANIMATION ET MONETISATION
Amélioration des synergies entre vos actions e-marketing et l'interface de votre dispositif digital.
emarketing
ANIMATION ET MONETISATION
Transcription de vos services de relation client en élément d'interface utilisateur dématérialisée.
CRM relation client & interface
CONCEPTION D'INTERFACE
Esquisse d'interface utilisateur, projection des contenus et fonctionnalités à l'écran.
wireframing