web-dev-qa-db-fra.com

Suggestions de maquette de menu avec "options utilisateur"

J'ai actuellement la maquette suivante pour un menu d'une application Web.

mockup

J'aime le côté gauche avec les menus principaux et leurs sous-menus déroulants. Ce dont je ne suis pas sûr, c'est du côté droit. Je voudrais montrer le nom de l'utilisateur, le bouton de déconnexion ainsi qu'un menu de style "déroulant" pour les options que l'utilisateur peut effectuer: changer de profil et modifier son compte. Un profil change simplement le contexte de l'application (calendrier différent, etc.).

J'apprécierais quelques commentaires/suggestions sur la meilleure façon de représenter cela. J'aime les icônes 32x32, elles sont belles et grandes (ni trop grandes ni trop petites). Le seul inconvénient est l'espace blanc, c'est ce que j'essaie de contrer sur le côté droit. Mais je pense que le menu déroulant "Options" n'est pas idéal.

4
TheCloudlessSky

Je suis d'accord avec @jameswanless: je ne vois pas non plus d'inconvénient à l'espace blanc. C'est un assez bon équilibre.

L'essentiel avec le menu de droite est que je ne peux pas facilement dire à qui il appartient: Options ou Déconnexion. Voir cette maquette modifiée:

alt text

Principaux changements:

  • Il est maintenant plus clair que c'est le menu Options

  • J'ai opté pour un triangle légèrement plus grand, bien qu'il doive probablement réduire un pixel ou deux. C'est aussi un triangle plat. Ce que tu avais est trop petit pour être autre chose qu'un triangle plat

  • Déplacé le triangle vers la droite; c'est une utilisation beaucoup plus courante

  • J'ajouterais un dégradé comme celui que vous avez pour le menu de gauche

Dans l'ensemble, vous avez une belle conception propre à mon humble avis.

4
Hisham

Pourquoi pensez-vous que l'espace blanc est un inconvénient? Il y a un assez bon équilibre dans l'espacement en ce moment à mon humble avis.

Ce qui est un peu déroutant dans la maquette ci-dessus, c'est la signification des icônes. Je pense que les liens de profil et la liste déroulante sont assez clairs, mais en ce qui concerne les icônes:

  • la maison et le caledar sont tous deux assez évidents
  • l'icône représentant une personne n'est pas claire et pourrait être interprétée comme concernant d'autres utilisateurs ou un profil - puisque le profil est clairement articulé sur le côté droit, alors cela pourrait être OK
  • graphique à barres - je suis perdu sur celui-ci, mais plus de contexte sur l'application pourrait aider
  • bloc-notes - cela indique-t-il un blog/journal et sinon, quoi?
  • roue dentée - cela suggérerait normalement des paramètres, mais si c'est le cas, en quoi cela diffère-t-il des paramètres du profil utilisateur (si j'ai raison, vous devrez peut-être mélanger les paramètres du site et les paramètres utilisateur ou les rendre plus distincts

Il est difficile de fournir de bons commentaires sans savoir de quel type d'application nous parlons ici.

0
jameswanless