Dépassement d'onglets: que faire lorsque je manque d'espace pour les onglets annuels?
J'ai une page qui répertorie les lauréats précédents d'un prix, avec des onglets séparant les gagnants de chaque année.
- Chaque année, il y a quarante récipiendaires.
- Le nom du destinataire est répertorié, ainsi que son titre d'emploi et son entreprise.
- La même personne peut être sélectionnée dans un maximum de trois années différentes.
- Les gagnants de trois ans entrent dans le Temple de la renommée, bien que cela ne soit pas représenté ici.
- Actuellement, les gagnants de chaque année sont affichés sur un onglet séparé.
Le problème est que je manque d'espace. Après l'année prochaine, il n'y aura plus de place pour ajouter plus d'onglets . Quelle est une autre façon d'organiser ces données qui fonctionnera bien jusqu'à 20 ans au total de récompenses?
Remarque: Merci Robert Fraser pour le nom " Tab Overflow ."
Que diriez-vous de simplement montrer les 10 dernières années de récompenses avec le 11e onglet pour vous emmener aux 10 années précédentes?
2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older
La plupart des gens ne s'intéresseront qu'aux récompenses les plus récentes, donc avoir les anciennes récompenses à un deuxième clic ne devrait pas être un gros problème.
Un clic sur "Plus ancien" afficherait une page avec les onglets suivants:
Recent | ... | 2000 | 1999
mais aurait sinon l'air identique à la page actuelle. Vous pouvez changer le jeu de couleurs comme un indice visuel supplémentaire, mais ce serait aux "pouvoirs en place".
Vous pourriez avoir un onglet '...' et utiliser du JavaScript (yay jQuery) pour "faire défiler" vers la droite lorsque vous cliquez dessus et révéler les autres onglets. Ensuite, vous pourriez avoir une flèche sur la gauche pour pouvoir revenir aux onglets les plus récents. (TY @ChrisF pour l'inspiration)
Pour mémoire, j'aime la réponse de @ ChrisF, mais juste pour les coups de pied, voici comment Google Spreadsheets le gère.
Je voudrais probablement ajouter une barre au-dessus de la liste et mettre une liste déroulante pour sélectionner l'année sur le côté gauche de la barre. Vous auriez alors également la possibilité d'ajouter d'autres options de filtrage via la liste déroulante, c'est-à-dire si certaines seraient utiles.
Les tabulations peuvent ne pas être la bonne métaphore à utiliser pour la pagination. Si vous voulez éviter de recharger la page pour obtenir des années qui ne tiennent pas dans l'espace donné, une liste horizontale défilante peut mieux fonctionner.
Consultez la liste des produits en haut de page Mac d'Apple .
Votre liste d'années ne s'allongera jamais ridiculement énorme, vous n'avez donc pas à vous soucier des problèmes de pagination typiques de masquer des pages non immédiates, etc.:
"‹ ... 148 149 150 151 152 ... ›"
Il est probablement préférable de trouver un moyen de répertorier toutes les années et d'occlure celles qui ne sont pas immédiatement pertinentes.
Si les années ne sont pas si nombreuses, vous pouvez mettre les années "plus anciennes" sous un menu déroulant à la fin.
Vous pouvez faire comme Firefox. Il y a un défilement pour les onglets cachés. afin que vous puissiez charger des onglets plus que l'espace dont vous disposez. Ou vous pouvez faire comme Chrome, réduire les onglets en ajoutant plus d'onglets (cette solution ne fonctionnera pas pour votre cas, car en réduisant les onglets, les étiquettes disparaissent). Je pense qu'avoir une zone de défilement pour les onglets est la meilleure solution. de cette façon, l'utilisateur n'a pas de limite. Vous pouvez ajouter une liste déroulante afin que l'utilisateur puisse basculer rapidement entre les pages.
Puisque vous avez un ensemble limité pour vos onglets (vous avez mentionné une valeur de "20 ans"), vous pouvez utiliser des "onglets verticaux" - un peu comme la plupart des logiciels de blog ont des "catégories" ou des "archives" dans une barre latérale. Ensuite, si nécessaire, vous pouvez placer les éléments les plus importants/à fort trafic dans un format facile à utiliser en haut au-dessus de l'endroit où se trouvent vos onglets actuels.
Par exemple, mon site Web (un modèle prêt à l'emploi) a une liste "Archives" en bas à gauche.
http://www.aaronlerch.com/blog/
(Notez que je n'essaye pas de pimp mon site, c'est juste ce qui m'est venu à l'esprit en premier car je savais ce que je cherchais :))
Comme d'autres ici, je vous suggère également de vous éloigner des onglets.
Mais si vous êtes coincé avec eux, vous pouvez simplement entasser plus d'onglets dans la rangée et les réduire. (Je pense aux onglets de Chrome.) Quand ils sont trop étroits pour que leurs étiquettes tiennent, tronquez les étiquettes. Dans votre cas, vous voudriez tronquer le début des années:
| ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |
Certainement pas optimal, mais cela pourrait apaiser le client jusqu'à ce qu'il accepte d'abandonner les onglets.
Peut-être que les onglets ne sont pas le meilleur moyen de les afficher. Mais si vous ne voulez pas casser la navigation classique, vous devez mettre 2 flèches, l'une pointant vers la gauche et l'autre vers la droite.
Vous pouvez également afficher les onglets qui, selon vous, seront les plus fréquemment utilisés (ou jusqu'à 10 ans). À la fin, ayez un onglet qui dit "Plus ancien" et qui affiche une liste des années plus anciennes restantes lorsque vous cliquez dessus, en utilisant JavaScript. Cette approche pourrait ne pas fonctionner si bien si vous avez finalement autant d'années anciennes à afficher que la liste est vraiment longue. Cela ne prend pas non plus en compte ce que vous feriez pour les utilisateurs sans JS activé.
Tous ces onglets en font également un design très occupé et bruyant. J'ai aussi pensez que les onglets sont mieux adaptés pour regrouper différents ensembles de données, pas des variations de la même.
Je suggérerais quelque chose comme une liste déroulante avec des boutons précédent/suivant de chaque côté. Ou une liste dans une barre latérale ou quelque chose.
Vous attendez-vous à ce que vos utilisateurs parcourent les années, simplement par curiosité, ou voudraient-ils revoir les récompenses d'une année particulière? Dans ce dernier cas, un champ de texte serait encore plus rapide.
Onglet suivant, onglet précédent, page d'onglets suivante, page d'onglets précédente, les boutons sont nécessaires, mais pas suffisants.
- Faire défiler jusqu'à un onglet distant serait vraiment ennuyeux.
Essayez d'utiliser des onglets hiérarchiques - onglet décennie avec onglets année à l'intérieur.
De plus, laissez l'utilisateur passer directement à l'onglet souhaité, en entrant l'année.