Webdesign & e-Commerce : faire simple pour convertir plus !

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-vignette

Dans la continuité des bonnes pratiques & tendances évoquées pour l’année 2015, et après avoir plus spécifiquement abordé les sujets du référencement payant & du Community Management, nous avons choisi pour cette rentrée e-Commerce de vous parler de webdesign.

Ce qui fonctionne, et ce qui fonctionne moins (voire pas…), tour d’horizon de quelques bonnes idées qui devraient vous permettre d’améliorer encore votre taux de conversion !

Faites simple !

On pourrait revenir sur l’importance de définir une grille adaptée à votre contenu ou sur l’importance d’une composition respectant le ratio du nombre d’or mais… On est déjà parti beaucoup trop loin !

Si ces éléments constituent la base d’une composition graphique rigoureuse et donc d’un « bon » webdesign, il ne vous appartient pas de les connaitre.

Soit vous disposez d’un graphiste, lui les connaitra, soit vous faites SIMPLE.

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-template-2

Faire simple revêt 2 avantages, 1 – cela permet de répondre le plus rapidement possible au besoin de votre utilisateur, ce qui constitue un avantage certain pour convertir ! 2 – cela permet de réduire le risque de se tromper. Quand vous commencez à vous interroger sur l’équilibre et la pertinence de votre webdesign, c’est qu’il y en a, a priori, déjà trop.

Comme il est coutume de le dire, « less is more » & cela se vérifie bien souvent au niveau de vos Analytics.

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-template-1

Si en plus vous nourrissez le rêve de conquérir le monde & les marchés e-Commerce internationaux, faire simple aura dès le départ le mérite de ne pas vous mettre dans l’embarras sur des interprétations qui peuvent se révéler complètement ambivalentes. Et à ce niveau là, le choix des couleurs aura notamment son importance.

Faites coloré

Si la couleur peut parfois nourrir des enjeux disproportionnés… Quand on en connaît les grands principes et qu’on les respecte, cela facilite naturellement l’élaboration d’un webdesign. En plus de vous permettre d’organiser et de hiérarchiser plus facilement l’information, une charte colorimétrique cohérente et harmonieuse vous sera d’une grande aide pour soutenir votre identité de marque. Et nul besoin de revenir sur l’importance et l’intérêt d’une identité forte et distinctive pour favoriser l’engagement.

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-template-3

Nous ne reviendrons pas non plus sur la signification des couleurs qui est désormais chose admise, mais nous évoquerons plutôt les outils pour créer une unité colorimétrique.

Cette unité repose principalement sur différents types d’accords trouvés entre les couleurs regroupées au sein de ce que l’on appelle un cercle chromatique. Les principaux sont illustrés ci-après.

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-cercle-chromatique

L’idée étant par la suite de jouer avec différents types d’accords (tous n’étant pas évoqués ci-avant), mais on passe alors à des interprétations plus avancées, forcément plus complexes, ce qui ne doit pas pour autant vous empêcher d’expérimenter !

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-template-4

Attention enfin à toujours garder en tête les contraintes qui peuvent entourer la couleur.

Tout le monde n’a pas la chance d’être équipé d’un écran Retina !

Intéressez-vous par exemple au taux d’équipement qui défini votre cible ; si il ne s’agit pas majoritairement de geek ou d’early adopters certains pourraient alors souffrir de la faible résolution de leur écran. De la même manière la couleur peut devenir un enjeu (une opportunité ?), si vous devez vous adresser à des personnes atteintes de daltonisme.

Les outils pratiques

Quelques outils pour terminer qui vont vous permettre de rendre votre webdesign plus mélodieux & attrayant :

  • Colorschemedesigner : pratique, simulez l’accord chromatique que vous aurez créé directement sur un template web
  • Kuler : pratique, définissez un accord chromatique à partir d’une image
  • Dasplankton : juste pour vous assurer que votre call-to-action sera bien visible…
  • Colors : très pratique pour retrouver la couleur « qui déchire » que avez vu sur ce site e-Commerce mais que vous n’arrivez pas à décrire à votre intégrateur… et qui sera donc ravi de récupérer un code héxadécimal ou RVB.

Faites confiance

Il est intéressant de voir comme le webdesign peut s’avérer fédérateur… Bien plus que le choix des rideaux ou que celui d’un framework e-Commerce par exemple. Donc même si tout le monde a envie de donner son avis ou que l’on a toujours l’ami d’un ami qui a suivi en dilettante un cursus d’art à l’université, laissez faire ceux qui savent !

Faites responsive

Un autre intérêt de faire simple ? Dans la continuité faire responsive !

Ce qui est directement lié à la multiplication des devices et plus spécifiquement à l’usage mobile, devient aujourd’hui presque une norme. Si votre webdesign n’est pas adapté, vous vous privez tout simplement, en fonction de votre cible, d’une part non négligeable de vos futurs clients et amputez donc sérieusement votre taux de conversion !

webdesign-et-ecommerce-faire-simple-pour-convertir-plus-responsive

Et parce qu’il s’agit bien de « responsive webdesign » la réciprocité n’est pas anodine et peut vous rendre bien des services.

Commencez par penser votre webdesign sur la plus petites des résolutions que vous ciblez. C’est un très bon exercice et le meilleur moyen de faire le tri entre ce qui à vraiment de l’intérêt et ce qui en à moins, voire pas du tout. Vous pourrez ainsi beaucoup plus facilement rationaliser votre webdesign et l’adapter ensuite jusqu’à la résolution maximale que vous visez.

Définissez ensuite vos points de rupture en vous appuyant sur les statistiques de trafic de votre site e-Commerce que vous trouverez sur Analytics et n’hésitez pas à mettre déjà à ce stade, votre intégrateur dans la boucle. Il vous remerciera plus tard (encore).

Les outils pratiques

  • Screenfly : simulez l’affichage de votre webdesign de manière très fine sur différentes résolutions et différents types de devices.

Faites animé

Principe de base : ce qui bouge, attire l’œil. Attention, il ne faut pas non plus que votre webdesign devienne un grand 8 avec les inconvénients liés pour vos clients non-adeptes de sensations fortes.

De manière très ponctuelle, et quand cela peut en plus servir l’expérience utilisateur, les animations peuvent très rapidement donner un aspect moderne à votre webdesign, en plus de fluidifier le parcours utilisateur.

Certaines animations pourront par ailleurs favoriser l’immersion de l’utilisateur dans votre univers, voire vous rapprocher d’eux en illustrant la compréhension d’enjeux communs. Elles l’impliqueront davantage et donc fatalement favoriseront d’autant le processus de conversion.

Et là, de loin notre préféré… Ou, vis la vie d’un chargé de communication qui est sur le point d’envoyer un emailing…

Alors, décidez ? Touchez en un mot à votre expert en ergonomie, il vous aidera à trouver l’équilibre parfait. Et si vous n’en avez pas, vous pouvez commencer par suivre les conseils de l’ergonote.

Notez que l’on peut aussi vous en prêter un :)

Les outils pratiques

  • Tympanus : effets de survol, loader, transitions… LA ressource pour vous, votre graphiste, et votre intégrateur !

Faites tester…

Et là… C’est le drame… Si atteindre la perfection semble à bien des égards, difficile, pour ne pas dire impossible, atteindre votre objectif et réussir votre webdesign avant d’avoir fait des tests utilisateurs le semble tout autant.

C’est souvent difficile à accepter, voire frustrant au possible, mais la vérité c’est qu’aucun expert ne pourra véritablement valider votre webdesign, si ce n’est l’utilisateur.

Malgré tout pas d’inquiétude, si tout a été correctement pensé dès le départ il ne s’agira pas de bouleversements majeurs mais de corrections à la marge, voire d’évolutions. Choisissez un panel représentatif de votre cible principale, autant que possible ne vous limitez pas sur le nombre de personnes à interroger, plus vous aurez de retours, plus cela vous sera bénéfique. Faites en ensuite la synthèse en relevant les points les plus souvent évoqués, que vous pourrez alors considérer comme majeurs.

Les outils pratiques

  • usabilityhub : vous avez la possibilité de créer facilement une campagne d’AB testing. Vous pourrez également pousser les tests au-delà du webdesign sur des notions de navigation. Certaines options demeurent payantes, et il n’est a priori pas possible de cibler des profils de testeurs spécifiques.
  • vwo : si vous l’avez déjà testé, dites nous ce que vous en avez pensé. Leur présentation à au moins le mérite d’être claire en indiquant précisément la liste des features et notamment la possibilité de cibler les profils utilisateurs !
  • unbounce : très complet bien que focalisé sur les landing page, la possibilité d’éditer en ligne votre webdesign, avec une palette d’outil non sans rappeler l’interface de photoshop, semble assez convaincante.

Conclusion

Voici donc en substance ce qui pourrait vous aider à optimiser votre webdesign. Il y a encore beaucoup d’autres points qui pourraient être abordés, et ceux qui l’ont déjà été ici pourraient encore être approfondis.

Mais ce qu’il faut a priori retenir c’est que :

  1. le design de manière général est un outil puissant qui nécessite de véritables compétences en plus d’une vraie expérience. Et quand en plus il s’agit du web, des enjeux bien spécifiques peuvent venir bousculer tout votre projet, pas question d’improviser donc.
  2. bien que le webdesign constitue une partie du processus de création d’un projet web et/ou e-Commerce, il implique véritablement toute la chaine de valeur. Du marketing, à l’intégration technique, en passant par l’ergonomie, assurez-vous une gestion transverse dans la création de votre webdesign afin d’éviter à terme les mauvaises surprises.

Un ping pour “Webdesign & e-Commerce : faire simple pour convertir plus !

Un commentaire pour “Webdesign & e-Commerce : faire simple pour convertir plus !

  1. Je ne suis pas graphiste de formation mais Kuler me parait très compliqué à utiliser. J’ai l’impression que n’importe qui peut proposer n’importe quelle palette et les codes sont difficiles à récupérer rapidement.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *