m-commerce & bouton d’action: aller droit au but 9

téléphone mobileL’expérience d’achat diffère entre smartphone, tablette et PC c’est une évidence. Une version mobile d’un site e-commerce doit offrir une navigation la plus simple possible. Les boutons d’action s’inscrivent parfaitement dans cette démarche, et doivent être abordés avec le plus grand soin.  Des spécificités sont à prendre en compte pour convertir (davantage) au moment de concevoir (ou mettre à jour) votre site mobile.L’enjeu est de projeter vos visiteurs au plus vite dans votre tunnel d’achat avec des boutons d’action visibles et incitatifs.

 

Placer les à portée de vue

C’est du bon sens mais évitez de faire scroller vos visiteurs pour trouver votre call to action. Plus rapidement il aura été interprété, plus facilement il sera cliqué (ou plutôt « taper », on ne clique pas sur mobile, on tap’:))!

 

Bigger is better!

C’est la base, mais vos boutons d’action mobiles doivent être les plus visibles possible, et cela passe par d’abord par leur taille. L’utilisateur mobile n’a pas le temps, il doit être guidé pour une expérience d’achat efficace pour lui… comme pour vous :). Il le sera d’autant mieux que vos boutons d’action seront de tailles significatives. Sur Spartoo par exemple, le bouton d’action de la fiche produit prend toute la largeur de la page.

fiche produit du site mobile spartoo

 

Des boutons d’actions colorés

La couleur est un autre élément qui rendra vos boutons d’action visibles par les e-shoppeurs. Cette couleur ne doit pas ou peu être reprise sur d’autres boutons afin apporter un contraste et une « remarquabilité » maximums. La FNAC par exemple capitalise sur des boutons d’action jaunes, qui tranchent avec le fond blanc et le bouton « achat rapide », non prioritaire.

fiche produit du site mobile fnac

  Il en est de même avec Amazon, qui contraste son call to action avec un fond gris dédié.

fiche produit du site mobile Amazon

  Walmart opte pour le orange qui me semble au passage être une excellente couleur pour un CTA.

Fiche produit du site mobile Walmart

 

 Un wording court et précis

L’intitulé de votre bouton d’action doit être incitatif et précis. Le « Ajouter » de Spartoo par exemple ne me semble pas assez pertinent. Ce wording reste un mot vague qui ne frappe pas l’esprit comme pourraient le faire des « Acheter » ou autres « Ajouter au panier » comme Amazon ci-dessus. D’autres comme Asda capitalisent sur le sentiment d’urgence, qui peut être intéressant à activer: « Acheter maintenant »

fiche produit du site mobile Asda

 

  •  
  •  
  •  
  •  
  •  
  •  
  •  

9 thoughts on “m-commerce & bouton d’action: aller droit au but

  1. Reply Kevin Hanot Déc 18,2012 18 h 57 min

    Rester sur une interface sobre et des appel a action (très tape a l’oeil !). C’est ça la clef d’un site e-commerce mobile réussi. difficile de faire un « beau » site mobile et pas trop chargé a cause de la taille de l’affichage !

    Prendre exemple sur les concurents, c’est encore la meilleure solution (les gros)…

  2. Reply info musculation Déc 19,2012 10 h 33 min

    Bonjour,
    Je suis tout à fait d’accord avec vos recommandations sur les boutons d’action. Si tous les ecommerces utilisaient ce genre de boutons,ça serait vraiment très pratique car parfois c’est du bout du petit doigt qu’il faut taper et c’est pas le top, et d’autres fois il faut vraiment le chercher ce bouton!

  3. Reply Margurite Avr 29,2013 16 h 40 min

    Oui, déjà que l’on puisse être handicapé par la taille de l’affichage autant mettre bien avant les boutons d’actions et puis il faut toujours se mettre à la place du potentiel acheteur! Personnellement je ne me tarderai par sur un site où il faut chercher quel bouton à quelle fonction et où le trouver.

  4. Reply conseiller en investissement Mai 4,2013 13 h 21 min

    Je pense que c’est cette optimalisation par rapport a l’interface design couleur accessibilité qui donne envie au client potentiel de continuer en profondeur dans le site. et je suis parfaitement d’accord avec « Margurite » dans le blog… la majorité moi y compris zappent a la moindre inconvenance (il y’a tellement de concurrents que le temps devient important.. certains sites l’on compris et bénéficient des avantages). Pour les autres (en général des débutants dans le domaine) et bien ils auront de la chance de tomber sur un billet comme celui ci.

  5. Reply Ouvrir un compte en suisse Mai 10,2013 16 h 59 min

    Il ne faut pas oublier le temps de chargement du site, qui est aussi un des critère les plus important surtout en mobilité ! De plus il faut que les e-commerce mobile soit fait pour le mobile et non pas adapté une maquette descktop sur le mobile il faut totalement repenser le site pour le mobile et que le tunel d’achat soit aussi simplifié pour lui.
    Le site d’amazon pour moi est bien pensé pour le mobile on peux acheter un article en 2 « click » c’est ce qui est selon moi le plus important.

    Merci pour ton article.

  6. Reply On ne les voit pas grandir@dépot vente de vêtements pour enfants Mai 22,2013 0 h 39 min

    Bonjour,
    Je pense par ailleurs que l’engagement des internautes sur smartphone étant beaucoup plus faible, il est parfois préférable de mettre en avant des actions courtes qui nécessite peu de manipulation.
    Je pense par exemple à un formulaire d’inscription épurée pour une vente privée, un jeu….

  7. Reply code promo Juil 10,2013 12 h 26 min

    Et on oublie souvent les boutons d’actions secondaires tels que ceux liés au rafraîchissement d’une quantité d’articles ou l’utilisation d’un code promo en mobile.

  8. Reply Référenceuse juliette Juil 29,2013 13 h 00 min

    Bonjour,
    Merci pour l’article. Pour ma part je pense que l’optimisation des sites pour mobile prendra une part de plus en plus importante dans les critères de Google. A mon humble avis, google pourrait même pénaliser, dans les recherches faites depuis un PC, les sites non optimisés pour smartphone.

  9. Reply Audran - Blog eCommerce World Août 6,2013 17 h 43 min

    C’est en effet une possibilité. Wait and see…

Leave a Reply

  

  

  

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.