La inspiración para este artículo del blog vino del exitoso webinar “Designing IoT Dashboards to Amaze Your Customers”, presentado por Klaus Borges, Lead Front-end Developer, y David Hall, Customer Success Manager. El webinar atrajo a más de 100 espectadores y aportó ideas valiosas sobre cómo crear dashboards de IoT eficaces y visualmente atractivos. Dado su éxito, resumimos los puntos clave del webinar.
Punto de partida
Para nuestra experiencia de diseño de dashboards, recorreremos lo que consideraríamos un dashboard malo hasta llegar a uno que consideramos sobresaliente. Este primer dashboard que mostramos puede parecer suficientemente bueno si no piensas mucho en él.
Nuestro recorrido empieza con un diseño de dashboard que al principio puede parecer suficientemente bueno, pero que tiene varios problemas críticos cuando se mira de cerca. Este dashboard presenta todos los datos a la vez, lo que puede abrumar a los usuarios. Estos son los 6 problemas principales que detectamos:
-
Demasiados widgets: según nuestra experiencia, hemos ayudado con varios dashboards que tenían demasiados datos y demasiados widgets. Además de saturar la interfaz, lo que probablemente abrume a los usuarios, también puede convertirse en una mala experiencia al cargar datos, ya que los widgets se pueden ubicar en distintas “vistas”: diferentes dashboards, pestañas dentro de un dashboard o un cuadro de diálogo modal que se abre al hacer clic en un botón.
-
Falta de unidades de medida: los datos de temperatura no tenían unidades, lo que dejaba a los usuarios sin saber si los valores estaban en Celsius o Fahrenheit.
-
Tabla dinámica saturada: la Dynamic Table #1 mostraba datos apretados, lo que dificultaba su comprensión.
-
Alertas confusas: los widgets que muestran la cantidad de alertas no especifican la severidad de las alertas. Alguien puede acostumbrarse a eso en la interfaz, pero hacerlo explícito siempre es mejor en estos escenarios.
-
Títulos y etiquetas de widgets genéricos: los títulos y etiquetas de los widgets eran demasiado vagos y ofrecían poco contexto sobre los datos que representaban.
-
Subtítulos de gráfico ambiguos: los subtítulos del gráfico etiquetado como “Line #1” eran repetitivos y no daban información accionable.
Más contexto
Iniciamos las mejoras así:
-
Asignamos títulos y etiquetas claros y descriptivos a los widgets que especifican qué representan.
-
Añadimos unidades de medida de temperatura (por ejemplo, °C o °F).
-
Actualizamos la tabla Sensor Log para que tenga nombres de columna claros en lugar de la misma variable repetida una y otra vez (todo lo de la tabla se obtiene de los metadatos con Formulas).
-
Actualizamos la tabla Sensor Log para reemplazar las opciones (que pueden ser IDs no legibles) con etiquetas, lo que se puede hacer con campos Dropdown que recuperan opciones estáticas (definidas en el widget) u opciones dinámicas (almacenadas en registros de datos).
-
Revisamos los subtítulos del gráfico para indicar los niveles de severidad y su respectiva importancia. Por ejemplo, la severidad 1 se designó como el nivel más alto.
El dashboard todavía no luce genial, pero como estos pasos se pueden dar en cualquier orden, este es el que más beneficio aporta a la hora de reducir la frustración de los usuarios: puede verse soso y saturado, pero al menos leer el texto permite al usuario darle sentido a todo.
Mejoras visuales
Aunque la funcionalidad del dashboard mejoró, su atractivo visual necesitaba atención.
Ahora hemos coloreado todos los widgets, lo que a veces destaca como la tarea más importante, pero añadir más contexto fue más eficaz para eliminar cualquier posible fuente de confusión, algo bastante sencillo, ya que puedes personalizar los colores en un widget y copiar la mayoría de los colores muy rápido al resto de widgets del dashboard, e incorporamos iconos para hacer las alertas más distintivas visualmente.
Las columnas de niveles de severidad y de estado Seen ahora tienen iconos, que actúan como una representación visual rápida que no obliga al usuario a leer un montón de texto.
Aquí todos los colores están estandarizados, así que se reutilizan los mismos colores en todos los widgets. Si un color significa algo que requiere la atención del usuario, todo lo demás que requiera el mismo nivel de atención usará el mismo color.
El gráfico también se editó para que los colores de las líneas coincidan con el punto anterior.
Además, como la selección actual de Blueprint Devices es para la organización TagoIO, el logo de TagoIO ahora adorna el dashboard, indicando de forma destacada la organización o el edificio que representa.
Uso eficaz del espacio
A pesar de nuestras iteraciones anteriores, el dashboard todavía tiene margen de mejora para usar de forma eficaz el espacio disponible. Quedó menos saturado, pero aún podemos recortar la información a lo que es necesario para el dashboard.
Ten en cuenta que puedes usar otras pestañas en el mismo dashboard, otros dashboards e incluso cuadros de diálogo modales que se abren al hacer clic en un botón colocado en el dashboard (por ejemplo, el botón History para ver el gráfico).
Nos centramos en los datos más críticos, que en este escenario eran la temperatura y la humedad interiores, para optimizar el espacio. Quitamos la información del exterior y los contadores de alertas menos severas, reduciendo el ruido. Aunque esta información puede ser útil en una pestaña separada, no es esencial para el dashboard principal.
Si el usuario ve algo inútil en lugar de lo que necesita, se frustrará aunque pueda acostumbrarse. Si a ninguno de tus usuarios le importa cierta información del dashboard, esa información le quita espacio a cosas más importantes. Por eso, escuchar el feedback e iterar es muy importante para un diseño eficaz.
También ensanchamos la tabla para mejorar la legibilidad, algo posible porque movimos los gráficos a un cuadro de diálogo modal, ya que en este caso de uso es menos importante ver a primera vista cómo suben y bajan las alertas con el tiempo.
Al diseñar dashboards que sean un placer de usar, es importante averiguar cuáles son los datos más cruciales para estar en una “vista” (dashboard o pestaña) en lugar de simplemente meter todo ahí a ver qué pega.
Los usuarios pueden acostumbrarse a navegar por dashboards apretados y saturados, pero eso no significa que no vayan a sufrir mucha frustración, sobre todo si necesitan mirar los datos para tomar decisiones críticas con criterio.
Una experiencia de usuario excepcional
Crear una experiencia de usuario excepcional implica atención al detalle.
Reducimos el espacio entre widgets, lo que permite a los usuarios percibir la información relacionada como agrupada. Como ya mencionamos antes la mejora de las unidades, usamos Dynamic Formulas para que puedas hacer conversiones entre cualquier unidad que necesites. Hemos destacado las unidades de temperatura, pero puedes ofrecer una gran experiencia a tus usuarios permitiéndoles seleccionar las unidades según sus preferencias, algo muy importante en un contexto global.
Además, algunas cosas que no se muestran en este artículo del blog son mejoras a la experiencia de usuario. En cuanto a la localización, ofrecemos Dictionaries que son perfectos para que tu aplicación sea utilizable en varios idiomas.
Al diseñar los dashboards de esta presentación, se usó Dictionary en absolutamente cada widget, porque los idiomas se pueden agregar según se necesite más adelante.
En cuanto al gráfico, al hacer clic en el botón history del registro de alertas del sensor se revela, lo que garantiza que la información no crítica siga estando accesible sin saturar la vista principal. Otras funciones pueden mejorar aún más la experiencia, como usar Color and Icon Conditions para sacar el máximo provecho de los indicadores visuales y los colores.
Al usar tu plataforma, un diseño eficaz de dashboards va más allá del simple atractivo visual; se puede lograr cambiando los colores o usando transparencia e imágenes de fondo.
Hemos tomado el enfoque iterativo para resaltar que puedes dar estos pasos en pequeños incrementos, y cada uno puede elevar la experiencia de usuario de forma considerable.
Una vez más, este artículo del blog se inspiró en el webinar “Designing IoT Dashboards to Amaze your Customers”, donde Klaus Borges y David Hall compartieron ideas sobre el diseño de dashboards de IoT. Su experiencia, junto con el feedback de más de 100 espectadores, nos motivó a ofrecer este resumen. Si sigues estas pautas, podrás crear dashboards que presenten los datos de forma eficaz y ofrezcan una experiencia de usuario fluida y atractiva. Para más webinars como este, visita el canal de YouTube de TagoIO.
