Un coup d’œil à Google Trends et vous pouvez rapidement voir que le design réactif est très en vogue en ce moment. Il est en fait devenu une solution efficace pour de nombreux sites Web afin de proposer une expérience mobile conviviale à leurs utilisateurs. Il a même été recommandé par Google cet été comme le moyen optimal de servir un site Web aux utilisateurs mobiles. Mais qu’en est-il du responsive design pour le e-commerce mobile ? Lorsque nous parlons de prendre toutes les pages de produits et les processus de paiement d’une boutique en ligne et de les afficher dans une expérience d’achat mobile maximisant les ventes, le design réactif est-il la meilleure solution ? Et si oui, comment pouvez-vous implémenter au mieux le responsive design pour votre boutique en ligne ?
L’expérience d’achat mobile
L’objectif principal de tout site Web d’achat en ligne est de stimuler les ventes en fournissant un processus de navigation et de paiement sur le site qui permet aux clients de trouver/découvrir et d’acheter ce qu’ils veulent aussi rapidement et facilement que possible. Par conséquent, la question évidente que les propriétaires de boutiques en ligne doivent se poser est de savoir quel type d’expérience ils doivent offrir aux clients mobiles pour atteindre cet objectif.
La façon dont les boutiques en ligne présentent leurs produits et le processus de paiement peut avoir un impact considérable sur les ventes. Il est essentiel que les listes de produits, les filtres de recherche et le processus de paiement mobile soient bien gérés pour inciter les clients mobiles à effectuer un achat.
Avantages potentiels avec un design réactif
- Référencement :
Si vous êtes préoccupé par le classement de votre boutique en ligne dans les résultats de recherche Google, il est bon de savoir que Google recommande en fait que les sites Web utilisent un design réactif. Google recommande responsive car avoir une URL pour chaque page de votre boutique en ligne sur tous les appareils permet aux clients d’interagir plus facilement avec votre site. De plus, l’utilisation d’une URL empêche les redirections qui réduisent le temps de chargement et permet à Google d’explorer votre site Web plus rapidement.
Conseils de mise en œuvre : Comme indiqué dans le blog Webmaster Central de Google, vous devez baliser les feuilles de style de votre boutique en ligne pour avoir une mise en page liquide à redimensionner automatiquement pour s’adapter aux écrans des appareils mobiles. Vous devez également utiliser l’élément méta de la fenêtre d’affichage en combinaison avec les requêtes multimédias pour rendre vos pages plus lisibles sur des appareils de différentes tailles et à des angles de rotation sur ces appareils.
Site qui le fait bien : Burton.com est une boutique en ligne qui vend des snowboards. Burton a une URL réactive et se classe n°1 aux États-Unis pour le terme de recherche “snowboard” sur les appareils mobiles et de bureau.
- Bon timing:
Si vous n’avez pas encore lancé votre boutique en ligne et que vous décidez d’opter pour l’approche mobile first, vous pouvez facilement concevoir votre site Web pour qu’il soit réactif dès le début afin d’afficher efficacement les produits pour les visiteurs du site desktop et mobile. Cela vous permet d’éviter le processus souvent complexe et coûteux en temps et en argent consistant à reconstruire plusieurs pages de produits et images existantes pour un affichage réactif approprié.
Conseils de mise en œuvre : Déterminez quelles fonctionnalités seront disponibles sur tous les appareils et faites de la version mobile la configuration par défaut. Faites du style mobile votre style par défaut par opposition au style de bureau. Si vous avez des fonctionnalités conditionnelles qui se chargent en fonction de la taille de l’écran de l’appareil, au début, n’incluez que les fonctionnalités de base dont vous avez besoin pour tous les navigateurs. Votre objectif initial doit être de créer l’expérience d’achat en ligne de base qui permet aux utilisateurs de faire avancer les choses, quel que soit l’appareil qu’ils utilisent.
Site qui le fait bien : Un coup d’œil à SkinnyTies.com sur votre appareil mobile et vous pouvez rapidement dire qu’ils ont utilisé une approche mobile d’abord lors de la conception de leur site Web. Leur mise en page et leurs éléments tactiles adaptés aux mobiles permettent une navigation aisée dans leur boutique en ligne à partir d’appareils mobiles.
- Listes de produits simples :
Si vous proposez une petite gamme de produits dans quelques catégories et que vos produits contiennent des descriptions courtes et simples, il devrait être facile de les afficher efficacement aux clients mobiles avec un design réactif. Lorsque votre site de bureau est redimensionné de manière appropriée pour un affichage mobile, les clients ne sont pas surchargés de listes de catégories complexes, de résultats de recherche et de longues descriptions qui semblent mauvaises sur les écrans mobiles.
Conseils de mise en œuvre : Créez un système de filtrage de produits adapté aux mobiles en affichant des listes de produits dans différentes colonnes sur de grandes fenêtres qui s’affichent ou se replient dans une liste déroulante en fonction de la taille de l’écran.
Site qui le fait bien : L’affichage des produits de Kershaw Knives est un exemple parfait d’avoir des produits dans différentes colonnes qui se replient facilement dans un affichage déroulant sur les appareils mobiles.
- Paiement sur une seule page :
Si vous avez un processus de paiement d’une seule page pour votre boutique en ligne, il sera plus facile de rendre ce processus réactif de manière à ne pas laisser aux clients mobiles la perception d’un long processus de paiement.
Conseils de mise en œuvre : Utilisez un formulaire en accordéon car il intègre l’ensemble de votre processus de paiement sur une seule page, en masquant et en affichant les sections et les champs de paiement au fur et à mesure que votre client interagit avec eux. Pour les instructions de balisage HTML, CSS et Javascript, il existe un joli didacticiel qui comprend également une démonstration en direct d’un formulaire d’accordéon réactif.
Site qui le fait bien : Mulberry, un magasin de détail de luxe, présente toutes les sections de paiement dans des champs déroulants afin d’adapter l’ensemble du processus de manière pratique sur une seule page.
Inconvénients potentiels du responsive design
- Référencement :
Le responsive est préféré par Google, mais pas si le fait d’avoir un site Web mobile séparé offre une meilleure expérience utilisateur. Si votre site de bureau affiche en évidence des produits et des catégories que les acheteurs mobiles ne recherchent pas, la conception réactive n’est pas votre meilleur choix pour le référencement mobile. Si vous optez pour un design réactif simplement parce qu’il est recommandé par Google, vous risquez de ne pas atteindre votre objectif de vente mobile. N’oubliez pas que vous ne créez pas une boutique mobile pour Google, vous la créez pour les clients mobiles.
- Mauvais timing:
Si vous avez déjà une boutique en ligne relativement complexe, la mise en place d’un design responsive peut coûter beaucoup de temps et d’argent. Il est probable que votre site Web devra être complètement reconstruit pour s’assurer qu’il répond aux besoins des utilisateurs sur plusieurs appareils.
- Listes de produits complexes :
Supposons que votre boutique en ligne propose une grande variété de produits avec de longues descriptions et critiques. En devenant réactif, vous risquez potentiellement de présenter aux clients en déplacement trop d’informations sur des écrans plus petits, ce qui pourrait nuire à leur expérience d’achat.
En tant que propriétaire d’une boutique en ligne, vous devez vous demander s’il est logique de garder vos listes et descriptions de produits parfaitement cohérentes avec le site de bureau ou de les rendre plus concises pour maximiser les ventes mobiles.
- Affichage du produit :
Mettez-vous actuellement en avant vos produits les plus populaires sur votre site Web pour augmenter les ventes ? Êtes-vous sûr que ce seront aussi les produits les plus intéressants pour vos clients smartphones et tablettes ? Si vous savez que vous pouvez réaliser plus de ventes mobiles en affichant différents produits plus pertinents pour vos clients mobiles, le design réactif n’est pas l’option recommandée.
De plus, vous devez vous demander s’il est logique d’offrir la même expérience de navigation de produits à vos clients de bureau et mobiles. Par exemple, serait-il plus efficace pour les utilisateurs de votre smartphone de découvrir les produits associés un par un en faisant défiler une liste de gauche à droite ? Si vous déterminez que cette expérience pour les utilisateurs mobiles doit être différente de celle offerte aux utilisateurs de bureau, la conception réactive n’est pas la voie à suivre.
- Processus de paiement :
Si vous avez actuellement un processus de paiement sur plusieurs pages pour votre boutique en ligne, cela pourrait s’avérer être la partie la plus difficile du passage au design réactif. Afin d’offrir la meilleure expérience de paiement mobile, vous devrez reconstruire complètement le processus de paiement pour tous les appareils. La mise à jour de tous les codes, formulaires et éléments individuels du processus de paiement pour qu’ils fonctionnent efficacement pour les utilisateurs de bureau et mobiles peut être très coûteuse et prendre beaucoup de temps.
Lorsque vous décidez si vous devez être réactif, vous devez vous demander si le fait de fournir votre processus de paiement sur ordinateur à vos clients mobiles en déplacement va vous aider à réduire l’abandon du panier d’achat mobile et à augmenter les ventes. Si la réponse est non, vous ne devriez pas utiliser le responsive design.
Vous devez également tenir compte du fait que même si l’industrie du m-commerce se développe rapidement, elle est encore nouvelle pour de nombreux acheteurs en ligne, et des statistiques récentes montrent que plus de la moitié des acheteurs mobiles abandonnent leur panier parce qu’ils ne pensent pas que le processus est sécurisé.
Organigramme du commerce mobile
Lors de la liste des avantages et inconvénients potentiels mentionnés précédemment de la conception réactive pour le commerce mobile, j’ai présenté plusieurs questions à prendre en compte par les boutiques en ligne afin de prendre une décision plus éclairée sur l’opportunité d’utiliser la conception réactive. Pour faciliter ce processus de décision, j’ai créé l’organigramme suivant :
Conclusion
Vous n’avez pas vraiment besoin de regarder Google Trends pour savoir que le design réactif est populaire. Il a été très utile pour aider de nombreux sites Web à servir efficacement leurs utilisateurs mobiles, mais il serait regrettable que les boutiques en ligne sautent dans ce train en marche simplement parce que c’est ce qui est en vogue en ce moment. En fin de compte, un propriétaire de boutique en ligne ne devrait pas prendre de décision sur la conception Web réactive sans avoir résolu la question : la conception réactive est-elle la meilleure solution pour moi pour offrir une expérience d’achat mobile qui maximise les ventes ?
Vous avez peut-être remarqué que je n’ai pas beaucoup écrit dans cet article sur le fait d’avoir un site Web mobile distinct comme alternative à la conception réactive pour le commerce mobile, mais si vous voulez en savoir plus, je vous invite à consulter un livre blanc que nous récemment publié couvrant ce sujet en détail.
