habillage_site_ecommerce

Êtes-vous sûr d'avoir bon goût ?

Conseils sur les enjeux du graphisme et définition des priorités pour un site e-Commerce

L’habillage est une phase prépondérante dans la conception d’une boutique en ligne. Un site e-commerce doit avant tout répondre aux attentes des acheteurs et non aux élans exacerbés de créativité des nouveaux marchands. Il faut d'ailleurs très peu de temps aux e-Commerçant qui démarrent pour s'en rendre compte. Voici les principes fondamentaux à garder à l’esprit dans le choix des images, la mise en page et dans la sélection des polices de caractères.

 

Linterface graphique d’un site marchand a pour but de valoriser l’image de l’entreprise pour renforcer son identité visuelle. Si elle flatte un peu l’égo du marchand au passage c'est encore mieux (sourires) . Mais elle ne peut pour autant négliger les contraintes essentielles, telles que l'accessibilité et la lisibilité indispensables à sa survie économique.  Face à cet inévitable compromis de taille, il n’est donc pas inutile de survoler quelques principes  importants en matière de design web pour ceux qui débutent, voir même de les rappeler pour ceux qui sont confirmés…

 

Le choix des images

 

L'image, en comparaison avec le texte, est l'élément qui interpelle en premier sur une page. Il est important d’utiliser des images qui retiennent l'attention de l'internaute, mais surtout qui parlent d'elles-mêmes. Une bonne image explique intuitivement un produit ou une idée. Affublée d'une touche plus personnelle, et en relation harmonieuse avec les couleurs dominantes de votre site, les images que vous utilisez peuvent refléter les caractéristiques de votre personnalité, de votre sensibilité. De bonnes illustrations et des couleurs biens choisies contribuent à communiquer des valeurs de qualité et de service. Toutefois ceci est loin d’être le facteur le plus essentiel.

 

Sur Internet, il est primordial de toujours utiliser de « petites »  images afin qu'elles puissent être accessibles par tous les navigateurs. Pour augmenter la vitesse et les performances de votre site e-Commerce, assurez-vous de compresser vos images à la taille optimale prévue sur le web, c’est-à-dire environ 250 px pour une image de taille moyenne. Certes l’ADSL  est  disponible presque partout désormais, mais il est important que les pages puissent être consultées rapidement. Un site qui tarde à s'afficher risque de voir s’échapper les visiteurs sur le site d’un concurrent moins bien listé sur Google mais dont l'affichage est plus rapide que le vôtre.

 

Les images trop lourdes sont la principale cause d’abandon d’une page. La meilleure solution pour concevoir un site avec un temps de chargement rapide est de réduire le nombre d'images sur votre site. Lancez-vous à la chasse aux images superflues.

 

Résistez à la tentation d’utiliser des images qui clignotent, qui se déplacent ou virevoltent dans tous les sens. Si vous ne pouvez pas vous en passer utilisez-les avec parcimonie. Un site e-commerce doit rester simple, rapide et clair. Si vous trouvez ce bling-bling attractif, sachez que les acheteurs pourraient ne pas partager vos goûts. En plus de ralentir le temps de chargement des pages, de nombreuses études ont démontré que les  animations racoleuses agacent les internautes. Certains visiteurs vont même jusqu'à masquer les images pour pouvoir enfin lire le contenu.

 

 Préférez les images au format .png au format jpg ou .gif. Si vous utilisez Photoshop pour retravailler vos photos utilisez toujours la fonction « sauvegarder au format web ». Il existe une pléthore de logiciels de retouche d'image sur internet qui vous permettront d'optimiser la taille de vos images pour un affichage plus rapide sur le web.

 

Le choix de la mise en page

 Les sites e-Commerce les plus réussis ont tous en commun ce même facteur : Ils font preuve d’une mise en page simple. C’est pourquoi, les mises en page classiques seront toujours les plus efficaces en e-Commerce. Alors, que dire de certaines pages d’accueil composées d’une pléthore de modules dynamiques ? Leur développement a certainement été très excitant pour le webmaster, mais dans beaucoup de cas ils ne contribuent en rien à l’objectif principal d’une bonne page web : délivrer des informations aux acheteurs potentiels.

 

Les présentations classiques dont les menus sont en « C » ont par exemple scientifiquement démontré leurs bons résultats. Il en va de même pour les arrières plans de couleur. Utilisez si possible un fond blanc car il est considéré comme l'une des caractéristiques les plus importantes dans la construction d'une bonne page web. Comme dans le commerce traditionnel, les acheteurs rechignent davantage à passer à l’acte dans une boutique trop sombre ou mal éclairée. De plus, un fond blanc permet de ne pas gaspiller de temps dans le détourage des images.

 

 Le nombre de boutons et de liens sur votre boutique est-il raisonnable ? Si votre navigation dépasse 7 éléments, réfléchissez sérieusement à ceux que vous ajouterez en plus. Si vos menus déroulants comportent plus de 2 sous-menus, recommencez !

 

Le choix des polices de caractère

 

Il est préférable de laisser (dans ce domaine également) le moins de place possible aux fioritures. Si vous voulez que votre site Web ait la même apparence sur tous les ordinateurs, n'utilisez que les polices Arial, Verdana ou Times New Roman. Favorisez les polices les plus lisibles avant tout en utilisant au minimum une taille de 12. Il n’y a rien de pire qu’un site où il y a un nombre incalculable de couleurs ou de polices (sauf si effectivement vous cherchez volontairement à créer le bazar) . Limitez-vous à 3 couleurs, et à une seule police de caractères. Cela ne vous empêche pas d’utiliser toutes les nuances d’une couleur et les tailles des polices.

 

Soignez votre marque, votre Logo et vos illustrations. Un bandeau et un design soigné sont la preuve que vous êtes sensible à la qualité et au professionnalisme. Faites un effort sur l'harmonie des couleurs et des polices utilisées dans votre site.

 

Le compromis entre créativité et sobriété est indispensable à la bonne lisibilité d’un site et à la création de sa charte graphique. Un bon design repose sur des compétences aussi variées que : le graphisme, la programmation, le multimédia. Un bon logiciel de création de site  e-commerce comme ShopFactory propose plus d’une centaine d’habillages professionnels qui vous dispensent de connaissances techniques liées au web comme l’accessibilité et la  portabilité, lors du choix de votre habillage. A vous d’adapter (ou non d'ailleurs) les graphismes pré-étudiés pour l'e-commerce et de les personnaliser selon vos propres goûts.