Diseño moderno de interfaz de usuario empresarial - Parte 1: Tablas

Pensamientos, patrones y soluciones.

Diseñar para la empresa es difícil. ¿Por qué? Porque, en términos generales, el software empresarial es complicado. Tiene grandes cantidades de datos para mostrar, IU configurables por el usuario, flujos de trabajo complejos, tareas automatizadas y mucho más. Diseñar para todas estas cosas puede ser un desafío .

Como resultado, algunas aplicaciones empresariales ofrecen una experiencia de usuario deficiente y terminan pareciendo un poco aburridas.

Aplicación empresarial típica

En una serie de publicaciones, voy a desglosar algunos patrones, problemas y posibles soluciones de interfaz de usuario de aplicaciones empresariales comunes.

Vale la pena señalar que no hay una talla única para todos. Los patrones y las soluciones que se mencionan a continuación son cosas que he encontrado que funcionan, a través de iteraciones, comentarios de los usuarios y pruebas. Las soluciones, por supuesto, deben adaptarse a su aplicación y, lo que es más importante, a sus usuarios. No hay nada mejor que hablar con sus usuarios y verlos usar su software.

Comencemos con las tablas.

Las aplicaciones empresariales tienen que lidiar con grandes cantidades de datos y, dado que no hay una mejor manera de mostrar una cantidad significativa de datos (todavía) que una Tabla, comencemos allí.

Arriba hay un ejemplo típico de una tabla en una aplicación empresarial. Encantador no lo es. Exploremos cómo podemos mejorar la experiencia de tablas complejas y qué debemos tener en cuenta al hacerlo.

Estas son algunas preguntas que debemos tener en cuenta al diseñar y construir una tabla de datos:

  • ¿Qué dispositivos se usarán para ver la tabla?
  • ¿Tenemos control sobre los datos que se mostrarán o es configurable por el usuario?
  • ¿Cómo podemos ayudar a escanear rápidamente los datos de la tabla? - Si la tabla contendrá muchos datos, ¿cómo podemos facilitar que los usuarios encuentren los datos que necesitan?
  • ¿Las filas tendrán acciones compartidas, como editar o eliminar?
  • ¿Podrían las celdas de la tabla contener muchos datos, direcciones o incluso párrafos de texto?

Sobre todo, recuerde hablar con sus usuarios, averiguar cómo utilizarán la tabla y los datos que presentará.

Nota: Para el resto de esta publicación, voy a suponer que estamos trabajando en una aplicación basada en la web, aunque la mayoría de los puntos a continuación se aplican a cualquier aplicación empresarial, independientemente de la plataforma.

Lo básico primero

Comenzaremos con una tabla básica sin estilo que muestra detalles ficticios del cliente:

Mesa sin estilo

Primero, agreguemos algunos estilos básicos que proporcionan una separación clara de las filas, ayudan a la legibilidad y eliminan algunos de los estilos predeterminados del navegador.

Mesa de estilo

No hace falta decir que la tabla debe ser accesible para todos los usuarios. El uso del marcado semántico adecuado es imprescindible para que los usuarios de lectores de pantalla puedan navegar a través de la tabla celda por celda, escuchando los encabezados de columna y fila que se les hablan. Los encabezados de columna deben ser descriptivos y relevantes. Los estilos de tabla deben cumplir con las pautas de contraste de WCAG 2 AA (o incluso AAA dependiendo del nivel de cumplimiento necesario).

Tablas receptivas

Los usuarios podrían estar viendo nuestra aplicación en cualquier dispositivo, por lo que debemos asegurarnos de que nuestra tabla sea utilizable, ya sea que se muestre en dispositivos móviles, tabletas o computadoras de escritorio.

Nuestra mesa a 375px x 667px (iPhone 7)

Por el momento, nuestra mesa no responde, por lo que no se verá bien en dispositivos con pantallas más pequeñas. El diseño de la tabla receptiva es un gran tema que está fuera del alcance de esta publicación. Entonces, por ahora, veamos dos enfoques comunes:

Columnas colapsadas

Las columnas que desbordan el ancho de la pantalla están ocultas

Con este patrón, se ocultan las columnas que no caben en la pantalla. Pueden ser activados por el usuario para mostrar los datos ocultos. Podría ir un paso más allá definiendo qué columnas deberían tener prioridad en diferentes anchos de ventana gráfica, asegurando que las columnas críticas aún sean visibles en pantallas más pequeñas.

Tablas de desplazamiento horizontal

Mesa de desplazamiento horizontal

¿Quizás los usuarios necesitan comparar varias filas rápidamente sin tener que saltar expandiendo cosas? Un patrón común es permitir que la tabla se desplace horizontalmente en pantallas más pequeñas, eliminando la necesidad de columnas ocultas. Considere usar ambos patrones y brinde una opción para cambiar entre los dos.

Manejo de muchos datos

Por el momento, nuestra tabla se ve bien pero tiene algunos problemas de usabilidad. Imaginemos que tenemos 10,000 filas, encontrar un registro en particular podría ser un desafío.

Paginación

Paginación en acción

Al agregar paginación, podemos limitar el número de filas por página, lo que hace que los datos sean un poco más fáciles de digerir. Arriba estamos usando diez filas por página.

La paginación tiene muchos beneficios. Facilita a los usuarios la búsqueda manual en la lista, les da una sensación de control (a diferencia del desplazamiento infinito) y les permite a los usuarios mantener una nota mental de la ubicación de las filas. Al usar la paginación, deberíamos permitir al usuario elegir la cantidad de elementos por página (idealmente guardando su elección para el futuro) y también mostrar la cantidad total de elementos en la lista y cuántos están a la vista.

Paginación definible por el usuario

Permitir que el usuario cambie la cantidad de elementos por "página" puede facilitar la tarea de comparar varias filas que pueden abarcar 1 o más páginas.

También vale la pena considerar en qué cantidad de datos necesitará paginar la tabla. Por ejemplo, si paginamos a 10 elementos por página, pero solo hay 11 elementos, entonces un usuario debería hacer clic en Siguiente para ver la fila final. ¿Por qué no verifica programáticamente si hay, digamos más de 20 y si es así habilita la paginación?

Carga lenta

Cargando más filas bajo demanda

Otro patrón común, ya sea mediante un botón "cargar más" debajo de la tabla o cargando datos adicionales cuando el usuario se desplaza hacia la parte inferior de la tabla. Recomiendo la paginación sobre esto, principalmente por los beneficios enumerados anteriormente. El desplazamiento infinito elimina algunos aspectos del control del usuario (¿Cuándo terminarán los datos? ¿Cuántos registros he visto?). Es más adecuado para aplicaciones que se centran en usuarios que consumen un flujo de datos en lugar de una lista de datos donde se necesita más control del usuario.

Buscando en la mesa

Búsqueda en vivo de datos de tabla

Otra solución sería filtrar los datos de la tabla por criterios de búsqueda específicos.

Ordenar por columnas

Ordenar por columna

Ordenar datos por columnas permite a los usuarios agrupar datos similares por valores de columna.

Estos patrones funcionan muy bien en conjunto, filtrando la tabla para mostrar datos relevantes, buscando resultados de grano fino y luego clasificando los resultados por valor.

Proporcionar un resumen de datos

Un resumen visual proporciona una visión general de la tabla adjunta.

Agregar un resumen visual sobre la tabla puede ayudar al usuario a analizar rápidamente los datos.

Diseñando para lo desconocido

En muchas aplicaciones, es completamente posible que la estructura de la tabla y sus datos sean definidos por el usuario, por lo que es posible que no sepa qué datos llenarán la tabla. Una mesa bien diseñada debe acomodarse para esto. Por lo general, esto presenta un par de desafíos adicionales.

¿Podría la tabla contener URL o párrafos de texto muy largos (datos de dirección, mensajes enviados por el usuario, valores de campo de formulario)? Tenemos un par de opciones aquí:

Truncar texto largo

¿El usuario necesita ver todo el texto potencialmente largo para cada fila al mismo tiempo? No es agradable. Una solución sería truncar el texto a una longitud que sea lo suficientemente útil como para dar al usuario una visión general de los datos y proporcionar un método para ver más, ya sea mediante el enlace a otra página, mostrando más contenido dentro de un modal o de alguna otra manera (nosotros Tocaré esto más tarde).

Envuelva cuerdas largas

Las URL largas pueden potencialmente romper el diseño de una tabla receptiva. Debemos asegurarnos de que los enlaces (o cadenas largas e ininterrumpidas) dentro de una celda de tabla se rompan correctamente para no romper el diseño de la tabla.

Acciones de fila

Las acciones de fila comunes deben agruparse. Si es posible realizar estas acciones en varias filas al mismo tiempo, entonces la acción debe eliminarse y agregarse como una opción en otra parte de la página (cerca de la tabla). Por supuesto, necesitaremos una forma de seleccionar varias filas.

Realización de acciones en varias filas a la vez.

Acciones de mesa

Las acciones comunes de la mesa incluyen:

Imprimir datos de la tabla

Permita que el usuario imprima solo la tabla y no la IU circundante. Utilice los estilos específicos de impresión para optimizar el estilo de la tabla para la impresión. Elimine la paginación al imprimir para asegurarse de que se impriman todos los datos de la tabla.

Descargar datos de la tabla

Casi todos los usuarios avanzados querrán descargar los datos de la tabla en un formato estándar (CSV, JSON, etc.) para permitir la manipulación de datos en otro software. Si es probable que el tamaño del archivo sea grande, considere usar un archivo zip. Si el archivo no está disponible al instante, informe al usuario y envíelo por correo electrónico cuando esté listo para descargar.

Menú que proporciona acciones a nivel de tabla

En este ejemplo, hemos utilizado un menú desplegable de "acciones" sobre la tabla para permitir acciones específicas de la tabla

Ver datos de fila adicionales

Dependiendo del caso de uso, un usuario puede necesitar acceder rápidamente a información adicional sobre cada fila mientras permanece en contexto. Esto se puede lograr de varias maneras.

Modalidades

Ver datos de fila adicionales en un modal

Los modos permiten al usuario permanecer en la misma página que la tabla, pero le dan mayor atención a la información adicional y a las acciones que se pueden realizar.

Panel de detalles

Ver datos de filas adicionales en un panel

Dependiendo de la situación, es posible que un modal no sea la solución ideal si necesita mantener visibles los datos debajo del modal. Un panel de detalles que se desliza en la página podría ser una mejor solución cuando se mantiene en contexto y necesita mantener visibles los datos en la tabla.

Pensamientos finales

A menudo hay más en la humilde mesa de lo que parece. Con suerte, algunos de los puntos mencionados anteriormente lo ayudarán la próxima vez que venga a diseñar una tabla.

La interfaz de usuario anterior se construyó con el sistema de diseño Pulsar que ofrece la mayor parte de esta funcionalidad a la plataforma Jadu Continuum.

Actualización: ¡la Parte 2 que analiza los cuadros de diálogo modales ya está disponible!