Seguramente sabes que una tabla se utiliza para organizar y manejar datos, permitiendo que los usuarios escaneen, entiendan, analicen y comparen esos datos para poder tomar decisiones y acciones a partir de esa información. Sin embargo, un mal planteamiento puede hacer que el usuario no entienda la interfaz o que no sepa interactuar con ella. En este artículo hablaremos sobre buenas prácticas que te permitirán mejorar la experiencia del usuario cuando diseñes una tabla.
Primero recordemos cómo está compuesta una tabla. La unidad mínima de una tabla es la celda, que contiene todo tipo de información (texto, números, porcentajes, imágenes, checkbox, íconos, enlaces, filtros, botones, etc.). El conjunto de celdas alineadas de manera vertical conforman las columnas, que marcan el tipo de contenido que se representa en la tabla. Luego tenemos las filas, es decir, celdas alineadas horizontalmente, donde se muestra el conjunto de valores relacionados. Por último, existe un tipo de fila única que es la cabecera, que indica el tipo de contenido mostrado en cada columna.
Buenas prácticas
La primera es identificar la finalidad de la tabla. Es fundamental conocer el usuario real al que está destinada, que nos comente sus necesidades y sus dolencias, para poder realizar un diseño eficiente.
Una vez obtenida esta información, es ideal que estructures la tabla como un árbol de contenido para comprender cómo se muestra.
Luego de realizar estos dos pasos previos, tendrás un indicio de qué tipo de tabla diseñarás:
- De lectura: Por ejemplo, un listado de clientes con nombre y teléfono.
- De búsqueda: Por ejemplo, si a ese listado le agregamos una categoría para filtrar la tabla.
- Editable: Por ejemplo, si tenemos la libertad de editar algún valor dentro de esa tabla.
Otro punto a tener en cuenta son los espacios y distancias entre celdas. Exceptuando los encabezados, que deben ser más altos que el resto de la tabla, todas las celdas tienen que tener la misma altura. El padding debe ser de 16px tanto vertical como horizontal, dándonos una separación entre celdas de 32px.
Para mantener la consistencia visual de tu diseño, ten en cuenta que las tablas deben alinearse correctamente. En la mayoría de los casos, la alineación es hacia la izquierda (nombres, mails, fechas, teléfonos, código postal, etc.), pero en caso de que la celda contenga datos numéricos variables y porcentajes (por ejemplo, montos monetarios o cantidades), estos deben alinearse hacia la derecha. Recuerda que los encabezados siempre irán alineados de la misma manera que los datos que representan.
En términos de experiencia de usuario, una buena práctica es mantener siempre el contexto de la tabla. Esto quiere decir que si, por ejemplo, tu tabla es más larga que el alto de la pantalla, al hacer scroll se “fije” el encabezado. Lo mismo ocurre a la inversa, si la tabla tiene más columnas que el ancho de la pantalla, procura “fijar” la primera columna. Esto va a evitar frustrar al usuario, permitiendo conocer a qué contenido pertenece cada dato en todo momento.
Si estás en una situación en la que consideras que tu tabla tiene muchas columnas y que podrías simplificarla, te traigo un consejo que podría solucionar tu problema: agrega subtítulos. Esta es la mejor forma de eliminar columnas que no brindan información fundamental, pero que es bueno mostrar. Al agregar los subtítulos se debe tener en cuenta la jerarquización, ya que no debe competir con los datos relacionados que presenta la celda.
Te propongo que, en la medida de lo posible, analices de qué manera podrías darle libertad al usuario para que recorra, investigue, y recolecte información de la tabla según sus diferentes necesidades. Para ello, te traigo un par de opciones:
- Modificar el ancho de las columnas.
- Reordenar el contenido. En algunas tablas suele estar la función de drag and drop, que permite al usuario reordenar las diferentes filas o columnas de una manera que le sea más útil.
- Habilitar filtros y barras de búsqueda.
- Personalizar la tabla para que el usuario solo vea el contenido que necesita.
Para finalizar, un concepto que se aplica tanto a tablas como a cualquier otro elemento de UI, es analizar siempre el peor de los casos. Es necesario pensar que puede haber algún dato que sea más extenso de lo planeado, y resolver de antemano cómo se visualizará, ya sea cambiando el ancho de la columna, abriendo un quick view para ver más información, etc. Recuerda que siempre puede haber un nombre mucho más largo que “Juan Pérez”.
Créditos
UI from mars — Guía completa para diseñar mejor — Por Cris Busquets
Uxables -Tabla de datos en Responsive -Por Javier Arias Del Prado
María pascual Design and code — Cómo diseñar tablas (parte 1,2, 3)
Molly Hellmuth — The ultimate guide to design data table
