#UX — Diseñando tablas complejas para móvil.
Las tablas, ese gran demonio del contenido en versión móvil. Una gran problema en la época actual donde el porcentaje de uso en el móvil es cada vez mayor, representar tablas correctamente en el móvil es cada vez más necesario.
Por eso cuando se enfrenta a un contenido abrumador, centrarse en el comportamiento del usuario puede ayudar a definir el enfoque de diseño.
Seamos claros, las aplicaciones empresariales son complejas. A menudo contienen grandes cantidades de datos (incluso de fuentes distintas), módulos y usuarios. Para trasladar toda esa información es común usar tablas.
Las tablas de datos bien diseñadas permiten a los usuarios leer, comparar y analizar la información para tomar medidas.
Sin embargo, la creación de una versión móvil de una tabla compleja basada en la web es un reto. Por eso os traemos un completo análisis de como se debería de trasladar una tabla en versión móvil.
¿Quien lo va a usar? User persona.
Antes de empezar no es lo mismo que la persona que va a usar la tabla e interactuar con ella sea un ingeniero, un comercial, un analista, un consultor, etc. Estos tendrán diferentes necesidades y usos. Para nuestro caso hemos usado el perfil de un consultor de riesgos laborales, como base donde crearemos nuestro ejemplo de tabla compleja.
Estos consultores comparan diferentes factores de riesgo a través de múltiples ubicaciones asignadas. Esta comparación les permite hacer recomendaciones a los propietarios sobre cómo mitigar los riesgos y así reducir sus primas de seguro. Utilizando su sistema de registro de riesgos basado en la web, pueden ver el historial de recomendaciones, subir fotos y añadir comentarios específicos de la ubicación de un sitio.
El consultor quiere que todas estas funcionalidades estuvieran disponible para sus consultores en el móvil, dada su jornada laboral y la necesidad de disponer de información de primera mano en las instalaciones del cliente.
Inicio: La tabla real
La tabla de datos contienen mucha información distribuidas en 20 filas y categorías de riesgo distribuidas en 8 columnas. Existe un sistema de puntuación de riesgo basado en el colores, un elemento crítico de la interfaz de usuario que los usuarios necesitaban para hacer comparaciones de riesgo.
En el escritorio, mostrar una tabla de este tamaño no es un problema. Con las pantallas de escritorio tan grandes, los usuarios tienen la libertad de leer de izquierda a derecha, de arriba hacia abajo, y aprovechar las opciones de filtrado y clasificación.
Pero en un contexto móvil, es importante recordar que la pantalla es muy limitada y la atención del usuario es corta, para que este diseño tenga éxito, el contenido viable debía presentarse lo antes posible.
Enfoque de diseño
¿Cómo consumen los usuarios esta información?
El primer paso es comprender cómo los consultores utilizaban e interactuan con estos datos en su forma nativa basada en la web. Fase de análisis de uso. Las diferentes formas en que los usuarios consumían los datos determinaron el diseño de su contraparte móvil. Se destacan dos escenarios principales.
Escenario 1
Comparación de un puntaje de una sola categoría de riesgo a través de múltiples ubicaciones (por ejemplo, escaneo vertical, específico de columna)
Escenario 2
Comparación de múltiples categorías de riesgo dentro de una sola ubicación (es decir, exploración horizontal, específica de fila)
Los usuarios no necesitan toda la información presentada a la vez para lograr su objetivo. Limitar la visualización de esta tabla atendiendo a estos dos casos de uso permite idear diferentes diseños apropiados para una versión móvil.
UI flexible FTW
Después de analizar los dos casos de uso, nos damos cuenta que el usuario necesitaría un identificador único y persistente para identificar la fila de la tabla. Estas serán las dos primeras columnas, “Clase” e “ID”.
Escenario 1
¿Qué categoría de riesgo (columna) desearía comparar el usuario?
Sólo después de identificar una categoría de riesgo objetivo (columna), el usuario podrá comparar verticalmente las distintas ubicaciones. Para facilitar esta comparación, podemos crear un desplegable virtual que contenga los encabezados de las columnas en la tabla. Seleccionando uno se actualizaría un valor de un solo color en cada fila de la tabla.
Podemos llamar a esta técnica “mesa giratoria” dado que las columnas se “rotan” activamente en el nivel superior.
Escenario 2.
¿Qué ubicación (fila) desea investigar en detalle el usuario?
Si el usuario quisiera ver todas las categorías de riesgo dentro de una sola ubicación, primero localizaría la fila deseada y luego la tocaría para ver el informe completo de la ubicación (es decir, todos los valores de columna en la fila de la tabla) en una página separada. Esta relación de lista-detalle, un patrón de diseño móvil establecido, encaja muy bien.
Nace un patrón de diseño móvil.
Esta relación de ver los datos horizontalmente dentro de una fila de la tabla y verticalmente dentro de una columna es la que tomamos como patrón de diseño.
“Tenemos que tener en cuenta que depende del producto, sector y usuario objetivo deberemos de adaptar y trasladar las tablas a la versión móvil.”
Este ha sido un ejemplo rápido de como plantear unas tablas complejas y con gran cantidad de datos a una versión móvil, analizando el caso de uso, y el usuario objetivo para que la tabla, funcionamiento y experiencia sea la idónea.
✅ Artículo basado en el de Joe Caron.
(Designing a complex table for mobile consumption (nom) gracias por dejarme hacer la traducción
¿Te ha gustado el post?
¡Dale claps! puedes darle hasta 50 veces al clap, y que mucha más gente encuentre y conozca este post, y claro… no te olvides de compartir.
¡Veamos esos aplausos! y para Joe Caron también :)
Otros artículos que pueden interesarte…
