15 conseils de conception mobile pour stimuler les ventes en ligne

Saviez-vous que 55% du trafic e-commerce est maintenant sur un appareil mobile?


C’est vrai, plus de la moitié des personnes qui consultent des sites commerciaux sont sur leur téléphone ou leur tablette.

Pourtant, voici le problème: 46% des 50 premiers détaillants n’ont toujours pas de site mobile réactif. Ainsi, même si la moitié du trafic commercial se produit sur un mobile, la moitié des détaillants ne sont pas configurés pour cela. Cela signifie que la moitié des acheteurs pincent et zooment et tordent leur téléphone pour voir un site Web correctement.

Nous sommes donc d’accord, un site mobile réactif et engageant est essentiel. Mais ce n’est que le début. Comme un site de bureau, vous pouvez modifier et optimiser votre site mobile afin qu’il augmente encore les ventes. Voici comment:

1. Simplicité

Travailler avec un si petit écran sera toujours difficile. C’est pourquoi la simplicité est votre objectif numéro un. Pour les sites de commerce électronique, c’est particulièrement difficile, car il y a tellement de contenu à presser. Comment faites-vous la promotion de tous vos produits sans encombrer le petit écran?

Découvrez comment ETQ affiche sa gamme de chaussures sur son site mobile. C’est beau dans sa simplicité. Ils ont laissé la majorité de l’espace d’écran complètement libre afin de donner à leurs produits une place centrale. Même la palette de couleurs a été choisie pour correspondre à sa gamme de produits. Il donne à l’ensemble du site une sensation simple et cohérente. Même si l’écran est petit, il semble spacieux.

2. Pensez au pouce!

Essayez de tenir votre smartphone maintenant. Déplacez votre pouce sur l’écran et sentez où c’est le plus confortable et le plus naturel. La taille du pouce de chacun est différente, mais généralement cette image ci-dessous s’applique à la plupart des gens:

suivi du pouce

Dans cet esprit, vous ne voulez pas mettre de boutons ou de composants essentiels dans les sections supérieures. Laissez cela pour les en-têtes uniquement. Placez tout votre contenu et vos boutons de défilement au milieu afin qu’il soit facile et confortable à atteindre. (N’oubliez pas de penser aux gauchers! Retournez les images ci-dessus pour voir comment les choses fonctionnent pour les gauchers).

3.… Surtout les gros pouces

En plus du pouce «atteindre», vous devriez également considérer le «grand pouce». Nous avons tous utilisé un site Web mobile sur lequel vous devez cliquer sur le plus petit lien. C’est difficile et frustrant, non? La règle générale est d’opter pour des éléments plus gros que vous ne le pensez.

Le site mobile de Hobbycraft en est un bon exemple. Tout d’abord, leurs liens avec une grande image le rendent très facile pour les gros pouces. Mais jetez un œil à leurs icônes en haut («magasins, compte, panier»). Ils sont beaucoup plus gros que ce à quoi vous vous attendez habituellement. Hobbycraft pense au grand pouce, et vous devriez donc.

4. Menus de navigation Hamburger

L’une des tendances de conception les plus populaires des douze derniers mois est le menu «hamburger». Vous pouvez voir un exemple sur le site de Hobbycraft ci-dessus. Ce sont les trois lignes qui ressemblent à un hamburger – cliquez dessus et le menu de navigation complet se développe.

Il n’y a pas de place pour la navigation traditionnelle des en-têtes et cela encombrerait simplement l’écran. Optez plutôt pour une navigation en expansion. Il y a un bon équilibre à trouver ici. Il devrait être bien rangé et à l’écart. Mais, en même temps, il devrait être évident et facile à exploiter.

Si vous avez beaucoup de produits et de catégories proposés, utilisez le menu étendu pour le rendre plus facile. N’ayez pas peur d’utiliser tout l’espace de l’écran. Regardez comment Argos présente son menu étendu ci-dessous.

IMG_3663

5. Choisissez une grande police

Un petit écran mobile nous oblige à réfléchir longuement à la police que nous utilisons. Il n’y a pas de place pour les petites polices complexes. Au lieu de cela, pensez simple, audacieux et large. Généralement, une police sans empattement est plus propre et plus simple (c’est-à-dire qu’Ariel est meilleur que Times New Roman).

71950dee059b803c4a7caa30dce8f5bf

Gardez à l’esprit que cette décision vous obligera également à choisir votre copie et votre libellé avec plus de soin. Profitez de cette opportunité pour simplifier et optimiser votre copie. Essayez de transmettre votre message aussi clairement et simplement que possible. Faites court. Faites-le accrocheur. Cela n’améliorera pas seulement la conception de votre mobile, il améliorera l’ensemble de votre entreprise.

6. Utilisez la «recherche intelligente»

Les gens détestent utiliser de minuscules formulaires de recherche sur un appareil mobile. Cela nous oblige à zoomer, à cliquer sur la zone de recherche et à taper avec le clavier délicat. Les erreurs sont faciles et peuvent conduire à la frustration.

Pour améliorer l’expérience utilisateur, utilisez un champ de «recherche intelligente». Lorsque vous cliquez sur la case, la conception doit se recentrer automatiquement afin que la case de recherche remplisse l’écran. Ensuite, assurez-vous qu’il dispose d’une recherche prédictive, afin que l’utilisateur n’ait qu’à saisir les premières lettres.

Vous pouvez le voir en action sur le site Web d’Europcar. Le client commence à taper «Norw» et le site propose automatiquement ses différentes agences Norwich. Facile.

IMG_4331

7. Simplifiez vos formulaires d’inscription et d’achat

Nous parlons beaucoup de rendre vos formulaires d’inscription et d’achat aussi simples et rapides que possible. C’est un élément clé de votre stratégie de conception UX. C’est aussi l’endroit où les sites de commerce électronique perdent jusqu’à 60% des conversions en compliquant les choses. S’ils ont commencé le processus, le client est déjà convaincu. La seule façon de perdre la vente ou l’inscription est de rendre les choses trop difficiles.

Encore une fois, essayez de limiter la quantité de frappe nécessaire. Utilisez des cases de type prédictif et activez les options de remplissage automatique. Utilisez des outils de défilement pour que les utilisateurs choisissent les options de date de naissance, par exemple. Nous savons que les formulaires d’achat nécessitent souvent beaucoup d’informations. Cependant, il existe un moyen de simplifier ce processus.

Regardez comment Firebox utilise un système de numérotation pour montrer aux utilisateurs les étapes restantes du processus. Une astuce clé de conception UX consiste à faire savoir aux utilisateurs où ils se trouvent. En tant que clients, nous aimons savoir à quoi nous pouvons nous attendre, et Firebox le fait de manière experte.

img_1292-blog-half

8. Trois couches maximum

Il est beaucoup plus facile de “se perdre” sur un site Web mobile. Idéalement, vous voulez vous assurer que votre site mobile n’a que trois couches de profondeur. Voici un exemple de la façon dont cela pourrait fonctionner sur un site de commerce électronique de mode:

  1. Page d’accueil: le client choisit «catégorie: filles»
  2. Le client choisit «sous-catégorie: chaussures»
  3. Le client clique sur la page du produit.

Ce sont trois couches simples de découverte. La seule autre option devrait être la page d’achat ou l’inscription. Essayez d’éviter un trou de lapin de sous-catégories et d’autres options. Comme toujours, restez simple et faites savoir aux utilisateurs où ils se trouvent à tout moment.

9. Facilitez le retour à la page d’accueil

Une fois que votre client a trois couches de profondeur, donnez-lui toujours un moyen simple et audacieux de revenir à la page d’accueil. N’oubliez pas, il est facile de se sentir perdu sur un site mobile, alors donnez aux utilisateurs un moyen facile de «réinitialiser» et de revenir au début.

Jetez un œil à la page produit de Lush. Si votre client a en quelque sorte navigué ici, il peut vouloir recommencer. Le grand logo «LUSH» en haut est un identifiant facile et évident pour rentrer chez soi. Peu importe où vous êtes sur le site Web, vous avez toujours cette ancre qui vous ramènera au début.

img_1304-blog-half

10. Pas de zoom!

Pendant longtemps, les sites mobiles n’étaient qu’une copie de leur conception de bureau. Cela signifiait que vous deviez zoomer en pinçant l’écran. Il s’agit d’une tendance de conception dangereusement dépassée et doit être évitée. Idéalement, tout devrait être proportionnel à l’écran. Toutes les polices doivent être lisibles sans zoom avant. Tous les liens doivent être cliquables sans pincement.

Pomme à pincer pour zoomer

Il n’y a qu’une seule exception lorsque le pincement est utile: les photos de produits. Il est toujours très utile pour les clients de pincer et de zoomer sur les photos de produits. Ils veulent pouvoir voir chaque petit détail avant d’acheter.

11. Répondre au problème de «sécurité»

Malgré l’énorme trafic vers les sites de commerce électronique mobile, il existe toujours une préoccupation générale selon laquelle acheter quelque chose sur un site mobile n’est pas aussi «sûr» qu’un ordinateur de bureau. Bien sûr, il n’y a pas de différence de sécurité entre le mobile, la tablette et le bureau. Mais un Étude 2013 montre que près de la moitié de tous les acheteurs en ligne se sentent moins en sécurité lorsqu’ils achètent quelque chose sur un smartphone. Cette peur est susceptible de tuer vos conversions.

C’est une simple question de confiance. C’est à vous de faire en sorte que les clients se sentent plus en sécurité sur votre site. Idéalement, votre site de commerce électronique devrait déjà avoir un certificat de sécurité SSL. Si ce n’est pas le cas, achetez-en un. C’est ce qui vous donne le petit cadenas jaune sur votre barre d’outils. Sur votre site mobile, assurez-vous d’afficher le cadenas SSL aussi bien que possible.

image18

Une autre option consiste à s’assurer que vos clients peuvent enregistrer un produit pour plus tard ou l’envoyer par e-mail. Dans certains cas, ils se sentiront en sécurité de l’acheter plus tard lorsqu’ils seront sur leur bureau.

12. Empilement de contenu

Pour de nombreuses personnes, créer un site mobile signifie simplement choisir un thème «réactif» sur WordPress ou Shopify ou sur la plateforme que vous utilisez. Bien que ce soit un bon début, vous voudrez faire très attention à la façon dont le thème mélange automatiquement votre contenu. Vous ne savez pas ce que je veux dire? Jetez un œil à ce diagramme ci-dessous:

15_contentStacking

C’est ainsi qu’un thème réactif peut empiler automatiquement votre contenu pour une tablette (image de gauche) ou un smartphone (image de droite). Réfléchissez bien à vos éléments de contenu les plus importants et assurez-vous qu’ils sont correctement empilés. Par exemple, sur le côté droit, les produits (case 5 – types de bains) sont forcés en bas de l’écran. Ils peuvent même être poussés sous le «pli».

Testez votre mise en page et votre empilement de contenu pour vous assurer que votre contenu le plus important apparaît au bon endroit.

13. Perdez tout contenu Flash

Flash est un format relativement obsolète sur n’importe quel appareil. (En fait, les concepteurs sont se battre pour le tuer une fois pour toutes! Il avale des ressources, c’est lent et c’est un terrain de jeu pour les pirates). Bien que ce soit une mauvaise nouvelle sur un site de bureau, c’est encore pire sur un smartphone ou une tablette.

La plupart des appareils mobiles ne lisent pas du tout les médias flash. Donc, si vous vous y fiez pour une vidéo ou une démonstration de produit, débarrassez-vous-en – vos clients ne peuvent pas le voir sur un mobile. Apple l’a bloqué il y a des années et Android a emboîté le pas peu de temps après.

L’alternative consiste à vous assurer que votre site Web est compatible HTML5 (en savoir plus ici) et utilisez YouTube pour héberger des vidéos.

14. Adoptez les limites!

Beaucoup de gens à qui j’ai parlé ont exprimé leur frustration quant aux limites d’un site mobile. Le simple fait est le suivant: vous ne pouvez rien y faire! Adoptez plutôt ces limitations.

Cela vous oblige à prendre des décisions importantes qui aideront toute votre entreprise. Comment puis-je simplifier mon site Web? Comment faire passer mon message en moins de mots? Comment puis-je être plus précis et convaincant dans un espace plus petit? Lequel de mes produits dois-je prioriser?

Je suis convaincu que répondre à ces questions renforce votre activité. Chaque fois que vous pouvez distiller votre proposition, vous la rendez plus puissante. Et c’est essentiel pour un bon site mobile.

15. Prenez des décisions de conception à l’aide de Google Analytics

Le problème avec la conception pour mobile est qu’il y a tellement d’appareils à considérer. Optimisez-vous votre mise en page et votre design pour les tablettes iPad ou Android? Optimisez-vous pour iPhone 5 ou iPhone 6? Ou le Samsung Galaxy?

Un design réactif signifie qu’il se moulera d’une manière différente à chacun. Voici où Google Analytics peut vous aider. La dernière version d’Analytics vous permet de voir quels appareils mobiles accèdent le plus souvent à votre site:

appareils-mobiles-analytique-suivi

Dans ce cas, les iPhones sont le principal appareil – de loin. Il est donc logique de faire tous vos tests sur un iPhone. Priorisez l’appareil le plus performant lorsque vous optimisez votre site mobile.

Même si les appareils mobiles dominent désormais le marché des achats en ligne, les sites Web mobiles sont encore loin derrière. Ils sont traités après coup par la moitié des plus grands détaillants.

En apportant ces modifications et changements, vous pouvez prendre une longueur d’avance sur la concurrence en capitalisant sur cet énorme flux de trafic.

Je serais ravi de savoir ce que vous avez fait pour optimiser votre site mobile. Quels ajustements ont fonctionné pour vous?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map