Conseils de design

Parce que le succès d'une boutique en ligne passe aussi par un design impeccable, voici quelques astuces techniques pour y parvenir.

Penser en amont

Avant même d'ouvrir Photoshop, GIMP ou tout autre éditeur graphique, vous devriez simplement vous assoir avec une feuille et un crayon, et réfléchir à l'arborescence de votre boutique, afin de la rendre aussi flexible que possible. Par exemple, toutes les boutiques n'ont pas le même nombre de catégories, ou de produits par catégorie.

...

Faites bien en sorte de prendre toutes ces pages en compte, afin de n'en oublier aucune, dans le cas contraire, vous pourriez obtenir un thème incomplet, et donc une mauvaise expèrience expérience utilisateur.
Pour avoir une meilleure idée des pages à prendre en compte, plongez-vous dans le thème par défaut, afin d'en disséquer le code.

...

• un dossier pour tous les calques de textes, afin que les intégrateurs puissent facilement accéder au design lui-même ;
• un dosser dossier pour chaque bloc de design (nouveaux produits, meilleures venteventes, etc.)

Couleurs

N'utilisez pas le réglage CMYK, qui n'est adapté qu'à l'imprimerie. Utilisez toujours le réglage RGB.

...

Le texte standard (titre, sous-titre, texte normal) devrait être limité aux polices suivantssuivantes, afin de vous assurez assurer que les visiteurs voient tous la même chose :

...

Utilisez le strict minimum de police : trop de polices différentes ne peut peuvent que rendre votre design plus confus.

...

Gardez toujours en tête que l'utilisateur choisi choisit la taille finale du texte, étant donné que les navigateurs modernes peuvent l'augmenter ou la réduire au besoin. En fait, vous devriez tester votre site avec différentes variations dans les réglages de votre navigateur, afin de voir si votre design est solide... et donc de voir ce qu'il vous faut retravailler pour éviter qu'il soit facilement cassé.

...

Les images transparentes ne marchent fonctionnent pas bien sur les anciens navigateurs, en particulier Internet Explorer, donc évitez les images PNG en 24 bits. Pour ce qui est des images GIF avec transparence, utilisez-les par-dessus un fond uni pour vous assurer que l'effet fonctionne. De plus, évitez les pixels semi-transparents en définissant une couleur de cache (la même que celle du fond).

...

Enfin...

• Pensez à activer toutes les options afin de voir le rendu avec le thème standard.
• Modifiez une fiche produit de pour voir quelles sont les options possibles (promotion, nouveautés, etc. …) et leurs impacts sur l’affichage en front-office.
• Le style graphique de votre boutique doit être homogène.

...

Cette page est la plus importante de votre site e-commerce, car c'est ici que tout se joue. C'est ici que le visiteur va se faire une opinion de votre boutique , et qu'il va décider s'il peut faire confiance à votre site et vous donner son numéro de carte bleue.

Vous devez faire en sorte d'avoir un style général distinct, facilement reconnaissable , et d'avoir votre catalogue visible dès la première page.

L'en-tête du site vous permet de placer les éléments les plus représentatifs : logo, nom, image de fond unique... Il doit faire au maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins jeter un coup d'oeil d’œil à votre catalogue sans avoir à scroller. En d'autres termes, l'utilisateur ne devrait jamais avoir a à scroller pour voir vos premiers produits.

L’aspect visuel est très important (, d’où la phase de Réflexion réflexion en amont) vous . Vous devez trouver un moyen élégant de mettre en avant vos produits sans pour autant surcharger votre page. De plus vous devez utiliser des couleurs et un graphisme homogènes entre les pages. Par exemple, si vous utilisez un effet sur les boutons d'une page, pensez à réutiliser les même mêmes effets sur toutes les pages de votre site.

Le moteur de recherche doit être facile à trouver. En tant que visiteur, il arrive souvent que l’on sait sache ce qu’on vient chercher, aussi est-il est important que l’on distingue du premier coup d'oeil d’œil cet outil.

Lors de la création de votre site, pensez aussi également à la navigation dans les catégories , : elle doit être simple et intuitive.

Afin de renforcer la confiance des visiteurs pensez à mettre en avant vos partenaires (banques, transporteurs) et votre classement FIA-NET. Ce sont des éléments de réassurance.

Si vous avez un contact téléphonique ou un tchat en ligne, n’hésitez pas à le mettre en avant. Cela montrera votre proximité avec le client et c’est ce que qui fera la différence.
Bien entendu, n'utilisez pas votre numéro de téléphone personnel : ils les clients doivent sentir qu'ils contactent une équipe de support, pas qu'ils vous dérangent tandis que vous cuisinez .!

Affichez Enfin, affichez clairement les conditions de livraison, de retour de la marchandise, les C.G.V, et autres textes de loi.

...

Mettez en avant le bouton ajouter au panier. Il doit être bien visible et se distinguer du reste de la page de part par sa couleur ou sa taille – mais tout en restant homogène avec le reste du design : si le bouton se détache trop, le visiteur pourrait ne pas le voir, de la même manière que de nombreuses personnes ont appris à ne pas voir les publicités sur Internet.

...

Le "tunnel de transformation" (en anglais, "conversion funnel", c'est à dire "entonnoir de conversion", ce qui est plus proche de la réalité) correspond aux pages où vous transformerez vos visiteurs en clients (d’où le terme "transformation" ou "conversion"). Si ces pages sont mal structurées, cela peut vous faire perdre plusieurs clients potentiels , et donc les commandes qu'ils auraient pu passer.

...

• Ne laissez que l’essentiel. Le visiteur doit se concentrer sur la création de son compte et l’acte d’achat. Inspirez-vous des formulaires d'Amazon et de la Fnac.
• Réduisez au maximum le nombre d'étapes. Le visiteur doit savoir combien d'étapes il lui reste a parcourir avant la finalisation de son achat.
• Affichez clairement toutes les erreurs que l'utilisateur fait, juste à côté du champs champ du formulaire. Les erreurs devraient être affichées avec une couleur distincte (le rouge a fait ses preuves), et les champs requis doivent être clairement indiqués (avec une un astérisque *, par exemple).

...

• Réduisez au maximum le nombre d‘étapes. (: adresse de livraison, paiement).
• Affichez clairement les erreurs et indiquez les champs obligatoires.
• Page de paiement :
  • Pour un paiement par CB, avertir le visiteur qu'il passe sur le site sécurisé de votre banque. Par exemple, utilisez une icône "cadenas" avec une un petit texte explicatif.
  • Si le paiement est par chèque (ou autre que paiement en ligne), indiquez clairement la marche à suivre (adresse, montant, …...)

Après cette étape cruciale votre visiteur est à présent un de vos clients. Bravo !

...