Ergonomie-boutique-42stores

Un petit détail peut changer beaucoup de choses... Nous allons voir dans ce billet qu'il est possible, en faisant quelques petites modifications, d'améliorer la navigation sur votre site pour amener vos visiteurs où vous voulez...

Rendez la navigation plus simple et plus intuitive.

Le constat est assez général : les boutiques qui utilisent (trop ?) les différents widgets proposés risquent de semer la confusion chez leurs visiteurs, et donc de les faire fuir d'un site sur lequel ils ne se sentent pas à l'aise.

- Changez l'apparence du menu principal

Pour bien distinguer les liens qui permettent d'accéder à votre catalogue des autres liens présent dans les différents encarts du site, vous pouvez changer leur couleur ou leur taille très facilement en modifiant le sélecteur de balise suivant :

#sidebar #blognav #categoriesstore a:link { }

En application, voilà un exemple de ce que ça pourrait donner 

#sidebar #blognav #categoriesstore a:link {
padding:5px 0 0 25px; /*Léger décalage vers la droite*/
color:#4D92CF; /* Couleur bleu ciel */
font-size:16px; /* Taille de la police un peu plus grande */
text-decoration:none; /*Lien non souligné*/
}

Et ajoutez cela en plus si vous souhaitez créer un effet de survol sur le nom des rubriques :

#sidebar #blognav #categoriesstore a:hover {
text-decoration:underline; /*Le texte est souligné quand on passe la souris dessus*/
}

- Ajoutez un bouton "Retour à l'accueil"

Vous pouvez rendre votre bannière cliquable, mais la manipulation est différente selon le thème que vous choisissez ; pour faire plus simple, créez un bouton "Retour à l'accueil" et positionnez-le au dessus de votre menu principal. Pour ce faire, utilisez simplement le widget texte dans lequel vous écrirez la chose suivante :

<a href="http://votreboutique.com">Retour à l'accueil</a>

ou encore, si vous souhaitez utiliser une image en guise de bouton

<a href="http://votreboutique.com" >
<img src="pub/nomdevotreimage.jpg" border="0" alt="Nom de votre site"/>
</a>

- Proposez une navigation alternative avec les tags

Réfléchissez avant de créer des tags; il vaut mieux les utiliser afin de regrouper vos billets dans des thématiques bien précises (attention toutefois à ne pas multiplier leur utilisation).
Ainsi, vous pouvez créer un encart de recherche par thématique qui propose, par exemple, de naviguer sur votre site en fonction non pas des catégories "classiques" de votre catalogue, mais plutôt en fonction des marques, des couleurs, des saisons, des formes, des artistes, etc... ( Cela dépend de ce que vous vendez, bien sûr )

Faites ressortir les éléments importants

Toujours dans l'optique d'améliorer la navigation sur votre site, il convient de créer des "points de repère" permettant à vos utilisateurs de savoir en un coup d'œil où se trouvent les éléments clés de votre boutique

- Mettez le panier d'achats en avant

La fonction première d'une boutique, c'est de vendre . C'est pourquoi l'encart "panier" a son importance : mettez-le en évidence pour qu'à tout moment votre visiteur puisse le consulter et se rendre facilement sur la page de commande. Pour le modifier, il suffit de "jouer" avec le sélecteur de balise suivant :
 

div#cart {}


Par exemple, admettons que vous souhaitez ajouter un fond coloré et lui mettre une bordure ; voilà comment faire :

 

 

div#cart {
background-color:#DDEAF3; /* On créée un fond coloré */
border:1px solid #EFB343; /* On ajoute une petite bordure */
}


Deux petites lignes, et voilà la différence


- Travaillez l'apparence de vos liens

Cela peut paraître anodin, mais il est également intéressant de travailler l'aspect des liens dans les textes de votre blog-boutique ; ne surprenez pas vos visiteurs, mettez bien en évidence le fait que telle expression ou tel mot renvoie vers une autre page ; vous pouvez là encore préciser avec une sorte de "code visuel" qu'il s'agit d'un lien interne, ou d'un lien externe. Voici quelques idées :

- Laissez le soulignement actif sur tous les liens de votre site
- Attribuez-leur une couleur si ce n'est pas déjà le cas
- Ajoutez un petit symbole devant votre lien pour indiquer qu'il y a une "dynamique" sur le mot ou l'expression ( » exemple de lien )
- Ajoutez la langue de la page de destination entre crochets lorsque vous citez une page externe à votre site ( » exemple de lien externe [fr] )

 

 

 

 

Quelques outils utiles pour vous faciliter (encore plus) le travail :

 

 

» Trouver des couleurs rapidement [en]
» Trouver des gammes de couleur [en]

» Les symboles et leur traduction en HTML [fr]