Attention cet article a été écrit avant 2020, certaines des technologies citées pourraient avoir évolué entre temps.

UX Design et e-commerce : astuces et conseils pour les web-designers sur Shopify

Admettez-le. Vous avez vous aussi de plus en plus de mal à suivre les nouvelles tendances webdesign, tellement celles-ci sont nombreuses et ne font que disparaître pour revenir plus tard. Toutefois, toute cette énergie consacrée par les marques et web-marchands dans l'innovation des techniques d'UX design et de graphisme en vaut-elle la peine ?

D'après nous, oui, car la finalité de ces efforts est tout simplement de séduire le client. Bien sûr, la force d'attraction d'un site web ne se résume pas uniquement à la qualité de ses visuels. Mais sa présentation reste malgré tout fondamentale, et les boutiques Shopify ne dérogent pas à la règle.

UX Design font

Nous avons choisi de lister quelques tendances de design et d'analyser quelques sites web qui en tirent avantage afin d'offrir la meilleure expérience d'achat possible à leurs clients.

Les longues pages de défilement (scrolling)

Il est toujours très tentant de vouloir supprimer du contenu d'une page de votre boutique, lorsque celle-ci présente l'inconvénient d'être trop longue. En effet, on peut à première vue penser qu'aucun des visiteurs du site ne prendra la peine de défiler la page jusqu'à atteindre le bas de la page. Toutefois, on observe depuis quelques années une profonde mutation des habitudes des consommateurs. Les internautes ont pris l'habitude de défiler sur de longues pages depuis les appareils mobiles et tablettes.

En effet, les contraintes de taille des écrans mobiles conduisent les boutiques à opter pour cette de structure de page sur mobile. Cela se répercute sur la manière dont les clients utilisent les sites web en version bureau. Le défilement infini ou scroll infini, est d'ailleurs de plus en plus usité par les réseaux sociaux tels que Facebook, Pinterest ou Instagram, sans que cela ne perturbe leurs utilisateurs. En effet, dès lors que leurs pages sont suffisamment structurées et présentables aux yeux du client, leur longueur et le temps nécessaire pour défiler l'ensemble du contenu de la page importe peu.

Ainsi, de plus en plus de marques e-commerce font le choix de carrément supprimer la pagination de leurs rubriques produits ou collections au profit de ce scrolling. On peut ainsi retrouver sur une page produit Shopify la même sensation que l'on a en déroulant un fil d'actualité Facebook. L'un des meilleurs exemples est la configuration de la page iPhone X sur le site d'Apple.

Apple iPhone X page

Les vidéos en lecture automatique

Le fait d'ouvrir une page web et d'entendre subitement le son d'une vidéo ayant démarré automatiquement n'est pas toujours quelque chose d'agréable. Toutefois, malgré le fait que cela puisse constituer une nuisance, de plus en plus d'entreprises font d'utiliser la lecture automatique de vidéo pour la page d'accueil de leur site web. Les clients s'accoutument de plus en plus au visionnage de vidéos depuis les pages d'accueil de boutiques en ligne.

Bump, la marque spécialisée dans les chargeurs sans fil intègre sur sa page d'accueil une vidéo en lecture automatique positionnée non pas en premier plan, mais dans une section plus bas de la page. Bien que la vidéo soit utile dans la mesure où résume synthétiquement le fonctionnement et l'intérêt du produit, l'utilisateur peut se trouver fort surpris à l'activation automatique du son sur la page.

Need a Bump

Les animations et le storytelling

Le secret dans la réussite de certains projets de design e-commerce est souvent relié à un récit valant la peine d'être narré à vos clients. Si vous combinez ce storytelling avec des effets visuels en adéquation avec l'esprit de marque, vous touchez alors le gros lot ! L'effet parallaxe est justement l'exemple typique de technique susceptible de répondre à vos attentes. Ce concept permet de guider l'utilisateur dans le sens que vous souhaitez de telle façon à ce que son regard soit porté sur des éléments spécifiques du design de votre boutique Shopify.

L'équipementier sportif Injinji, tire lui aussi avantage du storytelling grâce à des animations fluides et dynamiques. Sur sa page présentation About us, des contenus graphiques situés à côté du texte apparaissent lentement à mesure que l'internaute défile le long de la page.

Injinji page About Us

La combinaison storytelling - animations constitue donc un combo imparable pour susciter la curiosité et la sympathie des visiteurs de votre boutique. C'est une manière à la fois ludique et fun de présenter des textes explicatifs du fonctionnement ou de l'histoire de votre marque. Néanmoins, attention à ne pas abuser de cette technique ! La surabondance d'animations pourrait rendre l'expérience utilisateur confuse, et compliquer la tâche du client lorsqu'il est à la recherche d'une information précise.

Le design minimaliste

Nous avons auparavant abordé la question du scrolling infini, mais il est intéressant de se pencher sur une tendance allant à contre-courant de celle-ci : les boutiques au design minimaliste. Le place croissante de la navigation mobile a poussé les marques et marchands Shopify à s'adapter à ce phénomène, en proposant des pages d'accueil à la fois plus simple et sobre, mais en même temps plus sophistiquées faisant office de portail de l'information sur l'entreprise.

Sur la page d'accueil de son site US, Zara propose un design UX concentré sur les rubriques produits de la marque (à gauche de l'écran) et un état d'esprit lifestyle propre à la communication de la firme outre-Atlantique, et représenté à travers les images défilant en premier plan.

Zara US, page d'accueil

Ainsi, cette page, avec ses quelques menus de navigation et les informations présentes en pied de page, forme à elle seule un hub central via lequel le client peut facilement se retrouver dans les différentes catégories de produit commercialisés par l'enseigne.

L'émergence des ghost buttons s'inscrit dans le prolongement de cette dynamique. En effet ghost buttons, que l'on pourrait traduire de façon peu élégante par "boutons fantômes", sont agréables à voir et flexibles, puisqu'ils peuvent s'incrémenter sans difficulté aux fonds d'écran et images de fond.

Toutefois, pour que les ghost buttons constituent des CTA (call to action) efficaces, il est nécessaire de les concevoir de telle manière à ce qu'ils soient facilement repérables par le regard du client. La boutique en ligne de GoPro, le fabricant de caméras, illustre parfaitement cela.

GoPro

Conclusion

Ainsi, comme vous avez pu le constater, les idées ne manquent pas pour innover et optimiser le webdesign de votre boutique Shopify. L'usage de nouvelles techniques peut très vite constituer un atout stratégique et concurrentiel, car c'est souvent de la qualité de votre site que dépend votre potentiel de conversion clients. Le e-commerce, comme les autres secteurs d'activités, n'échappe aucunement à cette règle.

En tant qu'agence de développement web, Studio Zerance peut vous accompagner dans le cadre de la refonte de l'UX design de votre boutique Shopify, ainsi que dans l'implémentation de techniques de design complexes. Nous vous recommandons néanmoins la réalisation d'un A/B testing afin de déterminer en amont l'efficience de telle ou telle technique de design.