PrestaShop propose de base un thème que tout e-commerçant peut utiliser gratuitement pour lancer et réussir sa boutique en ligne. Depuis 4 ans, ce thème n’avait que peu évolué tant graphiquement que ergonomiquement.
Depuis la version 1.4.5 de PrestaShop, les utilisateurs peuvent profiter d’un nouveau thème que nous appelons « standard ». En voici les principales améliorations…
Sur l’aspect « look and feel », le nouveau thème se veut sobre, classique à la fois mais aussi professionnel. Le choix de couleurs neutres est important (noir, gris et blanc) car il convient à tous les types de secteurs d’activité. Il ne fallait donc pas jouer sur les couleurs chaudes (rouge, jaune ou orange) ou froides ( bleu, vert, mauve) car beaucoup de gens ont leur préférence au niveau de la couleur.
A noter également, les effets glossy, web2.0 et dégradé de l’ancien design ont été remplacés par des couleurs de fonds unies (ex. têtières des blocs). Le thème est ainsi plus léger visuellement.
Au niveau du « layout » global, on reste sur un design fixe (980px) centré sur la page.
PrestaShop recommande aux e-commerçants d’éviter les designs fluides à la Google, design proportionnel à la résolution de votre écran.
Pour rappel, un design fluide s’adapte à 100% à la fenêtre du navigateur, à la taille de la résolution de votre écran.
L’exception est Amazon:)
Header
Au niveau du header, nous avons un agencement classique pour ne pas perturber les visiteurs : logo situé en haut à gauche, le panier déroulant en haut à droite. L’essentiel d’un site e-commerce clair et rassurant.
Les devises et les langues ont été placées en au haut à droite sous forme de menu déroulant afin de ne pas encore encombrer le header.
Enfin, le moteur de recherche est centré sur la page pour une visibilité maximale.
Juste en dessous du header, nous avons un menu de navigation pour séparer la partie header du contenu de la page. Ce menu de navigation, déroulant, a pour vocation de mettre en avant les catégories de manière claire.
Typographie
Nous avons également travaillé la lisibilité des polices, ce qui est très important dans un site. Nous avons utilisé une police standard (Arial), police utilisée par tout type de navigateurs (excepté Safari qui utilise Helvetica).
Nous vous rappelions l’intérêt d’avoir une hiérarchisation de l’information (Titre, Intertitre, Chapô…), pour toujours avoir quelque chose d’homogène et de cohérent sur toutes les pages. Les interlignages, les couleurs des liens, l’effet au survol doivent être cohérents sur toutes les pages.
« Consistency is the key » Jakob Nielsen
Les éléments de repérage
Les boutons de « call to action » ont également été revus et sont désormais de couleur jaune (couleur chaude). Cette couleur a été appliquée uniquement aux boutons de grande importance comme « Ajouter au Panier » et « Commander ». Les autres restent en noir (moins importants).
Les prix et les réductions sont de couleurs rouges. Contrairement à ce que l’on pourrait penser en termes de symbolique des couleurs, le rouge ne représente pas ici de danger. Ici, il ne faut pas penser symbolique des couleurs mais plutôt visualisation des éléments.
Au niveau des nouveautés, un bloc de Réassurance est apparu au niveau du pied de page (footer). Il a pour vocation de rassurer l’utilisateur lors de son achat, un sentiment de convivialité, de confiance doit être installé. Le message doit être clair, précis et court et les icônes explicites. Ce bloc est paramétrable, vous pouvez avoir entre un et cinq blocs (un bloc égale une icône et le texte).
Page d’accueil
Sur la page d’accueil, le bloc « Produits Phares » a été revu.
Dans l’ordre, nous avons une mise en avant des visuels, ensuite le titre du produit, la description et le prix.
Il est conseillé à tous les marchands d’avoir des photos de bonne qualité. Le titre du produit doit aussi être original. Si vous jetez un coup d’œil sur le site d’Archiduchesse, vous verrez des produits avec des noms fantaisie (Aubergine, Bleu Canard, Gris cons de pigeons…), ce qui accroît la curiosité des clients.
Page catégorie
Le nombre total de produits apparaît en-dessous du fil d’Ariane (ex. « il y a X produits). Il s’agit de la 1ère information qu’un utilisateur doit apercevoir lorsqu’il atterrit sur cette page.
Le bloc de filtre (pagination, tri…) est répété en haut et en bas de la page catégorie ce qui permet d’y accéder rapidement que l’on soit en haut ou en bas de page y compris en cas de longue liste produits (apparition de la barre de scroll).
Au niveau des listings des produits dans la page « Catégories », la présentation a été revue pour avoir un résultat plus ergonomique, notamment lorsque l’on veut comparer les produits. Si vous vous rappelez bien, sur l’ancien design, la checkbox (case à cocher à choix multiple) était placée en bas à droite, ce qui était assez maladroit au niveau de son emplacement. Sur le nouveau thème, la checkbox est plus visible, judicieusement placée à gauche de l’image produit.
Ainsi, nous avons dans l’ordre d’importance de la vignette : la checkbox, l’image, le titre + description, et enfin une cellule comprenant la réduction, le prix et le bouton « Ajouter au Panier ».
Page fiche produit
L’agencement est assez classique encore sur les fiches produits, à savoir la photo située en haut à gauche, le titre, la description du produit et ses spécificités (couleurs, taille, capacités…) à droite.
La fiche produit doit se terminer sur le bouton de Call to Action « Ajouter au Panier ».
Il s’agit du principe de l’Eye Tracking, suivre le regard et le comportement d’un utilisateur lambda sur ce qu’il voit en premier. L’homme lit de gauche à droite. Le principe du Z voire l’image ci-dessous.
A côté de cette fiche produit, un lien « Partager sur facebook » fait son apparition. Il est important aujourd’hui de communiquer sur les réseaux sociaux (social commerce, F-Commerce).
Tunnel de commande
Le gabarit de page passe en 2/3 et 1/3 contrairement au reste du site.
Nous avons eu besoin de beaucoup d’espace pour cette page.
La colonne située à droite du tunnel de commande doit être réservée à la réassurance, à la sécurité de paiement voire encore au produit susceptible à l’achat.
Quand on est à la caisse, il y a encore plein de choses à acheter 
C’est ce que l’on appelle le cross-selling, ou la vente de produits additionnels, une formidable source d’augmentation du panier moyen !
Un autre point important : les étapes du processus de paiement doivent être visibles sur toutes les étapes jusqu’à la phase de paiement. Il faut que l’utilisateur se sente guidé et que le processus lui semble rapide.
Ce n’est pas à ce moment-là qu’il faut décourager le client !!! Bichonnez-le !
Enfin, pour les passionnés de web design, d’ergonomie, d’expérience utilisateurs, nous vous conseillons un excellent article sur Smashing Magazine sur ce sujet : http://www.smashingmagazine.com/2010/01/15/progress-trackers-in-web-design-examples-and-best-design-practices/
Intégration / Développement
C’est la concrétisation du processus créatif. Le projet n’est pas encore terminé à ce stade. Il faut que les designers, les intégrateurs et les développeurs travaillent conjointement pour que le résultat soit impeccable. Les contraintes de chacun doivent être prises en compte. Le travail de chacun est complémentaire pour la réussite du thème.
Nous espérons que vous profiterez pleinement de ce nouveau thème standard !
Nous attendons votre feed-back afin d’améliorer ce projet.
Merci à tous