Les pires designs de sites e-Commerce du monde

On reconnaît habituellement assez vite un site e-Commerce au graphisme défaillant. Établir néanmoins les raisons exactes pour lesquelles son apparence "cloche" est autrement plus difficile. Voici les pires sites du monde avec des erreurs de conception graphique monumentales.

 

 

La plupart des sites ci-dessous sont des cas extrêmes et ces exemples cumulent parfois les erreurs.

 

Rappel de quelques notions de base en matière de design

 

Ce qui rend le travail de l’infographiste si passionnant c'est que la grande majorité des bévues qui peuvent torpiller une charte graphique, sont susceptibles d'être corrigées. Il y a néanmoins quelques péchés capitaux qu'il est préférable d'éviter. Parmi eux : les textes défilants, les fenêtres intempestives avec des animations flash, les GIF animés qui clignotent, la musique qui se met en route toute seule sans qu'on ne puisse l’arrêter (alors que votre mari était sur le point de s'endormir...) Disons-le tout de suite tout ça fait désormais plutôt ringard.

Efficacité ou esthétique ? Choisissez votre camp

 

L'efficacité devrait toujours primer sur la créativité. A quoi bon investir autant de temps et d'argent dans un look "qui déchire et qui vous ressemble" si les internautes ne sont pas en mesure d'interagir avec votre site ? La compatibilité avec les navigateurs et les mobiles, le temps de chargement des pages, le bon usage du Flash sont des critères qui devraient impérativement figurer dans le cahier des charges lors de la conception de tout site de commerce électronique. La colonne vertébrale d'une boutique repose sur deux fondamentaux  - l'accessibilité aux produits  - la facilité de passage à l'acte.

 

Si vous vous lancez dans la construction de votre site e-Commerce notez-le sur un post-it et collez-le sur votre écran.

Fonction principale de mon site :
1 Attirer des clients sur ma boutique.
2 Faire en sorte qu’ils n’en ressortent pas les bras vides.

 

Le manque de structure et l'alignement

 

La structure et l'alignement sont deux facteurs indissociables d'un bon design - surtout pour un catalogue en ligne. Les internautes sont susceptibles de ressentir une forme d'agacement si votre mise en page ne suit pas une certaine forme de rangement et d'ordre. Une des solutions consiste à utiliser un système de grille, exemple 960 ou 1140 pixels. Au pire partez d'une structure prédéterminée qui détermine les emplacements logiques des éléments de conception et le contenu.

Quel bazar... Faites un plan de votre boutique avec un crayon et un papier avant de réorganiser vos différents rayons - cherchez à raccourcir le chemin d'accès aux produits et limitez le nombre de niveaux.

 

Les erreurs de typo

Les erreurs dans le choix des caractères peuvent prendre plusieurs formes. Les textes peuvent être trop petits rendant la lecture difficile…  ou trop imposants pour tenir dans la page. L'emploi d'un nombre important de polices de caractères renvoie habituellement une image chaotique et crée un sentiment de décousu.  Il y a aussi ces polices qui ne correspondent pas du tout à l'ambiance de la boutique ou au thème traité voir même incompatibles avec une utilisation sur le net…

 

Fuyez les fioritures dans le choix des polices de caractères. Ne combinez pas plus de 2 ou 3 polices différentes. Une seule taille et une seule couleur pour les textes de description. Les polices sans empattement sont celles qui conviennent le mieux à la lecture à l’écran. D’ailleurs 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 - avec au minimum une taille de 12.

 

Le manque d'harmonie

Voilà un autre problème récurrent sur les sites qui font "bricolés". Tous les titres, sous-titres et les zones de contenu devraient être formatés de la même manière d'une page à une autre. Par exemple, si votre titre de page est en Verdana bleu sur une page, alors tous les titres de page de votre site devraient être en Verdana bleu. Si un de vos liens est en rouge, alors tous vos liens doivent être rouges. L'absence de consistance dans les éléments de la charte engendre le chaos.

Soigner votre mise en page est la preuve que vous êtes sensible à la qualité et au professionnalisme. Travaillez sur votre site avec sérieux pour que les visiteurs vous prennent au sérieux.

 

Manque de hiérarchie dans les menus de navigation

C'est l'exemple parfait de l'élan de créativité qui a fini par primer sur l'efficacité. La navigation sur votre boutique en ligne est l'une des pièces maîtresses de l'accueil que vous réservez à vos acheteurs potentiels. Vos menus de navigation doivent être clairement identifiés et concentrés dans une seule zone. La priorité doit être donnée aux informations les plus importantes en premier. Utilisez les menus déroulants pour hiérarchiser les accès en évitant ainsi d'encombrer votre site par la même occasion.

 

La caractéristique principale des sites marchands qui marchent très fort c'est qu'ils sont majoritairement faciles à parcourir par les acheteurs. Les internautes préfèrent les architectures classiques en "C".

Mauvaise combinaison de couleurs

Le choix des couleurs donne le ton d'un site et il peut même influencer le comportement des acheteurs. Trop de couleurs peut rendre un site agressif alors que pas assez peut le rendre fade. Utilisez le disque chromatique pour identifier les bonnes combinaisons de couleurs. La couleur doit  mettre en valeur vos produis sans pour autant entrer en concurrence avec eux en s’accaparant de l'attention des gens.

Ces couleurs pâles peuvent être interprétées comme une forme de mauvaise humeur. Les couleurs chaudes, comme le rouge, le jaune, l’orange, accélèrent le mouvement. Elles paraissent "avancer" dans la page. Les couleurs froides, comme le bleu, le vert, le violet, incitent au calme, à la réflexion, à la détente. Elles donnent de la profondeur à la page.

 

Mauvais usage des contrastes et de l'espace négatif

 

Les contrastes et les espaces vides guident le regard des acheteurs dans votre site. Les fiches produit disposant d'un contraste trop faible sont difficiles à lire et fatiguent la vue. Les boutiques avec peu d'espaces négatifs font bazar. Néanmoins, les sites avec trop de contrastes sont tout aussi difficiles à lire et les boutiques avec des espaces négatifs trop nombreux renvoient une image de rayons vides.

La lisibilité des textes dépend de la différence de luminosité entre les couleurs de premier plan et celles d'arrière-plan. Il faut donc veiller à ce que le contraste soit suffisamment élevé (sans non plus exagérer : certaines personnes ont du mal à lire du texte noir sur un fond blanc, car dans ce cas la luminosité est trop élevée).

 

Profusion de liens

Au même titre que des blocs de texte trop nombreux et trop larges peuvent rapidement submerger le lecteur, une profusion de liens peut porter préjudice à votre site.  Il est très important de trouver la bonne quantité de liens, de bien les organiser et surtout de les rendre suffisamment identifiables pour indiquer aux internautes le "sens de la visite". Une avalanche de liens ne fera que semer la confusion chez les internautes.

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…

En résumé

Ok d'accord… les exemples de sites ci-dessus sont des cas extrêmes d'erreurs de graphisme, il n'empêche que ces principes peuvent être appliqués à n'importe quel site. La prochaine fois que vous visiterez un site marchand et que vous aurez l'impression que quelque chose cloche, plutôt que de le zapper, prenez une petite minute supplémentaire pour essayer d'identifier ce qui ne fonctionne pas dans sa conception et tirer des leçons pour votre propre boutique.

Conseil : Optez pour un logiciel e-Commerce avec un maximum d'habillages et de squelettes prêts à l'emploi. Moins vous vous vous embarquerez dans l'invention de designs hasardeux, plus votre activité sera rentable.