Liste de contrôle en 110 points pour une conception Web adaptée aux mobiles dans le commerce électronique

Plus de pages vues, fidélité des clients, appréciation par les moteurs de recherche, plus d'achats en ligne - la liste des raisons pour rendre votre site Web adapté aux mobiles est pratiquement infinie.

Les magasins de commerce électronique sont un excellent exemple de la façon dont l'utilisabilité mobile se transforme en bénéfices directs, car le parcours de l'acheteur de la page principale au paiement est fluide. C'est ainsi qu'un bon design stimule les ventes !

Comment créer une conception Web mobile adaptée aux mobiles ? Il y a tout un tas d'aspects à considérer. Notre agence Web a élaboré une liste de contrôle utile pour la conception de sites Web adaptés aux mobiles dans le commerce électronique. À l'exclusion des points spécifiques au commerce électronique, la liste de contrôle contient de nombreux conseils de conception adaptés aux mobiles qui s'appliquent également aux sites Web de tous les autres secteurs. Allons-y!

Qu'est-ce qu'une conception de site Web adaptée aux mobiles ?

Au sens large, un site Web adapté aux mobiles est un site Web qui peut être consulté et parcouru confortablement sur tous les appareils : ordinateurs de bureau, tablettes et mobiles. Dans le commerce électronique, cela signifie qu'il est facile d'effectuer toutes les étapes d'achat, de la sélection des produits à la caisse, sur un appareil mobile. Cela inclut les formulaires, les boutons, le panier, etc., compatibles avec les appareils mobiles, reflétés plus loin dans notre liste de contrôle pour le commerce électronique.

Comment puis-je vérifier si mon site Web est adapté aux mobiles ?

De nombreux clients peuvent penser que leur site Web est correct, mais en réalité, il a encore besoin de beaucoup de travail. Il existe des outils en ligne pour voir à quoi ressemble et fonctionne votre site Web à partir d'un appareil mobile et s'il est prêt ou non à offrir une bonne expérience mobile. Parmi eux, citons le test adapté aux mobiles de Google, BrowserStack, W3C mobileOK Checker, le Marketing Grader de HubSpot, PageSpeed ​​Insights de Google, etc.

Comment rendre un site web mobile friendly ?

Dans le développement de sites Web adaptés aux mobiles, il existe deux approches les plus courantes : la conception Web réactive et une version de site Web mobile de votre boutique en ligne. La première option a plus d'avantages et est plus recommandée aujourd'hui. Dans tous les cas, quelle que soit la mise en œuvre de la conception de sites Web pour mobile que vous choisissez, voici la liste de contrôle complète basée sur les principes de conception adaptés aux mobiles dans le commerce électronique.

Liste de contrôle adaptée aux mobiles pour la conception d'un magasin de commerce électronique

Directives générales de conception mobile pour les magasins de commerce électronique

• Fournir un défilement instantané vers le haut de la page
• Ajouter un logo cliquable sur toutes les pages du site
• Assurez-vous de la bonne taille de tous les éléments de conception cliquables
• Utilisez les couleurs de votre marque dans tous les éléments de conception
• Prendre soin du texte lisible
• Prévoyez suffisamment d'espace entre les blocs de mise en page
• Évitez les fenêtres pop-up ennuyeuses
• Ajoutez le favicon unique de votre marque
• Sur chaque page, il doit être clair que l'utilisateur se trouve dans votre boutique e-commerce (grâce à l'en-tête et au design)
• Enrichissez les pages de votre boutique en ligne avec des images de produits optimisées
• Ajoutez un CTA clair à chaque page doit acheter un produit et commander un appel
• Rendre le panier, la fonction de recherche et les contacts disponibles sur chaque page
• Fournir l'historique de vue du produit sur toutes les pages
• Assurez-vous que votre boutique e-commerce est bien testée contre les bogues et les erreurs

Conception de la mise en page de la page de commerce électronique mobile

• Placez le panier dans le coin supérieur droit
• Placez l'option de connexion/inscription dans le coin supérieur droit
• Placez le logo de l'entreprise dans le coin supérieur gauche
• Placez la fonction de recherche en haut
• Placez le sélecteur de langue dans l'en-tête

Recherche adaptée aux mobiles sur votre boutique e-commerce

• Fournissez à votre boutique en ligne une fonction de recherche
• La barre de recherche doit avoir une place fixe sur toutes les pages
• Ajoutez un espace réservé à votre barre de recherche (comme "Votre recherche ici")
• Rendez la barre de recherche facile à effacer en cliquant sur "X"
• Autoriser la recherche de mots mal orthographiés
• Rendre la recherche indépendante de la forme du mot (comme le pluriel ou le singulier)
• Utiliser les suggestions de recherche
• Autoriser les utilisateurs à effectuer des recherches par synonymes menant au même produit
• Aidez les utilisateurs à suivre leur historique de recherche
• Afficher le nombre de résultats trouvés
• Proposer d'autres options ou inviter les utilisateurs à utiliser la recherche avancée lorsque le produit est introuvable

Conception de navigation e-commerce adaptée aux mobiles

• Fournir le menu de navigation principal avec les principales catégories et sous-catégories de produits
• Gardez le nombre d'éléments de menu principal au minimum
• Indiquez clairement comment ouvrir le menu
• Indiquez clairement comment fermer le menu
• Utilisez des icônes de produits pour améliorer les noms de catégories
• Soulignez la catégorie dans laquelle l'utilisateur se trouve actuellement
• Fournissez à votre boutique en ligne des fils d'Ariane, y compris des catégories et des sous-catégories

Boutons adaptés aux mobiles dans le commerce électronique

• Assurez-vous que les boutons sont assez grands pour cliquer avec les doigts
• Utilisez un espacement optimal entre les boutons
• Fournir des boutons avec un contraste élevé et des couleurs visibles
• Dans le même temps, évitez les couleurs de boutons trop vives
• Assurez-vous que la conception du bouton est conforme aux directives générales de votre marque
• Fournir des boutons avec des étiquettes claires qui décrivent leurs actions
• Améliorer visuellement la signification des boutons avec des icônes
• Fournir des commentaires aux actions (effets d'animation, étiquettes de changement d'état, changement de couleur, de son, etc. pour indiquer que l'action est bien faite)
• Placez les boutons là où les utilisateurs peuvent facilement les trouver dans l'interface utilisateur
• Positionnez les boutons dans un ordre logique qui reflète le chemin de l'utilisateur
• Afficher la priorité des boutons afin que le plus important soit le plus visible
• Évitez d'utiliser trop de boutons afin que les utilisateurs ne soient pas confus

Formulaires adaptés aux mobiles (inscription et paiement)

• Gardez les formulaires simples et gardez le nombre de champs de formulaire au minimum
• Autoriser l'option de paiement invité en un clic
• Autoriser l'option de connexion via des comptes de médias sociaux
• Afficher les exigences de mot de passe à l'avance
• Autoriser les utilisateurs à activer et désactiver la visibilité de la saisie du mot de passe
• Ajoutez des options de paiement semi-automatisées comme PayPal ou Amazon Pay qui sont rapides à compléter
• Équiper les formulaires d'étiquettes descriptives
• Fournir le clavier approprié en fonction de la saisie textuelle ou numérique
• Utiliser la fonction de correction automatique
• Utiliser la fonction de saisie semi-automatique
• Ajoutez des espaces réservés pour montrer à quoi les données nécessaires doivent ressembler
• Fournir un contexte utile (par exemple, les jours de la semaine lors de la planification des dates)
• Utiliser des champs plus simples (par exemple un champ "nom complet" au lieu de deux champs "prénom" et "nom")
• Expliquez pourquoi vous avez besoin d'informations spécifiques (un encadré récapitulatif ou une notification)
• Monter automatiquement les champs remplis vers le haut de l'écran
• Fournir des indicateurs de progression pour montrer le nombre d'étapes restantes
• Afficher l'état de réussite des étapes terminées dans l'indicateur de progression
• Utiliser des étiquettes et des champs de formulaire alignés en haut
• Essayez d'utiliser des menus déroulants et des listes déroulantes dans les formulaires
• Faites ressortir le bouton "soumettre" du formulaire
• Marquez les entrées incorrectes et correctes avec des couleurs, des graphiques, des étiquettes, etc.
• Fournissez à chaque champ particulier un retour d'information pour les erreurs
• Prenez soin de la validation instantanée des entrées de formulaire
• Utiliser une mise en page à une seule colonne
• Fournissez les couleurs, les contrastes et les polices sous la forme qui facilitent la lecture
• Aidez les utilisateurs à se sentir en sécurité en affichant un message indiquant que leur adresse ou leur téléphone restera confidentiel
• Assurez-vous que les formulaires se chargent rapidement

Photos et vidéos adaptées aux mobiles

• Assurez-vous de proposer des images optimisées
• Donner aux utilisateurs la possibilité de lire ou d'arrêter un diaporama
• Ne pas lire automatiquement les vidéos
• Fournir un zoom d'image en pinçant et en appuyant deux fois

Pages de produits de commerce électronique adaptées aux mobiles

• Assurez-vous que toutes les pages de produits ont un aspect uniforme
• Utiliser les mêmes unités de mesure
• Inclure des versions brèves et plus détaillées des informations

Catégories de produits de commerce électronique adaptées aux mobiles

• Afficher le nombre optimal de produits par page
• Autoriser les utilisateurs à choisir le nombre d'éléments affichés
• Masquer les catégories vides

Filtrage et tri des produits adaptés aux mobiles

• Assurez-vous que les options de filtrage sont en haut de la page
• Évitez les mises à jour de page avant que les utilisateurs aient appliqué tous les filtres
• Afficher le nombre d'éléments à côté de chaque critère de filtre
• Assurez-vous que les filtres sont faciles à effacer et que la page revient à son aspect précédent
• Afficher les filtres actifs utilisés dans les résultats
• Créez des curseurs pour sélectionner la fourchette de prix

Panier d'achat adapté aux mobiles

• Afficher tous les produits avec des photos, des attributs comme la taille, etc., et les prix dans le panier
• Fournir des indications dynamiques lorsque le produit est ajouté au panier
• Afficher une fenêtre contextuelle avec les produits sélectionnés et leur coût lorsque quelque chose est ajouté au panier
• Évitez les redirections automatiques vers le panier lors de l'ajout du produit
• Assurez-vous de vérifier la partie "boutons adaptés aux mobiles" dans la conception de votre panier
• Afficher le nombre de produits dans l'icône du panier

Contacts adaptés aux mobiles dans votre boutique e-commerce

• Placez vos contacts dans l'en-tête ou le pied de page
• Rendre les coordonnées copiables
• Offrir la possibilité de passer un appel téléphonique directement à partir du numéro
• Assurez-vous que cliquer sur l'adresse e-mail ouvre le formulaire pour envoyer un message
• Le formulaire de contact est accessible à tous sans inscription
• Une fois envoyé, le formulaire de contact affiche la notification appropriée
• Créez l'icône de support en ligne qui n'obstrue pas la visualisation du contenu

Scellés de sécurité dans le commerce électronique

• Utilisez des icônes de verrouillage avec une option "en savoir plus" pour indiquer aux utilisateurs que vous proposez des achats en toute sécurité
• La taille des icônes de verrouillage doit être grande
• Utilisez le mot "sécurisé" dans tout votre magasin, en particulier sur les pages de paiement
• Faites confiance aux sceaux éprouvés des fournisseurs de cybersécurité comme Norton Secured ou McAfee Secure
• Intégrez des fournisseurs de paiement de confiance et affichez leurs logos

Créez avec nous une conception de site Web de commerce électronique adaptée aux mobiles!

La liste de contrôle adaptée aux mobiles ci-dessus semble impressionnante, n'est-ce pas ? C'est une tâche difficile de suivre tous ces points de la liste de contrôle dans le commerce électronique mobile, mais pas pour une bonne entreprise de conception de sites Web adaptés aux mobiles !

Ce sera une joie pour nos experts en développement Web expérimentés de concevoir un site Web adapté aux mobiles ou d'optimiser votre site existant selon les meilleures pratiques et les listes de contrôle. Aidez vos clients e-commerçants à faire leurs achats de n'importe où et cela se reflétera dans vos ventes ! Devenez mobile-friendly avec des bénéfices !