image

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

image
Bérengère Noël
28 avril 2020

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de tout bon site e-commerce (et à fortiori m-commerce). Son objectif est quadruple, générer du trafic (SEO), se distinguer de la concurrence, rassurer l’acheteur potentiel et convaincre ce dernier de procéder à l’achat.

Lorsque son contenu est clair et exhaustif, le titre d’une fiche produit e-commerce influence favorablement l’acte d’achat

Le titre de la fiche produit doit décrire cette dernière de façon claire et exhaustive. L’acheteur potentiel doit être en mesure de trouver le produit facilement depuis les résultats de recherche de Google. La compétition avec vos concurrents commence avant même que l’acheteur ne se rende sur votre site. Si le titre de la fiche produit n’est pas assez précis ou bien s’il ne correspond pas aux recherches de vos acheteurs potentiels, vous courrez le risque de générer beaucoup de rebond ainsi qu’un taux de conversion insatisfaisant. Pour éviter cela, le contenu de la balise title doit être compléter avec soin.

Elle peut contenir les mots-clés principaux de la page:

  • le nom du produit,
  • des informations importantes sur le produit,
  • numéro de modèle,
  • le cas échéant le nom de la marque.

Focus : La grande force d’Amazon, est l’utilisation de titre d’environ 100 caractères avec une description très fournie, leur permettant ainsi d’être extrêmement bien référencé avec un SEO très pointu.

Le soin apporté aux visuels influence la prise de décision et permet à l’internaute de comprendre facilement dans quel contexte il peut utiliser le produit

Il ne faut pas oublier que votre client achète un produit avant même de l’avoir vu, touché ou testé. Une fiche produit n’a pas le même caractère émotionnel et spontané qu’un achat réel. Dans ce contexte, les visuels ont pour mission de valoriser le produit et de permettre de se rapprocher au plus près de la réalité. Pour permettre à l’utilisateur une consultation optimum, vous pouvez proposer :

  • de zoomer en avant et en arrière,
  • de voir le produit en situation réelle (porté, manipulé)
  • d’avoir plusieurs angles de vue attrayants,
  • de visionner une vidéo d’utilisation du produit
  • de simuler l’utilisation du produit en réalité augmentée (ex: lunette)
  • ou également une visualisation en 3D

Les 6 facteurs clefs de succès qui favorisent les clics sur les CTA

L’utilisateur doit détecter rapidement votre CTA (Call To Action ou bouton d’incitation à l’action), car il s’agit de l’action que vous souhaitez qu’il réalise. Grâce à son affordance, capacité à rendre un objet ou un service “intuitif”, il doit évoquer son utilisation et sa fonction d’un seul coup d’oeil. Il est donc important que cet élément interactif apparaisse comme cliquable. Voici les 6 facteurs clefs de succès d’un bon CTA :

  1. La forme : la forme doit être évocatrice, en effet, le CTA peut sembler plus facilement cliquable lorsqu’on lui ajoute un effet d’ombre et des bords arrondis.
  2. La visibilité : placer dans la mesure du possible votre bouton là où les utilisateurs peuvent facilement le trouver et ou ils s’attendent à le voir. Il est recommandé de placer le CTA au dessus de la ligne de flottaison, autrement dit la partie visible de l’écran à l’ouverture, mais également dans une zone facilement atteignable. Il faut également laisser suffisamment d’espace autour, afin d’éviter que le CTA soit noyé dans le reste du contenu de la page.
  3. Le wording : le choix du message est aussi très important. Il doit permettre à l’utilisateur de comprendre la promesse et l’action qui va découler lorsqu’il va cliquer. Les verbes d’action tels que “Acheter” ou” Commander” sont à éviter au profit d’une meilleure contextualisation, exemple : “Ajouter au panier” ou “Ajouter aux favoris”.
  4. La taille : Material Design de Google suggère que les CTA soient de 48 x 48 pixels (px), cependant les guidelines d’Apple recommandent une taille de 44 x 44 px. Il s’agit d’une taille minimale et indicative, il est donc important de challenger l’ensemble du contenu pour en optimiser l’impact.
  5. La couleur : lors du choix des couleurs, il est essentiel de garder à l’esprit que le bouton et les couleurs d’arrière-plan doivent être suffisamment contrastés de telle sorte que le CTA se démarque suffisamment du reste de l’interface. Il est primordial de tester le contraste du texte et du fond, afin de rendre votre bouton accessible aux utilisateurs en situation de mobilité. Exemple: la lumière qui se diffuse sur l’ écran de téléphone qui gêne l’utilisateur. Des nouveaux usages tels que le dark mode poussent également les concepteurs à travailler des contrastes plus prononcés notamment lors de consultations dans des contextes à faible luminosité.
  6. Le feedback : la confirmation d’une action permet de signifier aux utilisateurs que son action a bien été prise en compte. Par exemple : l’utilisation d’une animation qui confirme l’ajout du produit au panier dans le header. Dans les bonnes pratiques historique de l’HTML, les différents états du bouton doivent aussi être travaillés, l’état standard par défaut, de survol, d’actif et d’inactif. Cependant il est important de se rappeler que le mobile ne permet pas d’effet au survol, comme l’autorise l’usage de la souris sur desktop.

Convaincre un client potentiel, c’est le rassurer en fournissant 7 caractéristiques clés qui vont déclencher l’achat

Pour rassurer le client, il faut fournir les informations clés sur ce qu’ils s’apprêtent à acheter. En complément de la balise title, les informations contenues dans la fiche doivent rassurer mais aussi inciter le visiteur à passer à l’acte d’achat. Les informations principales doivent être au dessus de la ligne de flottaison et être consultable rapidement et facilement. Cependant l’interface mobile est un espace relativement contraint. il faut donc veiller à ne pas alourdir inutilement la charge mnésique de l’utilisateur, sans quoi elle pourra avoir un impact négatif sur la transformation.

  1. Le tarif : le prix est un élément décisif dans tout acte d’achat, soyez clair sur le prix et les remises correspondantes. N’oubliez pas de préciser la TVA si le site a une vocation essentiellement B2B. Les promotions, codes promos et remises peuvent aider à la transformation, il est donc important que l’utilisateur sache les repérer rapidement.
  2. La description du produit : la description de votre produit est essentielle pour le positionnement de votre e-commerce. On retrouve idéalement une description courte et une description longue. La première résume brièvement, avec un ton commercial, les points forts et les arguments de vente du produit. La seconde, quant à elle, a une optique plus SEO utilisant du vocabulaire plus riche, basé sur vos principaux mots-clés. Elle met également en avant les différentes fonctionnalités et avantages du produit. Comptez à partir de 200 mots pour un texte efficace. Nous recommandons, de rester prudent dans l’utilisation des accordéons pour la description afin de ne pas prendre le risque de nuire à l’indexation du contenu.
  3. Les variantes : Il est nécessaire de mettre en avant les qualités intrinsèques du produit (bio …). Il convient également d’afficher toutes les variantes du produit, distinguer celles qui ne sont plus disponibles (exemple: tailles, couleurs…).
  4. La disponibilité : Il est nécessaire d’afficher la disponibilité en magasin ou en ligne et le cas échéant, lorsqu’il est possible de changer de magasin.
  5. Les services : mise en avant d’un SAV, des partenaires bancaires, des partenaires de livraison, des coûts et délais de livraison ainsi que la politique de remboursement sont des éléments clefs propices à rassurer le consommateur.
  6. Les avis clients, chat ou forum : La mise en avant de témoignages et avis clients authentiques est une valeur-ajoutée importante pour le consommateur. C’est pourquoi, il est conseillé de répondre aux avis, afin de le rassurer et de conforter l’acte d’achat.
  7. LA FAQ : Si l’utilisateur souhaite davantage d’informations, il faut donner accès à la FAQ et au conditions de contact. Attention toutefois, la FAQ ne doit pas devenir un four tout qui peut nuire à la qualité du SEO.

À quel moment faut-il envisager la diffusion de ventes additionnelles ?

Envisagées comme un complément d’information et pouvant être mis en place dans le tunnel de commande, les ventes additionnelles peuvent être utilisées suite à une action produit.

On distingue différents types de ventes additionnelles :

  1. Le cross-selling : proposition de produits ou accessoires complémentaires.
  2. L’up-selling : proposition de produits supérieurs à celui que le client vient de choisir.

En conclusion, une bonne fiche produit doit toujours s’appuyer sur des tests utilisateurs

Les tests utilisateurs pendant et après la conception vous permettent d’être certains que les fonctionnalités que vous mettez en place sont appréciés par votre clientèle et augmentent votre chiffre d’affaire. Il n’y a pas de solution toute faite, ni d’acquis. Si vous voulez vous assurer que quelque chose fonctionne, vous devez le tester et recommencer. Ainsi, vous pourrez savoir si vos décisions que vous avez prise en matière de conception sont pertinentes et le restent. C’est pourquoi nous recommandons de vous engager dans une démarche d’amélioration continue afin de faire évoluer votre service en fonction des usages et d’être au fait d’éventuelle évolution.

image
image
Bérengère Noël
28 mai 2020
Design . Mobile

Marketing #1 Comment augmenter l’engagement de vos clients et de vos utilisateurs grâce aux mécanismes de gamification ?

Dans le domaine du web et des applications mobiles, la gamification, consiste à exploiter des mécanismes issus de l’univers du jeu dans d’autres domaines, comme des applications ou des sites internet. Elle vise à capter l’attention de l’utilisateur dans un processus de récompenses lui donnant envie de continuer et d’y revenir régulièrement. Le jeu et […]
image
image
IKOMOBI
26 mai 2020
Stratégie

Après le confinement : comment faire pour réussir sa transformation digitale ?

La mise en quarantaine d’une large partie de nos entreprises et services publics, bien que imprévisible, raisonne comme un coup de semonce pour chaque dirigeant, notamment vis à vis du niveau de “digitalisation” de son entreprise. Pour les entreprises à maturité digitale plutôt élevée, cette situation s’est transformée en stress test impromptu, impitoyable révélateur des dysfonctionnements […]
image
image
Bérengère Noël
5 mai 2020
Design

Design #2 Quelles bonnes pratiques faut-il privilégier lors de la conception d’un formulaire en ligne ?

Le formulaire est bien souvent l’étape clé d’un parcours utilisateur : paiement en ligne, création de compte, prise de contact, etc. Un formulaire mal conçu génère de nombreux irritants et pénalise la qualité générale d’une expérience utilisateur. Par conséquent, il convient de maîtriser les bonnes pratiques correspondantes et concevoir des formulaires qui ne comportent aucun […]
image
image
Bérengère Noël
28 avril 2020
Design . Mobile

Design #1 En e-commerce, quelles bonnes pratiques faut-il adopter sur mobile pour proposer des fiches produits qui vont déclencher l’acte d’achat ?

Le mobile est définitivement devenu le point central de la relation client. Il répond aux besoins d’immédiateté des consommateurs. Ces derniers veulent être en mesure de vivre une expérience d’achat sans couture autrement dit sans frein ni obstacle, quelque soit le lieu ou le moment. Dans ce contexte, la fiche produit est l’élément central de […]
image
image
Équipe iOS
23 avril 2020
Mobile . Technologie

TechnIKO #2 Migration UIWebview vers WKWebview

UIWebview vs WKWebview UIWebview est un composant d’interface permettant d’afficher du contenu HTML directement dans une application. C’est un composant déjà ancien puisqu’il est apparu avec iOS 2. Il est fortement présent au sein de nos applications pour, par exemple, afficher le contenu des FAQ, des CGV, le tunnel de commande, la création de compte […]
image
image
Équipe Android
20 avril 2020
Mobile . Technologie

TechnIKO #1 Appeler une méthode Javascript dans une Webview via Kotlin

Le TechnIKO, c’est quoi ? Chez IKOMOBI, nos experts sont tous les jours confrontés à des problématiques nouvelles qui les amènent à concevoir des solutions innovantes pour nos clients. Grâce à TechnIKO nous allons vous faire découvrir les coulisses de ces différentes innovations, au travers notamment la diffusion des techniques et méthodes de développements chères […]
image
image
Florian Hureau
23 décembre 2019
Actualités

IKOMOBI News #6 : Spotify, Youtube Ads, 5G, voice, Dior, mèmes et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « 圣诞老人到了! » D’où vient cette citation ? Scrollez au bas de l’article pour voir la source 😉 2019 Wrapped : Spotify donne un aperçu de l’usage des données personnelles pour les années à venir La fin […]
image
image
Florian Hureau
3 décembre 2019
Actualités

IKOMOBI News #5 : Tesla, Black Friday, TikTok et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. “La reconnaissance faciale va protéger les droits et intérêts légitimes des citoyens contre les escroqueries et les inscriptions frauduleuses.” D’où vient la citation de la semaine ? Scrollez au bas de l’article pour voir […]
image
image
Florian Hureau
19 novembre 2019
Actualités

IKOMOBI News #4 : Disney+, WeChat, Motorola et autres actualités digitales

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. « L’informatique doit être au service de chaque citoyen. Elle ne doit porter atteinte ni à l’identité humaine, ni aux droits de l’homme, ni à la vie privée, ni aux libertés individuelles ou publiques. » D’où […]
image
image
Équipe Android
7 novembre 2019
Technologie

London droidcon 2019 : l’incontournable grand-messe européenne des développeurs d’applications mobiles Android

Les 24 et 25 octobre derniers, deux représentants de notre équipe de développement Android se sont rendus, à Londres, à la droidcon 2019 pour faire le plein de nouveautés techniques à propos de leur plateforme fétiche. Reportage. À peine sortis de l’Eurostar, nous prenons le métro londonien pour rejoindre le Business Design Centre qui héberge […]
image
image
Florian Hureau
5 novembre 2019
Actualités

IKOMOBI News #3 : l’actualité digitale via le prisme de l’agence mobile

Chaque sprint (toutes les 2 semaines), retrouvez les infos UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI. Adobe Photoshop sur iPad : fin de la version bêta La vingt-et-unième mouture de cet éditeur d’image comporte son lot de nouveautés portant sur l’amélioration continue des centaines (milliers ?) d’outils qu’il propose : […]
image
image
Florian Hureau
15 octobre 2019
Actualités

IKOMOBI News #2 : l’actualité digitale via le prisme de l’agence mobile

L’actualité UX design, transformation digitale, développement mobile, web et marketing mobile par IKOMOBI Mastercard, Stripe, eBay et Visa quittent Libra, la monnaie virtuelle de Facebook Après les interrogations voire réticences de nombreux gouvernements à travers le monde, ce sont maintenant ses partenaires historiques qui font faux bond au projet Libra. Tour à tour et à […]