Las tablas de información son aburridas. En cierto sentido, están destinados a ser así. Una buena mesa comunica mucha información de una manera concisa y fácil de entender. Debido a que el énfasis debe estar realmente en la información, el sobre diseño de una tabla puede matar la efectividad. Sin embargo, en las manos adecuadas, el diseño inteligente no solo puede hacer que una mesa sea más atractiva, sino que también puede aumentar la legibilidad.
Hoy examinaremos varias formas en que puede mejorar la funcionalidad y la estética de sus tablas. Uno de los lugares más comunes en los que actualmente encontramos mesas en línea es en la página de precios de una aplicación web, por lo que la mayoría de nuestros ejemplos tomarán esta forma, solo tenga en cuenta que estos principios pueden aplicarse a cualquier tipo de cuadrícula informativa (ya sea o no una mesa).
Vertical, horizontal o matricial?
Como siempre, vamos a empezar con lo obvio. El primer paso es decidir sobre una estructura general de su tabla. La estructura que debe elegir depende del tipo y la complejidad de la información que presente.
La elección entre columnas verticales y filas horizontales puede depender en gran medida de las preferencias personales. Realice un bosquejo de su contenido en cada formulario y decida qué método cree que transmite mejor la información. Obviamente, si su mensaje se basa en múltiples variables, una matriz es el camino a seguir. Aquí hay un par de ejemplos:
Vertical
Horizontal
Matriz
Comience en Excel
Para que quede constancia, esta es la primera vez y, con suerte, la última vez que me escuche sugerir el uso de Microsoft Office para cualquier cosa relacionada con el diseño. La verdad es que las tablas son, sin duda, fáciles de hacer en Excel; eso es más o menos lo que hace. Compare esto con el tiempo que le lleva al código de hardware la estructura organizativa en HTML y Excel siempre ganará.
Hoy me topé con una gran aplicación web llamada Tableizer que te permite pegar tus tablas desde Excel para transformarlas mágicamente en HTML. Aún tendrás que manejar la mayoría del estilo por tu cuenta, pero definitivamente ahorrarás algo de tiempo en la parte delantera.
Tableizer
Use un generador de tablas
Odio Excel? No te sientas mal, yo también. Si aún está buscando ahorrar algo de tiempo en la creación del esqueleto básico de una tabla HTML, hay muchos generadores en línea que harán el trabajo. Tenga en cuenta que dije? Esqueleto básico? No pienses que ya terminaste después de usar uno de estos para hacer trampa de una pequeña codificación. Todavía tienes un largo camino por recorrer si no quieres que apeste.
Aquí hay una lista rápida de generadores de tablas gratuitos para guardar una búsqueda en Google:
- Quackit
- Generador de tablas
- TextFixer
Un poco de estilo va un largo camino
Ahora que tienes una tabla básica, el primer paso para sacarla de los 90 es agregar algo de CSS. Por supuesto, puede volverse loco y pasar horas experimentando con diferentes opciones de estilo, solo recuerde que incluso un poco de color y estilo de fuente pueden mejorar drásticamente tanto la legibilidad como el atractivo de la tabla.
Este es un tutorial antiguo, pero aún relevante, sobre el estilo básico de tablas con CSS que cubre lo básico.
Añadir una sección destacada
Esto es extremadamente común en las tablas de precios, pero es aplicable a cualquier tabla. Piense en la información de la tabla y considere si desea que el espectador se centre en una parte específica. Ya sea el plan con el mejor valor o un elemento popular en una lista de características, intente variar el color y / o el tamaño para que se destaque del resto.
Definitivamente hay muchas formas, tanto sutiles como exageradas, para hacer que la sección destacada se destaque. Aquí hay algunos para la inspiración:
Diferenciacion de colores
Diferencia de tamaño
Diferenciación de color y tamaño
Hacer que la información se pueda ordenar
Si está creando tablas con mucha información organizada en varias columnas, es una buena idea considerar agregar una función de clasificación para que los usuarios puedan elegir la forma en que desean ver la información organizada.
Mint.com integra la clasificación de tablas en su lista de transacciones, lo que hace que sea muy fácil cambiar de una vista basada en fechas a una vista basada en categorías para que pueda identificar áreas en las que tiende a gastar mucho dinero.
Aquí hay un par de complementos de jQuery que le brindan una manera rápida de agregar esta funcionalidad:
- ordenable
- tabla de clasificación
Utilizar iconos
Como dije anteriormente, el punto de organizar la información en tablas es hacer que sea comprensible de un vistazo. Al reducir la lectura necesaria, los iconos bien diseñados pueden mejorar drásticamente la velocidad a la que un visitante puede comprender la información en su tabla.
Cuidado, esto va en ambos sentidos. Los íconos descuidados pueden hacer que los usuarios se rasquen la cabeza intentando averiguar qué es lo que intentas comunicar.
Añadir rayas de cebra
Esta es una idea bastante básica que se remonta al tiempo que han existido tablas de información. Agregar colores de fila alternativos ayuda a que sus ojos sigan la línea de comunicación y conecten la información flotante en el centro de una tabla con la categoría anclada en el lateral o en la parte inferior.
Esta técnica simple puede aumentar la legibilidad de tablas grandes y pequeñas, pero es una buena regla general incluir siempre franjas (o alguna otra ayuda visual) si su tabla requiere que el lector conecte información de más de una pulgada o más. dos aparte
Es súper simple de hacer con CSS:
Ir mínimo
¿Odias el aspecto brillante de la web 2.0 del consejo anterior? No hay problema, hay un argumento aún más fuerte para minimizar los gráficos de la tabla. Esto permite que el usuario se centre en el contenido sin distracciones innecesarias. Use líneas de cuadrícula limpias y sutiles (o ninguna línea), fuentes y colores simples que contrasten bien con su fondo.
Añadir una función de búsqueda
A veces, agregar una característica de clasificación no es suficiente.Cuando tienes páginas de información para clasificar, nada supera un campo de búsqueda. Esto es lo suficientemente simple para hacer con una pizca de jQuery:
- Cómo crear un filtro / tabla de búsqueda
No sobrecargue la mesa con redundancias
Si su tabla no hace que la información sea más legible, entonces es contraproducente. A los desarrolladores de aplicaciones les encanta promocionar enormes listas de características y una tabla es definitivamente una forma natural e incluso apropiada de hacerlo. Sin embargo, a veces los diseñadores empaquetan tablas con mucha información innecesaria y redundante que podría presentarse de una manera mucho mejor.
Echa un vistazo al ejemplo anterior de la máquina de facturas. Los cuatro planes que ofrecen son casi idénticos, con la excepción de tres características. Esto hace que 15 filas innecesarias dejen sus ojos saltando de un lado a otro para conectar las marcas de verificación con la función correspondiente. ¿Una lista o un gráfico con viñetas simple que dice? Todos nuestros planes incluyen las siguientes características:? permitiría a los usuarios ver rápidamente que no importa qué plan elijan, obtienen todas estas características.
Luego, la tabla podría reservarse para áreas de diferenciación, lo que lo reduciría a 3 o 4 filas mucho más manejables. Nuevamente, permítanme subrayar que las tablas deberían hacer que la información sea más legible. Si su mesa no cumple con este objetivo, entonces es contraproducente.
Crear áreas expandibles
Otra gran característica que puede agregar a sus tablas es la capacidad de expandir ciertas filas. Esto le permite colocar una gran cantidad de contenido en un espacio relativamente despejado. Eliminar esto es bastante simple con un complemento jQuery llamado jExpand. Aquí hay un tutorial de jankoatwarpspeed sobre cómo implementarlo.
Si está utilizando una tabla expandible, solo asegúrese de que sus encabezados dejen completamente claro dónde encontrar cierta información. Lo último que quieres son usuarios molestos, que buscan en cada sección para encontrar lo que quieren.
Resaltar las relaciones
Esta es una técnica que realmente aumenta la legibilidad de una tabla o matriz compleja. La idea es resaltar cualquier celda sobre la que se desplace el usuario junto con la columna y la fila a la que pertenece. No es lo más sencillo de lograr, pero es perfectamente posible con algún código inteligente. Aquí hay un ejemplo de cómo hacerlo.
Bueno, estoy seguro de que eso es más de lo que siempre quisiste saber sobre tablas en diseño web. ¡Use los comentarios a continuación para hacernos saber sus opiniones sobre las técnicas anteriores y asegúrese de compartir las tablas únicas que encuentre!