Professional UI menu improvements

[zannkukai]

J’ai passé une partie de mon congé de vendredi et un bout de cet aprem pour tenter de modéliser un « nouveau menu » coté UI.
Je me rend compte que le menu actuel est quasi plein (sur un écran 1280px - on y rentre plus rien) et qu’il est possible qu’on y encode encore des donnés. Je me suis donc penché sur un menu vertical type « sidebar ». Voici ma source d’inspiration pour les curieux (https://bootstrapious.com/tutorial/sidebar/index3.html).
La forme et le fond sont très discutable (et c’est la tout l’intérêt du canal tant qu’on reste constructif).
J’y vois (personnellement plusieurs avantages) :

• Gain de place possible (on supprime la bande grise actuelle) mais ce n’est pas mon option préférée (voir plus bas)
• Grace au « caret » button, on peut gagner pas mal de place et avoior bcp d’option dans le menu
• moins d’icone —> plus de lisibilité (pour une fois c’est moi qui le dit !)

Mais aussi l’un ou l’autre inconvénients :

• possiblement plus plus de clics pour arriver à une entrée du menu

Au niveau de ce que j’avais en tête, je vais tenter de résumer mes idées :

• on garderai la barre de menu actuelle (la grise) pour y mettre des liens directs vers les composant les plus utilisé (checkin/checkout, new doc, …). La barre ferait donc office de « liste de favoris » (qui dans la meilleur des mondes pourrait être customisaeles par le staff-member lui-même.
• On remonte dans la bande bleu à droit, le menu « USER » « Aide » et « Langue »
• A gauche, dans la bande bleue, on a une entrée « menu » (qui affiche la sidebar) et une mention de la « lib courante » (cette notion pourrait être affichée dans le menu gris si on le garde - un peu à la manière de la map monde dans le client virtua).
• Tous le header (menu bleu + menu gris) serait en ’sticky’ position —> toujours visible sur le page même quand on scroll.
• Dans la sidebar, les 2 menus principaux (services et catalogue) serait d’office étendu (mais pour un « acquisitionneur » c’est pas forcément le pied)
• …

Je suis mille fois conscient que c’est ultra-pas-prioritaire et que ça plaira pas à tlm (les couleurs sont la à titre informatives, on peut aussi décider d’utiliser la même couleur pour plusieurs menu/tous les menus).
Mais au moins le débat est ouvert et on sait qu’il est possible de faire ce genre de menu dans notre application sans trop de refactoring.

[zannkukai]

@pronguen answer :

Salut @zannkukai,
Voici l'un des premiers mockups :) [https://files.gitter.im/5bbdf3b0d73408ce4faaf828/Ehqc/menu_architecture_v1.pdf]
Pour des raisons de simplifications et de responsiveness exprimées par la dev team, on a renoncé au menu latéral.
Dans la barre horizontale, on a toujours voulu y mettre le compte utilisateur et la langue, car ils sont communs aux 2 interface (public/pro)

Ceci permettrait de se passer de la barre grise dans la vue publique, qui je trouve, est une perte d'espace sur desktop.
L'un des inconvénients principaux de ce que tu proposes, c'est bien que le menu soit caché à chaque fois, ce qui augmente les clics...

[zannkukai]

@lauren-d answer :
@zannkukai, on peut discuter de la forme, mais je dis +1 pour le menu vertical

[zannkukai]

Sinon on peut aussi garder un menu horizontal qui s'affiche par dessus la page (qui passe alors en overlay)
L'idée provient de ce site : https://www.sac-cas.ch/fr/ (merci @Garfield-fr pour l'inspiration)

Ce type de menu à l'avantage de permettre d'y placer beaucoup plus de chose de manière aérée.
Les quick links pourrait être des liens utiles ou souvent utilisés par la personne connectée (une sorte de liste de favoris)
Dans cette idée, on pourrait aussi placer le "switch library" en footer et mettre le nom de la bib choisie en toute lettre

Dans ce POC, je n'ai pas mit les liens pour le UserMenu (qui pourrait se placer comme dans le mockup exposé par Nicolas plus haut), ... C'est vraiment le fonctionnement de base que j'expose dans ce screenshot

[pronguen]

J'aime bien! La partie "Quick links" me semble être quelque chose à séparé, une fonctionnalité que l'on peut ajouter plus tard. Je peine à en voir la valeur ajoutée si les liens choisis sont fixes pour tout le monde.

[zannkukai]

@pronguen L'idée que j'avais était justement que les utilisateurs pourrait choisir les liens à afficher dans cette sidebar (mais c'est clairement pas un "top essential") et/ou quelques liens fixes en fonction du role du staff (librarian, catalo, acquisition, ... qui sont encore à définir/implémenter). Pour commencer, on pourrait y mettre le liens vers l'aide, un lien pour afficher les shortcuts .... une petite blague du jour ?

[pronguen]

@zannkukai Je comprends l'idée. En l'état du coup, je la laisserais pour plus tard car je la trouve non prioritaire et on n'a pas encore de rôles précis.
L'aide et les shortcuts sont typiquement des choses transversales qu'on va en principe utiliser très rarement (seulement lors de la découverte du système), donc cela n'a selon moi pas sa place dans les "quick links". On pourrait les mettre à côté des langues dans ton prototype.