5 pasos para un diseño de tablero efectivo

La visualización de datos siempre ha sido una habilidad clave para los diseñadores. Visualizamos cosas simples como cuánto hemos gastado en café esta semana o cuánto más cerca estamos de una meta de peso este mes. Las visualizaciones simples como estas se pueden insertar como gráficos para el contexto en otras pantallas, pero cuando los datos son más complejos, la pantalla a menudo se convierte en un tablero de instrumentos. Pero, ¿qué es exactamente (y quizás lo más importante no es) un tablero de instrumentos?

He escuchado algunas respuestas interesantes ... todo, desde "cualquier página con gráficos" hasta "una forma para que los usuarios construyan su propia interfaz de usuario". Ambos son un poco extremos, pero hay algunas definiciones buenas que flotan en Internet (así como más que algunas malas). Mi favorito personal proviene de Stephen Few , quien dice:

"Un tablero de instrumentos es una visualización de la información más importante necesaria para lograr uno o más objetivos; consolidado y organizado en una sola pantalla para que la información pueda ser monitoreada de un vistazo ".

¿Por qué esa definición? Porque, no solo captura que un tablero tiene una visualización de datos , sino también que esa visualización tiene un propósito o valor distinto . El error más común que veo que hacen los diseñadores al construir paneles es el deseo de comenzar con algo que se vea bien y llene un espacio, y luego tratar de superponer la funcionalidad. Comenzar con un hermoso tablero de instrumentos en Dribbble y esperar que llegue a una interfaz efectiva es una receta para el desastre (un desastre bonito, pero no obstante un desastre).

¿Por qué son importantes los paneles?

Utilizamos paneles para ayudar a los usuarios a evaluar rápidamente el estado y determinar qué se debe hacer en respuesta. La usabilidad de los paneles de control puede ser, literalmente, la diferencia entre una pequeña caída en la disponibilidad de un servicio y una interrupción total que afecta el resultado final de la empresa.

Durante los últimos cuatro años, he sido el líder de diseño para el software de operaciones en VMware, donde establecí la dirección de diseño para múltiples productos, incluidos vRealize Operations Manager , vRealize Log Insight y Wavefront by VMware . Cada uno incluye algún tipo de función de panel personalizado. Los diseñadores de mi equipo crean paneles que ayudan a los usuarios a superar las complejidades de los datos a gran escala y a menudo desorganizados. Los desarrolladores de software y los profesionales de TI utilizan estos productos para administrar y operar algunas de las aplicaciones más importantes del mundo, y para estos usuarios, el tiempo que lleva analizar datos no solo es importante, es fundamental.

5 pasos para un diseño de tablero efectivo

Si bien estoy seguro de que hay muchos métodos diferentes, los siguientes pasos reflejan cómo abordo típicamente un proyecto que ha identificado la necesidad de paneles. Estos pasos me han resultado útiles cuando diseño paneles en VMware, y espero que otros también los encuentren útiles.

1. Definir a las personas y su propósito.

Como diseñadores, sabemos que no diseñamos software para nosotros sino para nuestros usuarios. Y al igual que cualquier otra parte de una aplicación, los paneles deben centrarse en satisfacer las necesidades de los usuarios. Eso significa que primero debemos identificar para quién es el tablero.

Para usar la metáfora de origen, el tablero de un automóvil se basa en las cosas que el conductor necesita. Si estaba construyendo para el pasajero, cosas como las RPM del motor pueden no importar mucho, pero qué estación está en la radio se vuelve crítica. Se trata de lo que es importante para ese usuario en particular. En segundo lugar, necesitamos saber cuál es su propósito en este contexto. ¿Son el conductor tratando de llevar el automóvil del punto A al punto B, o son el pasajero tratando de seleccionar las canciones correctas para un viaje por carretera? Cada decisión de diseño es una elección, por lo que comprender los objetivos del usuario objetivo principal lo ayudará a tomar decisiones.

2. Elija el tipo correcto de tablero

Hasta ahora, me he referido a los tableros de manera genérica, pero en realidad los tableros vienen en muchas formas y tamaños. Desde mi experiencia, he encontrado útil clasificarlos en tres tipos principales:

• Monitorear paneles
• Paneles analíticos interactivos
• Paneles de navegación

Monitorear paneles

Los paneles de monitoreo son el estilo más tradicional de tablero. Es probable que la mayoría de la gente piense cuando se le pide por primera vez que defina uno y, de nuevo, evoque imágenes del tablero de un automóvil. Ese es un buen ejemplo de un panel de monitoreo porque muestra información que debe ser constantemente visible para el usuario y está disponible de un vistazo. También asume que las acciones potenciales provocadas por la información se toman en otro lugar. Por ejemplo, si la velocidad mostrada está por encima del límite, es posible que desee soltar el acelerador y, si está demasiado avanzado, puede presionar el freno. Un ejemplo común que vemos de esto en el software VMware es para paneles que se muestran en un gran monitor compartido en un centro de operaciones. Se puede esperar que muchas personas vean el tablero, pero nadie interactúa directamente con él.

Paneles analíticos interactivos

Los tableros analíticos interactivos se han vuelto más comunes en los últimos años, donde su propósito no es mostrar de manera inmediata una pepita de información, sino brindar a los usuarios herramientas en forma de visualizaciones de datos, para que puedan exponer la información que necesitan. Esto generalmente se logra conectando gráficos a través de filtros y selección comunes.

Paneles de navegación

Los paneles de navegación actúan como una especie de "tabla de contenido" en un modelo de navegación de cubo y radio, donde una página central conduce a páginas de detalles. Lo que lo hace diferente es que cada estadística representa un elemento más amplio. El valor diferencia los elementos, lo que deja en claro al usuario con qué interactuar para obtener más información.

Estas definiciones no son tipos de paneles fijos o aislados. A menudo hay paneles que exponen múltiples rasgos. Un patrón común que veo es tener un panel de monitoreo que se comparte en un monitor y en todo un equipo. Los elementos supervisados son de navegación y permiten que los miembros del equipo desglosen en un panel separado con detalles más específicos sobre ese elemento. En ese caso, es tanto un panel de control como un panel de navegación.

3. Muestra los datos correctos de la manera correcta

Granularidad de datos

Una vez que conoce al usuario, su propósito y el tipo de panel, es hora de convertir esa información en una o más preguntas simples. Aquí es donde el usuario encontrará el verdadero valor del tablero. Si la pregunta es demasiado amplia, es posible que no pueda responderla, o necesitará muchos datos para responderla con algún tipo de precisión. Por otro lado, si la pregunta es demasiado estrecha, es poco probable que pueda abordar el propósito más amplio del usuario. Encontrar las preguntas correctas para responder es el arte del diseño del tablero. Como la mayoría del trabajo de diseño, realmente comienza con la investigación. Encontrar la pregunta correcta puede ser tan simple como sondear un número de usuarios representativos, o puede requerir algunas conversaciones más profundas y una investigación contextual. Solo cuando conozca las preguntas en la cabeza de su usuario sabrá si realmente tiene los datos para responderlas correctamente.

Para comprender mejor los objetivos del usuario, alentamos a los diseñadores a contar la historia del usuario y visualizar cómo fluye la historia a través del software. Parte de una historia puede ver que el usuario necesita responder una pregunta. Si el producto puede ayudar a responder la pregunta, un tablero puede ser el mejor mecanismo, pero el producto debe tener los datos correctos para que la respuesta sea útil.

Si descubres que tienes los datos, ¡genial! Si no lo hace, debe ver si puede obtener los datos (a veces fusionando los datos que tiene) o si puede modificar cuidadosamente la pregunta a algo que pueda responderse con los datos disponibles.

El escollo clásico en esta etapa es dejar que los datos que tiene dicten el contenido del tablero que está creando. El hecho de que una API exponga 20 métricas únicas no significa que deba mostrar 20 gráficos. ¡Aboga por el usuario, no por los datos!

Tiempo y comparación

Los datos cambian con el tiempo, por eso es interesante. El hecho de que cambie proporciona el primer tipo de comparación, que es visualizar ese cambio con el tiempo.

Suponiendo que un cambio de hora es interesante, debemos considerar el mecanismo de visualización correcto: ¿Cómo se relaciona con el tiempo? ¿Es el estado actual lo único que importa? Entonces, tal vez una estadística única o un indicador sea la forma correcta de mostrarlo. ¿Importan las tendencias pasadas? Luego, puede considerar emparejar esa estadística única con una línea de chispa simple para mostrar la tendencia. ¿Es una línea de chispa suficiente fidelidad, o necesita ver valores exactos en momentos exactos? Si es así, un gráfico lineal detallado con etiquetas de eje claras puede ser lo mejor.

Pero el tiempo no es el único tipo de comparación. A veces es tan importante comparar múltiples fuentes entre sí. Si es así, la respuesta correcta puede ser tan simple como dos estadísticas individuales una al lado de la otra. Pero, ¿y si son más de dos fuentes? ¿Es importante comparar los valores entre sí utilizando un gráfico de barras o columnas, o más importante comparar el valor con un gráfico circular? ¿Y qué pasa si comparar con otras fuentes y comparar con el tiempo son importantes? En ese caso, es posible que recurra a un gráfico de área apilada.

4. Organizar de forma lógica y progresiva.

En la mayoría de los casos, está respondiendo múltiples preguntas usando múltiples pantallas, entonces, ¿cómo deben presentarse en el tablero? Volviendo a las preguntas que identificó, a menudo pueden formar una jerarquía. Imagine que está diseñando un tablero para entrenadores personales para rastrear el progreso de sus clientes. La primera pregunta podría ser comprender si el cliente ha alcanzado su objetivo mensual. Si la respuesta es 'no', entonces el entrenador querría saber si esto fue una progresión constante en la dirección equivocada o un 'bache' en la tendencia que refleja el "día de trampa" del cliente. Al organizar sus preguntas, puede agrupar lógicamente los widgets para responder mejor las preguntas.

Al organizar gráficos, considere:

• dirección de lectura natural de los usuarios objetivo (¿de izquierda a derecha o de izquierda a derecha?)
• tamaño de pantalla (¿monitor 4K o pequeño iPhone 6se? Si es ambos, prepárese con una respuesta para la capacidad de respuesta).
• alineación de tiempo (múltiples gráficos que muestran el mismo rango de tiempo son más fáciles de correlacionar si están apilados verticalmente)

Entonces, ahora tiene un tablero lleno de cuadros y widgets ordenados lógicamente que responden todas las preguntas que prevé que haga el usuario, pero ajustar eso en una sola pantalla es difícil y el desplazamiento derrota la visibilidad de un tablero. ¿Qué hacer? Nuevamente, aquí es donde ayuda la estructura de preguntas. Si ha identificado la pregunta principal, comience por identificar qué se requiere para responderla. Esa es su pantalla de tablero predeterminada. A los desarrolladores front-end también les gustará que no les pidas que muestren tantos gráficos inicialmente.

Para esas preguntas secundarias y posteriores, puede divulgarlas progresivamente, ya sea colapsando en el tablero de manera predeterminada o moviéndolas a su propio tablero de navegación navegable. Si usa el método del tablero secundario, asegúrese de hacer que la navegación sea clara y accesible. Los desarrolladores a menudo dictarán si esta es una opción, pero serán conscientes de las compensaciones para cada uno:

• Navegar parece fácil, pero mantener el contexto a menudo puede ser difícil.
• Colapsar también parece fácil, pero sobrecargar la página puede estresar tanto al usuario como al sistema que representa el tablero.

En casos excepcionales, es posible que el usuario para el que está abogando solo tenga una sola pregunta, y solo tiene que mostrar esa respuesta. Si es así, esta sección no es realmente necesaria, pero puedo contar el número de instancias donde he visto esto por un lado.

5. Mejorar con estilo

Ahora tiene uno o más paneles llenos de pantallas de gráficos que los usuarios pueden interpretar para responder preguntas importantes. Algunos podrían llamarlo adecuado y listo, pero como diseñadores, nos esforzamos por lograrlo no solo para que los usuarios puedan interpretar los datos, sino para que puedan hacerlo de manera fácil e incluso deliciosa. El uso de colores y fuentes puede extender un tablero de control de ser funcional a ser realmente utilizable.

Colores

Anteriormente, se consideraba la comparación, y una de las cosas más comunes para comparar en todos los gráficos es la fuente de datos. Es importante que los datos en varios gráficos (incluso diferentes tipos de gráficos) representen las mismas fuentes de la misma manera, especialmente con respecto al color.

Además, tenga en cuenta cómo se pueden interpretar los colores. Por ejemplo, muchos usuarios interpretarían los cuadros rojos como errores o los cuadros verdes como normales y saludables. Rojo y verde también presentan otra consideración: accesibilidad. El daltonismo rojo-verde (deuteranopia y deuteranomalía) afecta hasta el 7% de la población masculina, por lo que es importante utilizar herramientas de simulación para validar que sus gráficos sean distinguibles.

Fuentes

Elegir la fuente correcta para una interfaz es bastante difícil por sí solo, pero los gráficos presentan sus propios desafíos específicos. Los gráficos muestran texto en tamaños significativamente más pequeños que la mayoría del texto del cuerpo, por lo que es clave encontrar una fuente legible en tamaños pequeños. Además, las fuentes para los gráficos se usan para valores numéricos con mucha más frecuencia que otras partes de la interfaz, por lo tanto, considere cuidadosamente cómo se representan los números. Por ejemplo, muchas fuentes agregan una barra o un punto a los ceros para diferenciarse de la letra 'O', pero en tamaños pequeños, pueden comenzar a parecerse al número '8'.

---

La visualización de datos es un desafío clave para los diseñadores y la capacidad de diseñar efectivamente tableros es una herramienta valiosa para tener en su cinturón de herramientas. Como con cualquier oficio, es importante no solo tener la herramienta adecuada, sino también saber cómo usarla de manera efectiva. Si bien se necesita una habilidad especial para hacer una hermosa tabla o gráfico, se requiere pensar y planificar para hacer un tablero que resuelva los problemas del usuario y lo haga con deleite.