Conférence. Comment améliorer le taux de conversion de votre boutique en ligne grâce au design sous Prestashop? Réalisé par ECOMIZ

Transcription

1 Conférence Comment améliorer le taux de conversion de votre boutique en ligne grâce au design sous Prestashop? Réalisé par ECOMIZ

2 Table des matières Présentation d'ecomiz...2 Pré-requis...2 Visibilité et accessibilité...3 La page d'accueil...4 En résumé...4 Attention aux petites habitudes...4 Les erreurs à éviter...5 La navigation...6 La page produit...8 Le chemin de commande...9 Conclusion...10 Présentation d'ecomiz EcomiZ est une agence web créée depuis 2010 spécialisée dans le e-commerce et certifiée Prestashop. Nous sommes une équipe de 10 personnes (graphistes, intégrateurs, développeurs, chef de projets, expert SEO) tous spécialisés dans la vente en ligne. EcomiZ réalise des projets de toute taille, de la TPE jusqu'aux grands comptes comme : Nathan, Bordas, Bouygues, SNCF, Banque postale etc... Nous intervenons sur toute la chaîne d'un projet e-commerce : Réalisation de design et logo sur mesure Développement PrestaShop (thèmes et modules), Migration de solution e-commerce (Powerboutique, OS Commerce, shopify etc ) Applications mobiles (web et natives) Gestion des campagnes de référencement naturel et payant (Adwords) Webmarketing (réseaux sociaux, comparateurs, places de marché, affiliation etc...) Maintenance applicative et évolutive Formation (prise en charge par votre OPCA) Gestion de projet et conseil. Pré-requis Taux de conversion : pourcentage de visiteur devenant client Taux de rebond : pourcentage de visiteur quittant votre site dès la page d'accueil Responsive design : ergonomie qui s'adapte automatiquement aux terminaux mobiles Réassurance : Éléments textes ou graphiques permettant de rassurer le client. Header : bandeau haut d'un site internet Footer : pied de page d'un site internet

3 Visibilité et accessibilité Nous parlons ici bien entendu de la compatibilité de votre site pour les terminaux mobiles : smartphone et tablette. En effet à l'heure actuelle nous pensons que l'achat mobile n'est pas encore mûr néanmoins le fait de consulter un site comme un catalogue est statistiquement de plus en plus important et devient courant. Il est selon nous actuellement pas nécessaire d'investir dans une application mobile e- commerce encore difficile à rentabiliser en terme de génération de chiffre d'affaire (nous ne prenons donc pas en compte les éventuels impacts sur votre image de marque qui peuvent être eux intéressant). La solution la plus intéressante est le Responsive Design! Il s'agit d'un design qui s'adapte automatiquement à la taille de l'écran du terminal mobile quel qu'il soit (smartphone, tablette, android ou apple). Celui-ci vous permet de conserver le même site et de maintenir qu'une seule version. En terme de coût cela est très intéressant, la différence entre un thème sur mesure non responsive et un responsive étant seulement de 600 HT sur nos offres. Exemple :

4 La page d'accueil En résumé C'est la page la plus cruciale de votre site, la page principale d'entrée de votre site. Elle doit convaincre, rassurer et donner envie aux visiteurs d'aller plus en profondeur sur votre site. Elle doit également permettre d'un seul coup d œil de comprendre votre activité et ce que vous vendez. Le visuel produit doit être l'élément majeur en proportion sur votre page. Attention aux petites habitudes Vous devez dans la mesure du possible respecter les habitudes qu'ont pris les cyberacheteurs, les modifier n'est pas forcément mal mais c'est prendre un risque. Voici une liste non exhaustive d'emplacement pré-déterminé par les habitudes : Élément Logo Panier Menu horizontal Menu vertical Lien de connexion, mon compte etc... Recherche à facette / avancée et filtre Réassurance client Emplacement en haut à gauche ou au centre en haut à droite sur toute la largeur sous le logo colonne de gauche en haut à droite ( au dessus ou en dessous du panier) colonne de gauche haut de colonne de droite + pied de page blocs nouveautés / promotions colonne de droite Moteur de recherche Liens vers les pages d'informations (CGV etc...) Informations de contact en header ou haut de colonne de droite dans le footer dans le footer

5 Exemple d'un storyboard type : Les erreurs à éviter Le 3 colonnes : Les sites en trois colonnes donne un effet surchargé peu attrayant qui perdent le visiteur, de plus l'espace alloué aux produits est restreint. A éviter! Solution : Choisissez un mode 2 colonnes ou 1 colonne.

6 Les informations de contact invisibles : Ne mettez pas votre numéro de téléphone ou lien de contact en tout petit dans votre pied de page! Solution : Mettez bien en avant ces informations de réassurance (même sur un design épuré) dans le pied de page, en colonne droite ou gauche et éventuellement dans le header. Les visuels produits trop petits : Ne mettez pas de petits visuels produits qui rendent le reste de l'information plus visible que vos produits. Solution : Remplissez l'espace au maximum avec vos produits qui doivent occuper la plus grande proportion visuelle. La taille des miniatures produits doit être adaptée à votre thème. La navigation Le menu horizontal est l'une des meilleures manières de réaliser un menu de navigation et peut être agrémenté de nombreuses fonctions comme les menus dit XXL intégrant promotions et images produits. Les menus XXL peuvent être mis en place sous Prestashop simplement avec des modules existants et bon marché. N'ayez pas plus de 3 niveaux de catégorie (2 étant l'idéal), trop de sous-catégories perdent vos visiteurs et font chuter votre taux de conversion. Favorisez les menus à plusieurs axes, exemple un menu par marque, un menu par budget, un menu par utilisation produit. Permettant ainsi à chaque visiteur de trouver plus rapidement le produit idéal selon sa recherche (le tout dans une même barre de menu). Votre menu doit se démarquer graphiquement afin de ressortir par rapport au design général du site.

7 Évitez le menu multiple qui perd vos visiteurs. Exemple :

8 La page produit Cette page doit être clair (non surchargée) mais complète. Traditionnellement les photos sont placées sur la partie gauche de la fiche sur Prestashop. Il est important de mettre en valeur votre bouton panier. Gardez en tête que plus votre fiche est complète et répond aux interrogations de votre client, plus votre produit se vendra et augmentera son taux de conversion. Le fait de mettre une vidéo produit peut être une très bonne solution, nous l'avons expérimenté pour un client, et comme par hasard ce produit est devenu son best-seller! Les indispensables à retenir : Ayez au minimum 3 visuels produits de qualité (avec zoom) Le visuel principal doit être grand et prendre une proportion importante de la page. Ayez une description complète et personnalisée (pas un copier coller de vos fournisseurs!) d'au moins 10 à 15 lignes. Une rédaction concise sous forme de tableau ou puce peut être adapté à certains produits. Mettez si nécessaire une documentation PDF (schéma, montage, détails du fournisseur ) Activez l'onglet «Commentaires» et mettez des commentaires! Ayez un module de crosselling si possible permettant des promotions sur les ventes croisés. Ne vous privez pas de vidéos produits! Si le produit le nécessite utilisez un système de pictogramme.

9 Le chemin de commande Sauf dans le cas où votre cible serait uniquement des personnes de plus de 50 ans, activez systématiquement l'option de commande rapide (One page checkout)! Sur cette page stratégique chaque section doit être clairement identifiable graphiquement (résumé, adresse, livraison, paiement) afin de ne pas rendre la page confuse. Cette page doit être graphiquement parfaite dans les moindres détails et testée sur tous les navigateurs! Points à vérifier sur chaque navigateur: Alignement des champs des formulaires Calage parfait du résumé du panier Logo de transporteurs propres et de même taille Logo des prestataires de paiement propres et de même taille Séparation graphique claire des 3 étapes de la page Parfaite harmonie avec le reste du design

10 Conclusion Un design sur mesure vous permettra une meilleure image, une ergonomie réfléchie et un taux de conversion plus important. L'ensemble de votre site doit être clair, on ne doit pas avoir à chercher l'information On doit visuellement comprendre votre activité dès la page d'accueil Ayez des fiches produits complètes (visuels, descriptions, vidéos ) Ayez un chemin de commande clair et facile. Pensez aux finitions graphiques c'est ce qui fait la différence entre un rendu professionnel ou amateur et joue sur votre taux de conversion.