Le e-commerce, un design d’interface avec des codes, mais aussi de la créativité !

Les sites e-commerce, apparus avec l'essor d'internet, sont un véritable mode de consommation. Nouvel eldorado pour certains, ils ont eu le don d'agacer les commerçant "physiques" à leur naissance. Mais aujourd'hui, on est en droit de penser que la meilleure stratégie est une fine alliance des deux canaux de distribution (Amazon ouvre même des boutiques, c'est quand même un signe). Le but de cet article n'est cependant pas de discuter stratégie, mais d'envisager comment apporter de l'originalité à un type d'interface aux codes et aux concepts très spécifiques.

Définir son "type" de site e-commerce

  Tous les sites qui vendent des articles ou produits ne sont pas des sites purement e-commerce ! Comment ça ? Parce qu’on peut définir deux types de sites e-commerce. Il faut pour cela se poser, avant chaque projet englobant un module de vente, cette question : "Est-ce que je veux faire un site commercialisant des produits tout en ayant de l'identité, voire un endroit où je parle de ma société ?" ou "Est-ce que je veux faire un site présentant ma marque, mon savoir-faire, et qui inclut une brique où je vais vendre des produits ?" Vous commencez à sentir la différence ?   Sur l'un, en page d’accueil, on attaquera directement le visiteur à coup de bannières, de produits, etc. À l'image des mastodontes pure players, des marketplaces, ou des sites de certaines grandes marques. Le plus connu est aujourd'hui Amazon, même si ses activités sont en pleine diversification. Sur l'autre, on cherchera d'abord à séduire ou rassurer l'utilisateur à travers une immersion au sein de son univers, afin de l'attirer, si possible, doucement vers la partie e-commerce.

Site Amazon

Site Simply Chocolate

Ok c'est fait, mais maintenant ?

  S’il y aura forcément plus de liberté pour les sites mettant en avant le côté immersif de la marque, des codes existent dans les deux cas. Des codes qu’il est fortement recommandé de respecter, avant de penser aux parties qui pourront plus être "libres" d'un point de vue graphique ou UX.

Le panier et le compte utilisateur

Votre panier et votre compte devront toujours se situer en haut à droite. C'est un standard que tous les utilisateurs connaissent aujourd'hui. Les placer ailleurs est un risque majeur ! Sans vouloir vous faire peur, imaginez, de façon caricaturale, qu'un magasin physique place sa caisse dans les cabines d'essayages. Je vous laisse penser au nombre de personnes qui cherchera où payer ses articles.  

Zone panier du site de Leroy Merlin

Les photos des produits

Vos photos de produits, qu'elles soient dans un style packshot, ambiance, avec mannequin, sans mannequin, etc. devront être qualitatives et montrer au mieux votre article. Sur votre site, il n'y a pas de conseillers de vente, le visuel peut donc clairement faire pencher la balance d'un côté ou de l'autre.  

Page listing produits de Roche Bobois

Du point de vue de l'UX design

D'un point de vue UX design, pensez toujours à l'utilisateur et à son comportement, et facilitez-lui l'accès ! Un bon indicateur de la simplicité d’utilisation de votre site est le cocktail "nombre de clics et temps". Ne cherchez donc pas des menus et options compliqués. Mettez en évidence vos boutons d'action (notamment vos "ajout panier") et les informations clés (prix, livraison...). Proposez un tunnel d'achat sans fioritures, qui ne perdra pas l'utilisateur lors du moment clé. Bref, si on fait encore le comparatif avec un point de vente physique, faites en sorte que vos clients trouvent vite l'article qu'ils cherchent dans vos rayons, et qu'ils puissent ensuite très vite aller à la caisse de paiement sans embûches.

Fiche produit du site Bonobo Jeans

Les éléments de réassurrance

Pensez à intégrer des éléments de réassurance (paiement sécurisé, conditions de livraison...). Les études prouvent en effet que les utilisateurs ont encore besoin d’être rassurés lors d’achats en ligne. Et leur appréhension est d’autant plus grande que vous n’êtes pas une marque connue ou un site qu’ils ont l’habitude de fréquenter.  

Zone de réassurance du site Sephora

Mais c'est logique en fait !

Oui, ça l'est. Mais il est toujours bon de le rappeler. Nous avons tous vu des exemples tenter de casser les codes, pour revenir très vite à des structures plus classiques. Ou, en tous cas, intégrant tous les éléments structurants d'un bon site e-commerce. Maintenant que les bases sont posées, comme dans n'importe quel magasin, il n'est pas interdit d'apporter de la créativité et du concept ! Prenez les magasins Abercrombie, c'est peut-être cliché, mais les bonnes pratiques sont respectées et ils ont su inventer un concept fort pour se démarquer. Peut-être trop fort avec le temps, d'ailleurs, mais c'est un autre débat. Si nous nous intéressons surtout aux parties du site qui vendent des articles, c'est à dire principalement les pages listing produits et les fiches produits, vous pourrez jouer sur différents critères pour vous différencier et amener de la créativité. Avec le nombre grandissant de supports (smartphone, tablette, ordinateur), et la technique qui va avec, on peut aujourd'hui jouer des grilles de visuels qui sont déstructurées et qui amènent du dynamisme. Amusez-vous (mais sans perdre de vue l'utilisateur) ! Selon l'esprit de vos produits, pourquoi ne pas rajouter des éléments graphiques ou illustratifs. Vous pouvez le faire sur le background, vos trames de boutons, le fond de vos packshots ou en direct sur vos visuels.

Site Quintus et Hortus

Il suffit de jouer !

Jouez avec vos typographies. Le choix d'une belle typographie avec du caractère donnera, à coup sûr, de l'identité à votre interface. Contrairement à il y a quelques d'années, nous avons aujourd'hui un choix quasi illimité. Profitez-en ! N'hésitez pas non plus à leur donner un côté oversize pour mordre un peu sûr les photo, effet de surprise garanti. Aujourd'hui, on peut aussi beaucoup plus animer nos interfaces. C'est autant valable pour un site évènementiel que pour un site e-commerce. En faisant des choix judicieux vous serez sûr d'attirer l'œil et de mettre l'accent sur vos produits.   Vous pouvez aussi jouer sur les cadrages (de près, de loin, hors cadre...) dans une page liste pour donner du rythme visuel. Et pourquoi ne pas y intégrer de visuels purement "ambiance" pour mettre en avant une inscription à votre newsletter, un accès à vos réseaux sociaux, une offre promotionnelle… Vous créez ainsi de la connivence et de la fidélité à votre marque. C’est un élément important, car beaucoup d'utilisateurs n'achètent pas lors de leur première visite sur un site. Mais, s’ils sont séduits, ils le feront lors d’une prochaine visite. Ou achèteront en point de vente, si vous avez un magasin. Cette liste d’idées est bien sûr non exhaustive. Avec un peu de malice et de prise de risque (dans le respect des critères évoqués ci-dessus), il est possible d’apporter de la créativité dans un site e-commerce. Par l’UX design, la direction artistique (de l’interface ou des contenus) ou le discours éditorial, vous êtes en mesure de vous distinguer de façon originale. Car le e-commerce n’a pas encore atteint son apogée : une étude récente de la Fevad confirme la bonne santé du secteur et valide les prévisions de Xerfi en 2014  que le secteur atteindra les 90 milliards d’euros de chiffre d’affaire en 2020. C'est donc le moment d'apporter une dose de créativité pour profiter de la vague !