cinnk magazine janvier 2016

Happy new year !

Toute l'équipe de Cinnk magazine vous souhaite une bonne et heureuse année 2016 !

Horizontal ou vertical ?

Au moment de la conception d’un site web, et parmi les nombreuses questions qui se posent, il y en a une qui pourrait paraître presque curieuse : « Mon site doit-il avoir un menu horizontal ou bien au contraire vertical ? ».

Presque curieuse, car en effet l’immense majorité des sites actuels possèdent une navigation horizontale. Et pour s’en convaincre, jetons un œil sur les douze derniers templates Joomla! de quatre éditeurs parmi les plus connus : Joomlart, Joomshaper, Rockettheme et Yootheme.

joomla-menu-vertical-horizontal

Amy Carter - Flickr

menu-horizontal-ou-vertical cinnk-magazine

Pour essayer de comprendre cette hégémonie du menu horizontal, essayons d’interroger les avantages de ce type de navigation.

Economiser l’espace horizontal

Cela dégage l’espace de publication ; si on a besoin de deux, voire trois colonnes de publication, le menu horizontal laisse l’espace libre.

menu-horizontal-ou-vertical 01

Différencier les zones

Il permet une bonne différenciation entre contenu et navigation. La bande horizontale s’accompagne parfois d’une couleur différente qui aide l’internaute à reconnaître les zones de la page d’une manière globale.

Différencier les zones

Proximité des accès

Si on met le menu en sticky, c'est-à-dire qui reste collé en haut de la fenêtre du navigateur, avec 2 propriétés CSS ( position : fixed ; top : 0 ;) il est toujours disponible, quel que soit l’endroit de la page que l’on consulte.

menu sticky

Bref, le menu horizontal n’a que des qualités, voilà qui est décidé, c’est ce qu’il me faut !

Holà, doucement, ne vendons pas la peau de l’ours…

Menu « à la » smartphone

Mais alors si c’est si bien, pourquoi lorsqu’on surfe avec un smartphone, les menus, dans leur immense majorité, deviennent verticaux ??? Bien sûr, ils sont d’abord appelés par le fameux hamburger, mais dans un monde de webdesigners élevés avec la notion de persistance des interfaces comme credo, voilà qui a de quoi surprendre…

menu mobile

Make my logo bigger

Lorsqu’on a un gros logo avec lequel composer, la bande supérieure occupe beaucoup d’espace, et finalement annihile l’avantage « économiser l’espace ». (Pour illustrer cette manie du "gros" logo,  je vous invite à jeter un œil sur la vidéo de ce site www.makemylogobiggercream.com, un classique !).

La maladie du gros logo

Economiser l’espace vertical

Lorsqu’on a moult contenu à mettre en avant, l’espace vertical est le bienvenu. Ce constat ne vaut pas bénédiction dans le cas d’une avalanche de promos, bannières et modules qui clignotent sur certaines boutiques en ligne. Mais un site comme Facebook, qui doit mettre en exergue les posts de vos amis, pages et pubs, a résolument besoin de cet espace. Ce qui fait que cela fonctionne bien, c’est aussi que le volume d’infos de chaque post est en général assez court, donc pas besoin de beaucoup d’espace horizontal.

menu vertical à la FaceBook

Menu ou items très longs

Il y a parfois des sites où le nombre de liens de menu de premier niveau ne peut être réduit aux 5/7 habituels (encore un sujet sur lequel nous pourrons revenir). Ou alors le nombre de caractères de certains liens font que le menu horizontal n’est pas adapté à la place disponible. La verticalité permet alors des menus plus fournis.

menu vertical items longs

Menu/filtres

Dans le cas d’une boutique en ligne où l’arborescence des catégories n’est pas très longue mais les filtres sont importants, le menu vertical permet d’intercaler les filtres dans le déroulé des liens. Et à nouveau de libérer de la place pour présenter les produits.

 menu vertical filtres

Nous pourrions encore trouver d'autres avantages/désavantages des menus verticaux ou horizontaux, mais l'idée n'est pas de dresser une liste exhaustive !

Comme on peut le voir, le choix d'un type de menu découle d'une analyse des besoins de communication, de vente, d'accroche... bref d’efficacité, plus que de choix purement graphique ou de goût personnel. Comme toute décision sur le design, l'organisation et l"ergonomie d'un site.

Notez cet article:
5
Les goodies webdesign Janvier 2016
Edito - Cinnk magazine janvier 2016

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
samedi 18 novembre 2017
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.