Le b.a.-ba des applications PWA à l'usage des commerçants qui souhaitent se moderniser
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Sommaire Introduction 3 Le potentiel de l’expérience mobile 5 Transformation de l’expérience mobile avec les applications PWA 9 Tirer parti de l’instant mobile 14 PWA Studio de Magento Commerce 16 Des sites mobiles réinventés avec PWA Studio de Magento Commerce 18 Éléments à prendre en compte pour l’adoption des applications PWA 21 Conclusion 23 2
Introduction Avec l’émergence des smartphones et appareils mobiles de nouvelle génération à la fin des années 2000, le e-commerce s’est définitivement affranchi de l’ordinateur. Enrichi par des technologies comme le responsive design et les applications natives, le commerce mobile (ou « m-commerce ») a rapidement été adopté par les consommateurs aux quatre coins du monde. Cette révolution technologique a entraîné en un laps de temps très court une transformation radicale des modèles commerciaux traditionnels. Aujourd’hui, le m-commerce fait partie du quotidien de millions de personnes. Pourtant, les technologies les plus répandues en matière d’expérience mobile souffrent d’une portée limitée. Les lenteurs, les expériences client médiocres et les fonctionnalités datées empêchent les entreprises d’exploiter pleinement le potentiel du mobile. Alors que les consommateurs exigent des expériences de commerce digital fluides et ultra-rapides, les technologies du passé représentent un handicap. Cependant, une solution performante existe : les applications web progressives (PWA, Progressive Web Apps). 3
La technologie PWA permet aux commerçants de fournir une expérience de e-commerce conforme aux attentes des consommateurs actuels, adeptes du digital sous sa forme mobile. Les applications PWA offrent un environnement mobile basé sur un navigateur qui fonctionne plus rapidement et de manière plus fiable que les solutions existantes. Avec ses coûts de développement et de déploiement réduits, il n’est pas étonnant que la technologie PWA remporte l’adhésion d’entreprises de tous types. Ce manuel d’introduction didactique présente les bases des applications PWA et explique comment cette technologie émergente transforme activement l’expérience de commerce mobile façonnée par les commerçants. 4
Le potentiel de l’expérience mobile Que votre entreprise évolue sur le créneau B2C ou B2B, le commerce mobile revêt une importance capitale. Presque tout le monde possède un smartphone, ce qui crée un vaste marché digital au potentiel très prometteur. Le m-commerce constitue un canal hyper pratique permettant aux utilisateurs de réaliser des transactions à la demande en tapotant rapidement sur l’écran de leur appareil intelligent. Contrairement à l’époque du e-commerce sur ordinateur, les marques peuvent désormais s’adresser aux clients sur leurs appareils mobiles, à tout moment et n’importe où. Le m-commerce est en passe de détrôner toutes les autres formes de commerce digital. Une étude réalisée par Statista en 2020 révèle que le mobile représente aujourd’hui environ la moitié du trafic web dans le monde. Au quatrième trimestre 2019, les appareils mobiles (tablettes exclues) ont généré 52,6 % du trafic web mondial. Ce volume était déjà proche des 50 % depuis le début de l’année 2017.1 Au niveau international, de nombreux marchés digitaux émergents se développent presque exclusivement sur appareils mobiles, sans même passer par la phase « Internet sur ordinateur ». 418,9 Mrd $ 339 Mrd $ 142,5 Mrd $ Aux États-Unis, le commerce En 2020, les revenus issus Les consommateurs ont mobile devrait passer de des ventes mobiles aux dépensé 142,5 milliards de 128,4 milliards de dollars États-Unis devraient totaliser dollars sur la période des à 418,9 milliards d’ici 2024.2 339 milliards de dollars, fêtes en 2019, soit 13,1 % de contre 207 milliards plus en glissement annuel, en 2018. 3 les smartphones représentant 84 % de ce chiffre.4 5
Le mobile a avalé l’ordinateur en octobre 2016. Aaron Gustafson Promoteur des normes et de l’accessibilité du web Microsoft Les limites actuelles du mobile La majorité des expériences de commerce mobile s’appuient sur le responsive web design (RWD) ou les applications natives. Ces deux technologies ont été développées face à l’impossibilité de reproduire les environnements des navigateurs pour ordinateur sur des appareils mobiles. Cependant, les besoins des consommateurs d’aujourd’hui, gros utilisateurs d’appareils mobiles, mettent à rude épreuve les capacités de ces solutions digitales autrefois dominantes. Applications natives Les applications natives, spécialement conçues pour les smartphones, sont installées sur l’appareil d’un utilisateur par l’intermédiaire d’une boutique d’applications, à l’image de l’App Store d’Apple. D’après Statista, en 2019, plus de deux millions d’applications pouvaient être téléchargées sur le Play Store de Google, tandis que 1,83 million étaient disponibles sur l’App Store d’Apple.5 Outre leur interface simplifiée, les applications natives améliorent l’expérience client en exploitant les fonctionnalités d’un appareil, par exemple le micro, l’appareil photo et le GPS. Limitations de l’expérience Des téléchargements longs et fastidieux Avant de pouvoir être chargées et utilisées sur un appareil, les applications natives nécessitent un investissement en temps. Or, 50 %6 des utilisateurs de smartphones préfèrent un site mobile car ils ne souhaitent pas télécharger une application. 6
La consommation de données Si le Wi-Fi n’est pas disponible, le téléchargement des applications natives consomme des données cellulaires. De plus, la plupart des applications utilisent aussi des données lorsqu’elles fonctionnent en arrière-plan. Par exemple, une application météo classique a besoin d’exécuter des données en arrière-plan pour actualiser les prévisions en continu. Un développement coûteux Le développement et la maintenance d’une application native peuvent coûter cher, surtout s’il faut assurer la compatibilité entre plusieurs plateformes et appareils mobiles. Le coût moyen de développement est estimé entre 50 000 et 100 000 dollars, et peut aller jusqu’à 500 000 dollars pour les grandes entreprises. Une expertise technique spécialisée est également nécessaire selon les plateformes. Aucune garantie d’acceptation Être répertorié dans une boutique d’applications peut prendre du temps, sans aucune garantie d’acceptation. Et même si votre application passe la phase d’évaluation, rien ne dit que les utilisateurs l’adopteront ou qu’elle apportera de la visibilité à votre marque. 7
Responsive design Le design web réactif, ou responsive web design (RWD), repose sur un système de grille standardisé. Il s’agit de mettre le contenu du navigateur et les éléments associés à l’échelle voulue pour qu’ils tiennent sur l’écran de l’utilisateur. En redimensionnant les composants d’un site les uns par rapport aux autres, cette technique assure une navigation contextuelle plus fluide. Si le RWD a permis de gérer les restrictions spatiales des appareils mobiles, les exigences actuelles en matière d’expérience ont révélé ses limites. Limitations de l’expérience L’ordinateur n’est plus roi Le RWD consiste à condenser un site web dans un format adapté au mobile. Tenter de reproduire l’expérience de votre navigateur desktop sur un appareil mobile est en complet décalage avec les utilisateurs du m-commerce, dont les attentes, les interactions et les objectifs divergent. Des fonctionnalités minimalistes L’orientation web du RWD ne lui permet pas de tirer parti des fonctionnalités des smartphones qui améliorent l’expérience client globale, notamment l’appareil photo, le micro et les services de géolocalisation par GPS. Un même code + des plateformes différentes = des lenteurs d’exécution Pour afficher un site sur mobile, le RWD télécharge le même code que sur un ordinateur, ce qui augmente les temps de chargement. Or, plusieurs études montrent que les sites mobiles ayant des temps de chargement plus longs présentent des taux de rebond plus élevés, ce qui a un effet négatif sur les conversions. 8
Transformation de l’expérience mobile avec les applications PWA Les consommateurs sont prêts pour une réponse de nouvelle génération à la question de l’engagement mobile. Et cette réponse est apportée par Capabilities Native Apps les applications PWA, technologie basée sur un navigateur, bâtie et fournie via le web au moyen d’une interface de type applicatif. Web Apps Les applications PWA représentent Reach une avancée majeure dans l’évolution du web mobile, avec une portée comparable au passage des sites conventionnels sur ordinateur au responsive design. Elles estompent les frontières entre applications et sites mobiles en apportant aux commerçants et développeurs une architecture web extrêmement souple. Les applications PWA fonctionnent de façon transparente, quel que soit le type d’appareil, tout en exploitant « progressivement » les fonctionnalités de la plateforme native pour améliorer l’expérience client. En comblant le fossé entre applications et sites mobiles, les applications PWA offrent des performances accrues, une connectivité fiable et une navigation fluide. Il a été démontré que ces avantages, ainsi que d’autres, dynamisent l’interaction client, favorisent les conversions, augmentent la valeur moyenne des commandes et accélèrent la croissance du chiffre d’affaires. 9
Le pouvoir d’améliorer les expériences Une interface attrayante La magie des service workers Les applications PWA ne Les applications PWA sont présentent que le contenu pilotées par des service workers, utilisateur essentiel, assorti des scripts exécutés par votre d’animations et d’un défilement navigateur en arrière-plan pour fluides, et d’expériences intercepter les requêtes réseau de navigation intuitives. et stocker les données en Cet environnement visuel local. Ces agents assurent une optimisé pour les appareils navigation hors ligne sécurisée mobiles favorise l’interaction client pendant les intermittences de et l’exploration active des sites. la connectivité réseau, ce qui réduit la dépendance vis-à-vis Une navigation plus des connexions internet. rapide et plus fluide Avec les applications PWA, les Une prise en charge pages se chargent incroyablement des marchés émergents vite et les transitions sont Les applications PWA prennent rapides, ce qui élimine les rendus en considération les connexions approximatifs et les lenteurs. à bas débit et les forfaits de Le temps de chargement moyen données limités, assurant un des applications PWA n’est fonctionnement continu même que de 2,75 secondes, soit huit lorsque les réseaux sont peu fois moins que la landing page fiables. Les utilisateurs des moyenne sur mobile. marchés mobiles émergents, où les données se payent au prix fort, y trouvent leur compte. 10
Une faible consommation Les navigateurs adorent de données les applications PWA Les applications PWA utilisent bien Les applications PWA sont prises moins de données mobiles que en charge par les navigateurs les applications natives, car elles web les plus récents pour iOS détectent les utilisateurs dont les et Android, notamment Firefox, forfaits de données cellulaires sont Chrome et Safari. limités. Leurs besoins en espace de stockage sont également Avantages pour minimes, ce qui leur assure un fonctionnement uniforme les commerçants sur divers types d’appareils. Augmentation de la valeur moyenne des commandes Adieu aux téléchargements Les mises en page et la navigation Les applications PWA sont conviviales facilitent la consultation directement accessibles via des produits et services par le navigateur web, sans qu’il les acheteurs. Vos clients sont soit nécessaire de télécharger ainsi plus enclins à ajouter des ou d’installer une application articles dans leur panier avant distincte. Une fois installées, elles le règlement, ce qui augmente la s’exécutent dans leur propre valeur moyenne des commandes. fenêtre et se lancent depuis l’écran d’accueil, le dock ou la Économies de temps et de barre des tâches de l’utilisateur. ressources de développement Conçues à partir d’une seule et Pas de mises à jour, même base de code pour tous les pas de problèmes appareils mobiles et ordinateurs, Les applications PWA se mettent les applications PWA coûtent à jour toutes seules en temps réel, bien moins cher à développer comme un site web. Il n’est donc et à déployer qu’une application plus nécessaire d’effectuer des native. Et plus les normes de mises à jour périodiques depuis développement PWA s’affineront, une boutique d’applications. plus le coût total de possession et les délais de mise sur le marché diminueront. 11
Liberté de déploiement Attractivité pour les meilleurs Les applications PWA sont talents en développement diffusées de manière souple et front-end sans contraintes, puisqu’elles n’ont pas besoin d’être répertoriées Les applications PWA ouvrent de dans une boutique d’applications. nouveaux horizons à l’innovation Autrement dit, leur déploiement technologique, attirant les n’est pas bridé par les conditions talents des développeurs UX d’utilisation restrictives et les et front-end qualifiés. Ces contrats de partage des recettes professionnels s’intéressent aux imposés par ces entités. technologies web émergentes, et les applications PWA leur offrent Visibilité des opportunités en termes Une fois créée, votre application d’acquisition de compétences PWA est accessible à tous via une et d’évolution de carrière. interface de navigateur familière. Contrairement à ce qui se passe dans une boutique d’applications, où un « gatekeeper » contrôle le classement et la recherche d’applications, les applications PWA s’affichent dans les résultats de recherche de Google comme n’importe quelle page web. Applications PWA — Bien plus qu’une merveille du mobile Nombre des avantages des applications PWA, allant des chargements de page hyper rapides aux mises à jour automatiques, bénéficient également aux ordinateurs et autres appareils. Il est même possible de les installer sur un ordinateur comme une application native, sauf qu’elles seront plus rapides, plus fiables et qu’elles prendront beaucoup moins de place sur l’appareil préféré de l’utilisateur. 12
L’avenir du retail avec les applications PWA Les applications PWA pourraient remplacer les anciens systèmes de point de vente et les plateformes partenaires des vendeurs, dans le cadre de l’expérience en magasin. Elles offriront aux vendeurs en magasin un moyen efficace et économique de localiser les produits en ligne et en boutique, de faire régler les achats, d’effectuer des retours, etc., directement depuis leur smartphone. Les chiffres parlent d’eux-mêmes. Pionnier des applications PWA, Google a rassemblé une quantité considérable de données7 démontrant l’efficacité de cette technologie : • Le taux de rebond moyen d’une application PWA est inférieur de 42,86 % à celui d’un site web mobile similaire. • Le nombre de sessions mobiles sur des applications PWA augmente de près de 80 %. • L’engagement global est plus élevé de 137 %, certaines marques ayant même réussi à surpasser ce taux. • Le temps de chargement moyen des applications PWA n’est que de 2,75 secondes, soit huit fois moins que la landing page moyenne sur mobile. Les applications PWA représentent une avancée majeure dans l’évolution du web mobile, comparable au passage, il y a cinq ans, des sites conventionnels sur ordinateur au responsive design. Peter Sheldon Directeur senior de la stratégie commerciale Adobe 13
Tirer parti de l’instant mobile À l’heure où les applications web progressives révolutionnent le commerce mobile, les marques grand public, les grossistes et les fournisseurs de médias s’accordent tous à reconnaître le potentiel de cette technologie. Associant les meilleures fonctionnalités du web mobile et des applications natives, les applications PWA peuvent faire exploser l’audience mobile d’une marque, pour un coût bien moindre. Les premiers à les adopter découvrent qu’elles présentent un rendement significatif par rapport aux coûts initiaux de développement et de déploiement. • L’application PWA Twitter Lite a généré une augmentation de 65 % du nombre de pages par session, une hausse de 75 % du nombre de tweets et une réduction de 20 % du taux de rebond. • Après être passée à une application PWA, la société Nikkei a constaté 2,3 fois plus de trafic naturel, 58 % d’abonnements en plus et 49 % d’utilisateurs actifs en plus chaque jour. • En remplaçant son expérience desktop native par une application web progressive, Hulu a enregistré une augmentation de 27 % des visites récurrentes. • L’expérience PWA de Tinder, Tinder Online, permet désormais aux utilisateurs d’accéder à ce service très prisé de rencontres en ligne indifféremment sur appareils mobiles ou ordinateur, ce qui étend le marché cible. • Après avoir lancé son application PWA, le Washington Post a amélioré de 88 % les temps de chargement de pages par rapport au web mobile conventionnel. 14
Le gotha des pionniers du format PWA La liste des entreprises innovantes en commerce mobile qui ont déployé des applications PWA ou sont en train d’en développer ne cesse de s’allonger dans tous les secteurs. • Instagram • Facebook • BMW • Uber • Tinder • Pinterest • Starbucks • Forbes • Twitter • The Weather Channel • The Washington Post • Lyft 50 % de toutes les applications natives grand public en 2020 seront remplacées par des applications PWA, selon Gartner Research.8 15
PWA Studio permet de diminuer le coût et la complexité de l’adoption d’expériences PWA. Forrester Wave™ : B2C and B2B Commerce Suites PWA Studio de Magento Commerce Magento PWA Studio est une plateforme orientée développeurs qui aide les partenaires en solutions et les développeurs UX de Magento Commerce à élaborer des expériences mobiles de nouvelle génération. PWA Studio comporte une suite d’outils bien fournie permettant de créer des boutiques en ligne avec des environnements d’achat de type applicatif. La solution aide les commerçants à relever le défi de la conversion mobile tout en créant des expériences d’achat ultra-personnalisées. Les principales fonctionnalités de Magento Commerce PWA Studio sont les suivantes : • Des outils pour personnaliser le contenu et ajouter des préférences locales • La capacité à créer et gérer tous les canaux et expériences via une seule base de code, un seul déploiement et une seule application • Une expérience client intuitive, adaptée aux responsables marketing, avec des fonctionnalités intégrées Page Builder de gestion de contenu • Une architecture de composants modulaire et un framework évolutif qui ouvrent des débouchés aux revendeurs d’extensions 16
• Des outils de développement dédiés pour accélérer le prototypage, faciliter le débogage, enrichir les commentaires et accroître la productivité • Le storefront de référence Venia, qui permet d’écourter les délais de mise sur le marché grâce à des composants d’interface et de style préconfigurés, de la page d’accueil au règlement PWA Studio propose une palette d’outils incroyable pour vous aider à créer des applications PWA sans avoir à accomplir le gros du travail. Jordan Eisenburger Responsable de la technologie PWA Experius L’approche de Magento Commerce consistant à mettre PWA Studio à disposition en tant que projet open source sur GitHub permet aux équipes de développement de se familiariser avec les ressources complémentaires et la technologie requise. S’habituer à un nouveau framework prend du temps, et PWA Studio a été spécialement conçu pour optimiser l’expérience des développeurs, leur facilitant la tâche avec des outils performants, une documentation complète et des tutoriels de prise en main. 17
Des sites mobiles réinventés avec PWA Studio de Magento Commerce Que vous soyez une entreprise B2C ou B2B, Magento PWA Studio peut travailler pour vous. Les études de cas suivantes illustrent les bénéfices que peut apporter un investissement dans une expérience PWA. Eleganza Transformer la vente sur mobile avec PWA Studio Eleganza est une enseigne de mode haut de gamme bien connue aux Pays-Bas, qui commercialise des vêtements de marques comme Versace, Michael Kors et Valentino. Magento Commerce 1 approchant de sa fin de vie, Eleganza souhaitait profiter de l’occasion pour transformer son expérience de commerce mobile et jouer un rôle moteur sur son marché en adoptant la technologie PWA avec Magento Commerce 2. Avec l’aide d’Experius, partenaire en solutions de Magento, l’enseigne a entrepris de pérenniser l’identité visuelle de son environnement de commerce digital. Nous espérons générer plus de valeur à l’avenir, car la technologie PWA nous place aux avant- postes de notre marché et nous permettra d’y rester dans les prochaines années. Guus van der Staak Directeur du e-commerce Eleganza 18
Résultats En utilisant PWA Studio de Magento Commerce, l’application PWA d’Eleganza offre une expérience d’achat de type applicatif qui met l’accent sur la convivialité. Des fonctionnalités comme le défilement horizontal et la navigation simplifiée évitent le recours au bouton Précédent, caractéristique de la plupart des navigateurs. Eleganza a également amélioré plusieurs options de commande et les intégrations à des solutions de paiement locales pour livrer une véritable expérience omnicanal. 76 % 23 % 372 % d’augmentation du de réduction de réduction du nombre de pages du temps de temps de réaction vues par session chargement moyen du serveur moyen des pages Selco Builders Warehouse D’un retailer opérant dans des boutiques physiques à un précurseur du digital Selco, l’enseigne de matériaux de construction qui connaît la plus forte croissance au Royaume-Uni, propose un vaste catalogue de 15 000 produits différents aux artisans et entreprises du bâtiment. Sa plateforme de commerce n’étant plus adaptée à ses besoins, l’entreprise s’est associée à JH, un partenaire en solutions d’entreprise Magento Commerce, afin de migrer vers Magento Commerce 2. Cette opération devrait lui permettre de développer une expérience de commerce mobile évoluée à l’aide de PWA Studio. 19
300 % 82 % 94 % plus rapide que de hausse du d’augmentation l’ancienne plateforme chiffre d’affaires du nombre de transactions Résultats Grâce à sa collaboration avec JH, Selco est maintenant l’un des premiers commerçants B2B à lancer une expérience mobile à l’aide de PWA Studio. Les résultats obtenus ont donné à l’entreprise un énorme avantage concurrentiel sur son marché, en raison de la rapidité accrue de son site et des nombreuses améliorations apportées à l’expérience client. La récente mise à jour du site web de Selco constitue le premier déploiement d’une application web progressive jamais réalisé pour un commerçant B2B sur la plateforme Magento Commerce. Jamie Huskinsson PDG et fondateur, JH 20
Éléments à prendre en compte pour l’adoption des applications PWA Les applications PWA suscitant un intérêt croissant, les précurseurs ont une longueur d’avance sur leurs concurrents. Cependant, comme pour toute intégration technologique, une évaluation rigoureuse des objectifs métier et des ressources disponibles doit être effectuée avant de sauter le pas. Votre site a-t-il besoin Le trafic dicte-t-il la demande ? d’être actualisé ? Vos chiffres de vente et de trafic Passez votre site en revue pour sur mobile peuvent vous aider à savoir si le moment est venu déterminer s’il convient ou non de lui donner un coup de neuf. d’impulser une refonte totale Communique-t-il instantanément orientée mobile. Si plus de 50 % son objectif ? Comment du trafic web ou plus de 25 % des s’affiche-t-il en fonction des commandes en ligne proviennent plateformes et navigateurs ? du canal mobile, le terrain est Est-il facile à parcourir ? favorable au développement Le contenu est-il présenté d’une application PWA. de façon nette et précise ? 21
Avez-vous le budget pour Puis-je réallouer aux développer une application PWA ? applications PWA le budget Le coût global d’une application et/ou les ressources consacrés PWA avec Magento Commerce à d’autres applications ? varie en fonction des délais Si le développement d’applications de développement et de la PWA risque de grever votre complexité de votre plateforme budget, examinez les projets actuelle. Plus il y aura de vitrines déjà sur le feu. Si vous avez une Magento Commerce créées à l’aide application native en cours de d’applications PWA, y compris développement, envisagez de les extensions prêtes pour réaffecter une partie de son Marketplace, plus le coût global budget et de ses ressources du développement sera réduit. à une application PWA. 22
Conclusion Les applications PWA constituent un progrès significatif dans l’évolution du m-commerce. La technologie estompe les frontières entre applications natives et sites mobiles en donnant aux commerçants et développeurs les moyens de créer une expérience d’achat de type applicatif directement dans le navigateur. Étant donné la puissance, la vitesse et la souplesse offertes par la technologie PWA, il est difficile d’imaginer une expérience de commerce digital qu’elle ne permette pas d’améliorer, y compris la vôtre. Références 1, https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices 23 2, https://www.businessinsider.com/mobile-commerce-shopping-trends-stats 3, https://www.statista.com/statistics/249855/mobile-retail-commerce-revenue-in-the-united-states 4, https://cmo.adobe.com/articles/2020/1/adobe--2019-online-holiday-shopping-growth-driven- primarily-by-s.html#gs.7rzoq4 e. All rights reserved. 5, https://www.statista.com/statistics/276623/number-of-apps-available-in-leading-app-stores go are either trademarks of Adobe 6, https://www.thinkwithgoogle.com/data/smartphone-user-mobile-shopping-preferences /or other countries. 7, https://web.dev/what-are-pwas 8, https://techhq.com/2019/10/why-mobile-app-strategies-need-progressive-web-apps Copyright © 2021 Adobe. All rights reserved. Adobe, the Adobe logo, and Magento Commerce are either registered trademarks or trademarks of Adobe in the United States and/or other countries.
Vous pouvez aussi lire