Quelle est la meilleure façon d'afficher des catégories imbriquées avec des noms très longs?
Je crée un site Web qui va contenir beaucoup d'informations structurées (matériel pour réussir les examens finaux du secondaire en Israël)
Les informations ont déjà été structurées en catégories et sous-catégories par le ministère de l'Éducation. Mon objectif est de prendre cette structure et de l'afficher de la manière la plus intuitive et conviviale possible.
Fondamentalement, j'ai 8 sujets principaux
Actuellement, j'ai choisi de les afficher comme principaux éléments de navigation sur le site Web, comme suit:
[anglais] [littérature] [histoire] etc ...
Chaque sujet aura une page de sujet où il doit être divisé en deux sous-niveaux, catégories et sous-catégories supplémentaires.
Les catégories sont généralement d'environ 3-6 pour chaque sujet et peuvent avoir des noms longs; les sous-catégories peuvent aller jusqu'à 15 et peuvent parfois avoir des noms très longs. par exemple, une sous-catégorie d'une catégorie dans l'historique est nommée:
Similitudes et différences entre le mouvement sioniste et d'autres mouvements nationalistes en Europe au 19e siècle
remarque: aucun des noms ne peut être reformulé et est officiellement nommé par le ministère de l'Éducation avec lequel je n'ai aucune affiliation.
chaque sous-catégorie contiendra une liste de matériaux que chaque lien vers leur propre page, c'est ce que l'utilisateur recherche, du matériel d'apprentissage spécifique.
Mon intuition est d'avoir peut-être une sorte d'accordéon extensible imbriqué, ou des onglets possibles pour les catégories, et une navigation latérale dans chaque onglet pour les sous-catégories?
Je suis loin d'être un expert en UX et je suis désolé si la réponse est évidente mais j'ai fait quelques recherches et je ne suis toujours pas sûr de la bonne voie à suivre.
Il semble que le vôtre soit un problème de hiérarchie modérément à profond. Dans ce cas, vous pouvez obtenir un indice de la Khan Academy. Ils ont aussi Sujets> Catégories> Sous-catégories> Plus de sous-catégories
Chaque sous-catégorie a généralement un description plus longue.
Cliquer sur les sujets révèle une liste de sujets, qui à son tour affiche une liste de sous-catégories en survol.
Cliquer sur une sous-catégorie particulière (par exemple les bases de l'algèbre) révèle un autre ensemble de sous-catégories avec une description détaillée. Notez comment le nom du menu principal est devenu le nom de la sous-catégorie.
Vous pouvez aller encore plus loin. Vous pouvez voir qu'ils ont également fourni un lien vers la sous-catégorie précédente en plus de modifier l'élément de menu.
Cela fonctionne pour Khan Academy car ils ont présenté l'ensemble de la navigation de manière soignée. Il devient plus facile pour l'utilisateur de le comprendre même s'il va assez loin. De plus, ce serait une bonne idée de fournir recherche avec ce type de problème de hiérarchie profonde.
J'espère que cela t'aides!
Edit: le menu de navigation de Khan Academy fonctionne parfaitement sur mobile. Totalement réactif.
Eh bien, tout d'abord, vous devez définir si vous en avez besoin pour le bureau, le mobile (application) ou le combiné de bureau et mobile (réactif). Ceci est primordial pour votre question, car vous avez des besoins spécifiques qui nécessitent des approches différentes selon le contexte.
Si vous optez pour le bureau, je pense que quelque chose comme "menu déroulant méga menu" est l'approche la plus tentante. Cependant, je ne le recommanderais pas dans votre cas. Tout d'abord, vous mentionnez déjà que vous créez des sujets de largeur de page "splash" à partir desquels vous envoyez des utilisateurs aux catégories et sous-catégories respectives. Si ces catégories et/ou sous-catégories sont similaires entre les sujets, vous adoptez une bonne approche du problème.
Une autre chose: alors que les "méga menus" faisaient fureur il y a quelques années, vous pouvez maintenant voir comment ils sont abandonnés, car ils ont créé plus de problèmes que de solutions et ils créent une gêne pour l'utilisateur
Résumé: Faire en sorte que les utilisateurs souffrent d'un menu déroulant pour entrer des abréviations d'état est l'un des nombreux petits désagréments qui s'ajoutent à une expérience utilisateur moins efficace et moins agréable. Cela vaut la peine de réparer autant de ces irritants que vous le pouvez.
Outre les 2 liens que je fournis, voici mon point de vue personnel: pensez à ces méga menus audacieux géants. Obtenez maintenant votre smartphone. Essayez de trouver quelque chose. Compliqué, non? Sans oublier que beaucoup de gens ne sauront jamais qu'ils devront cliquer pour voir les résultats, car vous n'avez pas de survol.
En bref: des méga menus? Évitez-les si vous le pouvez.
Alors que faire?
personnellement, je pense que vous devriez lire attentivement les pages Navigation et Transitions de navigation de Material Design , jetez un œil aux vidéos présentant les comportements. Que vous utilisiez du matériel ou non, il vous fournira de bons points de départ pour faire ce dont vous avez besoin. Par exemple, j'ai fait un filaire rapide dans Material pour illustrer ceci: 
Ici, vous pouvez voir comment les hiérarchies se développent et ont une accessibilité connue pour les utilisateurs. Et comme vous pouvez l'imaginer, les cartes empilées s'adapteront à une grille sur le bureau (par exemple, vous pourriez avoir 4 colonnes de cartes sur le bureau)
Mais gardez à l'esprit que ce n'est qu'une approche. Vous pouvez utiliser d'autres options, comme Menu Push à plusieurs niveaux (voir ci-dessous)
ou un Menu multiniveau réactif (voir ci-dessous)
Mais gardez à l'esprit que ces deux solutions, bien que cool et soignées, peuvent rencontrer les mêmes problèmes que les méga menus (selon la taille de vos éléments), il suffit donc de les ajouter pour examen ou pour d'autres personnes à la recherche d'approches plus simples
j'espère que ça aide!