web-dev-qa-db-fra.com

Comment afficher une hiérarchie claire dans un petit espace?

Je fais une chose qui ressemble à ceci:

screenshot of the thing

C'est une liste de pages qui ont des balises. Ces balises peuvent avoir une hiérarchie, comme ceci:

programming
|
\-> Perl
|
\-> python
|   |
|   \-> python 2
|   |
|   \-> python 3
|
\-> Ruby
    |
    \-> Ruby on Rails

J'ai besoin d'un moyen d'afficher cette hiérarchie dans l'espace limité que j'ai sous chaque page. Je ne peux pas utiliser un format un tag par ligne comme celui ci-dessus, car cela prendrait trop de place.

J'ai également besoin qu'il soit clair immédiatement quelle balise est un enfant de quel parent. Je pensais faire quelque chose comme ça:

{Programmation} {> Perl} {> python} {>> python 2} {>> python 3} {> Ruby} {>> Ruby on Rails}

Cela identifie sans ambiguïté quelle balise est laquelle; cependant, c'est difficile à dire en un coup d'œil.

Pour compliquer encore les choses, cela peut être sur un appareil mobile avec un écran avec une petite largeur, donc il n'y a aucune garantie que toutes les balises tiendront sur une seule ligne.

Comment puis-je formater cette hiérarchie de balises tout en

  • garder l'espace qu'il prend raisonnablement petit (c'est-à-dire pas une balise par ligne)
  • indiquer immédiatement quelle balise est un parent/enfant dont
  • fonctionnent toujours sur les appareils mobiles avec de petits écrans

?

website-designnavigationlayouthierarchylegibility
2
Doorknob

Garder au sec

Avec des informations catégorielles, vous n'avez pas nécessairement à afficher l'étiquette de catégorie à plusieurs reprises. Utilisez proximité du groupe la catégorie et le sujet. Ma conjecture basée sur votre img vos utilisateurs sont très avertis et reconnaîtront les icônes. Exploitez-les pour économiser de l'espace. De cette façon, même si les choses ont trois ou quatre niveaux de profondeur, vous pouvez toujours les relier à {icon} / {subject} ou {icon} / ... / { subject } Les barres obliques peuvent également convenir à une foule avertie pour représenter une hiérarchie.

Connaissez vos voisins

C'est une bonne idée d'avoir une idée des autres applications que vos utilisateurs connaissent. Cela pourrait vous donner quelques moyens de tirer parti des modèles reconnaissables. Les gens ne comprennent généralement pas qu'une application ne partage pas les mêmes conventions qu'une autre. Tirer parti de sites gratuits ou compétitifs peut aider à rendre quelque chose de plus intuitif.

1
Ken