web-dev-qa-db-fra.com

Les onglets imbriqués dans la vue du bureau sont-ils utiles?

enter image description here

Comme le montre l'image, j'ai un cas d'utilisation de l'utilisation des onglets imbriqués. Est-ce une bonne expérience pour l'utilisateur? Mais la conception matérielle dit de ne pas utiliser les onglets imbriqués.

enter image description here

Si oui, cela s'applique-t-il uniquement au mobile? S'il est bon d'utiliser des onglets imbriqués sur le bureau, quelle est la meilleure façon de l'utiliser? Quelqu'un peut-il donner de bons exemples pour ce cas d'utilisation? Merci d'avance :)

2
jyo

Vous avez dit "Comme indiqué dans l'image, j'ai un cas d'utilisation de l'utilisation des onglets imbriqués. Est-ce une bonne expérience pour l'utilisateur ". Pourquoi pensez-vous cela? Comment cela peut-il être une bonne expérience?

Avoir des onglets imbriqués est un problème similaire à celui de plusieurs lignes. Je pense que c'est très bien expliqué dans cet article, " Tabs, Used Right " par Nielsen Norman Group:

Plusieurs lignes créent des éléments d'interface utilisateur sautants, qui détruisent la mémoire spatiale et empêchent ainsi les utilisateurs de se souvenir des onglets qu'ils ont déjà visités. En outre, plusieurs lignes sont un symptôme certain d'une complexité excessive.

La navigation imbriquée sur le bureau est correcte, mais les onglets imbriqués ne sont pas de bons UX.

2
Madalina Taina

La réponse courte est que les onglets imbriqués ne sont pas une excellente solution ou expérience utilisateur.

Problèmes avec le design à droite:

  • Le paradigme du design n'est pas intuitif pour l'utilisateur.
  • L'utilisateur doit comprendre qu'il peut faire glisser les onglets secondaires vers la gauche pour en voir plus. Ce contenu caché crée un point sensible UX - les analyses montreraient que le contenu caché reçoit beaucoup moins de clics parce que la plupart des gens ne le voient jamais ou ne le savent pas.
  • L'exemple que vous avez fourni ne présente aucune différence de conception/couleur/style entre les onglets principaux et les onglets secondaires. Le manque de style égalise la hiérarchie qui devrait être montrée.
  • La proximité immédiate les uns des autres peut provoquer une mauvaise pression (mauvaise UX).
  • Le CTA en haut à gauche est en dehors de " Arc de convivialité ", ce qui rend cette navigation très difficile à utiliser d'une seule main.

L'arc de l'utilisabilité:

enter image description here

Même pour le bureau, vous devez éviter les onglets imbriqués. Le seul cas d'utilisation auquel je peux penser dans lequel des onglets imbriqués peuvent être nécessaires, c'est si vous créez un logiciel de bureau complexe pour la Business Intelligence, l'analyse de données, etc. Cela suppose que l'utilisateur acquiert la maîtrise du logiciel et que la fonctionnalité devient plus importante que l'intuitivité. .

1
Shan Newton

Je pense que ce n'est pas une question d'appareil (Desktop ou Mobile).

Comme nous lisons horizontalement (LTR, mais la même chose s'applique à RTL), il est plus facile de reconnaître la séparation entre éléments de texte lorsqu'ils sont séparés verticalement.

Les mises en page ont tendance à utiliser une barre supérieure horizontale afin d'implémenter un niveau supérieur horizontalement. Cependant, pour les niveaux imbriqués, les choses commencent à devenir désordonnées car les éléments n'ont pas la même largeur et chaque limite d'élément est confondue avec les supérieures/inférieures. S'ils avaient la même largeur, des relations visuelles verticales entre un élément et celui ci-dessous commenceraient à apparaître.

1
Alvaro

Tant que vous ne fournissez pas plus de deux niveaux, c'est OK. Plus est trop complexe.

Séparez visuellement l'apparence du niveau enfant de celle du parent. L'objectif est de clarifier rapidement la hiérarchie de l'application pour un utilisateur.

Par exemple, changez la police du niveau enfant, rendez-la plus petite et en italique. Modifiez la couleur, mais faites attention, la méthode de surbrillance sélectionnée sur les deux niveaux doit être la même (sombre ou lumineuse ou soulignée).

Ajoutez une ligne vierge ou du contenu entre les niveaux (par exemple le titre de la page). Ajoutez du rembourrage au deuxième niveau, juste pour souligner que le deuxième niveau des onglets se trouve dans une zone (page) sélectionnée du parent.

0
Doc