Blog

Claves del diseño UX para visualización de datos en la industria

Sandra Domínguez López

En la actualidad el sector industrial está inmerso en pleno proceso de transformación digital en el que los datos (big data) se han convertido en una herramienta esencial del día a día.

En este contexto, la información generada a partir de esos datos y la ciencia, mediante técnicas como la analítica avanzada, los modelos de datos, los algoritmos de predicción, etc., están influyendo directamente en el diseño de las interfaces de las aplicaciones industriales y en la apuesta de las empresas del sector por el desarrollo de soluciones innovadoras basadas en la nube.

Esta evolución es parte de la cuarta revolución industrial que se fundamenta en la transformación de la industria mediante la digitalización, la integración de todos los procesos industriales que conforman la cadena de valor, proporcionando acceso en tiempo real a los datos, y la interconexión de sistemas y dispositivos.

Esta revolución da pie, al mismo tiempo, a la aparición de nuevas tecnologías como la robótica, la analítica, la inteligencia artificial, las tecnologías cognitivas, la nanotecnología y el Internet de las cosas (IoT).

 

Visualización de datos en la industria, definir el contexto

En este entorno disruptivo y de cambio continuo impulsado por la tecnología y el acceso a la información, cada vez son más las empresas que empiezan a adoptar esas nuevas tecnologías, lo que supone un desafío para crear productos a medida para los usuarios finales que van a interactuar con los datos.

A la hora de diseñar una visualización de datos es fundamental pensar en qué contexto vamos a trabajar, es decir, definir el target de usuarios, qué objetivo queremos conseguir, cuál es la expectativa del usuario, cómo transmitir la información de manera clara y simple…

Estas preguntas nos dan una visión general para ubicar al diseñador en el contexto sobre el que se comienza a trabajar en la solución de visualización.

Es importante centrase en el objetivo principal del diseño a la hora de plantear un contexto, si la visualización no soluciona la necesidad del usuario, significa que no estamos agregando valor a la visualización.

Al diseñar cada contexto es necesario involucrar a varias personas en el proceso, además de stakeholders y del equipo de desarrollo, es esencial contar con usuarios que en el futuro utilizarán el diseño propuesto.

Una vez establecidos los contextos, el proceso de diseño se inicia con una hipótesis, donde se plantean las posibilidades y limitaciones, y después de las iteraciones necesarias se genera el resultado de la visualización.

 

Definir visuales

Durante el proceso de diseño debemos tener en cuenta, por un lado, que la experiencia de usuario está sujeta a tendencias y nuevas tecnologías, y por otro, que las personas interpretan la información según sus experiencias pasadas, por lo que es necesario encontrar un equilibrio sin que sea necesario reinventar los sistemas de visualización en cada proyecto.

En este sentido, contamos con algunos principios básicos que permanecen y que ayudan a los diseñadores a analizar y resolver problemas de visualización a través de una metodología consistente y enfocada al usuario final.

Veamos algunos ejemplos de cómo se pueden solucionar diferentes problemas que comúnmente nos encontramos en la mayoría de las soluciones diseñadas para el sector industrial.

 

Visualización por tablas

Ejemplo de visualización de datos en formato tabla.

- Normalmente son utilizadas para representar información de alarmas/eventos o dispositivos del sistema.

- Facilitan la visualización del usuario y se adapta a sus necesidades, el usuario puede filtrar el contenido de la tabla y así limitar la cantidad de información.

Diferentes tipos de filtros que se pueden aplicar a las columnas de una tabla.
Diferentes tipos de filtros que se pueden aplicar a las columnas de una tabla.

- El usuario puede seleccionar qué columnas ver según el tipo de información que se está mostrando.

- Puede descargar el contenido en un archivo Excel para tratar la información en el futuro.

 

Tarjetas

Diseñadas en diferentes variantes, nos permiten visualizar el estado de una localización dentro de la empresa, cada tarjeta recoge el nombre de la localización, cuál es su estado, cuántas alarmas hay activas en ese momento, etc.

Ejemplo de visualización de datos en formato tarjeta.
Ejemplo de visualización de datos en formato tarjeta.

Otra variante de tarjeta, recopilar bajo un elemento de diseño la información de un elemento del sistema.

Ejemplo de visualización de información de un elemento de sistema en formato tarjeta.
Ejemplo de visualización de información de un elemento de sistema en formato tarjeta.

 

Dashboard

Creados para lograr que el usuario acceda de forma sencilla a la información más relevante, como pueden ser los KPIs.  

Se trata de una pantalla que ofrece una visión general de los objetivos que quiere conseguir el usuario y permite comprobar en tiempo real el estado del sistema.

Ejemplo de visualización de datos en una pantalla tipo Dashboard.
Ejemplo de visualización de datos en una pantalla tipo Dashboard.

 

Menú de navegación y breadcrumbs

Relacionado directamente con la arquitectura de la información, su objetivo es organizar la información de manera fácil de entender e intuitiva para los usuarios.

Es necesario comprender qué contenido existe, cómo organizarlo, qué relación tiene, etc. de manera que tenga sentido para las personas que naveguen por él.

Ejemplo de un menú de navegación lateral.
Ejemplo de un menú de navegación lateral.

Las migas de pan o breadcrumbs, indican al usuario en qué pantalla se encuentra y muestra la dirección hacia las principales categorías.

La ruta de navegación ofrece enlaces a cada uno de los diferentes niveles jerárquicos, permitiendo que los usuarios entiendan la estructura del sitio y puedan navegar en ella fácilmente.

Ejemplo de línea de migas de pan (Breadcrumbs).
Ejemplo de línea de migas de pan (Breadcrumbs).

Texto
Sandra Domínguez López
Edición de texto
Marisa Perdices Castillo
Edición de imagen
Lorena Heredia Avinent
Diseño UX/UI
Industria
Big data
Visualización de datos
¿Te ha gustado?
Compártelo en redes sociales
Suscríbete a
nuestra newsletter

Mantente al día de todas las novedades Mytra: proyectos, eventos, noticias…