web-dev-qa-db-fra.com

Quelle est la bonne façon de concevoir un menu dans lequel certains éléments de menu dépendent d'autres?

Mon entreprise aime concevoir des interfaces avec des menus latéraux qui ressemblent à ceci:

A side menu

Le problème avec cette conception est qu'elle permet à l'utilisateur de cliquer sur des liens comme "Profil" avant d'avoir sélectionné le profil qu'il souhaite afficher. Cela crée de la confusion - les nouveaux utilisateurs essaient naturellement de cliquer directement sur les liens "dépendants" (par exemple "Profil") lorsqu'ils recherchent des informations détaillées dans l'application.

Pour résoudre ce problème, nous faisons généralement l'une des deux choses suivantes:

  1. Désactivez les liens dépendants (comme "Clients → Profil" ou "Clients → Commandes") jusqu'à ce que l'utilisateur ait visité la page de recherche ("Clients → Rechercher")
  2. Laissez les liens dépendants activés, mais redirigez automatiquement les utilisateurs vers l'écran de recherche approprié s'ils n'ont pas précédemment sélectionné une entité.

En tant qu'effet secondaire, cette conception introduit un concept que nous appelons "contexte" - en cliquant sur le lien "Clients → Profil", le client apparaît actuellement "en contexte" (c'est-à-dire le plus récemment sélectionné dans l'écran de recherche). Bien que ce comportement puisse être pratique à certains moments, il peut également entraîner une certaine confusion et des cas Edge délicats.

Comment repenser ce flux d'application pour éviter les problèmes décrits ci-dessus? Je suis ouvert à toutes les idées, même si elles n'impliquent pas directement la structure du menu.

2
Nathan Friend

1) Sous-navigation horizontale

Une solution peut être de séparer les éléments qui nécessitent plus de contexte (comme la sélection préalable d'un client ou d'un fournisseur), en un niveau de navigation séparé. Une représentation étant une sous-navigation horizontale.

Horizontal sub-menu

Cela vous permettrait d'avoir certains onglets dans la sous-navigation dépendant de la sélection d'un client (comme `` Profil '' et `` Commandes ''), et d'autres (comme `` Plaintes '') non, grâce à l'inclusion ou à l'omission du `` Client consultant. .. 'élément en dessous.

Au problème de ce qui se passe lorsque vous cliquez pour la première fois sur "Clients" et que la page "Profil" s'affiche, vous ne pourrez pas afficher de contenu (car aucun client n'a encore été sélectionné) - vous devrez leur demander de faites-le ...

enter image description here

Maintenant, l'inconvénient de cette approche est:

  • Vous arrivez toujours sur une page particulière que vous ne souhaitez peut-être pas d'abord (par exemple, Clients> Profil).

  • Selon la façon dont votre application se charge, il est un peu plus difficile d'accéder aux sous-pages (par exemple, vous devrez attendre une charge quelconque pour voir le niveau de navigation suivant).

La gravité de ces inconvénients dépend de votre application et de la façon dont votre utilisateur l'utilise.

2) Sous-groupe dans la navigation existante

Une autre approche peut consister à regrouper tout ce qui nécessite un contexte supplémentaire dans un sous-groupe dans la navigation existante.

Sub-group navigation

Avec l'état initial, je pense qu'il serait assez clair ce qui se passe si vous désactivez "Profil" et "Commandes" jusqu'à ce qu'une recherche soit effectuée.

3
Zenon

Ma suggestion est d'éviter d'avoir ces éléments dépendants du contexte dans le menu en premier lieu. Les éléments sont particulièrement déroutants car ils conduisent à des endroits différents selon la dernière personne sélectionnée dans votre recherche.

À quoi devrait ressembler la navigation, alors? Vous pouvez vous inspirer de plusieurs sources.

Amazon, Google Play, Etsy, Gmail et autres gardent tous la navigation non contextuelle et s'appuient sur le bouton de retour du navigateur pour permettre à l'utilisateur de reprendre sa recherche. Ils disposent tous d'une navigation non contextuelle qui permet à l'utilisateur de passer à tout moment aux aperçus des catégories.

Certains sites Web, comme eBay, vont plus loin et incluent un bouton "Retour à la page de recherche". Ceci est assez similaire à la façon dont les boutons de retour fonctionnent dans les applications mobiles.

Fil d'Ariane peut également servir d'aide à la navigation.

Donc, mes suggestions pour vous sont:

  • Supprimer les éléments non contextuels du menu de navigation. Dans votre cas, cela semble vous laisser avec une hiérarchie à un niveau plus simple: clients, fournisseurs, produits et emplacements.
  • Si vous savez que les gens doivent beaucoup sauter entre des articles récents de différents types, créez un Page récente avec une liste des articles récemment visités. Ou, si un accès encore plus rapide est requis, incluez une section "Récents" dans votre barre latérale.
  • Effectuez test utilisateur avec votre public cible pour voir s'il y a des problèmes avec cette nouvelle navigation.
3
Tin Man