Nous avons analysé les versions mobiles des magasins en ligne TOP-20 en Russie pour 44 facteurs. Nous avons obtenu un tableau infernal de uns et de zéros, presque disparu, mais ils ont rassemblé nos forces et décrit comment et ce qu'ils «obtiennent» l'acheteur dans le segment supérieur du commerce électronique mobile.
Pour analyser l'adaptation mobile, nous avons pris les TOP-20 boutiques en ligne de la notation DataInsight . Ce sont les créateurs de tendances que d'autres joueurs ciblent.
Les paramètres de l'évaluation proviennent d'une grande étude similaire du commerce de détail occidental .
Nous n'avons pas pris tous les paramètres, mais identifié 44 facteurs significatifs. Ils sont regroupés en neuf groupes:
Un tableau avec les résultats d'analyse pour chaque boutique en ligne est ici . Dans l'article, nous passerons en revue chacun des 44 éléments de l'utilisabilité mobile et rechercherons les tendances clés. Dans chaque paragraphe, nous indiquons des statistiques générales: combien de magasins utilisent / n'utilisent pas cette technique.
La technologie
Spoiler Les magasins en ligne abandonnent les versions mobiles au profit des sites "en caoutchouc", mais la vitesse de téléchargement est encore boiteuse.
Adaptabilité vs version mobile
14/6
Un site adaptatif gagne avant la version mobile (sur un sous-domaine distinct du formulaire m.site.ru). Il n'a pas besoin d'être administré en plus, il n'y a pas de problème de duplication de contenu, le même code source est utilisé, ce qui réduit les coûts.
Pas pour rien 70% des meilleurs magasins en ligne en Russie fonctionnent précisément sur la base de sites adaptatifs. La version mobile appartient au passé.
PageSpeed Insights Orange Zone: tout est triste
2/20
Les magasins en ligne n'ont pas une vitesse de chargement de page élevée. Des scripts et des images de haute qualité laissent leur marque. Cela se reflète particulièrement dans la vitesse de téléchargement sur le mobile.
Seul 1 site Web sur 20 se rend dans la zone verte lorsqu'il est coché dans le service Google PageSpeed Insights . Mais même atteindre la zone «orange» reste difficile - il n'y a aussi qu'un seul site ici. Les 18 sites restants marquent moins de 50 points et tombent dans la zone rouge.
Ainsi, si vous travaillez pour accélérer le site, au moins un facteur obtiendra un avantage sur les meilleurs concurrents de votre créneau. À la lumière de la transition de Google vers l' indexation Mobile-first, cela est particulièrement vrai.
Éléments clés du modèle
Spoiler Il y a des tendances évidentes: un menu hamburger, un numéro de téléphone cliquable, un champ de recherche sur le site dans l'en-tête et une icône de panier visible. Il vaut mieux ne pas être créatif ici, mais suivre les leaders du marché.
En ce qui concerne la fixation du menu, la promo en bas de l'écran ou l'ajout du widget d'un consultant en ligne, vous avez besoin de tests dans chaque cas.
Menu fixe
11/9
La tendance à corriger les éléments clés du menu en haut de l'écran lors du défilement d'une page est implicite, mais présente un avantage. C'est logique - les éléments de navigation les plus importants se trouvent dans le menu. Et c'est bien quand ils sont à portée de main lors du défilement.
Assurez-vous que le menu n'occupe pas trop d'espace à l'écran au détriment des autres éléments.
Numéro de téléphone cliquable
15/5
Tous les numéros de téléphone sur le site doivent être cliquables pour un appel instantané. Il n'y a pas d'options. Copier un numéro en basculant entre les applications téléphoniques est toujours un problème.
Mais, comme vous le voyez, tous les magasins n'adhèrent pas à ce principe évident.
Menu Hamburger
19/1
La tendance est toujours en faveur des hamburgers, mais ici, il vaut la peine de partir du site cible. Pour un public plus conservateur, utilisez le menu texte familier - un hamburger peut être laissé sans surveillance.
Recherche de boutique
16/4
Si vous avez plusieurs magasins de marque, ajoutez une recherche pour le magasin le plus proche par emplacement de visiteur. Si vos produits sont vendus par d'autres revendeurs, cette option est moins prioritaire.
Si vous n'avez pas de points de vente, ajoutez la possibilité de trouver le point de livraison le plus proche.
Découvrez la popularité de la page de recherche de magasin sur votre système d'analyse Web. Si elle a un trafic important, placez un lien vers elle dans le menu de l'en-tête.
Le contexte des boutiques en ligne à un niveau professionnel et sans agence est dans le système PromoPult . Sélection automatique des mots, génération automatique d'annonces, gestion des enchères «intelligente». Solutions industrielles prêtes à l'emploi. Statistiques en temps réel.
Panier bien visible
17/3
Il est important de ne pas être créatif ici. Tout le monde sait que le panier doit ressembler à un «panier» ou un «chariot». Les tentatives d'inventer des icônes de droits d'auteur ou de placer un panier quelque part au bas de l'écran obligent les utilisateurs à résoudre des énigmes au lieu d'acheter des marchandises.
Promo fixe en bas de l'écran
16/04
Joignez des informations sur les offres spéciales ou un CTA spécial en bas de l'écran, comme l'a fait l'ornithorynque.
Rotation automatique des diapositives dans la bannière principale
7/13
De plus en plus de magasins refusent de faire pivoter automatiquement les images dans la bannière supérieure. Sur 20 sites, 7 possèdent encore une telle bannière, mais 13 n'utilisent pas cette solution. En général, il semble qu'il est temps de dire au revoir aux bannières dans la version mobile.
Champ de recherche d'en-tête: doit avoir
20/0
Ne cachez pas la recherche dans le menu, mettez-la dans l'en-tête. La meilleure option est l'icône de la loupe, en appuyant sur sur laquelle le champ de recherche s'ouvre. Vous économisez donc de l'espace.
Gauche - la recherche a pris une ligne entière sur un petit écran. À droite, une solution dynamique.
Widget Consultant en ligne
3/17
Un consultant en ligne est une option utile pour les sites de commerce électronique. Mais dans le mobile, cette décision est controversée: après tout, le widget chevauche une partie du contenu, et il n'est pas facile de le cacher.
Testez le widget sur votre public. Installez un consultant en ligne (si vous ne voulez pas payer, il y a un consultant GetSale gratuit dans le module d'amélioration de la conversion PromoPult), personnalisez-le selon votre style d'entreprise et voyez combien d'appels / ventes se feront en un mois. Et là, prenez déjà une décision - laissez-la ou supprimez-la.
Filtres dans le catalogue
Spoiler Les filtres du catalogue sont indispensables. Souhaitable - avec la sélection simultanée de plusieurs paramètres. N'oubliez pas le filtre pour le prix.
Les options pratiques sont de fixer le filtre lors du défilement (l'essentiel est qu'il ne prend pas beaucoup de place) et d'indiquer que la couleur du produit dans le filtre n'est pas avec du texte, mais avec une image couleur.
Filtres
19/1
Les filtres simplifient la navigation. L'utilisation active des filtres reste une tendance claire.
Filtre verrouillé défilant
3/17
Il s'agit d'une nouvelle solution pour les interfaces mobiles qui permet aux utilisateurs de filtrer les résultats de recherche. Cela semble réussi - comme si cela devait être le cas. Lorsque vous faites défiler un catalogue, les filtres sont toujours à portée de main.
Mais les magasins en ligne ne sont pas pressés de mettre en œuvre la correction du filtre - peut-être qu'ils ne veulent pas bloquer une zone supplémentaire de l'écran (ou il est difficile à mettre en œuvre dans la version adaptative).
Sélection simultanée de plusieurs paramètres
19/1
L'utilisateur doit pouvoir filtrer les produits en même temps dans différentes catégories. Tous les sites analysés utilisent exactement ces filtres (sur un site, il n'y a pas de filtres du tout, donc il n'y a pas une telle option).
Sélecteur de couleur
16/04
Pour le meilleur UX dans le filtre de couleur, il est recommandé d'utiliser des carrés / cercles colorés (ou une combinaison de texte et de marqueurs de couleur) - plutôt qu'une description textuelle de la couleur.
Mais les magasins nationaux utilisent principalement du texte.
Filtrer par prix
17/3
Certains sites refusent le filtre pour le prix. Ils expliquent cela en se concentrant sur le produit plutôt que sur sa valeur. Mais dans la plupart des magasins, il existe un tel filtre. Et c'est vraiment utile.
Éléments de la page de catalogue
Spoiler Parmi les tendances évidentes, il y a la possibilité d'ajouter des produits du catalogue au panier, affichant les notes de produits et les remises. Mais faire défiler les images des marchandises dans le catalogue, afficher leurs options et charger automatiquement les marchandises au lieu de la pagination est encore nouveau.
Chargement automatique des marchandises au lieu de la pagination
3/17
Taper sur la flèche «page suivante» n'est pas aussi pratique que de simplement retourner. Mais la production de marchandises non pas par 10-20-50 par page, mais par un ruban «sans fin», qui se charge en défilant, est toujours exotique.
Du point de vue de l'utilisabilité, une solution intermédiaire est également pratique: lorsque la pagination est enregistrée, mais le bouton "Afficher" est ajouté. Il est plus facile pour un utilisateur mobile de cliquer sur un gros bouton et d'élargir la liste des produits que de cliquer sur des chiffres / flèches.
Afficher plusieurs images de produits dans un catalogue
1/19
Habituellement, dans le catalogue, une image de la marchandise est présentée. Mais il existe une solution qui vous permet de faire défiler les images directement dans le catalogue sans aller sur la fiche produit. C'est pratique pour un utilisateur mobile, car vous n'avez pas besoin d'aller à nouveau sur une nouvelle page. Dans la pratique domestique, c'est encore une nouveauté.
Marquer "Nouveau"
10/10
Pour les magasins à taux de retour élevé, la marque «Nouveau» est un moyen d'attirer les visiteurs vers des produits qu'ils n'ont pas encore vus.
Si la mise à jour de l'assortiment pour un public cible permanent n'est pas votre tâche principale, faites attention aux autres qualités du produit et ne perdez pas de place sur l'icône «nouveau!».
Afficher les options de produits sur la page des catégories
2/18
Sur les versions de bureau des magasins, il est possible d'afficher les options de couleur pour un produit sur la page de catégorie. Sur mobile, il est préférable de refuser cette option, car il est difficile de mettre le doigt sur les minuscules icônes pour afficher les options. Il vaut mieux se limiter à l'inscription "il y a différentes couleurs" et les montrer déjà sur la page produit, où les photos prendront plus de place et il sera plus pratique de les faire défiler.
Évaluations des produits sur la page des catégories
15/5
Vous ne pouvez pas dire avec certitude comment l'ajout d'étoiles et l'indication du nombre d'avis sous l'image du produit affecteront les ventes. A en juger par le fait qu'ils sont utilisés par un grand nombre de magasins étudiés, cela fonctionne. Mais tout de même, il est logique de tester ce paramètre dans chaque cas spécifique - tous les magasins ne gagnent pas beaucoup d'avis pour une grande masse de marchandises.
Affichage des remises - par catégories et sur la carte
18/2
Sur la page de catégorie, les prix réduits doivent être affichés en gros caractères et, éventuellement, en couleur, à côté du prix barré sans remise. Mais le libellé «vous économisez tant» est préférable de laisser pour la page du produit - afin d'économiser de l'espace.
Mosaïque vs liste
9/11
Pour les magasins avec un large assortiment, pour lesquels une navigation rapide et pratique est importante, la sortie des marchandises est préférable aux carreaux. Cependant, dans le segment premium ou d'autres catégories où vous devez donner plus d'informations sur le produit, cela vaut la peine de répertorier les produits.
Option "Ajouter au panier"
16/4
La possibilité d'ajouter des marchandises au panier sans accéder à la page de description est logique pour les produits simples bien connus de l'acheteur (par exemple, la commande de nourriture). Dans d'autres cas, il est préférable de tester - si les utilisateurs cliquent sur ce bouton, laissez-le. Sinon, ne perdez pas votre espace d'écran.
Comparaison de produits
8/12
Souvent, cette option n'est pas pratique à utiliser sur mobile. Par conséquent, il doit être bien pensé ou complètement abandonné dans les versions mobiles.
Éléments de la page produit
Spoiler Des images de produits agrandies améliorent l'expérience utilisateur. Produits utiles et vidéo, ils vous permettent de considérer le produit "en direct". Il ne sera pas superflu de bloquer le partage des cartes de marchandises dans les réseaux sociaux et les messageries instantanées.
La possibilité d'agrandir l'image
16/4
Il y a deux options: augmenter l'image lorsque vous cliquez dessus ou la possibilité de "l'étirer" avec vos doigts. Il s'agit d'une option attendue par les utilisateurs, donc la plupart des sites utilisent cette pratique.
Vidéo sur la page produit
9/11
9 sites sur 20 sites de l'étude publient des vidéos sur les pages produits. Bien sûr, pour chaque produit, supprimer la vidéo coûte cher. Mais pour les produits les plus populaires, cela vaut la peine.
Boutons de partage social
8/12
Cette option n'est pas si facilement utilisée par les magasins en ligne. La raison est peut-être sa faible popularité - si les utilisateurs ont besoin de partager le lien, ils le copient simplement à partir de la ligne du navigateur (et sur un smartphone, il est plus facile de prendre une capture d'écran et de l'envoyer immédiatement). Mais le bouton de partage de la page ne prend pas beaucoup de place, il ne sera donc pas superflu.
Éléments de personnalisation
Spoiler Les éléments de vente croisée et de vente incitative qui offrent aux utilisateurs des produits en fonction de leurs préférences augmentent les ventes. Ne pas les utiliser signifie perdre des revenus.
"Ils achètent / consultent généralement avec ce produit ..."
13/7
Si le produit sélectionné nécessite des ajouts obligatoires, ce bloc est définitivement nécessaire. Affichez-le sur la page du produit et après l'ajout du produit au panier. Vous augmenterez donc les ventes croisées.
Vu récemment
9/11
Il s'agit d'une occasion pratique de revenir rapidement à une page précédemment intéressée. Mais seulement 45% des magasins analysés ont cette option.
Autres offres
13/7
Des messages comme «Vous l'aimerez aussi ...», «Plus de cette marque ...», etc. deviennent des éléments familiers des pages de produits non seulement des ordinateurs de bureau, mais aussi des magasins mobiles.
Ajout d'un article au panier
Spoiler Ne redirigez pas l'utilisateur vers le panier après avoir ajouté le produit. Un aperçu du panier dans la fenêtre contextuelle sera utile.
Restez sur le site après avoir ajouté le produit au panier
20/0
Après avoir ajouté le produit au panier, il est recommandé de laisser l'utilisateur sur la page du produit et de ne pas rediriger vers la section de paiement. Les dirigeants aussi - cela signifie que c'est justifié.
Aperçu du panier lors de l'ajout de marchandises
6/14
C'est un bon moyen de montrer ce qu'il y a dans le panier sans y entrer. Mais seulement 30% des magasins l'ont mis en œuvre - alors maintenant vous savez comment les contourner par au moins un facteur.
Fenêtre contextuelle de la corbeille
5/15
Une fenêtre contextuelle est pratique pour confirmer l'ajout de marchandises au panier. Cette fenêtre peut afficher l'intégralité du contenu du panier. En le fermant, l'utilisateur reste sur la page du produit.
Articles du panier
Spoiler Le panier est une page de conversion importante. Aucune erreur ne peut être commise ici. Assurez-vous d'afficher une image du produit avec une brève description. Parmi les options utiles figurent une indication des délais de livraison, un rappel des avantages et la possibilité de sauvegarder le panier. Mais la duplication du bouton de paiement / commande peut être abandonnée.
Image et description du produit
20/0
Le panier doit afficher une photo de chaque produit. Une brève description des principales caractéristiques (nom, taille, couleur, etc.) est également obligatoire. Un espace d'écran limité ne signifie pas que les utilisateurs ne se soucient pas du contenu de leur panier.
Dates d'expédition et de livraison
5/15
Si à ce stade, vous ne pouvez pas garantir des délais de livraison spécifiques, indiquez au moins quand vous prévoyez d'envoyer la marchandise.
Rappel des avantages
2/18
Le panier ne sera pas mal à rappeler les bonus que l'acheteur reçoit. Par exemple, livraison gratuite, livraison le lendemain, retour gratuit, bonus, période de garantie, etc.
Enregistrer le panier
3/17
85% des sites de l'échantillon ont refusé la possibilité de sauvegarder le panier et d'y revenir à l'avenir. Cependant, ne vous précipitez pas vers des conclusions et supprimez une telle option. Il s'agit d'une option pratique pour les utilisateurs qui achètent régulièrement un ensemble similaire de produits (par exemple, de la nourriture). Dans d'autres cas, cette option vous permet de garder une personne qui n'envisage pas d'acheter maintenant. (La question reste de savoir comment identifier l'acheteur sans inscription et après que les cookies se soient éteints).
Bouton "Paiement / Suivant"
2/18
Pendant un certain temps, il y avait une tendance à placer un bouton pour passer à la page de paiement en haut et en bas du panier. Mais presque tout le monde a refusé de dupliquer les boutons.
Éléments de la page de paiement
Spoiler Rendez la commande simple et directe. — . . . , .
14/6
. .
, , ( , , . .).
( )
5/15
— . . .
12/8
( «») — , . — .
12/8
(, , email . .) .
13/7
, , ( - , ).
—
C'est vrai. - , — - , - . Et c'est bien. . .
— , . , , , .
— . , , , , — - . — . .
.