Design de site e-commerce : la structure de votre page d’accueil

Moderniser le design de votre boutique en ligne est plus simple que vous ne l’imaginez. Vous devez avoir clairement défini la structure avant de décider des couleurs, des polices de caractères et des images. Pour ce faire, posez-vous les questions suivantes :

• Quels sont les éléments indispensables à mes clients ?
• Où et comment puis-je positionner ces éléments ?

Dans la plupart des cas, l’ordre des éléments sur votre page dépend de l’importance de ces derniers et de l’utilisation qu’en feront vos utilisateurs. Pour mieux connaître vos clients, définissez tout d’abord le profil de votre client idéal. Dans ce post, nous allons lister les éléments indispensables à la page d’accueil de toute boutique en ligne. Adaptez-les à vos besoins et créez ainsi une page d’accueil qui générera de nombreuses ventes tout en renforçant votre image de marque.

Barre de recherche

Facilitez la recherche de vos produits en plaçant votre barre de recherche au centre ou en haut à gauche de votre page, pour une visibilité optimale. La plupart de vos clients savent déjà ce dont ils ont besoin ; donnez-leur donc l’opportunité de le trouver rapidement. Dans la version mobile du site Internet, essayez de placer la barre de recherche le plus haut possible sur votre page. Juste après le logo et, idéalement, à côté de l’icône du menu. Bonus : Vous pouvez offrir la possibilité d’ajouter directement le produit dans le panier depuis la page de résultats.

Panier d’achat

Ajouter des produits au panier peut être très amusant...voire addictif ! Utilisez les techniques du design émotionnel et transformez l’expérience d’achat en un moment agréable et même amusant. Offrez à vos clients une expérience agréable pour qu’ils se souviennent de vous plus longtemps et de façon positive. Si votre image de marque le permet, adaptez le ton et la terminologie de votre panier et de vos boutons d’action selon la catégorie de vos produits, l’époque de l’année, les campagnes promotionnelles, etc. Lorsque cela est possible vous pouvez faire preuve d’humour dans les barres d’état et les notifications par exemple. L’humour dans votre contenu est très important mais n’oubliez pas de maintenir la cohérence du design des boutons et des liens pour ne pas dérouter vos clients. Bonus : Gamification : incitez vos clients à ajouter plus de produits dans le panier : par exemple, indiquez dans une barre de progression combien il manque pour obtenir les frais d’envoi gratuits, ou débloquez des « niveaux » selon les produits ajoutés (Ex : novice, intermédiaire, expert).

Diaporama (Slider) :

Il doit contenir 3 diapositives au maximum, l’idéal étant de se limiter à une seule diapositive fixe. Servez-vous-en pour afficher les promotions temporaires, les nouveautés et les sélections de produits. Mieux encore, mettez en valeur les produits en promotion adaptés à une campagne temporaire (fête des pères, des mères, Noël, rentrée scolaire, etc.) Le diaporama doit toujours afficher clairement ce que vous vendez sur votre site Internet. Mettez vos produits en situation en plaçant en arrière-plan une image engageante occupant toute la surface. Ajoutez-y un bouton d’action intéressant et adapté au contenu de la promotion. Bonus : Retrouvez quelques-uns de nos meilleurs exemples d’images pour diaporamas plein écran dans notre article 5 tendances de design E-commerce pour 2015.

Menu

Le menu est la première chose que votre utilisateur verra en arrivant sur votre site. Ou pas. S’il navigue depuis un téléphone mobile, il est préférable de lui offrir la possibilité de réaliser une recherche via un menu sous forme de bouton déroulant, beaucoup plus attrayant. Il est plus facile de naviguer sur des écrans plus grands. De plus, l’espace permet d’afficher tous les éléments du menu. Mais ne vous laissez pas emporter : ne surchargez pas votre menu ! Idéalement, il doit contenir 3 éléments, 7 au maximum. Attachez-vous à montrer les groupes hiérarchiques les plus importants de votre produit : Par ex. HOMME, FEMME, ENFANT. Si vous détectez que votre site attire beaucoup de visiteurs pour un produit en particulier, n’hésitez pas à l’ajouter à cet endroit : CHAUSSURES, ÉCHARPES ou SACS sont des exemples de sous-catégories que vous pourriez utiliser dans le menu principal. CADEAUX, VACANCES ou NOUVEL AN peuvent parfaitement constituer des éléments de votre menu selon l’époque de l’année. Le nom de votre campagne ou de la collection actuelle également. Faites en sorte que les éléments de votre menu soient le plus court possible. Dès que possible, utilisez un mot plutôt que deux. Si vous avez un blog, il pourrait également être intéressant de le faire apparaître dans le menu. Dans la version PrestaShop 1.6, vous pouvez configurer des sous-menus déroulants enrichis, dans lesquels apparaissent les produits de la catégorie ainsi que des bannières promotionnelles. Bonus : Les pages « qui sommes-nous » « entreprise », « histoire », etc. doivent être placées en dehors du menu. Le meilleur emplacement est le bas de page. De plus, c’est aussi là où les utilisateurs ont l’habitude de les trouver.

Filtres de recherche (Navigation à facette)

Elles s’utilisent normalement sur les pages catégorie et les pages produits mais peuvent également s’utiliser sur la page d’accueil. Filtres par taille, couleur, époque de l’année, occasion, différentes utilisations, façon de cuisiner, etc. Ajoutez tous les filtres qui correspondent à votre produit. Il est parfois préférable de faire référence à l’utilisation plutôt qu’à l’objet en tant que tel. Poêles -> pour faire frire Casseroles -> pour faire bouillir Prêtez attention aux habitudes de vos utilisateurs pour déterminer les filtres les plus adaptés à votre produit. En ce qui concerne leur position : il est judicieux qu'ils soient déroulants. Si l’écran est très grand, vous pouvez les afficher de façon permanente dans la marge à droite de l’écran, en guise de navigation. Bonus : Affichez un filtre par défaut sur la page d’accueil lorsque l’écran de votre utilisateur est supérieur à 1280px de large.

Produits de la page d’accueil

Affichez vos produits les plus intéressants sur la page d’accueil, si vous avez une bonne raison de le faire. Il s'agit d'une stratégie idéale pour obtenir une double entrée (depuis le menu ou depuis la page d’accueil) à vos pages produit. Il est important d’indiquer clairement à l’aide d’un petit titre ou d’une étiquette pourquoi le produit apparaît sur la page d’accueil. Voici quelques exemples d’étiquettes intéressantes : nouveautés, meilleures ventes, promotions, dernières unités en stock, etc. Spécifiez à chaque fois l’exclusivité ou le temps limité du groupe de produits. Bonus : Affichez 10 produits au maximum et activez l’option « aperçu rapide du produit » afin que votre client puisse naviguer facilement entre les produits sans avoir à cliquer exagérément. Il les ajoutera à son panier presque sans s’en rendre compte !

Catégories

Toujours d’après la stratégie de la double entrée, ajoutez un bloc illustrant vos catégories avec des images ou des icônes. Bonus : Sectionnez vos catégories ou sous-catégories les plus importantes et, dès que possible, actualisez-les avec des promotions ou des sélections de produits.

Médias sociaux

Avant le bas de page, ajoutez une ou plusieurs sections permettant à vos clients de vérifier que vous êtes un marchand de confiance. Rien de mieux pour cela que lire et voir les opinions d’autres clients. Faites apparaître les icônes de réseaux sociaux, des témoignages ou des articles générés par vos clients. Par exemple, une section affichant des photos avec le hashtag de votre dernière campagne et mélangées aux photos du book officiel de la marque ou encore des photos des recettes de votre blog, réalisées par vos utilisateurs à l’aide de vos appareils. Utilisez tout ce qui vous vient à l'esprit pour montrer que vous avez un public qui vous adore.

Footer (Bas de page)

Ajoutez ici les options de contact, à côté des liens menant à vos réseaux sociaux. Cet espace doit afficher clairement toutes les conditions de votre site, particulièrement celles relatives aux envois et aux retours. N’hésitez pas à insérer un champ Newsletter pour que vos utilisateurs reçoivent de vos nouvelles par e-mail et si possible, précisez la fréquence de l’envoi. Profitez également de cet espace pour indiquer les systèmes de sécurité et de fiabilité utilisés, en toute discrétion. Si possible, ajoutez des symboles en noir et blanc, pour ne pas trop désorienter vos utilisateurs.

Conclusion

Le design et l’organisation de votre page d’accueil déterminent la première impression que vos clients auront de votre site Internet et de votre marque. Il est important que vous présentiez un site à l’aspect soigné et professionnel ; il s’agit d’une opportunité non négligeable de gagner en notoriété, d’inspirer confiance et de réduire le taux de rebond. Si vous souhaitez le faire vous-même, suivez ce guide. Dans notre prochain article vous en apprendrez plus sur le design d’une boutique en ligne : la structure des pages catégorie et des pages produit. Vous pouvez également jeter un œil aux thèmes mis en ligne par PrestaShop. Si aucun d’entre eux n’est adapté à votre activité, nos agences web partenaires seront ravies de pouvoir vous aider.