E-commerce et logistique Publié le Lundi 24 Septembre 2018

E-commerçants : comment améliorer votre UX mobile ?

Aujourd’hui, le mobile est largement utilisé pour réaliser ses achats en ligne. Ce sont, en effet, 68% des français de plus de 18 ans qui optent pour le m-commerce. Mais ces mobinautes sont exigeants : 70%(1) d’entre eux quitteront un site qui n’est pas optimisé pour le mobile. Comment optimiser l’expérience utilisateur, ou UX design, d’un site mobile ? Ces conseils simples d’application vous permettront d’éviter de perdre ces clients potentiels et d’augmenter votre taux de conversion.

ux-mobile-ecommerce

Site responsive et Index Mobile First


Dans le cadre du déploiement de l’Index Mobile First, optimiser son site mobile devient plus que nécessaire. Et oui, désormais, Google prend en compte la version mobile de votre site pour indexer celui-ci dans son moteur de recherche. Ainsi, si vous ne voulez pas perdre en référencement, vous devez respecter quelques bonnes pratiques. Le responsive design qui consiste à adapter votre site à la taille de l’écran est aujourd’hui le minimum exigé.

Vous pouvez aussi aller plus loin en concevant une version mobile à part entière afin d’adapter finement les fonctionnalités qui apparaitront sur smartphone. Par exemple, la position et la taille des éléments dans la page peuvent nécessiter certaines personnalisations. Le résultat dépend du CMS ou de la technologie utilisée. Notre conseil : prévisualisez ! Si la version responsive par défaut de votre boutique en ligne ne vous satisfait pas totalement, alors prenez le temps de l’ajuster. Un site e-commerce 100% mobile-friendly est la clé de voûte d'un référencement réussi !

Sur mobile, évitez les pop-ups !

Ni Google, ni vos internautes n’aiment voir des fenêtres, bannières, footers et autres interstitiels… surgir intempestivement par-dessus le contenu qu’ils sont en train de parcourir. Difficiles à fermer, les pop-ups nuisent à l’expérience utilisateur sur mobile. Par ailleurs, l’algorithme de Google prend en compte leur présence pour vous valoriser (ou non) dans son classement. Mieux vaut donc gérer vos fonctionnalités telles que panier, calculateur de frais de port ou même publicité… dans des zones dédiées à cet effet. Réservez-leur un espace à part entière sur votre site mobile.

Un site mobile toujours plus rapide


Avant toute chose, votre site mobile se doit d’être rapide. Le temps de chargement recommandé par Google est de 3 secondes et ne doit pas excéder 5 secondes sous peine de voir les mobinautes quitter le site (et de voir votre référencement pénalisé !).

Si possible, le code devra être allégé. Cette opération sera faisable par vous-même si vous utilisez un CMS comme Wordpress ou Prestashop. Dans ce cas, vous avez la possibilité d’installer un plugin qui réalisera l’opération d’allègement pour vous. Si le code a été entièrement personnalisé, il vous faudra passer par un développeur.

Vous utilisez Wordpress pour votre site e-commerce ? Découvrez notre plugin livraison pour Woocommerce.

Un design épuré facilitant la navigation


Pour plaire à nos chers mobinautes, il faudra proposer un site au design aéré et épuré, sans pour autant perdre votre identité. Cela passe notamment par des CTA(2) grands et espacés. Ces derniers vont attirer l’attention des mobinautes et faciliter le « clic » tactile qui se fait, ne l’oublions pas, avec le pouce ou l’index. La plupart des utilisateurs d’un site mobile faisant deux choses à la fois (dans les transports ou devant un film par exemple), ces CTA visibles vont leur permettre de se recentrer plus vite sur la finalité de leur visite lorsqu’ils baisseront à nouveau leurs yeux sur leur écran.

La navigation mobile est plutôt verticale. Il faut donc penser à mettre les informations importantes et les CTA en haut de page. La verticalité générant de la longueur, n’hésitez pas à répéter ces éléments plusieurs fois dans la page, à condition de les séparer d’au moins un écran pour ne pas saturer le mobinaute. Il doit juste pouvoir retrouver ces éléments, en scrollant d’un simple coup de pouce !

Pensez aussi à simplifier et adapter votre tunnel de conversion. Pour améliorer vos conversions mobiles, privilégiez la règle du moindre clic : moins le mobinaute aura de clics à faire pour valider sa commande, plus il aura tendance à aller jusqu’au bout du processus d’achat. En bref, faites preuve de doigté et simplifiez-lui la vie !

Un contenu adapté aux usages du smartphone


Du côté des contenus, les vidéos, portées notamment par des plateformes comme YouTube, sont très appréciées sur smartphone (en particulier dans les transports ou dans les files d’attente). Les textes quant à eux seront valorisés grâce à des repères tels que les titres (courts de préférence, pour éviter d’être coupés), les paragraphes (courts eux-aussi), les listes, les boutons… Les tournures se rapprocheront du langage parlé, structurées en phrases simples et concises. Les images enfin, viendront aérer les textes et attirer le regard. Attention toutefois à les compresser pour ne pas nuire au temps de chargement !

Astuce : éviter la justification du texte. Très esthétique sur grand écran, elle peut créer des espaces très larges et inopportuns entre les mots. Source de déséquilibres visuels sur mobile, privilégiez un texte aligné à gauche, tout simplement.

Vous l’aurez compris, sur mobile, le mot d’ordre est la simplicité. Cela associe rapidité de chargement, design épuré et contenu adapté.

E-commerçants, savez-vous qu’avec Boxtal vous pouvez envoyer facilement vos colis depuis votre smartphone? Boxtal.com vous permet en effet de gérer vos expéditions de façon mobile.

Sources :
(1) codeur.com
(2) Le CTA ou « call-to-action » consiste à inciter l’internaute à faire une action (avec un bouton par exemple)