Vista de tabla
Descripción general
La vista de tabla es un mecanismo para visualizar y manipular conjuntos de datos más pequeños.
Cuándo se debe utilizar
- Debe presentar datos complejos al usuario.
- El orden en que se presentan los datos es importante y el usuario tiene control sobre esto.
- El usuario debe comparar datos del mismo tipo entre celdas.
Cuándo no se debe utilizar
- El orden de presentación de los datos no es tan significativo como los datos en sí. En su lugar, use vistas de tarjeta o vistas de lista.
- El caso de uso no requiere la comparación de datos. En su lugar, use vistas de tarjeta o vistas de lista.
- Cuando se trabaja con pequeñas cantidades de datos, lo que genera un espacio en blanco excesivo. En su lugar, use vistas de tarjeta o vistas de lista.
Anatomía
- Título (obligatorio): Ofrece una breve descripción sobre la vista de tabla, con un recuento opcional de filas que indica la cantidad de filas en la tabla.
- Controles de tabla (opcional): Incluye un conjunto de controles para manipular la visualización de datos. No confunda los controles de la tabla con las acciones de la tabla.
Filtro de búsqueda (opcional): Se utiliza para filtrar el conjunto de datos mediante la búsqueda de palabras clave.****
Configurador (opcional): Proporciona los medios para ocultar o mostrar columnas de tabla.****
Filtro (opcional): Incluye un conjunto avanzado de mecanismos para filtrar el conjunto de datos según varios parámetros.****
- Acciones de la tabla (opcional): Proporciona los medios para realizar acciones en el conjunto de datos, ya sea en el conjunto completo o en conjuntos de datos seleccionados desde la tabla. Las acciones de la tabla incluyen lo siguiente:
- Acción principal (opcional): Utilice la acción principal para la acción más importante en la tabla. Cada tabla puede tener solo una acción principal.
- Acción secundaria (opcional): Utilice la acción secundaria para las acciones adicionales.
- Acción terciaria (opcional): Utilice la acción terciaria para acciones destructivas o menos importantes.
- Menú desbordamiento (opcional): Utilice el menú de desbordamiento para mostrar más acciones asociadas con los datos de la tabla.
- Encabezados de columna (obligatorio): Proporcionan un rótulo para cada columna de datos, junto con el mecanismo para ordenar los datos en cada columna.
- Filas de datos (obligatorio): Muestran los datos asociados a la tabla.
- Controles de paginación (opcional): Se utiliza para ajustar la densidad de visualización y navegar entre páginas.
Contenido de la tabla
Columnas
- Todas las celdas de una columna deben contener el mismo tipo de datos. Por ejemplo, no mezcle un valor de fecha con un valor de estado en una columna.
- Use íconos solo como un medio para proporcionar contexto adicional a las celdas. El uso de íconos en todas las celdas de una columna debe ser coherente: todas las celdas tienen íconos o ninguna de ellas los tiene. Use solo íconos comunes y fácilmente reconocibles si no tienen texto acompañante o en encabezados de columna.
- La última columna de una tabla se reserva para acciones de la fila. Estas acciones se pueden presentar como íconos, botones de acción o un menú de desbordamiento. Mantenga la coherencia del tipo y la incidencia dentro de la columna.
- Para una mejor legibilidad, restrinja la cantidad de columnas a 8 por tabla si fuera posible, y proporcione una opción de configuración de usuario para agregar o quitar columnas según sea necesario.
- Se puede cambiar el tamaño a las columnas según las preferencias del usuario.
Filas
- Cada fila representa un registro u objeto y sus detalles asociados.
- La celda principal (identificador) de una fila es la información clave que ancla el conjunto de datos.
- Las filas pueden tener controles de selección, como el botón de opción para la selección única y la casilla de verificación para la selección múltiple.
- En las filas que permitan la expansión en la línea, el ícono de expansión aparece justo después del control de selección. Al hacer clic en él, se abre y se cierra la expansión en la línea.
- Las acciones siempre deben estar disponibles. Cuando se invoca el desplazamiento horizontal, la columna Acciones se bloquea.
Pautas para mostrar acciones en tablas
Uso de íconos
Los íconos se pueden usar para acciones solo si son reconocidos universalmente y no resultan ambiguos. Por ejemplo:
- El ícono de la papelera representa la acción eliminar.
- El ícono del lápiz representa la acción editar.
Si hay algún riesgo de confusión, use un rótulo de texto o combine el ícono con texto.
Gestión de acciones de filas
Para que las tablas estén despejadas, puedan escanearse y sean fáciles de usar, gestione cuidadosamente la visualización de acciones de filas. La cantidad y la frecuencia de estas acciones determinan si se muestran directamente en la tabla o si se colocan en un menú de desbordamiento. Utilice esta guía rápida para mantener un diseño de tabla despejado y fácil de usar:
Cuando hay una acción en la tabla
Muestre el rótulo completo en la tabla.
En esta tabla se muestra una sola acción con su rótulo completo para mayor claridad.
Cuando hay dos acciones en la tabla
- Si las dos se usan por igual, muestre ambas.
- Si una acción se usa mucho más y se necesita una interfaz de usuario con menos elementos, muestre la acción principal y mueva la otra acción al menú de desbordamiento.
En esta tabla se muestran 2 acciones porque ambas se usan por igual.
En esta tabla se muestra solo la acción principal, con la acción secundaria en el menú de desbordamiento para una interfaz con menos elementos.
Cuando hay tres o más acciones en la tabla
- Si hay una acción principal, muéstrela y mueva las otras acciones al menú de desbordamiento.
- Si se usan varias acciones con frecuencia, muestre las dos acciones más importantes y mueva el resto al menú de desbordamiento.
En esta tabla se destaca la acción principal y las acciones adicionales se encuentran en el menú de desbordamiento.
En esta tabla, se muestran las dos acciones más utilizadas, junto con otras en el menú de desbordamiento.
Características de la vista de tabla
Estado vacío y estado cargando
- Cuando no haya datos para mostrar o cuando las condiciones impidan que se muestren los datos, use el estado vacío para informar a los usuarios. El mensaje debe indicar claramente el problema y los medios para solucionarlo.
- Cuando se recuperen datos, utilice el estado cargando para informar a los usuarios. El mensaje debe comunicar con claridad que los datos se están cargando y explicar por qué el usuario está esperando.
- Los botones de acciones se pueden utilizar para activar la actualización de la página si fuera necesario.
Ejemplo de estado vacío de vista de tabla.
Ejemplo del estado cargando de una vista de tabla.
Capacidad de ser responsive
La vista de tabla se adapta por completo tanto a tablets como a dispositivos móviles. Las celdas se pueden eliminar, reordenar o combinar de una manera que sea útil para los usuarios. Para los casos de uso que dan prioridad a los dispositivos móviles, las vistas de tarjetas funcionan mejor que una pantalla pura responsive.
De izquierda a derecha: vista de tabla en dispositivos de factor de forma intermedio (tablets), vista de tabla en dispositivos de factor de forma pequeño (móviles) y vista de tarjetas para casos de uso que priorizan los dispositivos móviles.
Filtros de tabla
El filtrado proporciona los medios para manipular conjuntos de datos específicos. Se puede realizar mediante el panel de filtros, donde los encabezados de columna sirven como filtros. También hay un filtro de búsqueda, con el que los usuarios pueden reducir el conjunto de datos ingresando una palabra clave.
Configuración de tablas
La configuración de tablas ayuda a los usuarios a ocultar o mostrar columnas y reordenarlas según sus preferencias.
Totales en tablas
Los totales ayudan a los usuarios a comprender rápidamente la suma de datos importantes de una tabla. La forma de mostrar los totales depende de si la tabla tiene paginación y qué tipo de total se necesita. Para garantizar la claridad y la coherencia, utilice esta guía:
Cuando la tabla no tiene paginación (tabla de una sola página)
- Incluya una fila en la parte inferior de la tabla que muestre la suma total de las columnas de datos correspondientes.
- El rótulo para esta fila puede ser simplemente “Total”, ya que todos los datos están visibles.
Cuando la tabla tiene paginación
- Total solo para las filas visibles (por página): Use el rótulo “Total (por página)”. Esto es útil para comprender los datos página por página.
- Total para todos los datos (total global de todas las páginas): Utilice el rótulo “Total (todas las páginas)” para reflejar el conjunto de datos completo. Esto es útil cuando los usuarios necesitan un panorama general, no solo la página actual.
- Puede mostrar ambos si fuera necesario, simplemente rotúlelos con claridad.
En esta tabla se muestra el total de la página actual, con el rótulo “Total (por página)” para mayor claridad.
En esta tabla se muestra el total de todas las páginas, con el rótulo “Total (todas las páginas)” para proporcionar un resumen general.
Cuando los totales se calculan dinámicamente
- Si los totales se actualizan en función de filtros u ordenamiento, asegúrese de que el valor se actualice correctamente.
- Para conjuntos de datos grandes, muestre un componente cargador mientras se recalculan los totales.
Cuando se muestran varios totales en una tabla.
- Rotule los totales con claridad como “Total (por página)” o “Total (todas las páginas)”.
- Mantenga la alineación con la columna correspondiente.
- Si la tabla contiene más de un total, considere agrupar estos totales uno al lado del otro.
Los totales están rotulados con claridad y alineados, y varios totales están agrupados.
Cuando la tabla incluye acciones
La columna de acciones siempre debe estar en la posición más a la derecha.
La columna de acciones se ubica en el extremo derecho para mantener la coherencia.
Cuando la tabla incluye una fila con ajustes
Una fila de ajustes sirve para presentar de forma transparente las modificaciones o correcciones aplicadas a los valores originales. Su objetivo principal es proporcionar claridad sobre las diferencias entre los totales calculados originales y finales, lo que ayuda a los usuarios a identificar y comprender fácilmente los cambios o discrepancias que influyen en los resultados generales de los datos.
Una fila de ajustes resalta las modificaciones y aclara las diferencias entre los totales originales y finales.
Encabezado de columna persistente
Con esta opción, los encabezados de columna permanecen en su lugar mientras el usuario se desplaza verticalmente.
Filas expandibles
Las filas expandibles son útiles cuando solo se deben mostrar detalles mínimos y es importante mantener el contexto de la tabla en su conjunto. Por ejemplo, al comparar diferentes conjuntos de datos. La fila seleccionada se expande para mostrar la vista de detalles y se puede contraer si ya no es relevante.
Resultado de hacer clic en el ícono de expansión para ver más detalles en una fila.
Cambio de tamaño de columna
- El comportamiento predeterminado de las columnas es que se reducen para ajustarse al encabezado, excepto la última columna, que se expande para ocupar el resto del contenedor. Esto preserva la proximidad de la información para facilitar el análisis por parte del usuario.
- A medida que otras columnas aumentan, la última se encoge hasta que alcanza el ancho mínimo. Más allá de ese punto, la última columna se empuja más allá del área visible de la tabla y se invoca el desplazamiento horizontal.
- Una vez que se cambia el tamaño, el ancho de una columna se mantiene hasta que el usuario lo cambia o lo restablece a los valores predeterminados.
Mantenga presionado y mueva el indicador de arrastre para cambiar el tamaño de una columna.
Recursos
Descargue un archivo ZIP con los patrones más recientes de Jutro y comience a diseñar experiencias.