Emplacements des menus dans un site web
Par Olivier Martieaau le jeudi 18 mai 2006 - collaborer - Lien permanent
Premier billet d'une longue série sur les modifications faites sur l'Atelier de Kitty.
La plus part du temps, sur les sites web on trouve deux menus :
- un menu de navigation horizontal en haut,
- un menu verticale à gauche.
C'est devenu presque un standard, de fait. Mais personne n'a jamais dit que les menus devaient être là. Enfin, si peut être : pour faciliter la navigation, on souhaite que les menus soient la premier chose vu par l'internaute. La premier version du site ADK suivait cette ligne de conduite. (illustration à droite)
Mais quel est l'objectif du site ? Que l'internaute voie le plus de page possible ? Non, pas forcément, plutôt qu'il achète !
Acheter quoi ? Le produit. Alors plutot que de mettre en avant les menus, je mets en avant le produit. C'est pour cela, que sur le nouveau site, on voie immédiatement un photo du produit (belle photo si possible, mais on en reparlera).
Alors, le menu vertical se retrouve à droite.
Prochain épisode : le contenu et l'organisation des menus
Mise à jour 19 mai : complément suite au commentaire de Manu (ci-dessous)
Je fais allusion au sens de lecture de la page ci dessus. Effectivement on commence du haut à gauche pour aller au bas à droite. Mais traditionnelement on met le menu en haut à gauche, mais j'ai préféré mettre en avant le produit.
On trouve aussi cette notion de tête de gondole sur les différentes catégories : il y a toujours 1 produit mis en avant. Aujourd'hui ce produit est aléatoire. J'avais envigeagé de choisir le ou les produits affichés, mais pour le moment je n'en ai pas le besoin.
Concernant le contextuel : les menus en haut et à droite sont les même sur toutes les pages. Par contre, il y a une deuxieme colonne à droite (sur la plus part des page) qui est contextuelle et apporte soit une navigation complémentaire (tous les produtis d'une même rubrique), soit des informations complémentaires (commentaire client, autopromotion).
Je peux vous donnez quelques résultats sur cette nouvelle version : l'objectif est d'augmenter le nombre de conversion, mais pour le moment le résultat n'est pas significatif pour le moment. Par contre, il y a un impact sur le panier moyen. Je ne l'attendais pas du tout, mais là, l'effet est tout à fait significatif : entre +50 et +100% sur le panier moyen.
C'est un chiffre à chaud qui devra être affiné. Je vous en dirais plus au fur et à mesure.
Contact
Commentaires
Le menu est tout un art, savoir où on est, entrevoir où on va et suggérer où on pourrait aller. Satisfaire le primo-visiteur et l'habitué et présenter un tout lumineux comme une invitation à aller plus loin...
pour les menus et l'organisation d'une page (ou d'un site) qui vende, je te renvois à tes cours de DESS; vous avez certainement dû parler de "têtes de gondoles", menus contextuels et organisation fonctionnelle et graphique d'un page (lecture du top-left vers le bottom-right)
en tout cas, bravo pour le boulot "familial" sur ADK
Plusieurs éléments sont à revoir :
- Le prix dans les 4 blocs ne sont pas assez visible ce sont les prix qui devraient taper à l'oeil et pas le bouton acheter, partir sur un typo en gras du genre verdana avec un background color bleu fushia serait de meilleurs augure.
- text-decoration:none pour les catégories dans les 4 blocs serait de meilleurs augures avec une taille de police plus petite et un changement de couleurs effet rollover dessus.
- Distinction entre les parties du sites pas assez mise en valeurs, il aurait été intéressant de mettre un background différent blanc, rose, bleu car les tirets ne suffisent pas à mon avis
- il aurait été intéressant d'afficher pour les nouveautés dans 4 blocs cote à cote horizontalement pour chaque catégorie de produits.
- de même le classement par ordre croissant des prix des produits serait plus intéressant.
- la fonction zoom des produits me parait surdimensionné par rapport à l'affiche du produit, il aurait fallu créer 2 petites vignettes verticalement, parralleele au produit en plus petit genre 80x80 l'utilisation du lightbox est trop longs aux chargement, mieux vaut se contenter d'une sorte de rollover faisant apparaitre les images à la place de l'image principale du produit.
Voila quelques conseils pour commencer
Jean-Paul, je note deux-trois truc intéressant :
- le classement des produits par ordre de prix est une bonne idée, mais techniquement je ne peux pas le faire.
- le textedecoration:none et la taille plus petite : ca me parrait pas mal, j'ai essayé rapidement avec la web developper bar. En 11px ca rend bien.
- le zoom est effectivement trop grand, les images sur le nouveau produit son plus petite (c'est un héritage de l'ancienne version)
- Les distinctions par couleur des blocs, pourquoi pas il faudrait maquetter : j'ai peur que ca fasse un peu trop arlequin
Par contre :
- les prix dans les box d'accueil : c'est juste informatif à titre d'exemple, c'est pas forcément mon object. Aujourd'hui le produit n'est pas séléctionné spéficiquement, il est tiré au hazard.
Merci en tout ca pour le coup d'oeil !