it-swarm-es.com

Desbordamiento de pestañas: ¿qué hacer cuando me quedo sin espacio para pestañas anuales?

Tengo una página que enumera los destinatarios anteriores de un premio, con pestañas que separan a los ganadores de cada año.

  • Cada año hay cuarenta destinatarios.
  • El nombre del destinatario aparece en la lista, junto con su cargo y compañía.
  • Se puede seleccionar la misma persona en hasta tres años diferentes.
  • Los ganadores de tres años entran al salón de la fama, aunque eso no está representado aquí.
  • Actualmente, los ganadores de cada año se muestran en una pestaña separada.

El problema es que me estoy quedando sin espacio. Después del próximo año, no habrá espacio para agregar más pestañas . ¿Cuál es otra forma de organizar estos datos que funcionarán bien para un total de 20 años de premios?

Screenshot of tab interface

Nota: Gracias Robert Fraser por el nombre " Desbordamiento de pestaña ".

32
Patrick McElhaney

¿Qué le parece mostrar los últimos 10 años de premios con la undécima pestaña para llevarlo a los 10 años anteriores?

2011 | 2010 | 2009 | 2008 | 2007 | 2006 | ... | Older

La mayoría de las personas solo estarán interesadas en los premios más recientes, por lo que tener los premios más antiguos a un segundo clic de distancia no debería ser un gran problema.

Al hacer clic en "Anterior", se mostrará una página con las siguientes pestañas:

Recent | ... | 2000 | 1999

pero de lo contrario se vería idéntico a la página actual. Puede cambiar el esquema de color solo como una pista visual adicional, pero eso dependería de los "poderes fácticos".

40
ChrisF

Podrías tener una pestaña '...' y usar JavaScript (yay jQuery) para "desplazarte" hacia la derecha cuando hagas clic y reveles las otras pestañas. Entonces podría tener una flecha a la izquierda para volver a las pestañas más nuevas. (TY @ChrisF por la inspiración)

11
LoganGoesPlaces

Para el registro, me gusta la respuesta de @ ChrisF, pero solo por diversión, así es como lo maneja Google Spreadsheets.

alt text

8
jessegavin

Probablemente agregaría una barra sobre la lista y pondría un menú desplegable para seleccionar el año en el lado izquierdo de la barra. Entonces también tendría espacio para agregar otras opciones de filtrado a través del menú desplegable, es decir, si alguna sería útil.

6
LoganGoesPlaces

Las pestañas pueden no ser la metáfora correcta para usar en la paginación. Si desea evitar recargar la página para llegar a años que no caben en el espacio dado, una lista horizontal de desplazamiento puede funcionar mejor.

Consulte la lista de productos en la parte superior de página Mac de Apple .

Su lista de años nunca crecerá ridículamente enorme, por lo que no necesita preocuparse por los problemas típicos de paginación de ocultar páginas no inmediatas, etc.

"‹ ... 148 149 150 151 152 ... ›"

Probablemente sea mejor encontrar una manera de enumerar todos los años y ocluir los que no son relevantes de inmediato.

5
Brendan Berg

Si los años no son tantos, puede colocar los años 'más viejos' en un menú desplegable al final.

enter image description here

3
Ades

Puedes hacer como Firefox. Hay un desplazamiento para pestañas ocultas. para que pueda cargar pestañas más que el espacio que tiene. O puede hacer como Chrome, hacer que las pestañas sean más pequeñas agregando más pestañas (esta solución no funcionará para su caso, porque al hacer las pestañas más pequeñas, las etiquetas desaparecen). Creo que tener un área de desplazamiento para pestañas es la mejor solución. de esta manera el usuario no tiene límite. Puede agregar una lista desplegable para que el usuario pueda cambiar de página rápidamente.

2
Morteza Milani

Como tiene un conjunto acotado para sus pestañas (usted mencionó "20 años") podría usar "pestañas verticales", algo así como la mayoría de los programas de blog tienen "categorías" o "archivos" en una barra lateral. Luego, si es necesario, puede colocar los elementos más importantes/de alto tráfico en un formato fácil de usar en la parte superior de arriba, donde están sus pestañas actuales.

Por ejemplo, mi sitio web (una plantilla lista para usar) tiene una lista de "Archivos" que se ejecuta en el lado izquierdo.

http://www.aaronlerch.com/blog/

(Tenga en cuenta que no estoy tratando de mejorar mi sitio, fue lo primero que se me ocurrió porque sabía lo que estaba buscando :))

2
Aaron Lerch

Al igual que otros aquí, sugeriría alejarse de las pestañas también.

Pero si está atascado con ellos, puede meter más pestañas en la fila y reducirlas. (Estoy pensando en las pestañas de Chrome). Cuando son demasiado estrechas para que quepan sus etiquetas, trunca las etiquetas. En su caso, desearía truncar el comienzo de los años:

El | ..12 | ..11 | ..10 | ..09 | ..08 | ..07 | ..06 | ..05 | ..04 | ..03 | ..02 | ..01 | ..00 | ..99 |

Ciertamente no es óptimo, pero podría aplacar al cliente hasta que acepte deshacerse de las pestañas.

2
Ken Mohnkern

Tal vez las pestañas no son la mejor manera de mostrarlas. Pero si no desea romper la navegación clásica, debe colocar 2 flechas, unas apuntan a la izquierda y la otra a la derecha.

1
David Lalo Matus

También puede mostrar las pestañas que cree que se usarán con más frecuencia (o hasta los últimos 10 años). Al final, tenga una pestaña que diga "Más viejo" y que muestre una lista de los años anteriores restantes al hacer clic, usando JavaScript. Es posible que este enfoque no funcione tan bien si finalmente tiene tantos años más antiguos para mostrar que la lista es realmente larga. Esto tampoco tiene en cuenta lo que haría para los usuarios sin JS habilitado.

1
lori.lee

Todas esas pestañas también lo convierten en un diseño muy ocupado y ruidoso. También creo que las pestañas son más adecuadas para agrupar diferentes conjuntos de datos, no variaciones de los mismos.

Sugeriría algo como un menú desplegable con botones anteriores/siguientes a cada lado. O una lista en una barra lateral o algo así.

¿Espera que sus usuarios naveguen a través de los años, solo por curiosidad, o les gustaría revisar los premios de un año en particular? En el último caso, un campo de texto sería incluso más rápido.

0
Peter Frings

La pestaña siguiente, la pestaña anterior, la página de pestañas siguiente, la página de pestañas anterior, los botones son necesarios, pero no suficientes.
- Desplazarse a una pestaña remota sería realmente molesto.

Intente usar pestañas jerárquicas: pestaña de década con pestañas de año dentro.
Además, permita que el usuario salte directamente a la pestaña deseada, ingresando el año.

0
Danny Varod