ZEP-37 : Réorganisation des menus déroulants du header

Mise en commun des possibilités pour uniformiser et rendre le menu plus lisible

a marqué ce sujet comme résolu.
Cartouche
ZEP 37
Titre Réorganisation des menus déroulants du header
Révision 1
Date de création 03/11/2015
Dernière révision 03/11/2015
Type Feature
Statut Rédaction

Avant propos

Avant de commencer, cette ZEP rejoint un petit peu la ZEP-25 : catégorisation des articles et tutoriels que je vous invite à parcourir.

Vous trouverez un template pour vous aider à synthétiser les réponses aux différentes questions posées dans cette ZEP.

Pourquoi revoir les menus du header ?

Je pense que tout le monde est d'accord pour dire que pas mal de points ne vont pas dans ce menu :

  • Il est devenu trop haut, ça n'est pas pratique même sur grand écran ;
  • Il n'est pas uniforme : on a beaucoup de contenu sur les tutoriels, pas de menu sur les articles, peu de contenu sur les forums ;
  • Une colonne "tags les plus utilisés" qui ne veut rien dire et qui met en avant le côté bug/dev du site
  • Certains voudraient ce menu au survol, l'option n'est pas prise en compte bien qu'enregistrée dans les préférences ;
  • Certains voudraient un accès direct au dit lien en un clic, plutôt que de cliquer sur un lien dans le menu déroulant.

Un méga menu, est-ce utile ?

Beaucoup d'articles d'UX déconseillent l'utilisation de mega menus mais font souvent référence aux sites e-commerce qui proposent eux des centaines de liens, embrouillant alors les utilisateurs qui sont vite perdus.

Peut-être qu'une des solutions est de ne plus avoir ces menus déroulants et d'améliorer la navigation sur les pages qui sont derrière les portails principaux de chaque module.

Néanmoins, la navigation pour les habitués est plus rapide, notamment sur mobile où on évite un passage par une page liste qui n'est pas nécessairement utile.

L'idée que les habitués, nombreux, gagnent du temps en utilisant ce menu semble permettre de continuer cette ZEP et le débat autour de ce menu.

Comment ?

En considérant que l'on garde un système de menu déroulant sur le menu principal du site, voici plusieurs points soulevés par les membres autour du menu.

Lien direct à la page principale du module en un clic

On peut imaginer découper le lien en deux avec le label d'un côté (par exemple, "Tutoriel") et la flèche de l'autre. Un clic sur le label amène vers la page principale du module (ici, la liste des tutoriels) et un clic sur la flèche déroulerait le menu. On améliorerait alors l'accès à la page liste du module en retirant un clic parasite.

Néanmoins on peut imaginer ne pas scinder ces boutons en utilisant un survol avec délais, c'est l'objet de la prochaine partie.

Clic ou survol ?

L'option étant en place côté back, il ne s'agit là que de retranscrire l'option des utilisateurs dans le front. L'autre solution est de supprimer l'option en trouvant un compromis qui plaise à tout le monde parmi les possibilités suivantes (non exhaustives) :

  • clic sur la flèche comme expliqué dans la précédente partie (semblable à ce qui est en place actuellement, mais avec une zone de clic plus petite) ;
  • survol avec délais : on peut cliquer sur le lien directement sans avoir le menu qui s'ouvre et frustre l'utilisateur, mais il s'ouvre après un court délais (sans clic) et nous permet d'accéder au menu en glissant la souris vers le bas ;
  • au choix de l'utilisateur en utilisant l'option déjà disponible et en implémentant les deux solutions ci-dessus.

Organisation

Il faudrait un menu similaire sur les tutoriels et les articles. La question du menu du forum étant légèrement différente, elle sera traitée plus loin.

Tutoriels et articles

Dans ces deux menus, il y a potentiellement beaucoup de contenu, il faut donc revoir l'organisation visuelle des éléments. Voici donc une proposition, chacun est libre d'y apporter ses modifications, voire d'émettre d'autres solutions.

  • On vient d'ouvrir le menu sans avoir survolé quoi que ce soit
    • Une colonne à gauche liste les catégories de niveau 1
    • Le reste du menu promeut la rédaction des articles/tutoriels ainsi que la page d'aide aux auteurs et la liste bêta pour les membres connectés
  • On survol (avec léger délais) une catégorie de niveau 1
    • La dite catégorie est mise en valeur dans la colonne de gauche
    • La partie droite affiche la liste des catégories de niveau 2 sous la catégorie de niveau 1 survolée juste avant

Cette présentation permet notamment de mettre en valeur l'accès à la rédaction et l'aide aux auteurs qui sont très peu mis en avant, ainsi que la liste des tutoriels en bêta directement depuis le menu afin de leur offrir plus de visibilité malgré leur statut.

L'alternative des menus accordéons semble à exclure car on pourrait retomber dans le cas extrême d'une catégorie chargée nous ramenant à quelque chose de similaire à la situation actuelle.

Menu déroulant des forums

La question des forums peut être traitée de façon similaire en adaptant légèrement le contenu de la zone à droite en cas de non-survol de catégorie. Une possibilité est d'y mettre en avant les sujets les plus actifs du moment : les sujets chauds.

Le seul potentiel hic est qu'il n'y a que 2 catégories de niveau 1 et cela ferait peut-être léger par rapport aux 8 catégories des tutoriels.

On peut alors imaginer qu'en tant que membre connecté, on remonte les sujets suivis dans ce menu et obtenir un 3ème lien et étoffer un peu le menu.

Conclusion

Avec ces quelques amélioration on peut imaginer un menu bien plus pratique qu'actuellement en évitant l'effet "tas de liens". N'hésitez pas à proposer des solutions ou à soulever des problèmes qui manqueraient ici.

Template de réponse

Pour avoir des avis lisibles sur les quelques premières questions "tranchées", vous pouvez utiliser le template suivant pour répondre aux questions principales de cette ZEP puis serez bien sûr invités à argumenter dans la suite de votre message.

1
2
3
4
5
Question                          | Réponse
----------------------------------|-----------------
Garde-t-on les menus déroulants ? | **Oui / Non**
Division label / flèche ?         | **Oui / Non**
Action pour ouvrir les menus      | **Survol avec délai / clic / garder l'option**
Banni
Question Réponse
Garde-t-on les menus déroulants ? Oui
Division label / flèche ? Oui
Action pour ouvrir les menus clic

Quelque chose d'intelligent consisterait à réduire non seulement la hauteur du header mais aussi la largeur des boutons pour y intégrer la barre de recherche.

+0 -0
Question Réponse
Garde-t-on les menus déroulants ? Oui
Division label / flèche ? Oui
Action pour ouvrir les menus garder l'option, mais la rendre plus visible (je n'en avais jamais entendu parler)

Une question à propos du menu des tutoriels/articles : la partie de droite contiendrait les sous-catégories de la catégorie survolée (ou via un clic). Mais comment revenir sur la "page" à propos de l'aide, des bêtas, etc. ?

+0 -0
Question Réponse
Garde-t-on les menus déroulants ? Oui
Division label / flèche ? Non
Action pour ouvrir les menus garder l'option

Le bouton Menu est un bouton. Il a une flèche. Donc, cliquer sur le bouton va dérouler quelque chose. Si le bouton et la flèche sont deux choses différentes, ça rend le menu peu cohérent à mon avis.

Pour la question « Tutoriels et articles », est-il encore trop fouilli avec la ZEP25 ? Faire la même chose avec les nouvelles catégories (moins nombreuses, mieux classé) est-il suffisant ?

+0 -0

Une question à propos du menu des tutoriels/articles : la partie de droite contiendrait les sous-catégories de la catégorie survolée (ou via un clic). Mais comment revenir sur la "page" à propos de l'aide, des bêtas, etc. ?

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte