Elearning > Outils et méthodes pour rendre votre site plus attractif LES ZONES D'UNE PAGE On peut découper une page en plusieurs zones sur une boutique, chacune de ces zones ayant son utilité propre et sa façon d'être utilisée. Dans ce cours, nous aborderons les points suivants : L'entête La sidebar La hiérarchisation de la sidebar Le contenu Sur votre blog-boutique, nous pouvons distinguer 3 à 4 zones distinctes. L'en-tête, la colonne de droite ou gauche (que nous nommerons sidebar pour être plus clair entre ceux qui ont cette colonne à gauche et ceux qui l'ont à droite), et le contenu où l'on trouve la partie boutique et la partie blog (c'est tout du moins le cas sur la page d'accueil). L'EN-TÊTE Comme nous l'avons vu avec ce que nous apprend le eye-tracking, l'en-tête, et plus principalement son coin gauche, est d'une importance primordiale! C'est la raison pour laquelle vous trouverez toujours le nom d'un site ou le logo à cet emplacement. Veillez donc à soigner particulièrement le nom de votre boutique afin qu'au premier coup d'oeil votre visiteur sache où il a mis les pieds. Il est d'ailleurs recommandé d'utiliser un logo plutôt qu'un titre, sachant que les gros titres sont plus scannés que lus, et qu'une infographie sera beaucoup plus impactante qu'un simple texte. Toutefois, pensez que ce logo sera votre image auprès de vos visiteurs et clients, alors ne négligez pas celui-ci!! (D'ailleurs faites le test : Pensez à plusieurs marques que vous connaissez et remarquez la première chose "visuelle" qui vous vienne à l'esprit...). De plus, nous vous conseillons de personnaliser cette zone importante qu'est l'en-tête afin de vous
De plus, nous vous conseillons de personnaliser cette zone importante qu'est l'en-tête afin de vous différencier de vos concurrents et surtout de façon, une fois encore, à ce que vos visiteurs comprennent de suite ce qu'il vont trouver chez vous... Pour ce bandeau, utilisez les couleurs qui conviennent à vos produits et votre cible (nous en parlerons un peu plus loin), voire utilisez une ou plusieurs images de qualité et qui "donnent envie" de passer plus de temps sur votre blog-boutique. Un autre point auquel vous pouvez également penser, c'est le slogan. En effet, vous avez peut-être déjà remarqué que bon nombre de sites de vente en ligne associent leur logo à un slogan qui en dit souvent long sur la vocation du site (par exemple CDiscount, créateur de pouvoir d'achat ou encore Conforama, bien chez soit, bien moins cher). Vous pouvez insérer votre bandeau d'en-tête en vous rendant dans Préférences > Personnalisez votre thème et en cliquant sur Configuration du thème, comme indiquer dans le cours du Starter "Personnalisation graphique de votre boutique". LA SIDEBAR La première chose à laquelle vous devez réfléchir concernant la sidebar est sa position... En effet, il est possible de placer celle-ci ou à gauche, ou à droite, et cela peut avoir son incidence! Vous aurez certainement remarqué que la majorité des blogs ont une sidebar à droite alors que les sites vitrines ou les sites e-commerce l'ont à gauche... Dans le cas d'un blog il est d'un certain point de vue logique qu'elle se trouve à droite puisque l'important est le contenu rédactionnel et pas forcément les catégories dans lesquelles sont classés les billets ou encore les liens... Par contre, en tenant compte de là où se pose le regard des visiteurs et du fait que ceux-ci lisent en premier lieu les éléments de navigation textuel, un site e-commerce aura plus intérêt à placer cette sidebar à gauche. Dans votre cas, disons que cela dépend... En effet, dans la mesure où vous avez peu de produits, il serait préférable de placer celle-ci à droite afin que vos clients prennent connaissance directement de vos produits plutôt que de catégories qui n'existeraient pas de par le nombre restreint d'articles. Par contre, à l'inverse, il est conseillé d'avoir la sidebar à gauche si vous avez plusieurs catégories de produits différentes et distinctes. Ainsi, vos clients sauront rapidement le type de produits qu'il trouveront chez vous et ne s'imagineront pas que la petite dizaine d'articles sur la page correspondant à ceux que vous désirez mettre en avant représentent à défaut l'ensemble de votre catalogue. Il existe un une troisième possibilité qui sont des sites avec une sidebar à gauche et également une à droite. Dans ce cas, il faut privilégier la navigation et les informations à gauche et placer le panier en haut à droite (pour une question de visibilité) ainsi que les offres à droite.
LA HIÉRARCHISATION DE LA SIDEBAR Dans votre blog-boutique, vous pouvez très facilement choisir l'ordre des rubriques grâce aux widgets (cf. le Starter, leçon "Découvrez les widgets de présentation"). L'ordre de ceux-ci a également une grande importance sur l'impact client. Faisons un tour d'horizon des principales rubriques : Les widgets "Catégories boutique" et "Panier" doivent absolument se trouver en haut de sidebar. Les "catégories boutique" pour les raisons que nous avons évoqué précédemment, et le "panier" parce que celui-ci doit absolument être visible. En effet, si votre client ne trouve pas son panier il ne pourra par effet de cause pas valider celui-ci et ainsi aller au bout de sa commande. N'oubliez jamais que votre client ne doit jamais avoir à chercher l'information. Vous devez lui apporter! Les widgets "Informations" et "Texte" pouvant servir à insérer vos points forts, Conditions Générales de Vente, FAQ, ainsi que des informations essentielles à la confiance client comme l'indication des modes et frais de port, la mise en avant du paiement sécurisé, etc... Ne négligez pas ces widgets et pensez à agrémenter ces informations par l'image pour marquer le client (par exemple les logos de paiement sécurisé, logo de banque pour les contrats VAD, infographie pour les frais de port gratuits, logos prestataires de transport, etc...) Le widget "Contact" est également important ; Pour celuici vous êtes plus libres de le positionner dans le haut ou le bas de sidebar. La question qu'il faut se poser est de savoir l'importance que vous désirez donner à votre contact, à savoir si vous êtes joignable toute la journée par téléphone alors mettez-le bien avant! Les autres widgets sont d'une importance moindre est pourront être positionnés en-dessous à titre informatif.
LE CONTENU La partie contenu de votre page pourra s'articuler deux en types : LE BLOG Concernant le blog, les deux points notables sont la taille des titres, ni trop grands, ni trop petits, comme nous l'avons signalé dans le cours "Comportement de vos visiteurs", et la police de caractères utilisée pour la rédaction de vos textes. Le choix principal en terme de polices et "avec ou sans serif". Concrètement, une police avec serif a des empattements en bout de caractères contrairement à celle sans serif. Concernant le blog, les deux points notables sont la taille des titres, ni trop grands, ni trop petits, comme nous l'avons signalé dans le cours "Comportement de vos visiteurs", et la police de caractères utilisée pour la rédaction de vos textes. Le choix principal en terme de polices et "avec ou sans serif". Concrètement, une police avec serif a des empattements en bout de caractères contrairement à celle sans serif. Arial Comic Sans MS (à proscrir... elle semble différente des autres, amusante même peut-être mais n'a pas du tout un rendu professionnel!) Courier Garamond Georgia Tahoma Trebuchet MS Verdana Au final, dans ces polices de caractères, le mieux est de choisir celle qui s'apparente le plus à vos gammes de produits. Là, chaque cas est particulier... Ce qu'il faut surtout éviter, c'est d'utiliser trop de polices différentes dans votre page. Disons au plus une pour les textes et une pour les titres... La taille du texte est également un aspect non négligeable ; celle-ci doit être optimisée pour le confort visuel de vos lecteurs, ni trop grande, ni trop petite. LA BOUTIQUE Concernant la boutique, les règles de polices de caractères restent les mêmes. Ce qui est ici important est l'optimisation de l'espace, principalement au niveau des photographies produits. Nous allons aborder ce point dans le cours suivant sur "Les photographies produits". PIÈCES JOINTES Aucune pièce jointe
NOTEZ CE COURS: Fini Revenir plus tard