Comment augmenter les taux de conversion mobiles pour les boutiques en ligne

Les gens passent plus de temps que jamais sur leur téléphone. Nous les utilisons pour presque tout - effectuer des opérations bancaires, investir, consulter la météo, surveiller les entraînements, écouter de la musique, naviguer et, bien sûr, faire du shopping.

Près de 55 % du trafic sur le site Web provient d'appareils mobiles et 60 % des acheteurs en ligne utilisent leur téléphone pour trouver un produit en premier. Si votre boutique n'offre pas une expérience utilisateur transparente sur mobile, vous risquez de perdre une grande partie de vos clients potentiels.

Mais comment optimiser votre boutique en ligne pour augmenter les conversions mobiles ?

Commencez avec un thème WordPress responsive

Un thème WordPress de haute qualité est le point de départ idéal pour une boutique en ligne réactive. Votre thème est la base de l'ensemble de votre site, alors choisissez-en un qui offre une excellente expérience sur les appareils de toutes tailles.

Voici quelques conseils pour évaluer un thème :

• Testez la démo du thème sur les tablettes et les téléphones. Étant donné que vous ne possédez probablement pas d'appareils dans toutes les tailles d'écran possibles, vous pouvez utiliser un site comme Website Responsive Testing Tool pour simuler l'expérience. Les éléments de démonstration doivent être beaux sur toutes les tailles d'écran - rien ne doit être coupé, difficile à lire ou difficile à utiliser.
• Tout en regardant la démo du thème, redimensionnez la fenêtre de votre navigateur. Le contenu doit s'ajuster en conséquence et rien ne doit être coupé.
• Recherchez les fonctionnalités réactives dans la description du thème. Il doit mentionner spécifiquement « conception réactive » ou discuter de la façon dont le thème s'adapte aux appareils mobiles.
• Exécutez la démo du thème via l'outil de test adapté aux mobiles de Google.
• Vérifiez les avis. Lisez les évaluations et les avis des utilisateurs du thème. Méfiez-vous des commentaires négatifs sur le design réactif.

Il est également important que votre thème s'intègre à WooCommerce. Cela évitera les problèmes de réactivité ainsi que tout autre conflit potentiel.

Le thème Storefront répond à tout ce qui précède et est flexible et facile à personnaliser. De plus, il propose une variété de thèmes pour enfants conçus pour des secteurs spécifiques - mode, jouets, produits numériques, réservations, etc.

Gardez à l'esprit l'utilisabilité mobile

La convivialité est l'efficacité avec laquelle les acheteurs peuvent interagir avec votre site Web. Une mauvaise convivialité affecte négativement les ventes, les conversions, la perception de la marque et le référencement. Lors de l'examen de votre expérience mobile, la convivialité doit être votre priorité absolue. Considérer ce qui suit:

• Pensez avec votre pouce. Les utilisateurs mobiles interagiront avec votre site Web en utilisant uniquement leurs pouces. Tous les éléments cliquables - liens, boutons, éléments de menu, images - doivent être suffisamment grands pour qu'un visiteur du site puisse les appuyer facilement. S'ils sont petits ou trop rapprochés, quelqu'un pourrait cliquer sur le mauvais élément par erreur.
• Évitez les pop-ups et autres distractions. Étant donné que les écrans mobiles sont si petits, il est important de donner la priorité à ce que vous montrez aux visiteurs. Les pop-ups qui couvrent l'intégralité de l'écran mobile peuvent perturber l'expérience de vos utilisateurs et même avoir des effets négatifs sur votre classement dans les moteurs de recherche ; il en va de même pour les publicités et autres notifications. Si vous décidez d'utiliser ce type de contenu, assurez-vous qu'il n'occupe qu'une partie de l'écran et qu'il est facile à ignorer.
• Mettre en place des filtres de produits . Si vous proposez de nombreux produits, un acheteur en ligne devra peut-être faire défiler pendant un certain temps pour trouver ce qu'il recherche. Cela peut être particulièrement difficile sur les écrans mobiles qui n'affichent que quelques produits à la fois. Vos clients pourraient être frustrés et abandonner avant de faire un achat. Les filtres les aident à affiner les sélections en fonction de ce qu'ils recherchent. Essayez une extension comme WooCommerce Product Filters pour fournir une fonctionnalité de tri.
• Utilisez des polices suffisamment grandes . Si le texte de votre site Web est trop petit, il peut être très difficile pour les utilisateurs mobiles de lire quoi que ce soit - ils ne devraient pas avoir à pincer et à zoomer pour en savoir plus sur vos produits. En fonction de votre site et de vos choix de polices, vous devrez peut-être définir différentes tailles de police pour les appareils mobiles.
• Décomposez le texte. Si vous avez des pages contenant beaucoup d'informations, divisez-les en segments plus petits qui facilitent la navigation sur de petits écrans. Vous pouvez le faire avec des accordéons, des bascules ou des puces. Dans les longs articles de blog, ajoutez des liens vers des sous-sections qui permettent aux utilisateurs d'accéder directement à des sujets intéressants.

Simplifiez la page de paiement

Bien que les achats sur les appareils mobiles aient considérablement augmenté au fil des ans, les conversions ne sont pas si importantes. En fait, le taux de conversion moyen du commerce électronique sur mobile n'est que de 2,03 %, contre 3,83 % sur ordinateur.

Votre processus de paiement joue un rôle essentiel dans la réalisation des ventes. Rendez-le aussi simple que possible sur les appareils mobiles pour améliorer les taux de conversion. S'il faut trop de temps à vos clients pour effectuer un achat, ils abandonneront et achèteront ailleurs.

Supprimer les champs inutiles

Commencez par examiner de près les informations dont vous avez besoin pour passer à la caisse. Est-ce que tout est nécessaire ? Vous constaterez probablement qu'il existe des champs que vous pouvez supprimer :

• Si vous ne vendez pas à des entreprises, supprimez le champ Nom de l'entreprise.
• Si vous ne pouvez pas penser à un scénario dans lequel vous pourriez avoir besoin d'appeler vos clients, supprimez le champ Téléphone.
• Si vous n'acceptez pas les notes, supprimez le champ Notes de commande.

Moins il y a de champs, mieux c'est, surtout sur mobile. En savoir plus sur la personnalisation des champs de paiement WooCommerce.

Autoriser le paiement en tant qu'invité

Les comptes clients sont excellents et accélèrent le paiement pour les acheteurs qui reviennent en remplissant automatiquement leurs informations et en enregistrant les données de leur carte de crédit. Mais qu'en est-il des nouveaux clients ?

Tout le monde ne souhaite pas créer un compte sur votre boutique, en particulier sur les appareils mobiles où ils souhaitent payer le plus rapidement possible. En fait, on pense que l'exigence de comptes clients contribue à 35% des paniers abandonnés.

Pour autoriser le paiement en tant qu'invité avec WooCommerce :

1. Accédez à WooCommerce → Paramètres → Comptes et confidentialité.
2. Sélectionnez Autoriser les clients à passer une commande sans compte.
3. Cliquez sur le bouton Enregistrer les modifications en bas de la page.

Découvrez comment déterminer si le paiement en tant qu'invité convient à votre magasin.

Accepter la connexion sociale

Vos clients sont probablement connectés à des comptes de médias sociaux sur leurs appareils mobiles. L'activation de la connexion sociale sur votre site leur permet de se connecter à l'aide de Facebook, Twitter, Google, Amazon, etc. pour simplifier le paiement et les empêcher d'avoir à créer un nouveau compte.

Activez la connexion sociale WooCommerce.

Accepter plusieurs options de paiement

Accepter plus d'un mode de paiement accélère le paiement. Bien que vous puissiez également autoriser les transactions par carte de crédit, l'activation d'options telles que PayPal ou Amazon Pay permet aux clients de payer en utilisant des comptes existants plutôt que de retirer une carte de crédit et de saisir tous les détails.

Voir les intégrations de la passerelle de paiement WooCommerce

Faites en sorte que les champs de paiement soient suffisamment hauts

Il est important que les clients puissent facilement remplir les champs de paiement sur votre site. Assurez-vous que les champs sont suffisamment hauts pour qu'ils puissent taper et remplir des informations sans avoir à zoomer. Vous pouvez le faire avec un simple CSS.

Commencez par utiliser l'inspecteur du navigateur sur votre page de paiement. Cela vous aidera à identifier la classe de chaque champ individuel. Ensuite, utilisez le code suivant pour chaque classe spécifique ; le champ E-mail est utilisé dans cet exemple.

 /** Customize height of checkout fields **/ input[type='email'].input-text{ padding: 100px !important; }

Ajustez le rembourrage en fonction de votre site spécifique et des paramètres actuels ; vous devrez peut-être jouer un peu pour trouver ce qui fonctionne. Vous pouvez également personnaliser les appareils spécifiques auxquels ce code s'applique en utilisant des requêtes multimédias.

Remarque : si vous n'êtes pas familier avec le code et la résolution de conflits potentiels, vous pouvez sélectionner un WooExpert ou un développeur pour obtenir de l'aide. Nous ne sommes pas en mesure de fournir une assistance pour les personnalisations dans le cadre de notre politique d'assistance.

Modifier les pages de produits

Il est important que vos pages de produits individuelles soient également réactives. Les clients doivent pouvoir lire les détails du produit, parcourir les photos et ajouter des articles à leur panier.

Rendre le bouton Ajouter au panier collant

Un bouton collant Ajouter au panier suit un acheteur sur la page lorsqu'il lit les informations sur le produit. S'ils sont convaincus d'acheter, ils n'ont pas à remonter jusqu'en haut pour effectuer un achat. En fait, il a été démontré qu'un bouton collant Ajouter au panier augmentait les commandes de 7,9 % ! Ajoutez ce CSS pour rendre votre bouton collant sur les appareils mobiles :

 /** Make the Add to Cart button sticky **/ @media only screen and (max-width: 900px) { .cart { position: fixed; bottom: 0; background: #ffffff; width: 100%; z-index: 3; } }

Vous devrez peut-être jouer un peu avec le CSS, en fonction de votre thème et de la conception de votre site Web. Mais si vous ne souhaitez pas modifier le code, vous pouvez également utiliser un plugin comme Sticky Add to Cart for WooCommerce.

Rendre les images intuitives

Lorsque les acheteurs arrivent sur une page de produit, ils s'attendent à pouvoir balayer votre galerie d'images pour voir plus de photos et utiliser leurs doigts pour zoomer sur un article. Ces gestes mobiles sont si intuitifs qu'ils sont effectués presque inconsciemment. Assurez-vous que votre site les prend en charge.

Ajoutez des flèches ou des points pour indiquer qu'il y a plusieurs photos. Sinon, vos utilisateurs mobiles pourraient même ne pas savoir qu'ils peuvent balayer !

Prioriser les informations importantes

Assurez-vous que les clients peuvent afficher les informations critiques sur les produits sans avoir à faire défiler très loin. Privilégiez les prix, les variations (couleur, taille, etc.), les remises, les avis et autres détails spécifiques à vos produits : si vous vendez des vêtements, la matière peut être importante. Ou si vous êtes un magasin d'électronique, vous voudrez peut-être mettre en évidence la garantie qui accompagne chaque achat.

Des informations supplémentaires telles que les descriptions complètes des produits et les spécifications (instructions de lavage, SKU, ingrédients, etc.) peuvent tomber plus bas sur la page. De cette façon, si vos clients veulent plus d'informations, ils peuvent facilement les trouver, mais s'ils ne sont satisfaits que de l'essentiel, ils ne seront pas submergés.

Simplifiez votre menu mobile

Gardez votre menu principal sur les appareils mobiles aussi simple que possible. Une longue liste de pages submergera et confondra les visiteurs du site. Réduisez-le à l'essentiel, puis hiérarchisez l'ordre dans lequel ils sont répertoriés, avec les pages les plus importantes en premier.

The Good Batch raccourcit son menu mobile pour n'inclure que cinq pages en plus des liens de connexion et de panier. C'est simple et précis.

Si vous devez inclure un grand nombre de pages, essayez d'utiliser des sous-menus avec des bascules extensibles. Limitez les éléments de menu principal et affichez les éléments de sous-menu lorsqu'un utilisateur les développe. Assurez-vous d'utiliser des symboles comme des flèches pour indiquer qu'un menu se développe !

Nuria propose cinq éléments de menu principaux sur mobile avec des flèches à côté de chacun, indiquant qu'il y a plus d'options. Lorsqu'un utilisateur clique, le menu principal glisse pour révéler un sous-menu avec un bouton "retour" clair. Cela leur permet d'afficher toutes les options nécessaires sans submerger leurs clients.

Il existe plusieurs façons d'afficher les menus mobiles, alors choisissez celle qui convient le mieux à votre public. Ils comprennent:

• Une carte de hamburgers . Le symbole du hamburger est composé de trois lignes empilées verticalement les unes sur les autres. Le menu est caché jusqu'à ce qu'un utilisateur clique sur le symbole. C'est une excellente option pour les sites avec beaucoup de pages, mais peut être plus difficile à trouver pour les visiteurs du site.
• Un menu à onglets . Cela ressemble beaucoup à la navigation de bureau typique et répertorie les éléments de menu horizontalement en haut du site. Cela ne devrait être utilisé que pour les menus avec un minimum de liens ; les utilisateurs ne devraient pas avoir à zoomer ou à faire défiler pour afficher tous les éléments.
• Un bouton d'action flottant . Un bouton avec une icône de menu flotte sur la page et suit un utilisateur lorsqu'il fait défiler. Lorsque vous cliquez dessus, il se développe pour afficher le menu. C'est un bon moyen de garder votre menu principal accessible, mais cela peut distraire ou dissimuler du contenu.
• Un menu déroulant . Une barre de menu en haut de la page s'ouvre lorsque vous cliquez dessus pour révéler les options de la page. Il prend un peu plus de place que le menu hamburger mais peut être plus facilement vu par les visiteurs du site.

En règle générale, votre thème comprendra des styles de menu réactifs. Si ce n'est pas le cas, ou si vous souhaitez opter pour une autre option, consultez ces plugins :

• Menu mobile WP
• MajNav
• Menu réactif

Quelle que soit l'option que vous choisissez, assurez-vous qu'elle est facile à utiliser pour vos clients et qu'elle répond à leurs besoins. Et rappelez-vous, cela peut signifier créer un menu mobile entièrement séparé !

Rendre les fonctionnalités importantes faciles à trouver

Avec l'espace d'écran limité sur les appareils mobiles, il est facile de perdre des objets. Assurez-vous que les visiteurs peuvent trouver rapidement les fonctionnalités critiques.

Rendre la barre de recherche visible

De nombreux sites Web incluent un champ de recherche dans leur barre latérale, mais il est généralement placé en bas de la page sur les appareils mobiles. La fonctionnalité de recherche dans l'en-tête de votre bureau peut ne pas tenir dans le même espace sur un téléphone. Mais il s'agit d'une fonctionnalité essentielle pour les acheteurs en ligne, qui peuvent bénéficier de la possibilité de rechercher le produit qu'ils souhaitent.

Une excellente solution consiste à inclure la barre de recherche dans votre menu mobile, où elle est facilement visible pour les acheteurs. Certains thèmes offrent un paramètre pour cette fonctionnalité, mais si le vôtre ne le fait pas, vous pouvez obtenir la même chose en utilisant un code personnalisé.

Ouvrez votre fichier header.php et ajoutez la fonction suivante : <?php get_search_form(); ?> <?php get_search_form(); ?> . Ensuite, vous pouvez le styliser selon vos besoins en utilisant CSS.

Et si vous ne voulez pas toucher au code, un plugin comme Ivory Search réalise la même fonctionnalité.

Afficher clairement les informations de contact

Si vous incluez des informations de contact dans un pied de page ou une barre latérale, les utilisateurs mobiles auront du mal à les visualiser car ils doivent faire défiler la page jusqu'en bas. Contrez cela avec un lien visible vers votre page de contact dans le menu.

Vous pouvez également inclure un numéro de téléphone et/ou une adresse e-mail cliquables dans votre menu principal afin que les utilisateurs puissent facilement entrer en contact. Pour faire ça:

1. Accédez à Apparence → Menu dans votre tableau de bord WordPress.
2. Dans le menu déroulant à côté de "Sélectionner un menu à modifier", choisissez le bon menu. Ce serait soit votre menu principal, soit votre menu mobile, selon la façon dont vous avez configuré les choses.
3. Développez Liens personnalisés dans la colonne de gauche.
4. Dans la zone URL , ajoutez le lien approprié. Pour un numéro de téléphone, ajoutez tel:+18005553927, en remplaçant les chiffres par votre numéro. Assurez-vous qu'il n'y a pas d'espaces ou d'autres symboles. Pour une adresse e-mail, ajoutez mailto:[email protected].
5. Dans la zone Texte du lien , ajoutez le texte qui s'affichera sur votre menu. Par exemple, vous pouvez dire « Appelez-nous » ou « Appelez le 800-555-3927 ».
6. Cliquez sur le bouton Ajouter au menu et faites glisser jusqu'à l'emplacement de votre choix.
7. Cliquez sur le bouton bleu Enregistrer le menu dans le coin inférieur droit.

Lorsqu'un utilisateur clique sur le numéro de téléphone sur son appareil mobile, il vous appelle automatiquement. Lorsqu'ils cliquent sur votre adresse e-mail, un nouvel e-mail vous est ouvert dans leur application de messagerie par défaut.

Rendre le chariot facilement accessible

Si un client souhaite poursuivre ses achats après avoir ajouté un produit à son panier, il est important qu'il puisse modifier ce panier et régler plus tard.

Le plugin Mini Cart pour WooCommerce ajoute une option de panier aux versions de bureau et mobile de votre site Web. Sur le bureau, le panier comprend les noms des articles, les photos et les prix, et permet aux acheteurs de modifier les quantités sans quitter la page. Sur mobile, il indique le nombre d'articles dans son panier et le total de la commande. De plus, les acheteurs peuvent accéder à la page Panier en un clic.

Concentrez-vous sur la vitesse du site Web

Bien que la vitesse du site Web soit importante sur n'importe quel appareil, elle l'est sans doute davantage pour les petits appareils. Les acheteurs mobiles utilisent souvent des connexions Internet ou des données cellulaires plus lentes pour naviguer, vous devez donc faire tout votre possible pour vous assurer que votre site se charge le plus rapidement possible. 53 % des mobinautes abandonnent un site s'il met plus de trois secondes à se charger, et la nouvelle indexation mobile de Google donne la priorité à la version mobile de votre site Web.

Commencez par comprendre le temps de chargement actuel de votre site. GTMetrix et Pingdom Website Speed ​​Test peuvent vous aider à comprendre la vitesse de votre site et vous proposer des recommandations d'amélioration. Google PageSpeed ​​Insights propose même un test spécifiquement pour les appareils mobiles.

Ensuite, utilisez les ressources suivantes pour optimiser votre site :

• Comment optimiser les images pour accélérer votre boutique en ligne
• Premières choses à considérer avec WooCommerce et la vitesse
• Pourquoi mon site WooCommerce est-il lent et comment y remédier
• Comment obtenir un score de performance élevé sur Google PageSpeed ​​Insights pour WooCommerce
• Accélérez votre site WooCommerce avec ces fonctionnalités Jetpack

Vous pouvez également envisager d'activer AMP (Accelerated Mobile Pages), un cadre conçu par Google pour créer des expériences mobiles légères et rationalisées. C'est un excellent moyen d'accélérer les publications de blog, en particulier pour certaines boutiques en ligne. En savoir plus sur l'amélioration de la vitesse du site avec AMP.

Testez votre boutique en ligne sur mobile

Il est important de tester régulièrement votre boutique et de comprendre comment tout fonctionne sur les appareils mobiles. Le processus pour votre site est similaire aux étapes répertoriées ci-dessus pour tester les démos de thèmes - utilisez une combinaison d'outils tels que le test adapté aux mobiles de Google et des méthodes manuelles telles que le redimensionnement de la fenêtre de votre navigateur.

Testez tout ! Cliquez sur chaque lien ; faire défiler chaque page ; et vérifiez chaque élément de fonctionnalité. Tous les aspects de votre site doivent être faciles à afficher, à lire et à naviguer sur les téléphones et les tablettes.

Quelques petits changements sur mobile peuvent faire une grande différence dans la satisfaction des clients et les conversions. Vous cherchez plus de conseils ? Lisez Comment débloquer la puissance de WooCommerce sur mobile.