5 août
WiziShop lance une nouvelle série de design “nouvelle génération” +
Publié dans Wizishop | Par GregoryComme vous le savez (si vous lisez régulièrement ce blog), nous avons beaucoup d’ambition pour WiziShop, notre solution e-commerce.
Après 22 mois d’existence, notre outil a convaincu plus de 650 e-commerçants (voir quelques exemples de boutiques), nous avons mis en ligne environ 170 nouveautés (nouvelles fonctionnalités, partenariats, etc.) et triplé la taille de l’équipe (nous sommes passé de 4 à 12 personnes).
Pour nous, ce n’est qu’un début. Nous avons bien l’intention de nous développer encore plus rapidement lors des prochains mois. L’interface d’administration va encore évoluer et proposer de nouveaux outils innovants. Mais ces dernières semaines, nous avons également travaillé sur la partie visible des sites (front office). Nous souhaitions proposer une nouvelle génération de design accessible gratuitement pour tous nos clients.
Une nouvelle série de designs plus belle, performante et réunissant un ensemble de bonnes pratiques pour augmenter le taux de transformation et le panier moyen.
Une nouvelle série de designs qui s’adapte à de nombreux paramètres et qui regroupe toutes les caractéristiques d’un très gros site de e-commerce (dont la création dépasse souvent les 100 K€).
Le premier design de la série vient d’être publié et je ne résiste pas à la tentation de vous le présenter !
Bienvenue au design “Light Gray“.
Vous pouvez tester ce nouveau design sur notre boutique de démonstration. Ce design est également accessible gratuitement pour tous nos clients via leur interface d’administration, rubrique “Apparence & Personnalisation”.
Voici un tour d’horizon des spécificités de cette charte graphique “nouvelle génération” :
1. Les menus déroulants
Le menu horizontal du haut présente les différentes catégories principales de votre catalogue produit. Si vous possédez des sous-catégories, une petite flèche apparait et propose un menu déroulant permettant à votre visiteur d’accéder directement à la sous-catégorie de son choix.

Le menu déroulant s’adapte visuellement en se mettant sur une, deux ou trois colonnes selon le nombre de sous-catégories.
2. Panier interactif
En haut à droite, le panier est automatiquement mis à jour. Il suffit au visiteur de survoler le panier pour voir apparaitre les différents produits sélectionnés, naviguer entre eux (ils sont présentés deux par deux) et finaliser la commande !

3. Mises en avant et listes de produits
Il est possible de commander le produit directement depuis la sélection. Une bulle d’information au survol du produit affiche plus de renseignements (la description courte du produit), le contour du bloc est également renforcé pour bien mettre en valeur le produit survolé. Dans les listes produits, on utilise une plus grande image (150 x 150 px) pour mieux mettre en valeur vos articles.

4. La fiche produit
A l’instar des plus grands sites marchands, nous avons décidé d’épurer la fiche produit pour ne pas “dissiper” l’attention du visiteur. Ainsi, la fiche produit prend toute la largeur de la page, les menus et les éléments de la colonne se retrouvant en pied de page.

On retrouve, avant le fil d’ariane, un bouton permettant d’accéder à la catégorie supérieure pour choisir facilement un nouveau produit. Les boutons de partage prennent moins de place que sur les anciens designs et ouvrent une fenêtre lors du clic.

La description du produit et les caractéristiques sont présentées sous forme d’onglets pour passer facilement de l’un à l’autre. En haut de la fiche produit, le début de la description (ou la description courte si elle existe) permet d’avoir un petit aperçu du produit. Le lien “En savoir +” renvoie vers la description complète située plus bas dans la page.

5. Le pied de page
Selon le nombre de liens, les informations à afficher et la page parcourue par le visiteur, le pied de page s’adapte pour donner du contenu cohérent.
Exemple du pied de page qui met le blog en avant :

Le même pied de page dans une fiche produit :

6. Le panier
Tout comme la fiche produit, le panier prend toute la largeur pour capter toute l’attention du futur client. Les étapes sont clairement identifiées et des boutons permettent de modifier très facilement la quantité des produits désirés.



























