Si je vous pose la question si votre boutique PrestaShop est compatible mobile, vous allez me répondre « Ben oui évidemment ! ». Pourtant en réalité votre marge de progression d’optimisation sur mobile reste encore importante (avant de tendre réellement vers l’excellence).
Certainement que chez vous aussi le trafic mobile est dominant
Cette étude de statistique du trafic par appareil le démontre bien, la tendance globale c’est 54% mobile / 43% ordinateur / 3% tablette. La répartition varie selon les business, mais c’est assez représentatif du marché.
Dans bien des cas, le mobile est donc en position de dominance et on ne cesse de dire qu’il faut penser mobile first… Pourtant en réalité c’est quand même bien plus compliqué que ça, même si vous disposez d’un thème PrestaShop compatible mobile, cela ne veut pas dire que vous êtes en train d’exceller sur ce support.
Ce que vous devez garder en tête c’est que l’interface mobile doit-être optimisée en priorité et que si celle-ci est mal conçue, vous vendrez difficilement. L’espace d’interface sur mobile est réduit à son maximum, il faut vraiment être stratégique et aller à l’essentiel sur l’affichage du contenu.
Même le meilleur template PrestaShop nécessite révision
Le choix d’un template n’est vraiment pas anodin parce qu’il va vraiment déterminer l’expérience de vos clients sur votre shop. Il n’est pas rare de voir des e-commerçants choisir un template PrestaShop « magnifique » sur format ordinateur, alors qu’en version mobile il laisse à désirer (grave erreur).
Un développeur de templates PrestaShop ne peut pas être excellent en UX, en SEO, en design et en mobile first (c’est un mouton à 5 pattes). Concrètement le bon choix c’est de prendre l’un des TOP 3 templates PrestaSop des plus vendus. En réalité plus un template est testé / éprouvé plus vous aurez de chances de tendre vers l’excellence.
Est-ce que pour autant votre version mobile sera au TOP ? Pas forcément, cela dépendra aussi de votre capacité à vous concentrer sur l’essentiel. Le gros danger avec PrestaShop c’est de se laisser envahir avec les multiples modules qui vont inonder l’interface. L’expression « less is more » est vraiment la devise que vous devez avoir en tête.
Si vous ne testez pas votre shop sur mobile vous êtes fini !
Est-ce que vous arrivez à me dire quand c’est la dernière fois que vous avez testé votre boutique PrestaShop sur mobile ? Je veux dire par là, la dernière fois que vous avez fait le test complet… la création d’un compte client, l’ajout au panier, la validation de commande et le paiement.
Très souvent on oublie de « re-tester » ces processus sur mobile, on le fait vraiment à l’occasion alors qu’il faudrait effectuer cette opération au moins 1 x par semaine. Le but c’est de s’assurer qu’il n’y a pas de friction durant le processus d’achat sur smartphone. Il existe un outil très performant comme BrowserStack qui permet de simuler « réellement » tous les appareils mobiles de votre choix (très pratique pour les tests).
Tester les comportements c’est bien, mais en plus de cela il faut être capable de se demander si vraiment l’interface mobile est pratique. Le risque c’est aussi que vous pouvez vous habituer à certaines incohérences, il faut donc en permanence prendre du recul et se poser la question sur la légitimité de chaque élément de l’interface (les améliorer ou les retirer).
Jetez vos fonctionnalités ! Concentrez-vous sur l’ajout au panier…
Un site e-commerce doit remplir une fonction simple, il doit permettre à l’internaute d’effectuer un achat en ligne. Pour réaliser cet objectif, il n’est pas nécessaire de proposer de nombreuses fonctionnalités à vos clients. Vous devez absolument vous focaliser sur les points essentiels, qui vont inciter l’internaute à acheter chez vous.
Commencez par désactiver massivement tous les modules qui ne sont pas nécessaires, module Wishlist, partage social, comparateur de produits, etc… Bien souvent il y a de nombreuses fonctionnalités qui encombrent l’interface et qui cassent la fluidité de l’expérience client. Pour beaucoup d’e-commerce PrestaShop la conséquence du cumul des modules représente plus souvent un encombrement qu’une voie vers le succès.
La méthode CSS « display:none » permet aussi d’ajouter une touche de clean à votre boutique. Toutes les petites imperfections non manageables qui vous dérangent, vous pouvez dans un 1er temps les masquer pour épurer l’interface. C’est une tactique que j’utilise très souvent sur les sites e-commerce et qui est très peu intrusive.
Payer un développeur sur Codeur.com n’est pas une mauvaise idée
Votre valeur ajoutée n’est pas forcément dans le fait de commencer à bidouiller le code de PrestaShop, mais plutôt de savoir où sont les lacunes de votre site e-commerce. Votre but c’est de diagnostiquer les emplacements qu’il faudrait améliorer et pour ça il faut être méthodique.
Je vous conseille de vous poser la question sur ces 4 emplacements : header / footer / catégorie / fiche produit. Regardez ces pages sur mobile et posez-vous la question sur ce qu’il faudrait faire (changements précis) que la page puisse être plus agréable, afin d’améliorer votre taux de conversion.
Ensuite, postez une demande sur codeur.com, mais essayez de faire une chose après l’autre. Optimisez par exemple déjà le haut de page pour une 1ère mission… Le but c’est aussi que le développeur soit focus sur « un petit » objectif et qu’il soit efficace. Inversement de votre côté, cela vous permet un management plus « précis » et des coûts d’optimisation modérés et progressifs.
Résumé de la vidéo : Ne laissez pas stagner la version mobile de votre PrestaShop
- Le support mobile devient dominant chez vos clients, pensez vraiment à optimiser ce support en priorité. Quand vous apportez un nouveau changement sur votre shop, n’oubliez pas de le tester sur mobile.
- Mettez en place une « habitude » de tester régulièrement votre boutique sur un smartphone. Vérifiez qu’il n’y a pas d’éléments bloquants dans le processus et interrogez-vous sur les possibilités d’optimisation.
- Si vous devez changer de template, prenez les templates PrestaShop populaires, car ce sont ceux qui sont le plus éprouvés. Il n’existe pas de template PrestaShop « parfait » sur mobile, tous ont encore une belle marge de progression (sous différents axes).
- Simplifiez au maximum l’interface en désactivant les modules PrestaShop superflus et en utilisant la méthode CSS « display:none ».
- Ne cherchez pas forcément à faire tout vous-même, déléguez des micro-tâches sur codeur.com en donnant vos instructions sur les éléments à retoucher / optimiser, c’est là que se trouve votre valeur ajoutée.
Super article
attention toutefois à ne pas abuser la méthode CSS display:none car Google n’aime pas trop les éléments « cachés » : présents dans le code mais non affichés à l’écran.
C’est un peu comme les mots-clés en noir sur fond noir cachés sous le pied de page à l’époque 😉
Oui, il faut utiliser cette méthode idéalement sur des composants qui perturbent l’interface, il faut éviter de mettre d’énormes blocs de textes de contenu en display:none.