Principales ejemplos de visualización de datos y diseños de paneles

La visualización de datos y el diseño de tableros son tanto arte como ciencia y no son tan fáciles de crear como pueden parecer al principio. ¿Cómo los mejores diseñadores de UX y diseñadores visuales ilustran información compleja sin confundir a los usuarios?

De tres maneras: una mejor comprensión de los principios de UX detrás del buen diseño del tablero, la aplicación de la excelencia gráfica y la práctica.

El diseño del tablero de UX sigue principios específicos y mejores prácticas. La excelencia gráfica, por otro lado, requiere un examen más completo.

La excelencia gráfica se define como:

• Una presentación bien diseñada y eficiente de datos interesantes.
• Ideas complejas comunicadas con eficiencia, claridad y precisión.
• Brindar al espectador la mayor cantidad de ideas que requieran la menor cantidad de tiempo dentro de un espacio pequeño y utilizando la menor cantidad de tinta.
• Decir la verdad sobre los datos.

Un excelente recurso para una mejor comprensión de la excelencia gráfica es el trabajo de Edward Tufte. Se le considera “El Leonardo da Vinci de los datos” y cuenta con un gran número de trabajos, libros y conferencias publicados. David McCandless, quien fundó information is beautiful, un sitio web que representa lo mejor en visualización de datos y excelencia gráfica, es otro excelente recurso.

Los principios del diseño ejemplar de UX y la excelencia gráfica se aplican tanto al diseño del tablero como a las visualizaciones de datos. Estos son algunos de los mejores ejemplos de visualización de datos y diseño de paneles.

Principales visualizaciones de datos

Marcha de 1812 de Napoleón

La visualización de Minard de la marcha de Napoleón de 1812 se considera uno de los "mejores dibujos estadísticos jamás creados": crear una visualización con tanta información como Minard ha hecho hubiera sido imposible si no fuera por la aplicación de la excelencia gráfica.

Esta única visualización muestra el número de tropas de Napoleón por ubicación, la temperatura experimentada por las tropas y el camino que tomaron las tropas hacia y desde Moscú.

Mapa del cólera de John Snow

Gráfico de John Snow de 1854 que muestra la ubicación de los 13 pozos públicos de Londres y las 578 muertes por cólera usando barras apiladas perpendiculares a su ubicación: es fácil de entender, revela la verdad en los datos y le brinda al usuario toda la información que necesita para dibujar una correcta conclusión sobre las muertes por cólera.

Historia de la música rock

Representando solo una fracción de toda la visualización de datos, el siguiente gráfico muestra una porción de más de 30 estilos de música de más de 700 artistas durante el período de 1955 a 1978.

No solo representa artistas y estilos, sino que muestra influencias, el volumen de ventas de discos, categorías estilísticas y dónde terminaron o continuaron. Lograr este tipo de excelencia gráfica no es poca cosa.

Donde la población de Europa está creciendo y disminuyendo

Una visualización de datos superior que muestra cómo manejar una inmensa cantidad de datos de una manera sencilla, bien diseñada y veraz. También hay filtros incluidos en la versión interactiva que permiten una exploración aún mayor de los datos, como las tasas de natalidad.

Rutinas diarias de personajes famosos icónicos

Esta visualización de datos no solo es interesante, es un ejemplo clásico de excelencia gráfica. En un solo gráfico, podemos ver una descripción detallada de los hábitos diarios, los rituales, las actividades y las prioridades de personajes famosos icónicos.

Usando un gráfico simple codificado por colores, esta visualización es fácil de entender, simple, efectiva y, sobre todo, informativa.

Gráfico de idiomas del mundo

Esta clásica visualización de datos muestra la cantidad de idiomas que existen en el planeta, dónde se hablan y quién los habla en varios lugares del mundo.

Sin un alto nivel de excelencia gráfica, sería difícil mostrar tantos datos de una manera tan elegante que también sea informativa y fácil de entender.

Los mejores diseños de paneles

Para que un tablero se considere superior, debe cumplir con un conjunto de criterios específicos de UX:

• Convenciones de nomenclatura claras y consistentes
• El flujo y el diseño de los datos priorizados
• Los márgenes son apropiados para la legibilidad.
• Los datos no están ocultos ni sobrecargados
• Comprensible y fácil de leer.

Panel de KPI de marketing

El siguiente ejemplo es un excelente ejemplo de cómo hacer que la información comercial compleja sea fácil de entender. El esquema de color sobrio es agradable y el uso de tarjetas separadas es agradable a la vista.

Una de las razones por las que este tablero tiene un excelente diseño es su relación de tinta de datos. Los datos y el espacio se complementan. En lugar de llenar la pantalla con más gráficos, se utilizan tarjetas separadas con pequeñas pestañas. Esta es una forma ingeniosa de mantener la información crítica disponible (es decir, sin ocultarla) mientras le brinda al usuario una manera fácil e instructiva de verla en sus propios términos.

Tablero de rayas

El tablero de Stripe es un excelente ejemplo de las mejores prácticas de diseño de tableros. Es simple, responde a las preguntas más pertinentes de los usuarios y tiene márgenes casi perfectos dentro de cada tarjeta.

Tablero de Telemedicina

Los análisis de telemedicina son conocidos por entregar una gran cantidad de datos sin procesar. Organizar esos datos en un tablero significativo e informativo puede ser un desafío. Este ejemplo utiliza las mejores prácticas de UX de diseño de tableros. Los márgenes se duplican, la información se presenta con preguntas y respuestas y los datos no se ocultan a la vista.

Tablero de acciones

Las acciones pueden ser difíciles de conceptualizar en un solo tablero debido a la cantidad de puntos de datos que compiten por el espacio. Este ejemplo de diseño de tablero ha logrado lograr una apariencia limpia y minimalista con toda la información pertinente al frente y al centro.

Panel de audiencia web

Google Analytics hace un gran trabajo con sus paneles; sin embargo, puede requerir mucha personalización para lograr un objetivo específico. Este tablero ha llevado el análisis a un nuevo nivel al ofrecer una vista que es simple, fácil de entender, fácil de leer y útil, sin aumentar la carga cognitiva.

Tablero de Gestión de Documentación

Administrar documentos es difícil, pero mantenerlos organizados y fáciles de navegar puede ser aún más difícil. Una excelente solución es este tablero que mantiene las cosas simples, comprensibles y sorprendentemente escasas.

Incluso con un enfoque minimalista, este excelente ejemplo de diseño de tablero le brinda al usuario todo lo que necesita para comprender y navegar por el sistema de documentos.

Aplicación de tiempo de siembra de plantas: tablero móvil

Este tablero móvil es informativo y fácil de entender. Las migas de pan ayudan con la navegación, y los íconos con descripciones en lenguaje común ayudan a crear un excelente diseño de UX.

Tablero de tarjetas de crédito – Tablero móvil

Al igual que la banca, los tableros de tarjetas de crédito son conocidos por su mala experiencia de usuario, especialmente en un dispositivo móvil. Este diseño de tablero móvil gira en una nueva dirección. La información no solo está bien organizada, sino que es comprensible y rica en funciones sin ser abrumadora.

La visualización de datos y el diseño de cuadros de mando superiores requieren excelencia gráfica y una comprensión y aplicación de los principios de diseño de cuadros de mando. Aplicados de manera congruente, los usuarios se beneficiarán de visualizaciones de datos que son informativas y paneles que brindan una experiencia de usuario de alta calidad.

• • •

Lectura adicional en el blog de diseño de Toptal:

• Diseño de tablero: consideraciones y mejores prácticas
• Visualización de datos: mejores prácticas y fundamentos
• Inspírese con estas visualizaciones de datos
• Actualice su análisis con estas inspiraciones de diseño de tableros