UX eCommerce pour l'expérience mobile

Le terme « commerce mobile » a été introduit il y a 20 ans par Kevin Duffey lorsqu'il a suggéré qu'un appareil mobile pouvait fonctionner comme un point de vente dans la poche d'un client. Compte tenu des limitations technologiques de l'époque, qui aurait pensé que nous serions un jour capables d'explorer, d'examiner et d'acheter facilement des biens sur un petit appareil de poche ?

Je ne peux pas exagérer à quel point le mobile change la façon dont nous interagissons avec nos consommateurs ; nous devons accepter ces changements. – Joel Anderson, PDG de Walmart

La croissance fulgurante du commerce électronique a également alimenté la croissance du commerce électronique mobile, qui vaut désormais près de 700 milliards de dollars. Le commerce électronique mobile est actuellement la plus grande tranche du marché en ligne géant. Plus de 80 % des Américains ont effectué un achat en ligne au cours du dernier mois. Il y a trois ans, ce chiffre n'était que de 11,6 %.

Un rapport de Business Insider Intelligence a suggéré que le commerce mobile augmentera jusqu'à 45 % d'ici 2020. Les recherches de ComScore ont convenu et, en 2016, ont signalé une augmentation de 44 % des dépenses via les appareils mobiles par rapport à 2015.

Malgré les chiffres de vente élevés, plus de 60 % des utilisateurs craignent toujours que leurs informations financières ne soient piratées lorsqu'ils utilisent un téléphone mobile. Néanmoins, la satisfaction des clients reste assez élevée, les géants de la vente au détail mobile comme Amazon et Apple obtenant tous deux un taux de satisfaction supérieur à 80 %.

Meilleures pratiques UX du commerce électronique mobile pour réussir

Prend en charge le zoom d'image en pinçant et en appuyant deux fois sur les gestes

Les gens sont familiers avec des gestes comme le double tapotement et le pincement pour zoomer sur les images sur mobile. Au cours d'une étude sur l'utilisabilité du commerce électronique mobile, l'Institut Baymard a constaté que, tout naturellement, les acheteurs veulent pouvoir inspecter le produit en profondeur et se soucient des petits détails. Les utilisateurs qui étaient intéressés par l'achat d'un produit mais qui ne pouvaient pas l'explorer en zoomant ne se sentaient pas à l'aise de l'acheter et ne s'engageaient souvent pas à la vente.

Il est assez surprenant que sur les 50 applications de commerce électronique mobile les plus rentables, plus de 40 % ne prennent pas en charge les gestes de zoom. Même les sites proposant des versions en gros plan des images ont connu des taux de rebond similaires, ce qui suggère que la prise en charge des gestes de zoom d'image de produit dans une application de commerce électronique mobile est fondamentale.

Compte tenu de la petite taille de l'écran des appareils mobiles, il s'agit d'un problème spécifique à la plate-forme. La prise en charge d'au moins une de ces fonctionnalités placera une application parmi les 50 % des applications de commerce électronique les plus performantes, c'est-à-dire la liste des plus rentables.

Quelques facteurs à considérer :

• Les images à faible résolution sont l'équivalent des images sans zoom. Les utilisateurs souhaitent voir clairement les détails d'un produit et ont besoin d'images haute résolution pour ce faire. L'option de zoomer sur une image de faible qualité est pratiquement inutile, car elle ne permet pas à l'utilisateur de voir les détails.
• L'Institut Baymard a découvert que 50 % des applications n'indiquent pas aux utilisateurs qu'ils peuvent pincer ou appuyer deux fois sur les images des produits. Il est important d'indiquer la disponibilité du zoom d'image. Bien que ces gestes soient communément connus des mobinautes, encore faut-il montrer qu'ils sont disponibles. L'utilisation d'icônes ou de représentations visuelles est recommandée pour ce faire.

Fournir une fonction "Enregistrer" pour le panier

Comme mentionné précédemment, la petite taille de l'écran des appareils mobiles est un obstacle majeur en matière de commerce électronique mobile. L'Institut Baymard a observé que plus de 61 % des utilisateurs mobiles utiliseront souvent leur ordinateur de bureau pour effectuer un achat plutôt que leur téléphone.

Une fonction "sauvegarder le panier" réduit le nombre d'abandons de panier et permet aux acheteurs de sauvegarder des articles pour un achat ultérieur. Les paniers d'achat persistants permettent aux clients de poursuivre leurs achats sans avoir à rechercher le produit souhaité à leur retour, une fonctionnalité que 55 % des acheteurs utiliseraient.

Voici comment fidéliser ces clients :

1. Faites fonctionner le panier comme une liste de souhaits en enregistrant les articles ajoutés au panier.
2. Créez une option pour permettre aux acheteurs de recevoir des e-mails avec des articles enregistrés. Affichez des rappels leur indiquant qu'ils peuvent utiliser leur bureau pour finaliser l'achat.

Utilisez des formulaires descriptifs et bien étiquetés

L'application des meilleures pratiques pour les formulaires mobiles est une autre considération. Il est important que la conception UX d'une application ou d'un site de commerce électronique, tout en éliminant toute confusion, permette aux utilisateurs de remplir les formulaires le plus rapidement possible.

Voici les meilleures pratiques pour la convivialité des formulaires mobiles :

• Placez des étiquettes de formulaire au-dessus du formulaire pour améliorer la lisibilité, la facilité d'utilisation et la clarté. Expliquer pourquoi certaines informations sont nécessaires réduira l'anxiété des utilisateurs lorsqu'ils remplissent des formulaires sur leur mobile.
• Faites correspondre les entrées de texte avec le clavier approprié. Afficher un pavé numérique lors de la saisie de numéros de téléphone et de chiffres de carte de crédit, et un pavé de texte lors de la saisie d'adresses et de texte. Cela réduira les erreurs des utilisateurs et accélérera le remplissage du formulaire.
• Limitez le nombre de champs de saisie pour réduire l'effort de frappe. Moins de champs de saisie généreront un formulaire moins chargé et amélioreront le flux de paiement UX.
• Avance automatiquement chaque champ vers le haut de l'écran une fois terminé. Cela n'obstruera pas la vue des champs incomplets.
• Utilisez des étapes au lieu de menus déroulants pour réduire l'effort de l'acheteur. Les steppers sont utilisés pour augmenter ou diminuer la valeur d'une quantité constante et constituent une solution plus rapide à utiliser et plus attrayante pour les yeux.

Fournir une suggestion automatique intelligente, une détection automatique, une recherche d'adresse et des erreurs

L'objectif principal de la suggestion automatique est de permettre aux utilisateurs de remplir des formulaires plus facilement et plus rapidement. La suggestion automatique prédit les requêtes de recherche courantes et aide les acheteurs à trouver des produits plus facilement.

La convivialité mobile peut être encore améliorée en utilisant la détection automatique du type de carte de crédit. La détection automatique rationalise le processus d'achat en fournissant une rétroaction immédiate sur les types de cartes pris en charge. L'automatisation d'autant de processus de saisie de données que possible, de préférence avec des éléments visuels, améliore l'expérience utilisateur et aura un effet positif sur les taux de conversion.

La recherche et la validation d'adresses accélèrent le processus de paiement - diverses API (telles que Google Places et USPS) permettent une mise en œuvre facile de cette fonctionnalité.

Fournir une validation des entrées en ligne pour les erreurs est également une bonne pratique dans la conception UX mobile. Le manque de performances rapides est une frustration majeure pour les acheteurs de commerce électronique. Cela peut être aidé en fournissant aux utilisateurs un retour en direct sur leur progression (lors du paiement, par exemple), en particulier lorsqu'ils commettent une erreur par inadvertance. Cela permet aux utilisateurs de corriger leurs erreurs immédiatement, ce qui affecte positivement la convivialité.

Utiliser les micro-interactions pour améliorer l'UX du shopping mobile

Les micro-interactions sont des détails de l'interface d'un produit destinés à accomplir une tâche unique tout en améliorant le flux de produits naturels. Aimer et évaluer un produit, choisir une couleur et une taille, et balayer vers le bas pour actualiser les données sont tous des exemples de microinteractions.

Compte tenu de leur fréquence, les micro-interactions peuvent faire ou défaire l'expérience utilisateur d'une application de commerce électronique mobile.

Les microinteractions peuvent être utilisées pour :

• Guidez l'utilisateur à travers l'application de manière plus intuitive ;
• Transmettre un meilleur sentiment de confiance, réduire l'anxiété des acheteurs et augmenter le confort psychologique global grâce à des interactions plus fluides et plus naturelles ;
• Prévenez les erreurs futures et fournissez un retour immédiat aux utilisateurs en fonction des activités qu'ils ont effectuées ; et/ou
• Améliorez l'interaction de l'utilisateur avec l'application en répondant aux notifications.

Fournir une interaction facile, orientée vers le pouce

Comprendre les façons les plus courantes dont les acheteurs tiennent leurs appareils mobiles améliore l'expérience utilisateur et la convivialité du commerce électronique mobile. En 2013, Steven Hoober a demandé « Comment les utilisateurs tiennent-ils vraiment les appareils mobiles ? » et observé comment les gens interagissent avec et tiennent leurs smartphones, et ont remarqué trois principaux modèles de comportement qui devraient guider la conception de l'UX mobile.

L'adaptation des interfaces à la façon dont les gens utilisent naturellement les téléphones mobiles augmentera le confort de l'utilisateur et réduira l'anxiété des acheteurs. Les appareils mobiles et les tailles d'écran varient, mais la "zone du pouce", un aspect essentiel de la conception et de l'expérience utilisateur, reste la même.

Concevoir autour de la « zone du pouce » :

• Résout les problèmes potentiels de navigation et d'exploration
• Améliore l'interaction en adaptant mieux les gestes et la portée des doigts
• Convertit mieux et améliore la convivialité en plaçant les éléments importants dans des zones "faciles à atteindre"

Considérations pour la conception de commerce électronique mobile axée sur la conversion

Transmettre un sentiment de sécurité dans les applications de commerce électronique mobile

La sécurité est l'une des principales préoccupations des utilisateurs lors de leurs achats sur des appareils mobiles. Communiquer que leurs transactions sont sécurisées ajoute beaucoup de valeur à la perception positive que les acheteurs ont d'un magasin.

Voici quelques techniques de conception UX qui communiquent la sécurité aux utilisateurs et réduisent l'anxiété des utilisateurs :

• Faites en sorte que les étiquettes des boutons soient suggestives et claires quant à la destination des acheteurs. Des mots comme « continuer », « sécurisé » et « crypté » renforceront le confort psychologique des utilisateurs.
• Utilisez des symboles de verrouillage pour garantir aux acheteurs que leurs transactions sont sécurisées.
• Utilisez les badges de confiance de fournisseurs de sécurité tels que McAfee Secure et Norton. Cela aide les utilisateurs à percevoir positivement un site Web (étude de l'Institut Baymard).
• Appliquez les principes de la psychologie des couleurs dans la conception pour une perception encore meilleure de la confiance des acheteurs. Certains de ces principes incluent des couleurs axées sur le public et spécifiques au sexe.

Prioriser la recherche (et la garder au-dessus du pli)

Les acheteurs utilisent un site ou une application de commerce électronique mobile pour explorer des produits ou acheter un produit particulier ; par conséquent, une recherche bien conçue revêt une importance cruciale pour une application de commerce électronique mobile. eBay estime que la recherche sur son site est l'une des fonctionnalités les plus importantes pour les acheteurs mobiles et la met en valeur en la plaçant au centre et au-dessus du pli de l'interface.

Considérations importantes pour la recherche mobile :

• Assurez-vous qu'il est visible! Garder la barre de recherche facile d'accès et au-dessus du pli donne aux acheteurs un moyen de rechercher des produits sans effort.
• Fournissez une recherche anticipée en utilisant les données acquises à partir de modèles de recherche courants et affichez les produits associés sur les pages de résultats de recherche.
• Fournissez des options de filtrage avancées qui permettent aux clients de trouver rapidement et sans effort les produits qu'ils souhaitent.

Un aspect important à prendre en compte lors de l'affichage des formulaires de recherche est qu'ils ne sont utiles qu'aux premières étapes de l'interaction de l'utilisateur avec l'application. Les utilisateurs recherchent généralement l'application au début de leur parcours d'achat, et il peut y avoir des cas où l'affichage d'un formulaire de recherche plus tard dans le parcours peut nuire à l'UX.

Par exemple, pendant le processus de paiement, la recherche n'est plus utile et ne fera que distraire car elle pourrait amener les utilisateurs à perdre leur concentration et à renoncer à leur engagement d'achat.

Fournir un paiement fluide, facile et rapide

Des études ont montré que le processus de paiement est la partie la plus stressante d'un achat en ligne. Le Baymard Institute rapporte un taux de 35% d'abandon de panier en raison de l'obligation de créer un compte avant d'acheter. Afin de réduire les taux d'abandon de panier, il est important de concevoir un processus de paiement simple et rapide qui ne demande pas aux acheteurs de s'inscrire en premier.

Des études d'utilisabilité ont révélé que plus de 60 % des utilisateurs avaient des difficultés à trouver l'option de paiement en tant qu'invité ; Par conséquent, l'option de paiement des invités doit être clairement visible et facile d'accès.

Voici quelques suggestions pour améliorer le flux de paiement du commerce électronique :

• Pour favoriser l'engagement des utilisateurs, étiquetez chaque étape du processus de paiement en numérotant et en affichant l'étape actuellement active.
• Utilisez des représentations visuelles comme des barres de progression pour afficher la progression du processus de paiement.
• Fournissez une option pour vous inscrire et vous connecter pendant le processus de paiement, mais faites-en un choix.
• Afin de réduire l'anxiété et les taux de rebond, suggérez aux utilisateurs de se connecter ou de s'inscrire après le paiement s'ils ont effectué le paiement en tant qu'invité.
• Appliquez des techniques de divulgation progressive pour améliorer l'attention de l'utilisateur et charger le contenu 30 % plus rapidement.

En résumé : Quelles sont les principales caractéristiques d'une conception de commerce électronique mobile réussie ?

• Fournit des flux de processus d'inscription et de paiement rapides et faciles
• Instille un sentiment de sécurité et de confiance en affichant des icônes, des badges, des avis et des témoignages appropriés
• Fournit une interaction conçue autour de zones conviviales pour le pouce
• Utilise une navigation cohérente et condensée
• Intègre une recherche rapide et un filtrage facile des produits
• Comprend le lien direct entre le stress, l'anxiété et les taux de conversion des utilisateurs pour les applications mobiles
• Fournit des expériences de chargement rapide et réactives des sites mobiles
• Prend en charge les gestes pour le zoom de l'image du produit

L'espace de commerce électronique mobile ne fera que s'agrandir

Les tendances du commerce électronique mobile montrent que le marché du commerce électronique mobile connaît une croissance exponentielle et que la croissance de l'industrie a créé une multitude d'avantages pour les vendeurs. Cependant, cela s'est accompagné de nombreuses meilleures pratiques et normes de conception de commerce électronique mobile que les vendeurs doivent suivre s'ils veulent réussir.

Les acheteurs attendent une application mobile qui fonctionne bien, qui soit belle et qui soit adaptée à leurs comportements. Bien que chaque application soit différente avec ses propres limites et objectifs, suivre les principes fondamentaux décrits dans cet article aidera à créer des applications de commerce électronique mobiles réussies.

Téléchargez une feuille de triche pour l'amélioration de l'expérience utilisateur du commerce électronique mobile

• • •

Pour en savoir plus sur le blog Toptal Design :

• Les principales tendances du commerce électronique et leur influence sur la conception (avec infographie)
• eCommerce UX - Un aperçu des meilleures pratiques (avec infographie)
• eCommerce UX - Stratégies et principes de conception essentiels
• Le guide ultime de la conception de sites Web de commerce électronique
• Le commerce électronique repensé : comment des modifications mineures ont apporté des améliorations majeures à l'expérience utilisateur