En una cuadrícula, cómo mostrar encabezados de columna largos
Cuando se muestran datos en una cuadrícula (cada fila contiene un registro, cada columna un campo de registro diferente), la necesidad de espacio vertical se resuelve fácilmente con desplazamiento o paginación.
Por lo general, antes nos falta espacio horizontal a medida que aumenta el número de columnas o datos de columna. Este tema ya se trata aquí: Cómo mostrar demasiados datos y este no es el punto de mi pregunta.
Algunas columnas tienen datos que ocupan un pequeño espacio (una casilla de verificación, una fecha o un icono), pero su etiqueta de encabezado es larga. El resultado es que la columna se ensancha debido al encabezado, no a los datos, con una evidente pérdida de espacio horizontal.
Hay algunas soluciones simples:
- encontrar textos de encabezado más cortos
- ajusta el texto del encabezado en varias líneas
- mostrar el texto del encabezado verticalmente
- mostrar una abreviatura con el mouse sobre la información sobre herramientas que contiene la etiqueta completa
- usa un icono como encabezado
Hay casos en que ninguna de estas soluciones se puede aplicar, manteniendo una IU clara y fácil de entender al mismo tiempo. Cuales son sus soluciones?
El enfoque más utilizado que he visto es utilizar puntos suspensivos para indicar que hay más texto, como este:
A continuación, puede proporcionar una información sobre herramientas al pasar el mouse para mostrar al usuario el nombre completo. En Mac OS, Apple intenta condensar el texto como primer paso. Lo hacen reduciendo el espacio entre letras y palabras. La idea es mostrarle tantos caracteres como sea posible antes de agregar el Elipsis como último recurso.
He visto otro enfoque mucho más elegante en una aplicación en algún lugar donde se desvanecen las últimas letras visualizables. No recuerdo el nombre de la aplicación, pero se veía así:
Obviamente, esto es más trabajo, pero seguro que se ve más moderno y elegante. Me sorprende que aún no se haya convertido en una característica estándar de Mac OS. Hablando de, Apple does usa el desvanecimiento en Spotlight para mostrarte una ruta de archivo larga:
Además de la ruta del archivo desvanecido, vea el archivo "YLListenerBase.cpp": puede ver que está condensado si lo compara con su archivo .h. La ruta del archivo con el efecto de desvanecimiento se encuentra en la parte inferior de la ventana.
Creo que sugerí esto en un comentario en la otra pregunta, pero para recapitular ... Sugeriría íconos cuando el ícono pueda describir con precisión el significado de las columnas.
Cita de comentario en la otra pregunta:
P.ej. si tiene una columna que solo contendrá un solo carácter (por ejemplo, S/N/?, o 0/1/2/3 /? o T/F) si puede usar un icono o texto abreviado en el encabezado, puede ser capaz de reducir en gran medida el ancho de la columna. p.ej. si tiene una columna "Número", usar "#" en su lugar ahorrará algo de espacio.
Tu lista es bastante exhaustiva. No puede hacer mucho más que elegir lo que sea mejor para su situación.
Si sus encabezados son varias palabras, el ajuste es probablemente la mejor opción. También puede dividir la palabra larga ocasional si utiliza la separación silábica adecuada. No rompa las palabras en puntos arbitrarios.
Por lo general, tiene mejor suerte al obtener abreviaciones adivinables que los íconos, a menos que los íconos ya estén establecidos en otra parte de la aplicación. Si no usa abreviaturas establecidas, pruébelas en contexto para asegurarse de que los usuarios puedan adivinarlas. Sí, use la información sobre herramientas, ya sea que use iconos o abreviaturas, pero no confíe en ellos para el uso normal. Las abreviaturas generalmente no necesitan puntos, por lo que ahorrará espacio.
Si muestra el encabezado verticalmente, obtendrá una mejor legibilidad escribiendo el texto de lado, en lugar de apilar las letras una encima de la otra.
En lugar de mostrar el encabezado verticalmente, "doble" la columna en la parte superior y muestre el texto del encabezado en un ángulo de 30 a 45 grados. Ahora solo se necesita una leve punta de la cabeza para leerlos. Sin embargo, eso solo funciona si tiene un montón de columnas adyacentes con encabezados largos.
Para algunas cuadrículas, como donde los valores de campo tienden a ser del mismo ancho en diferentes campos (por ejemplo, para mostrar un horario de trenes), tiene sentido intercambiar columnas con filas. Ahora los encabezados de columna son encabezados de fila, que pueden ser tan largos como sea necesario sin desperdiciar espacio.
Recuerde que no hay una ley contra el desplazamiento horizontal en una cuadrícula. Los usuarios lo han estado haciendo durante años con hojas de cálculo.
¿Por qué no usar una 'nube' apilada sobre los oídos de la columna? Si realmente son tan importantes para tener mucho tiempo, enloquece:
________________ _____________
|Super Long Title| |I'm also long|
^ ^
| Foo | Bar | | | Baz | | | FooBar |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
| x | y | z | xy | yx | xyz |
Algunas buenas soluciones ya mencionadas. Aquí, pero otro a tener en cuenta: use identificadores de color, número o letra para la columna y una leyenda.
