Table of Contents
Avant-propos
Ce guide destiné aux graphistes vous fournira quelques conseils et règles élémentaires à suivre lors de la création d’un thème pour PrestaShop. De plus il abordera quelques points d’ergonomie afin que vous puissiez être incollable sur le e-commerce.
I. Réflexion
Avant de commencer à lancer PhotoShop (ou GIMP), je vous invite à prendre un papier et un stylo et à réfléchir à l’arborescence de votre site et à penser au fait que votre boutique sera flexible (vous n’aurez pas toujours le même nombre de catégories ou encore de produits).
Un thème complet de PrestaShop nécessite la création d’au moins 10 pages :
- Page d’accueil
- Page catégorie
- Fiche produit
- Mon compte et ses pages intérieures
- Mon panier
- Identification
- Création de compte
- Adresse
- Livraison
- Paiement (Chèque, virement bancaire)
Veuillez à bien prendre en compte ceci afin de ne rien oublier.
Une fois que tout cela est fixé pour vous, faites quelques croquis afin d’avoir une idée de l’agencement des différents éléments (nouveautés, promotion, photos, texte, etc. …). Pensez aussi aux petits détails comme les différentes mentions sur la fiche produits par exemple (soldes, promotions, nouveautés, prix barrés …).
Bien sûr tout ceci ne sont que de simples conseils, certains professionnels préfèrent, par exemple, se passer de PhotoShop et coder directement en php et css.
II. Recommandations techniques
Vos maquettes doivent être au format Photoshop (.psd) en RVB 72 dpi / non aplati.
Nous vous recommandons de travailler pour une résolution d‘écran de 1024×768 aussi la largeur de votre site ne doit pas excéder 980 pixels de large afin d‘être compatible.
Disposition des calques sous PhotoShop
Plusieurs méthodes peuvent être appliquées, l’une où vous penserez à faire un dossier ou l’on trouvera tous les calques de texte, afin que les intégrateurs puissent préparer les fonds de pages plus rapidement, l’autre où vous ferez un dossier pour chaque bloc (Nouveautés, Meilleures ventes, etc. …).
Les couleurs
Pensez à utiliser le format de couleurs RVB adaptés aux écrans plutôt que CMJN qui est lui, adaptés au domaine de l’impression.
Les polices
N’utilisez pas de polices exotiques, pensez fonctionnel !
Pour du texte standard (type titre, sous-titre, texte courant, etc. …) limitez-vous aux polices suivantes afin que tous les visiteurs de votre site puissent voir la même chose, de même trop de polices dans une même page peut vite devenir illisible.
- Arial
- Verdana
- Helvetica
- Georgia
- Tahoma
- Times News Roman
Unité de mesure
L’unité de mesure, sur le Web, est le pixel, point élémentaire de l‘écran et non pas le pica, le point ou le centimètre pour lesquels il n’existe pas de conversion et qu’il faut donc oublier.
Taille du texte
N’oubliez pas que la taille du texte est fixée par l’utilisateur final.
Mais vous pouvez d’or & déjà commencer sur des tailles fixes telles que : 8px pour du petit texte, 10px / 12px pour du texte standard, 14px pour un sous-titre, 18px pour un titre etc. …
La transparence
Les images transparentes sont très mal gérées par Internet Explorer, aussi évitez les .png 24 bits. Pour les gif transparent pensez à les mettre sur un fond uni afin de vous simplifier la tâche. De plus évitez les pixels semi-transparents en définissant une couleur de cache (la même que celle du fond).
Autres
- Pensez à activer toutes les options afin de voir le rendu avec le thème standard.
- Visitez l‘édition d’une fiche produit afin de 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.
III. Ergonomie
Ici nous allons voir quelques règles d’ergonomie. Rien de très complexe, mais juste de quoi être sûr que votre boutique puisse être compréhensible & fonctionnelle pour tout un chacun.
Votre but > Donner confiance aux visiteurs pour qu’ils achètent.
A chaque problème d’utilisation, vous perdez la confiance des visiteurs. Si elle arrive en dessous d’un certain niveau, la frustration s’installe et l’internaute quitte le site. D’où l’importance de l’ergonomie dans un site e-commerce.
N’oubliez pas que votre but (en plus de vendre, bien sûr) est de montrer aux visiteurs que derrière le site e-commerce que vous faites, il se cache des personnes sérieuses et compétentes.
La page d’accueil
Cette page est la plus importante, car c’est ici que tout se joue.
C’est ici que le visiteur va se faire une opinion et c’est ici qu’il va se dire s’il peut faire confiance à votre site.
Votre première action sera de mettre en avant votre boutique et la richesse de votre catalogue.
Pour l’image de votre boutique, utilisez l’entête du site et votre logo.
L’entête de votre site (le header) doit faire au maximum 250 pixels de hauteur, afin que les visiteurs puissent au moins jeter un coup d’oeil à votre catalogue sans avoir à scroller.
L’aspect visuel est très important (d’où la phase de Réflexion en amont) 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 homogènes & un graphisme type. (exemple > Si vous utilisez un effet sur vos boutons sur une page, veuillez réutiliser les même effets sur toutes les pages de votre site.)
Le moteur de recherche doit être mis en avant. En tant que visiteur il arrive souvent que l’on sait ce qu’on vient chercher aussi il est important que l’on distingue du premier coup d’oeil cet outil.
Lors de la création de votre site pensez aussi à 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.
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 fera la différence.
Affichez clairement les conditions de retour de la marchandise, les C.G.V, et autres textes de loi.
La fiche produit
Si votre visiteur est sur cette page c’est qu’il est intéressé par votre produit et qu’il souhaite des détails.
Mettez en avant le bouton ajouter au panier. Il doit être bien visible et se distinguer du reste de la page de part sa couleur ou sa taille (là encore pensez à être homogène).
Mettez en avant aussi les “étiquettes” reliées à ces produits (nouveautés, promotions, coupon de réduction, etc. …) et affichez clairement les délais de livraison!
Le tunnel de conversion (Mon compte et ses pages intérieures)
C’est ici qui 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 et pas mal de ventes.
Création de compte / Mon compte
PrestaShop est fourni avec un formulaire apportant un très bon taux de transformation.
Mais suivant votre site il ne sera pas forcément adapté à vos besoins.
Aussi voici quelques conseils à suivre si le formulaire de base ne vous convient pas :
Ne laisser que l’essentiel. Le visiteur doit se concentrer sur la création de son compte et l’acte d’achat. (exemple > Amazon, Fnac.)
Réduire au maximum le nombre d‘étapes.
Le visiteur doit savoir combien d‘étapes il lui reste a parcourir avant la finalisation de son achat.
Afficher clairement les erreurs de formulaire en face de chaque champ. Chaque erreur doit être affichée d’une couleur distincte (rouge est le plus commun) et indiquez les champs obligatoires (par un astérisque par exemple).
Dernière chose : le bouton validation se situe toujours à la droite du bouton annuler.
Le paiement
Le visiteur a créé son compte client ! Félicitations.
Mais tout n’est pas gagné, il doit encore passer l‘étape de l’acte d’achat.
Là encore, même chose que le formulaire de création de compte.
Réduisez au maximum le nombre d‘étapes. (adresse de livraison, paiement)
Affichez clairement les erreurs et indiquez les champs obligatoires.
Pour un paiement par CB avertir le visiteur qu’il passe sur le site sécurisé de votre banque. Utilisez une icône cadenas par exemple avec une petit texte explicatif.
Si le paiement est par chèque (ou autre que paiement en ligne) indiquer clairement la marche à suivre (adresse, montant, …)
Après cette étape cruciale votre visiteur est à présent un de vos clients. Bravo !
Ces conseils en ergonomie pour votre site e-commerce ne sont pas exhaustifs, mais constituent une base de travail pour améliorer l’utilisation de votre site e-commerce.