Diseña dashboards atractivos en AI/BI

Introducción

Cada empresa tiene una identidad de marca que refleja lo que representa, definida por su logotipo, colores, fuentes y tono. Nuestros clientes más reconocidos, como Rivian y Wineshipping, aplican esa identidad de manera constante en todos los canales: marketing, presentaciones, sitios web y productos. Esa consistencia es lo que genera confianza en sus clientes y socios.

Los dashboards son un medio crucial a través del cual los equipos de negocio comparten datos con los tomadores de decisiones y socios externos. Los creadores de dashboards diseñan esta experiencia para ayudar a los usuarios a comprender sus datos y extraer información clave. Para que los dashboards parezcan confiables y profesionales, los creadores deben hacer que se sientan cohesivos y alineados con la marca. Los temas de los dashboards le permiten actualizar el aspecto visual de cada dashboard para que coincida con su visión.

Los temas del espacio de trabajo van un paso más allá al aplicar un tema constante en todos los dashboards del espacio de trabajo, los cuales lo heredan automáticamente. Por supuesto, esto se puede ampliar o modificar localmente según sea necesario. En esta publicación, exploraremos algunas de las mejores prácticas de diseño y crearemos un tema personalizado para reflejar la marca.

Utilizaremos las pautas de marca de una empresa ficticia llamada Wanderbrick como ejemplo para crear un dashboard.

¿Quiere seguir el proceso? Wanderbricks es una empresa ficticia de viajes y hotelería con un conjunto de datos de muestra disponible en cada espacio de trabajo de Databricks. Puede recrear el dashboard desde cero utilizando las indicaciones de Genie Code en cada sección, o simplemente seguir la lectura y aplicar las ideas en el suyo. Comience por abrir un nuevo dashboard e introducir esta indicación. Esto crea una vista de métricas local sobre el esquema samples.wanderbricks con las dimensiones y medidas que utilizaremos a lo largo del proceso.

#1 — Cree un diseño basado en las necesidades de sus usuarios finales

Configuración de la cuadrícula

El propósito de su dashboard debe determinar cuántas columnas tendrá el diseño de su cuadrícula. AI/BI ofrece una cuadrícula flexible de 12 columnas que puede subdividir en 3, 4 o 6 columnas según sus necesidades. Los dashboards técnicos y densos con muchos widgets se benefician de un diseño de 6 columnas, lo que permite visualizar más widgets a la vez. Por otro lado, un dashboard ejecutivo podría utilizar un diseño de 3 columnas para reducir la carga cognitiva.

Creación de jerarquía

Al mirar un dashboard, el ojo humano realiza un escaneo natural para encontrar la información más importante antes de comenzar a leer. Dependiendo del diseño de su dashboard, el ojo seguirá una de dos trayectorias a lo largo del mismo: un patrón en F o un patrón en Z.

En el caso de los dashboards con un alto contenido de imágenes y visualizaciones, el ojo sigue de forma natural un patrón en Z a través de los diseños visuales, comenzando en la esquina superior izquierda con los títulos y filtros, bajando en diagonal y terminando en la esquina inferior derecha con las visualizaciones detalladas y las tablas.

Para los dashboards que contienen más texto o tablas, puede surgir un patrón en F. El ojo escanea la primera fila por completo y luego se desplaza hacia abajo por el lado izquierdo. En cualquiera de los dos patrones, el principio es el mismo: coloque lo que más importa donde el ojo se posa primero.

Cambie el tamaño para enfatizar

Si todo en su dashboard tiene el mismo tamaño, nada destacará. Los usuarios necesitan señales visuales para saber dónde enfocar la atención primero. Establezca una jerarquía clara haciendo que sus métricas más críticas y visualizaciones principales sean más grandes, y permitiendo que los elementos secundarios pasen a un segundo plano.

Intente aplicar esto al dashboard de Wanderbricks. La primera indicación crea una página de resumen ejecutivo siguiendo la jerarquía que acabamos de describir, y la segunda añade una página técnica más densa para mostrar cómo se adaptan los mismos principios a un público diferente.

#2 — Seleccione la fuente según el tono y la legibilidad

Elegir una fuente para un dashboard es tanto una decisión funcional como estética. Tanto la identidad de su marca como su público objetivo deben influir en la elección de la fuente. Un público más técnico podría apreciar algo expresivo como Space Grotesk, mientras que un dashboard ejecutivo se beneficia de algo más familiar y conservador, como Arial. El objetivo no es solo el estilo, sino establecer el tono adecuado.

Los dashboards suelen tener una gran densidad de información, por lo que la legibilidad es lo primero. Recomendamos fuentes sans-serif, ya que reducen la fatiga visual. AI/BI admite de forma nativa algunas opciones sans-serif seguras para la web, como Arial, Tahoma y Verdana.

Si desea utilizar su propia fuente, ahora puede añadir una fuente local a su dashboard. Esto es especialmente útil para mantener la consistencia cuando los dashboards se integran en sus herramientas internas. Para este dashboard, utilizaremos una fuente local y la configuraremos como Space Grotesk.

Para garantizar la legibilidad, elija colores de fuente que mantengan un alto contraste con el fondo del widget. Utilice una herramienta de accesibilidad como el analizador de contraste de color de Adobe para verificarlo. En el modo claro, evite utilizar negro puro (#000000), ya que puede resultar molesto sobre un fondo brillante (#FFFFFF). En el modo claro, un tono ligeramente suavizado como #08141A sobre #EBEBEB suele crear una experiencia de lectura más cómoda. En el modo oscuro, puede intentar utilizar #EBEBEB sobre #08141A para evitar un contraste excesivo.

AI/BI admite un conjunto de fuentes de código abierto y seguras para la web que puede aplicar con Genie Code. Para las fuentes de marca, utilice la opción de fuente local en Configuración > Fuente > Usar fuente local. Pruebe esta indicación para comenzar con una opción de código abierto y configurar los colores de su fuente.

#3 — Defina los colores de la UI

La regla 60-30-10 es un principio fundamental en la teoría del color para crear diseños equilibrados y visualmente armoniosos. Los diseñadores utilizan esta regla en muchos contextos, desde la elección de los colores para una habitación de su casa hasta el establecimiento de la imagen de marca de una nueva empresa. Esta regla de diseño le ayuda a definir su paleta de colores con tres categorías de color, y le da a su paleta el equilibrio adecuado según la cantidad que se debe utilizar de cada uno en un diseño integral:

• El 60 % es tu color dominante, el cual define el tono general del dashboard y será el color de fondo de tu lienzo, widgets y bordes.
• El 30 % es tu color secundario, que sirve de apoyo al fondo aportando contraste. En tu dashboard, este será el color de la fuente y de la paleta de visualización de datos.
• El 10 % es tu color de acento, pensado para llamar la atención donde lo necesites. Úsalo para destacar elementos interactivos como filtros, pestañas y botones en tu dashboard.

A continuación, analizaremos cómo aplicar este principio para elegir colores atractivos para tu dashboard.

Colores de fondo neutros

Al mantener los colores de fondo cercanos a lo neutro, permitimos que los colores de la visualización de datos comuniquen la información con precisión y sin sesgos involuntarios. Para el modo claro, mantén los fondos de los widgets cercanos al blanco (#FCFCFD) con un color ligeramente más oscuro para el fondo del lienzo (#EBEBEB). Esto crea una separación sin distracciones. Cuando el contraste es sutil, el dashboard se lee como un todo cohesivo en lugar de una cuadrícula de elementos aislados. Configurar los colores de los bordes para que coincidan con el fondo del widget reduce la saturación visual, especialmente en diseños densos.

Personalización por widget

Para destacar ciertos widgets y hacer que sobresalgan, puedes anular las propiedades del tema de un widget. En la configuración de estilo del widget, actualiza el color de fondo y del borde a #1F354B. Además, actualiza el color de la fuente a #EBEBEB para garantizar un alto contraste.

Color de selección llamativo

El color de selección se utiliza para destacar elementos interactivos como filtros, pestañas y botones. Elige un color que se distinga fácilmente del texto y de los colores de fondo. Puedes obtenerlos fácilmente a partir de los colores de tu marca. Usando el color #15AFDD de nuestra marca como color base en Adobe Color, podemos intentar obtener un color de selección configurando la armonía de color en «cuadrado», lo que da como resultado colores como #DE7914 y #3A7689. Elegir un color azul (como #2272B4) suele ser una opción segura: es análogo al color de hipervínculo asociado con los enlaces interactivos en la web.

Modo oscuro

Todos los temas de AI/BI son compatibles tanto con el modo claro como con el oscuro. Configura ambos modos cambiando el selector de modo claro/oscuro. Para configurar el modo claro, puedes usar el color de marca #1E343F para el fondo del lienzo y #08141A para el fondo del widget. En el modo claro, se suele recomendar el color más brillante para el widget, ya que proporciona un alto contraste. Para el color de la fuente, utilizaremos #E8EFF1 para ofrecer una alta legibilidad.

Prueba a aplicar el principio 60-30-10 al dashboard de Wanderbricks. Este prompt establece fondos neutros para el lienzo y los widgets, oculta los bordes al hacerlos coincidir con el color del widget y añade un azul complementario para los elementos interactivos.

#4 — Crea tu propia paleta de visualización

Con los colores de la interfaz establecidos tanto para el modo claro como para el oscuro, el paso final es seleccionar la paleta de visualización.

Una paleta de visualización de datos bien equilibrada unifica todo el dashboard y le da vida. La paleta puede incluir colores de marca, pero será necesario realizar ajustes, ya que podrían no ser adecuados para las visualizaciones. Se estima que el 4.5 % de la población mundial experimenta algún tipo de daltonismo, por lo que es importante diseñar una paleta que sea accesible para personas con daltonismo. Si quieres probar algunas paletas estándar del sector, te recomendamos echar un vistazo a colorbrewer. Algunos aspectos clave a tener en cuenta al diseñar tu propia paleta:

1. Según el caso de uso, una paleta debe tener entre 5 y 9 colores. En este dashboard crearemos una paleta de 5 colores usando Adobe Color.
2. Los colores deben poder distinguirse tanto en el modo claro como en el oscuro, así que evita los colores extremadamente brillantes o extremadamente oscuros.
3. Dado que el daltonismo al rojo/verde es común, evita colocar esos colores uno al lado del otro en la paleta.

Para nuestra paleta de visualización personalizada de Databricks, comenzamos con el color de nuestra marca (#15AFDD) en Adobe Color. Aplicamos la armonía de color «cuadrada» para obtener 4 colores adicionales (#83DE14, #DE7914, #BE14DE, #3A7689) que están espaciados uniformemente en el círculo cromático. A partir de ahí, en Adobe Color, puedes realizar algunos ajustes más:

• Cambia los tonos haciendo clic en el código hexadecimal de cada color y moviendo gradualmente el control deslizante de tono.
• Ajusta el brillo de los colores de la paleta haciendo clic en el código hexadecimal del color y actualizando el control deslizante de brillo. El objetivo es mantener los colores claramente diferenciados, especialmente los pares adyacentes.
• Prueba los colores resultantes en el comprobador de daltonismo de Adobe Color para simular cómo se ve tu paleta en condiciones comunes, como deuteranopía, protanopía y tritanopía.
• Pruébalos en AI/BI con dashboards reales tanto en modo claro como oscuro.

La paleta de colores final que tenemos es #15AFDD, #2375A8, #52A870, #C85070, #C89930.

Una vez que tu paleta supere las comprobaciones de accesibilidad, aplícala para ver cómo cobran vida tus gráficos. Esta es la paleta que elegimos tras pasarla por el simulador de daltonismo de Adobe Color y probarla tanto en modo claro como oscuro.

Conclusión

Las decisiones de diseño que parecen pequeñas de forma aislada se acumulan rápidamente. Una fuente consistente, una paleta de colores intencionada y un diseño estructurado para que los usuarios puedan leer fácilmente. Juntos, transforman un dashboard en algo en lo que la gente confía. Los temas del espacio de trabajo ayudan a escalar esto en toda tu organización, de modo que las buenas prácticas de diseño se convierten en el punto de partida de cada dashboard.

El dashboard que hemos analizado está disponible aquí si quieres explorarlo por ti mismo. Si aún no utilizas los dashboards de AI/BI, estamos integrados de forma nativa en Databricks.

¿Tienes ideas o comentarios? Compártelos con nosotros.

Descarga el dashboard para explorarlo por tu cuenta

(Esta entrada del blog ha sido traducida utilizando herramientas basadas en inteligencia artificial) Publicación original