Comment concevoir des pages de produits mobiles pour augmenter les ventes


Conception • Conception de sites WebSuzanne Scacca • • 12 minutes de lecture

Le e-commerce mobile a connu une ascension fulgurante ces dernières années. Et selon des données récentes, les experts prédisent que la grande majorité des ventes en ligne se fera via les smartphones d'ici 2021.

Plus précisément, on pense que 72,9% des revenus du e-commerce proviendront des consommateurs mobiles.

Compte tenu de ce que nous savons de l'augmentation du trafic des moteurs de recherche mobiles et de la manière dont Google a modifié la façon dont il indexe le Web à cause de cela, la conception de commerce électronique mobile est plus importante que jamais.

Malheureusement, jusqu'à récemment, la tendance était que les sites de m-commerce se convertissent à un taux beaucoup plus bas que leurs homologues de bureau (malgré le plus grand nombre de visiteurs). Les données récentes de Monetate décomposent les taux de conversion mobile et bureau du monde entier:

Taux de conversion mobile et bureau

Donc, aujourd'hui, nous allons nous concentrer sur la conception de pages de produits mobiles. Si nous pouvons éliminer les frictions, l'anxiété et les craintes qui affectent souvent les acheteurs mobiles, nous pouvons concevoir des sites de commerce électronique prêts à capturer davantage de ces revenus provenant des smartphones.

Conception de pages de produits mobiles pour augmenter les ventes

Les pages de produits mobiles jouent un rôle central pour convaincre les acheteurs de placer des articles dans leur panier. Lorsqu'ils sont bien conçus, ils peuvent également jeter les bases d'un processus de paiement plus fiable, ce qui contribuera à augmenter les taux de conversion de votre site Web.

Générateur de modèles d'e-mails en ligne

Avec Postcards, vous pouvez créer et modifier des modèles d'e-mails en ligne sans aucune compétence en codage! Comprend plus de 100 composants pour vous aider à créer des modèles d'e-mails personnalisés plus rapidement que jamais.

Essayez gratuitementAutres produits

Voici 10 choses que vous pouvez faire:

Vous n'avez pas toujours l'impression de disposer de suffisamment d'espace pour travailler sur les smartphones, en particulier sur les sites de commerce électronique où la navigation joue un rôle important dans le transfert des acheteurs vers différents services et produits. Nous devons donc trouver un terrain d'entente.

Une chose que vous pouvez faire est de réduire l'en-tête lorsque les acheteurs sont sur les pages de produits. De cette façon, ils auront toujours le panier en vue, mais la barre complète ne prendra pas autant de place.

Une meilleure solution, cependant, consiste à masquer complètement l'en-tête lorsque les visiteurs font défiler la page. De cette façon, vous n'avez pas à faire de compromis sur la taille de vos photos de produits ou sur la quantité d'informations que vous placez dans chaque section.

Les marchandises peu communes en sont un bon exemple. Voici ce que voient les acheteurs lorsqu'ils accèdent pour la première fois à une page produit:

Comment concevoir des pages de produits mobiles pour augmenter les ventes

Il s'agit d'un superbe instantané du produit, même avec la barre d'en-tête et la navigation en plein écran.

La navigation dans le fil d'Ariane au-dessus de la photo du produit est une autre touche intéressante. De cette façon, si un acheteur décide rapidement "Ce n'est pas pour moi", il peut facilement revenir en arrière dans les catégories associées et essayer de trouver un article qui lui convient mieux que de recommencer.

Une fois que l'acheteur commence à faire défiler la page sur le site Produits rares, la barre du haut disparaît et voici ce qu'il leur reste:

Conception de pages de produits mobiles

Non seulement cela crée plus d'espace, mais cela offre également une expérience de défilement sans distraction. Cela peut être un énorme soulagement pour les acheteurs qui sont devenus trop habitués à être attirés loin de ce qu'ils regardent par une surabondance d'options et de FOMO.

Offrir une expérience de lecture de produit sans en-tête augmentera leur attention afin qu'ils puissent cliquer avec plus de confiance sur le bouton "Ajouter au panier" et acheter ce qu'ils recherchent.

2. Inclure les détails essentiels au-dessus du pli

Encore une fois, cette idée d'essayer de ne pas submerger les acheteurs lorsqu'ils consultent les pages de produits est énorme. Il est donc très important de n'inclure que les détails les plus essentiels au-dessus du pli, puis de laisser le reste de la page se développer sur le reste.

La manière dont vous décidez de ce que vous souhaitez placer en haut de vos pages de produits mobiles dépend de ce qui est le plus important pour vos acheteurs.

Par exemple, H&M fournit ces détails de base:

  • Navigation dans le fil d'Ariane
  • Image principale du produit (avec une icône en forme de cœur pour l'enregistrement en un clic dans les favoris)
  • Le nom du produit
  • Le prix (et le prix membre)
  • Sélecteur de taille
  • Bouton "Ajouter"
Inclure les détails essentiels au-dessus du pli

Cela seul donne aux acheteurs un excellent aperçu du produit. Il ne suffira peut-être pas de les vendre en achetant le pantalon, mais cette introduction et ce résumé bien organisés du produit donnent une première impression vraiment forte.

Macy’s, en revanche, consacre la moitié supérieure à des détails tels que:

  • Navigation dans le fil d'Ariane
  • Nom du produit
  • Description du produit
  • Nombre moyen d'étoiles et nombre d'avis
  • Offre de livraison gratuite
  • Image du produit
Navigation dans le fil d'Ariane

Bien qu'elle ne soit pas aussi claire et concise que la page produit de H&M, elle fait un bon travail, y compris les détails clés de la prise de décision – l'évaluation du produit ainsi que l'offre de livraison gratuite.

En apprenant à mieux connaître votre public cible, vous saurez quels détails sont les plus importants pour les acheteurs à voir en un coup d'œil (par exemple, la disponibilité en magasin, les seuils de livraison gratuite, le prix soldé, etc.).

3. Fournir des images claires et pertinentes des produits

La plupart des sites Web ne sont pas équipés d'une cabine d'essayage de réalité virtuelle ou d'un essai de réalité augmentée. Cela fait des images de produits une partie très importante du processus de vente dans le commerce électronique, ce qui signifie que les concepteurs doivent faire attention à la façon dont ils les présentent.

Voici quelques points à garder à l'esprit:

Les images ne doivent pas être plus grandes que le plus petit écran du smartphone. Forcer les utilisateurs mobiles à faire défiler sera sans aucun doute frustrant.

Prenez une page du livre de Nike et rendez-la encore plus petite que les limites de l’écran:

Fournir des images claires et pertinentes des produits

Ensuite, utilisez une lightbox qui permet aux acheteurs de zoomer sur les détails haute résolution du produit:

Permet aux acheteurs de zoomer

Assurez-vous simplement d'utiliser des images qui valent la peine d'être agrandies. Étant donné que les acheteurs en ligne ne peuvent réellement essayer aucun de ces produits, ils auront besoin de voir ces petits détails afin de prendre une décision d'achat en toute confiance.

Voici une autre chose à laquelle penser:

Inclure plus d'une image afin que les acheteurs puissent voir le produit sous différents angles, dans les variantes disponibles ou être utilisé de différentes manières.

Dollar Shave Club, par exemple, ne montre pas seulement des bouteilles de fantaisie de ses produits pour le corps:

Inclure plus d'une image

Dans cet exemple particulier, les acheteurs voient la bouteille de produit, ont une idée de sa taille lorsqu'elle est encadrée contre la main de quelqu'un, et voient à quoi ressemble la crème.

Il serait également avantageux de inclure une courte vidéo ou une vue interactive à 360 degrés (le cas échéant) dans votre galerie d'images.

Fondamentalement, incluez tout ce que vous devez inclure pour éviter que l'acheteur ne se sente obligé d'aller en magasin pour essayer le produit.

Et, bien sûr, assure-toi toutes les images de votre site Web sont optimisées pour la vitesse. Les sites Web mobiles sont notoirement plus lents que les ordinateurs de bureau.Par conséquent, si vous souhaitez encourager les acheteurs à acheter depuis leur smartphone, vos pages de produits devraient se charger en moins de trois secondes.

4. Empêcher les acheteurs de choisir des variations de rupture de stock

Il existe de nombreuses façons de frustrer les acheteurs sur un site Web mobile. Par exemple, lorsque vous attendez qu'ils aient sélectionné un produit ou une variante pour leur dire "Désolé, celui-ci n'est pas disponible".

Traitez vos pages de produits mobiles comme vos formulaires de contact mobiles. Vous ne permettriez pas à quelqu'un de remplir un formulaire de manière incorrecte et ne le notifieriez du problème qu'après avoir cliqué sur «Soumettre», n'est-ce pas?

En ce qui concerne les pages de produits mobiles, choisissez un style pour les variantes disponibles et un autre pour celles qui ne sont pas disponibles.

La façon la plus courante de gérer cela est d'utiliser des zones ou du texte grisés, comme le fait Nike:

Empêcher les acheteurs de choisir des variations de rupture de stock

De cette façon, les acheteurs verront immédiatement et clairement quelles sont leurs options.

Désormais, si vous concevez un site de commerce électronique pour une entreprise qui peut reconstituer son stock plus rapidement et de manière prévisible, vous ne souhaiterez peut-être pas utiliser de sélecteurs grisés.

Prenez Amazon, par exemple:

Application Amazon

Bien qu'il existe des cas où les vendeurs Amazon ne peuvent tout simplement pas stocker leurs articles dans un délai raisonnable et doivent marquer la variante comme «indisponible», celui-ci n'a pas ce problème.

Un acheteur qui a l'esprit fixé sur un tapis de yoga bleu foncé n'a pas besoin de se contenter d'une couleur dont il ne veut pas ou de s'éloigner complètement de l'achat.

En gardant ces variations exemptes du redoutable "Indisponible" et en fournissant une date concrète de disponibilité (même si elle est plus tardive que prévu), votre site peut augmenter la satisfaction des acheteurs ainsi que ses ventes.

5. Soyez efficace dans la façon dont vous affichez les informations sur le produit

Soyons honnêtes: les détails ci-dessus ne suffiront pas à convaincre la plupart des acheteurs. Le reste de la page doit donc présenter des informations supplémentaires qui les aideront à prendre cette décision.

Selon les types de produits que vous vendez, cela nécessitera beaucoup d'espace sur un site Web mobile. Et cela signifie beaucoup de défilement pour vos visiteurs.

Réduire la taille du texte n'est pas une option car vous ne voulez pas compromettre la lisibilité ou la lisibilité. Au lieu de cela, vous pouvez utiliser l'un des deux types d'économiseurs d'espace.

Vous trouverez un bon exemple du premier sur le site Web de Walgreens:

Afficher les informations sur le produit

Chaque section d'information est soigneusement cachée sous un accordéon. De cette façon, les visiteurs peuvent facilement choisir les informations dont ils ont besoin pour se faire une idée.

H&M adopte une autre approche à cet égard. Voici comment il présente ses sections informatives:

Sections informatives

Cela ressemble un peu à la mise en page accordéon du site Walgreens. Cependant, l’absence de pointes de flèche nous indique que ce n’est pas ainsi que cette page ne fonctionnera pas.

Au lieu de cela, voici ce qui se passe:

Avis sur les produits

H&M déplace entièrement ses longues sections d'information de la page. Chacun d'eux existe dans son propre modal défilable et rejetable.

L'un des problèmes de la conception mobile, en général, est que les pages peuvent devenir très longues (ou du moins le paraître aux personnes qui les parcourent). C'est certainement l'un de ces trucs de conception qui vous aideront à garder vos pages à une longueur plus raisonnable.

6.Faire en sorte que le bouton d'ajout au panier reste collé

Même si vous avez condensé autant d'informations que possible en accordéons ou modaux, les pages mobiles peuvent encore prendre un certain temps à faire défiler. Alors, lorsqu'un acheteur a lu ce qu'il a besoin de lire, pourquoi le faire défiler et faire défiler jusqu'à ce qu'il trouve à nouveau le bouton Ajouter au panier?

Réponse: Vous n’êtes pas obligé.

Voici comment Walmart le gère:

Ajouter au panier bouton collant

La deuxième fois que quelqu'un arrive sur une page de produit, il voit cette barre d'ajout au panier collante à côté du prix du produit. Pendant qu'ils défilent vers le bas, la barre reste en place.

Cela a beaucoup de sens lorsque vous pensez à la façon dont les gens achètent en ligne. Les chances qu'ils se convertissent au-dessus du pli sans lire les détails du produit ou les avis sont assez faibles (même si cela ne fait pas de mal de faire bonne impression).

En ayant le "Ajouter au panier" présent quel que soit l'endroit où ils défilent, ils peuvent agir dès qu'ils sont convaincus que c'est la bonne décision.

Un autre site Web qui fait cela est IKEA:

Sticky ajouter au panier

La barre des ajouts au panier d'IKEA comprend plus de détails que celle de Walmart. Les acheteurs voient:

  • Image
  • Nom
  • Prix
  • Bouton d'ajout au panier bleu

Malgré toutes les informations disponibles, les choix simples de conception et de mise en page d'IKEA empêchent cette barre d'aperçu de devenir une horreur.

Ce qui est intéressant à propos de cette barre fixe, en particulier, c'est le lien "Afficher les détails" sous le nom du produit. Lorsqu'il clique dessus, ce lien ramène instantanément l'acheteur à la section des détails du produit concerné.

Non seulement cette barre collante rend l'ajout au panier beaucoup plus pratique, mais elle fournit également un raccourci vers les détails les plus importants sur le produit.

7. Incluez des CTA alternatifs, mais concevez-les différemment

Bien que nous sachions qu'il y a de plus en plus de consommateurs qui achètent avec leur smartphone, nous savons également que certains sont encore plus à l'aise pour convertir sur ordinateur. Nous savons également que le smartphone est également une ressource précieuse pour les achats en magasin, permettant aux gens de comparer les prix, d'attacher des coupons, de vérifier la disponibilité des stocks, etc.

Ainsi, les boutons CTA alternatifs donneront à vos acheteurs la possibilité d'utiliser leurs smartphones comme ils le souhaitent. Et, en retour, votre site m-commerce peut capturer (ou aider à capturer) plus de ventes.

Faites juste attention à la façon dont vous présentez vos autres CTA. Vous ne voulez pas qu'ils détournent leur attention de l'option principale "Ajouter au panier".

Macy’s fait du bon travail:

Inclure un autre CTA

Le CTA principal est «Ajouter au panier». C’est un bouton rouge pleine largeur qui crie «Cliquez-moi!»

Mais disons que quelqu'un n'est pas encore convaincu qu'il est prêt à acheter.

Juste en dessous se trouve le bouton «Ajouter à la liste». En le concevant comme un bouton fantôme transparent, il ne retiendra probablement pas autant l’attention, mais ne disparaîtra pas complètement en arrière-plan.

"Ajouter au registre" est la troisième option CTA et il est logique qu'elle soit conçue sans la forme d'un bouton. Bien que Macy's soit probablement une source populaire pour la création de registres de mariages ou de fêtes de naissance, ce n'est pas une action courante que les visiteurs entreprennent, il n'est donc pas nécessaire de lui accorder autant d'importance dans la conception.

8. Placez les bâtisseurs de confiance autour du CTA

Il y a beaucoup de choses dans une marque, un site Web ou même un produit qui peuvent briser la confiance d'un nouveau client. Et parfois, ce n’est pas ce que vous avez fait qui a incité les clients à s’inquiéter et à vouloir se retirer avant qu’il ne soit trop tard. Parfois, c'est à cause de quelque chose que vous n'a pas terminé.

C'est pourquoi les marques de confiance doivent être présentes sur les pages de vos produits mobiles et, en particulier, autour des boutons CTA. Si votre site Web a fait tout le reste pour les convaincre d'acheter, c'est votre dernière chance de renforcer la confiance que vous avez acquise jusqu'à présent.

Les marques de confiance se présentent sous différentes formes.

Home Depot, par exemple, inclut deux marques de confiance autour du bouton «Ajouter au panier»:

Constructeurs de confiance autour du CTA

Le premier est juste au-dessus du bouton: Comment l'obtenir.

Cette option n'est pas toujours disponible dans les boutiques en ligne. Et, quand c'est le cas, il n'apparaît pas tant que l'acheteur n'est pas à la moitié du processus de paiement. Pour les clients qui souhaitent des options d'expédition et de ramassage flexibles, cette marque de confiance doit être disponible sur la page du produit.

L'autre marque de confiance se trouve sous le bouton: Paiement instantané et Paiement PayPal options.

L'un d'eux offre aux acheteurs un moyen sans douleur de passer le paiement mobile. L'autre leur fournit un processeur de paiement hautement fiable pour vérifier. Dans tous les cas, l'objectif est de faire savoir aux acheteurs que leur confort est la priorité numéro un.

Walmart en est un autre qui inclut les informations d'expédition et de ramassage avant le paiement:

Constructeurs de confiance CTA

La livraison le lendemain et la livraison sous deux jours offrent aux sites de commerce électronique un avantage concurrentiel majeur (tout comme le ramassage en magasin), il est donc judicieux de mettre en évidence ces options et de préciser quand exactement les livraisons arriveront.

Notez également le message "Vendu et expédié par Walmart", qui permet aux acheteurs de savoir qu'ils n'auront pas à s'inquiéter de la mauvaise gestion de leur livraison par un tiers. Il existe également le lien "Politique de retour". C’est toujours une bonne idée d’inclure cela dans le CTA, car de nombreux acheteurs ne penseront pas à consulter ces détails avant qu’il ne soit réellement temps de retourner quelque chose. Ce qui est peut-être trop tard.

9. Inclure un widget de chat non intrusif

Ce n'est pas parce que les gens ont choisi de faire des achats en ligne plutôt qu'en magasin qu'ils n'ont pas besoin de l'aide d'un associé du magasin lorsqu'ils ont des questions.

Avec un chatbot ou un widget de chat en direct installé sur le site, vous pouvez automatiser un grand nombre de ces interactions tout en libérant l'équipe d'assistance pour traiter les questions et les problèmes qui nécessitent des réponses personnalisées.

Mais fais attention.

Un widget de chat sur un site de commerce électronique de bureau peut ne pas être un gros problème car il se trouve au-dessus d'un espace blanc dans le coin du site. Sur mobile, cependant, il ne manquera pas de couvrir des détails importants sur les produits.

Plutôt que d'utiliser le bouton typique du widget de chat dans le coin droit, créez-en un similaire à celui d'Apple:

Widget de chat

Le bleu «Discuter avec un spécialiste iPhone» apparaît initialement sous la forme d'un lien hypertexte sous l'image principale du produit. Cependant, une fois que le visiteur fait défiler l'image, le lien de chat est apposé en haut de la page.

Vous n'êtes pas obligé d'utiliser cette conception exactement, mais le concept de coller une barre de discussion en haut ou en bas de vos pages de produits mobiles est un bon concept car il permet d'éviter cet élément conversationnel utile, bien que pas toujours nécessaire. façon.

10.Rendre les avis sur les produits consultables / triables

Inclure une section de commentaires et de notes sur vos pages de produits est un must. Cela dit, nous devons toujours être conscients de la longueur du contenu.

Une chose que vous pouvez faire lors de la conception de votre section d'avis est d'inclure une barre de recherche.

Cela fournira aux utilisateurs de votre smartphone un raccourci vers les détails les plus pertinents, comme le fait 1-800-Flowers:

Rendre les avis sur les produits consultables / triables

Une autre chose que vous pouvez et devez faire est de permettre le tri par:

  • Plus récent
  • Le plus ancien
  • Meilleure note client
  • Note client la plus basse
  • Le plus utile

De cette façon, les visiteurs peuvent affiner le nombre d'avis qu'ils voient et passer leur temps à lire ceux qui auront le plus d'impact sur leur décision d'achat.

Emballer

Bien sûr, les achats mobiles sont en hausse. Mais est-ce que le fait de faire des achats sur un smartphone est la seule mesure que nous devrions regarder?

Si nous voulons capturer autant de ventes que possible, nous devons nous concentrer sur le nombre de visites mobiles qui se transforment réellement en ventes mobiles. Et si non, qu'est-ce qui les retient de le faire?

En mettant en œuvre les 10 stratégies ci-dessus dans la conception de votre page de produit mobile, vous pouvez:

  • Faites une bonne première impression.
  • Supprimez les distractions et les obstacles courants du m-commerce.
  • Réduisez le temps que les acheteurs passent à faire défiler.
  • Insufflez une plus grande confiance à vos clients.

Et, bien sûr, faites plus de ventes à la fin de la journée.



Source link

Pourquoi confectionner une vitrine sur la toile ?

Un endroit e-commerce donne l’opportunité de se lancer à moindres frais par rapport aux entreprises classiques. De plus, vous pouvez vous lancer autrement rapidement. La maîtrise d’un orientation e-commerce ne demande pas de présence physique à un endroit précis, sauf peut-être quant à stockage et la préparation des commandes que vous pouvez tout à fait externaliser, ou encore mieux dans l’hypothèse ou vous ne possédez pas de retenue (on en parlera plus tardivement dans l’article).