Façons d'améliorer l'expérience utilisateur de votre site mobile de commerce électronique

Publié: 2021-08-30

Rappelez-vous toujours qu'une meilleure pratique partagée par quelqu'un peut ne pas être la meilleure pour les autres. Ces meilleures pratiques ne sont pas créées de manière égale mais ne sont que des points de départ. Dans cette série d'articles, nous passerons en revue les meilleures pratiques ou directives très recherchées des sites mobiles. Notre objectif est d'élargir nos connaissances sur le développement de sites mobiles étonnants et de valider les meilleures pratiques avec des données quantitatives sur la façon dont les utilisateurs perçoivent un site mobile dans la dimension spécifique de l'apparence, de la clarté, de la crédibilité et de la convivialité.

Comment améliorer l'UX du site mobile de votre boutique e-commerce

Il serait préférable d'utiliser ces directives d'article dans votre pratique, mais ce n'est pas ce avec quoi vous devriez vous retrouver. C'est là que vous devez commencer votre optimisation. Vous devriez être au moins aussi bon que ces directives. N'oubliez pas qu'il s'agit des pratiques Web actuelles. Ce qui fonctionnait il y a 2 ans pourrait ne plus fonctionner. Le chiffre tactique est réel. Les gens, les technologies Web et les tendances marketing changent constamment et les gains sont toujours périssables.

Nous vous recommandons de prendre en compte ces directives, mais également de considérer comment votre site Web spécifique s'intègre ou se différencie des directives. Vous pouvez appliquer ces pratiques sur votre site mobile tout de suite, bien que nous vous recommandons de les tester d'abord. Ils peuvent ne pas être appliqués dans tous les cas. Passons en revue la première partie de « Comment améliorer l'UX du Site Mobile de votre Boutique E-commerce ?

1. Essayez d'abord de concevoir votre site mobile (c'est-à-dire avant de concevoir le site de bureau)

Nous connaissons tous l'importance des appareils mobiles dans nos ventes. Plus de 50 % des ventes sont réalisées à partir d'appareils mobiles. Concevoir votre site mobile n'est ni amusant ni facile. C'est la façon la plus intelligente de commencer à concevoir votre site. Voyons pourquoi :

Les restrictions sont que les appareils mobiles sont plus élevés que toute autre plate-forme. Les écrans sont plus petits, la bande passante est faible, ainsi que de nombreuses autres restrictions. Si vous partez de zéro avec le site mobile, les complications qui accompagnent une dégradation progressive (telles que des fonctions qui ne se traduisent pas sur plusieurs plates-formes ou des données indésirables qui prennent plus de temps à charger) peuvent être évitées.

Ensuite, un site mobile convivial doit être propre, intuitif et rapide à charger. Ces exigences obligent les concepteurs à comprendre pourquoi les utilisateurs visitent le site et quels contenus et fonctionnalités sont essentiels.
Une meilleure UX sur les plateformes mobiles signifie que les utilisateurs peuvent facilement trouver tout ce qu'ils recherchent et rien de plus. En plus de cela, le développement d'un cadre clair pour le contenu hiérarchisé réduit la charge de travail pour la conception du site de bureau.

2. Redirigez automatiquement le site mobile et les pages doivent être optimisées pour les mobiles

Le nombre d'utilisateurs mobiles continue d'augmenter, augmentant le nombre d'acheteurs depuis le mobile. Les gens font des achats fréquents depuis leur téléphone portable et s'attendent à ce que ce soit facile. Si vous ne suivez pas, vous prenez du retard.

Pour suivre le rythme, le site de commerce électronique doit être optimisé pour tous les appareils. Offrez une meilleure expérience mobile grâce à un site mobile optimisé, c'est-à-dire un site mobile entièrement réactif.

La conception réactive est une pratique dans laquelle les pages Web s'adaptent à l'écran sur lequel elles sont affichées. Le contenu de la page Web s'adapte automatiquement aux écrans des différents appareils tels que les ordinateurs portables, les smartphones, les tablettes, les ordinateurs de bureau, etc. Il n'y aura aucun changement dans le contenu et les fonctionnalités avec cette approche.

Avec un site responsive, la même URL correspond à toutes les plateformes. Cela signifie simplement qu'il n'y aura pas d'URL distinctes pour les appareils mobiles et que les utilisateurs n'ont pas à attendre pour rediriger vers ces URL. Moins de temps de chargement = meilleure expérience mobile . De plus, tout le référencement va vers une seule URL.

Un site adaptatif est comme un site réactif, mais il n'y a pas une seule mise en page pour n'importe quelle taille d'écran. Au lieu de cela, il existe plusieurs dispositions pour différentes tailles d'écran. Le site détecte quel appareil est utilisé et affiche la mise en page respective.

Il est facile d'atteindre cette ligne directrice en développant un site mobile réactif. Assurez-vous d'effectuer le contrôle qualité du site sur différentes plates-formes et appareils (avec différents navigateurs). Vérifiez également toutes les pages du site pour vous assurer qu'elles sont optimisées pour les mobiles. La clé ici est d'offrir une expérience utilisateur optimale pour les utilisateurs mobiles.

3. Conception cohérente sur différentes plates-formes pour une expérience utilisateur plus fluide

Vous devez maintenir la cohérence et la norme sur toutes les plates-formes et tous les appareils pour garantir la convivialité. Cela signifie que les utilisateurs rencontreront les mêmes visuels, modèles et flux sur votre boutique de commerce électronique, quel que soit l'appareil qu'ils utilisent. En bref, les utilisateurs qui accèdent à votre boutique e-commerce via un appareil mobile ou un navigateur de bureau ont la même expérience.

Comme les tailles d'écran sont différentes, le besoin de différentes mises en page peut survenir, mais dans une expérience conçue de manière cohérente, les utilisateurs reconnaîtront les fonctionnalités familières.

De nombreuses startups et entrepreneurs commettent l'erreur de traiter les sites de bureau et mobiles comme des produits différents. Cette approche peut créer des incohérences, entraînant une UX moins bonne et un potentiel de malentendu sur la marque de l'entreprise.

Vous pouvez éviter ce problème. Voici quelques recommandations :

A. Identité visuelle

Essayez d'utiliser les mêmes couleurs, apparence, styles de police, éléments visuels, etc.

B. Iconographie cohérente

les icônes d'application et Web doivent représenter la même fonctionnalité

C. Libellé

Les noms des boutons, des liens et des options de menu doivent être les mêmes sur les sites Web mobiles et de bureau

D. Interactions & flux

Le processus de navigation pour chaque fonctionnalité doit être le même (par exemple, trouver un produit ou une méthode de paiement)

E. Coordination entre les concepteurs, les développeurs et les testeurs

Tous les membres de l'équipe doivent avoir une compréhension similaire de chaque fonctionnalité déployée.

En appliquant ces concepts de base, les utilisateurs se sentent à l'aise d'utiliser les services Web et mobiles sans difficulté.

4. Tirez parti de l'analyse pour donner la priorité à un appareil lors de la conception de votre site mobile

Nous accédons tous à un site Web via nos appareils mobiles au moins une fois. Mais si vous savez quel appareil mobile ou quelle plate-forme est le plus utilisé pour surfer sur votre boutique, vous pouvez optimiser votre site au mieux pour cet appareil.

Des outils d'analyse tels que Google Analytics peuvent vous fournir des informations métriques efficaces, rapides et claires pour déterminer exactement comment un utilisateur accède à votre site Web. En utilisant Google Analytics, vous pouvez obtenir les réponses aux questions suivantes :

  • Combien d'utilisateurs qui ont visité le site Web appartenaient à la communauté Android ou iOS ?
  • Quelle fraction des visiteurs utilise des appareils dotés d'un écran basse résolution ?
  • Y a-t-il une différence entre le nombre de visites de pages des utilisateurs utilisant la dernière version d'Android et celle de 2 ans ?
  • Combien de temps les utilisateurs mobiles iOS passent-ils dans le magasin par rapport aux utilisateurs Android ?
  • Quel type de connexion a été utilisé ? Wifi ou données mobiles ?

De telles données sont précieuses pour la stratégie produit et les entreprises peuvent se concentrer sur votre public cible. Ils peuvent créer des produits qui répondent aux besoins réels de leurs utilisateurs.

Par exemple , une boutique de commerce électronique a beaucoup d'images, de contenu et une longue liste qui nécessite un défilement à l'écran. Ils peuvent se rendre compte que la plupart des utilisateurs restent sur le site pendant quelques secondes. L'entreprise peut vérifier le profil des appareils qui ont accédé à son site. Si les utilisateurs qui partent utilisent des appareils avec de petits écrans et de faibles résolutions, les gens peuvent quitter le site en raison d'une mauvaise UX. La prochaine étape que nous pouvons franchir est donc d'améliorer l'UX.

Bref, plus nous en savons sur les utilisateurs, plus nous pouvons garantir un produit accessible, efficace et agréable.

Embaucher des développeurs de commerce électronique

5. Testez les versions mobiles de votre site

Vous devez vérifier à quoi ressemble votre site Web et fonctionne sur différents appareils mobiles. Il existe certains outils disponibles que vous pouvez utiliser pour tester votre site Web.

A. Adapté aux mobiles de Google

Il s'agit d'un outil simple. Vous devez entrer l'URL de votre site et Google générera un avis "convivial". L'examen peut être comme ceci :
"Cette page est facile à utiliser sur un appareil mobile."
OU
"La page n'est pas adaptée aux mobiles - cette page peut être difficile à utiliser sur un appareil mobile. Corrigez les problèmes suivants :

  • Texte trop petit pour être lu
  • Fenêtre non définie
  • Éléments cliquables trop rapprochés
  • Utilise des plugins incompatibles.

B.Test mobile. moi

Dans le test.me mobile, vous devez entrer l'URL du site Web que vous souhaitez vérifier et sélectionner l'appareil et le système d'exploitation. À partir de là, vous pouvez obtenir la vue complète du site Web sur n'importe quel appareil mobile. En testant, vous pouvez corriger les erreurs avant le lancement.

6. Créez des mises en page de conception flexibles et fluides

Sur le marché actuel, il existe de nombreuses résolutions mobiles et tailles d'écran, ce qui augmente les efforts des concepteurs. Les densités de nombreux appareils varient également. De l'écran basse densité (360 pixels) à l'écran haute densité (4K), voici les manières courantes de décrire la densité :

  • Faible densité (ldpi)
  • Densité moyenne (mdpi)
  • Haute densité (hdpi)
  • xhdpi (Très haute densité)
  • xxhdpi (Très très haute densité)
  • xxxhdpi (extra-extra-extra haute densité)

Voici quelques termes simples liés à la densité

A. Résolution

Nombre de pixels sur l'écran

B. Pixel indépendant de la densité (DP)

Une unité de pixel virtuel définit une disposition d'interface utilisateur. Un DP exprime les dimensions ou la position de la disposition d'une manière indépendante de la densité. Le DP est égal à 1 pixel physique sur un écran 160dpi.

C. Taille de l'écran

La taille de l'écran est mesurée en longueur diagonale de l'écran.

D. Densité de l'écran

Quantité de pixels dans la zone physique de l'écran, généralement représentée par des points par pouce.

Tous ces concepts peuvent être appliqués lors du développement du site mobile. Il garantit que les interfaces sont adaptables sur tous les appareils. C'est ce qu'on appelle une interface fluide. En bref, une interface fluide est une interface dont les dimensions sont définies en pourcentage.

7. Si vous n'utilisez pas de conception réactive, créez des URL distinctes pour maintenir la cohérence

Lors de la conception de l'interface utilisateur de la boutique de commerce électronique, les concepteurs doivent réfléchir à la façon dont le contenu sera affiché et les utilisateurs avec différents appareils y accéderont. Dans certains scénarios, la proportion et la disposition diffèrent beaucoup des spécifications de conception d'origine. Lorsque les sites Web ne sont pas conçus pour s'adapter à plusieurs appareils, ils ne sont pas « responsives ».
La conception réactive est une technique de développement qui détecte le type de périphérique client et ajuste sa conception pour s'adapter à la taille de l'écran sur lequel il est affiché. Ainsi, un même contenu peut être affiché au format 3 colonnes sur un ordinateur de bureau, au format 2 colonnes sur une tablette et au format 1 colonne sur un smartphone.

Une conception non réactive peut survenir de multiples problèmes tels que des tailles de police incorrectes, des boutons non cliquables, etc. Tout le monde n'est pas comme nous pour créer des conceptions très réactives. Mais il existe une alternative pour les développeurs et les concepteurs pour gérer la conception Web réactive. Ils peuvent générer des URL qui reconnaissent automatiquement (via des balises HTML) le type d'appareil. Après avoir détecté l'appareil, le contenu peut être affiché de manière optimale :

Quelques exemples d'URL générées sont

  • www.website.com (accès depuis le bureau)
  • m.website.com (accès mobile)
  • www.website.com (version allégée avec HTML de base) (accès par téléphone)

8. Utilisez « viewport Meta Tag » pour adapter les pages aux écrans mobiles

Selon Google, "une fenêtre d'affichage peut contrôler la manière dont la page d'accueil s'affichera sur les appareils mobiles". En d'autres termes, si les concepteurs ne tiennent pas compte de la fenêtre d'affichage, l'interface utilisateur sur un appareil mobile apparaîtra exactement comme le site de bureau. Le système adaptera l'écran pour une utilisation mobile dans ce scénario, mais cela ne fonctionne généralement pas. Dans certains cas, les images seront déformées et créeront une mauvaise expérience utilisateur. Après avoir appliqué la fenêtre, les concepteurs peuvent contrôler le mode d'affichage et améliorer l'UX.

Comment prendre en compte le Viewport ?

Vous pouvez utiliser une balise CSS appelée « balise méta viewport », qui est incluse dans la spécification CSS Device Adaptation.
Cette balise a la syntaxe suivante : <meta name = “viewport” content = “width = device-width, initial-scale =1”>

9. Lors du lancement de la conception mobile, déterminez le « noyau » du site Web.

Lors de la création des conceptions du site mobile, les concepteurs doivent s'assurer que les principales fonctionnalités du site sont présentées clairement. En bref, les sites Web mobiles devraient permettre une fonctionnalité complète car le CTA est évident sur tout site Web conçu pour les appareils mobiles.

Mais comment déterminer les autres fonctionnalités à inclure ? Pensez au cœur de votre site Web. Quels sont les principaux piliers du site Web ? Quelles sont les principales caractéristiques du site Web ? Quelles fonctionnalités sont mineures mais améliorent l'UX (comme la recherche, les filtres, etc.) ?

Passons en revue un exemple d'application du concept de base à un site de commerce électronique de livraison de nourriture. Les principaux piliers de ce site seraient :

  • Connectez-vous et inscrivez-vous
  • Recherche de produit
  • Liste de produits
  • Ajouter au panier
  • Vérifier

Un site de bureau a plus de fonctionnalités, mais vous pouvez filtrer celles qui sont nécessaires et les inclure dans le site mobile. Cela élimine également la possibilité que les utilisateurs se sentent dépassés par trop d'options sur un petit écran.

10. Utilisez des formulaires simples et des champs de saisie

Il existe un formulaire que l'utilisateur peut remplir sur de nombreux sites pour contacter l'équipe d'assistance ou obtenir des newsletters et à d'autres fins. Les utilisateurs mobiles peuvent trouver ces formulaires un énorme problème s'ils ne sont pas correctement conçus. Plus le formulaire est long et complexe, plus il est difficile pour les utilisateurs de saisir des informations.

Comment optimiser le formulaire pour les appareils mobiles ?

  • N'incluez que les champs essentiels que les utilisateurs doivent obligatoirement saisir. S'il y a trop de champs obligatoires, l'utilisateur est plus susceptible d'abandonner le processus d'inscription.
  • Ne divisez pas les champs en trop de champs. Par exemple, le prénom/nom de famille peut être considéré comme un simple nom.
  • Assurez-vous que le clavier numérique est automatiquement activé pour les champs numériques tels que Contact no. , code postal, etc.
  • Faites des messages d'erreur concis.
  • Essayez d'inclure l'automatisation dans les champs. Par exemple, tout en demandant l'adresse de l'utilisateur, tirez parti de la fonctionnalité GPS et pré-remplissez les champs tels que le code PIN, l'état, la ville, etc.

L'application de ces concepts de base améliorera l'UX de votre site mobile. Ces applications limiteront les chances que les utilisateurs abandonnent le formulaire ou votre site.

Emballer

Dans la première phase de cette série, nous avons passé en revue 10 directives pour améliorer l'UX du site mobile de votre boutique e-commerce. Chez Emizentech, la meilleure société de développement de commerce électronique en Inde, nous avons une expertise dans le développement de magasins de commerce électronique hautement réactifs. Faites-nous part de vos exigences.