Download a PDF of this Article
Los estilos de los informes varían en función de las necesidades del consumidor y el propósito del informe. Con el número de posibilidades disponibles en los conjuntos de herramientas de informes actuales, los diseñadores de informes a menudo son propensos a agregar gráficos, colores y "chrome" siempre que pueden. Este artículo presenta algunas ideas, conceptos y orientaciones para equilibrar con sencillez los aspectos visuales del diseño de informes.
Aunque las reclamaciones estadísticas varían mucho de un estudio u observación a otro, sigue existiendo consenso respecto a que la mayoría de la población es del tipo de pensador visual. Aunque la información gráfica no esté específicamente en la naturaleza, los pensadores visuales asocian a menudo conceptos y hechos con algún tipo de imágenes. Por tanto, si una gran parte de la población procesa información como imágenes, puede ser más efectivo para los autores del informe comunicarse de la misma manera. ¿Es éste el mejor enfoque en todos los escenarios de reporting? ¿Cuándo es apropiado lo visual y cuándo no, respecto a la información? Parafraseando al Sargento Joe Friday de Dragnet, "Sólo los hechos, señora".
Mientras trabajaba en un proyecto de presentación de informes analíticos para una división de Boeing, aprendí una lección importante. El cliente representaba una unidad de negocio que producía aviones y armamento para la fuerza aérea de Estados Unidos. Los usuarios eran técnicos expertos en contabilidad e ingenieros, y manejaban proyectos muy complejos con componentes de alta tecnología. Estaba trabajando con Microsoft Consulting Services para proponer un sustituto a una "pantalla verde" obsoleta de un sistema de notificaciónes. Según hacía los prototipos para reemplazar sus informes estáticos, o de columnas, apunté la posibilidad de utilizar gráficos, colores y estilos temáticos. El cliente inmediatamente lo desaprobó y retrocedió en los diseños del informe, diciéndome que "los informes serios no son estéticos". Recordé que era importante entender la perspectiva de la audiencia y sus necesidades antes de ponerse a diseñar. Este proyecto fue una excepción a la regla por la que el único medio aceptable para una solución de reporting puramente analítica fue una colección de informes sin gráficos.
Principios de diseño de informe
La mayoría de los proyectos de diseño incluyen un equilibrio de tres principios básicos: forma, ajuste y función, como se muestra en la figura 1.
Sin lugar a duda, cualquier informe de negocio debe tener valor para el negocio y debe proporcionar resultados precisos que respondan a preguntas clave del negocio. Un diseñador de informes experimentado comprende la necesidad de pedir documentos y hacer preguntas de fondo sobre los requerimientos específicos y funcionales del negocio, que finalmente se conviertan en entregas de la solución de informes. En proyectos formales, normalmente eso es trabajo del analista de negocios, que posee habilidades funcionales. El desarrollador de la solución de informes posee habilidades de desarrollo técnico que se utilizan para traducir el diseño funcional y los requerimientos del negocio en informes que ofrecen características que permiten a los usuarios navegar, ver, imprimir, profundizar, desglosar y obtener detalles y por tanto, ofrecer información de manera creativa. Si los informes cumplen con los requisitos y la funcionalidad de manera que los usuarios puedan acceder a los datos que necesitan, ¿qué aspecto artístico tiene que ver con el diseño de informes o soluciones?, y, ¿es eso realmente importante?
Estilo y Color
La imagen y el estilo son más importantes de lo que muchos expertos técnicos piensan. El papel del diseñador de informes es asumido a menudo por programadores experimentados que tienen poca aptitud o preocupación por este tipo de cosas. Sin embargo, algunos diseñadores, independientemente de su aptitud o habilidad en conjunto, son fácilmente propensos a una preocupación obsesiva para obtener el diseño "justo". Muchos de nosotros hemos invertido largas horas afinando detalles de un informe, cuadro de mandos o formulario de solicitud y propiedades antes de presentarlo.
Por supuesto, algunos de nosotros tenemos mentes que están adaptadas a pensar visualmente, mientras que otros no lo hacen (figura 2).
Estilo y forma estética son elementos importantes del diseño, y el grado de importancia depende mucho de los objetivos de la audiencia y la solución de negocio. Esto, a menudo deviene en un delicado acto de equilibrio, y muchos diseñadores de informes simplemente juegan sobre seguro duplicando diseños comunes y utilizando paletas y estilos de plantilla estándares.
Establecer normas antes del diseño del informe
Cada organización tiene una paleta de colores estándar que se utiliza para definir su marca. Muchas empresas contratan los servicios de empresas de marketing y gráficos profesionales para ayudarles a crear una imagen de marketing con colores estándar, fuentes y gráficos. En un mercado tan competitivo, muchas organizaciones han modernizado su imagen para ayudar a los clientes a reconocer fácilmente su oferta. Este esfuerzo sigue a menudo a décadas de redirección de mercado, adquisiciones y reorganizaciones. Para muchos, este esfuerzo aparentemente simple, para presentar una imagen de empresa fácil reconocer puede ser crítico para su supervivencia en el mercado. EL diseño de interfaces de usuario de aplicaciones e informes alineados con estas normas puede ser de una importancia crítica, pero no basta con sólo cambiar los colores de fondo o hacer coincidir los colores corporativos e incrustar el logotipo junto al título del informe. Hay mucho arte y mucha ciencia detrás de la selección del color y consiste en saber "qué es lo que va con qué". Casi todas las compañías reconocidas utilizan los servicios de expertos bien pagados para diseñar su imagen de marca.
Recientemente pasé una tarde con mi esposa e hijas en una tienda de mejoras para el hogar, ayudándoles a decidir nuevas combinaciones de colores de pintura para las habitaciones de nuestra casa. Sinceramente, no tenía muchas opiniones que ofrecer, pero aprendí que "Aqua Breeze" va con "Hallowed Hush" cuando se utiliza "AshWhite" para el guarnecido. También aprendí que la "Blackberry Harvest" es compatible con "Raspberry Mousse" pero no se puede combinar con " Glacier Lake" o "Dragon Fire". Me gustaría dejar la selección de color para expertos como Martha Stewart. Si eres un inepto en colores como yo, puedes encontrar útil un sitio llamado COLOURLovers. Entre otras cosas, hay un foro para personas que les gusta mezclar colores y mostrar sus opciones de paleta coordinadas, como se puede ver en las muestras de la figura 3.
Aparte del estilo temático, el color puede ser un medio eficaz para diferenciar los valores en el contexto de un informe visual, como un gráfico, un indicador o una tabla agrupada. También puede ser un medio para llamar a excepciones y alertas. El balance de estos elementos es la esencia de un diseño de informe eficaz.
Diferentes estilos de informes tienen objetivos diferentes. Por ejemplo, los informes operativos se utilizan a menudo para ofrecer detalles transaccionales en formato textual, en columnas. Por el contrario, un panel analítico está destinado a brindar "el panorama general" de la empresa resaltando valores añadidos y excepciones que los dirigentes empresariales utilizarán inmediatamente para darse cuenta de las tendencias y problemas potenciales y tomar acciones adecuadas en cada caso. Cuando sea necesario, los usuarios deben poder profundizar más allá de las métricas superficiales para explorar detalles y comprender la causa de las condiciones bajo las que se produce una situación de alerta.
Por favor no gritar
Trabajamos y vivimos en un mundo llenado de un ruido y un desorden cada vez mayores. Eche un vistazo rápido a la figura 4 y pregúntese que es lo que ve. Yo veo mucha gente tratando de llamar mi atención basándose en gritar un poco más fuerte que su vecino. Por desgracia, muchos diseñadores de informes utilizan el mismo enfoque para llamar la atención de los detalles importantes.
En lugar de gritar más fuerte, pruebe a reducir el ruido de forma que el mensaje importante puede mostrarse sin provocar en los usuarios un dolor de cabeza. Traer datos importantes a la superficie y colocar los elementos menos importantes al fondo. En particular, los bordes predeterminados, fondos, sombras y efectos de estilo 3D deben reducirse o eliminarse si compiten por el espacio en la pantalla y la atención del usuario.
Basado en mi experiencia en la selección de color de fondo para paneles, he encontrado que no hay un color que funcione para todos. Los sitios Web más profesionales utilizan fondos blancos simplemente porque todas las imágenes y texto funcionan bien sobre ellos. Sin embargo, una escuela reconocida prefiere utilizar el negro o un color de fondo oscuro, para los paneles que los usuarios deberán examinar durante largos períodos de tiempo, por lo que no están obligados a procesar el fondo blanco brillante al mirarlo.
La prueba de cinco segundos
Como regla general, utilice colores, formas y tonos contrastados para subrayar la información más importante. Para paneles analíticos, utilice la prueba de los cinco segundos para comprobar la eficacia del diseño. Prepárese para mostrar el informe, pida a varios usuarios que miren durante cinco segundos y luego quítelo de la pantalla. Pida a los usuarios que describan la información que vieron utilizando sólo la instantánea de cinco segundos que tuvieron en su mente. Si puede describir la información más importante que el informe pretende transmitir, el diseño es un trabajo bien hecho. Si describen los colores de fondo, bordes, líneas y otros elementos de diseño antes que los datos, puede que tenga trabajo por hacer.
Por ejemplo, aunque el informe de la matriz en la figura 5 contiene mucha información útil, falla la prueba de cinco segundos.
Por el contrario, el informe de la figura 6, pasa la prueba. Aunque es sólo una pequeña región de un panel ejecutivo mayor, proporciona enseguida información útil de tendencias. Un clic en este informe podría permitir al usuario ver los datos con más detalle y ampliar en el contexto de la tendencia y adquirir más información.
Utilizar colores sutiles de estilo
Stephen Few es conocido por sus escritos y conocimientos sobre el uso de colores sutiles de estilo. En su libro Information Dashboard Design, afirma que, a través de sutiles variaciones de tonos de color entre puntos visuales de datos, el usuario puede discernir fácilmente diferentes valores y umbrales sin contenidos innecesarios. La gente puede reconocer generalmente 16 tonos diferentes del mismo color. Esto deja mucho espacio para contraste entre, digamos, cinco a ocho diferentes matices del mismo color. Para obtener distintas tonalidades o niveles de saturación del mismo color, se mezclan en cualquier cantidad proporciones iguales de rojo, verde y azul para producir un tono más claro o más oscuro del mismo color. Lo conveniente de esta técnica es que se traduce bien a una escala de grises. La figura 7 muestra cómo convertir tonos del color #A0C5DB a escala de grises para acomodar la impresión en blanco y negro o a los usuarios ciegos para un color.
Si está viendo este artículo en blanco y negro, deberá utilizar su imaginación con la comparación de color y en escala de grises de la figura 7, que en realidad ayuda a reforzar esta idea.
Utilizar colores para alertas y excepciones
Si se utiliza con moderación, el uso de bordes remarcados, colores negros y tonos sólidos resaltan a los ojos de los usuarios la información importante. Es un tema apropiado para alertas de un indicador de claves de rendimiento (KPI), por ejemplo. Estas alertas se muestran tradicionalmente en verde, amarillo y rojo, donde el verde significa "todo OK", amarillo "las cosas pueden ir en dirección equivocada" y rojo significa "detenerse y tomar nota: algo anda mal aquí".
Combinar colores y formas
En la mayoría de las culturas, los usuarios relacionan verde, amarillo y rojo para las señales de tráfico. La metáfora de la señal de tráfico funciona bien para los KPI siempre que el usuario sea capaz de discernir los colores. Esto puede ser un desafío si un informe se imprime en blanco y negro o si el usuario es ciego a algún color. Compárense los indicadores de verde, amarillo y rojo con la versión en escala de grises de la figura 8.
Como puede ver, es difícil diferenciar entre los indicadores en la versión en escala de grises. Mediante la combinación de colores con las formas, el problema se resuelve siempre y cuando se informe a los usuarios de que los iconos de una determinada forma sistemáticamente representan un estado específico de KPI. Por ejemplo, el verde en redondo, el triangular en amarillo y las formas de diamante en rojo de la figura 9 indican a los usuarios que los círculos son buenas noticias y diamantes son malas noticias.
Poner en práctica los principios del diseño de informes
Diseñar un informe en SQL Server Reporting Services puede ser fácil si utiliza los estilos por defecto para los elementos visuales. Sin embargo, Reporting Services tiene poco soporte para estilos temáticos y hojas de estilo, o para coordinar colores entre elementos de diseño diferentes. Algún día veremos hojas de estilo en Reporting Services, pero, hasta entonces, tenemos que hacer un trabajo manual para diseñar un informe bien elaborado con un estilo coherente. He visto muchas técnicas diferentes que utilizan información almacenada en tablas de bases de datos para aplicar temas como hojas de estilo. En mi opinión, esto es un montón de trabajo que puede ahorrar tiempo y energía en proyectos de gran escala pero es excesivo en la mayoría de los casos. Mi enfoque consiste en utilizar una función personalizada simple que permite devolver diferentes tonos de un color al informe para diferentes elementos y propiedades. La función RGBToHexPalette puede almacenarse en una definición de informe que se utilice como una plantilla para nuevos informes o en un ensamblado .NET personalizado al que se haga referencia en todos los informes en una solución de negocio. Como ensamblado externo, el código puede ser escrito en C#, pero si lo utilizamos como una función incrustada, debe escribirse en Visual Basic.NET (VB.NET), como se muestra en el listado 1. (En el listado 1, las continuaciones de línea se utilizan para dar formato de código de la página impresa.)
La función de RGBToHexPalette tiene tres argumentos. El primer argumento es el color de base, que se puede pasar como una cadena separada por comas con los valores RGB o un valor de un color hexadecimal estándar. Por ejemplo, magenta puro se expresa como "255, 0, 255" o # FF00FF". El segundo argumento es un porcentaje de saturación de color entre ese color y blanco o negro, lo que se indica con el valor "Negro" o "Blanco" en el tercer argumento. Por ejemplo, si llama a la función usando "255, 128, 255" o "# FF80FF" (un rosado magenta pálido) para el primer argumento, 50 para el segundo argumento y "Negro" para la tercera, se devuelve una versión oscura del color. El nivel de saturación del color está a medio camino entre el color base y el negro puro.
La figura 10, página 29, muestra un ejemplo sencillo de la función RGBToHexPalette aplicada a la propiedad de Color de una línea del gráfico que aparece en una serie de gráficos de líneas. El color base es #A0C5DB, uno de los colores estándar corporativos de SolidQ. En este caso, la línea de base será una sombra a medio camino entre el color base y el blanco.
Los gráficos de líneas son parte del informe final que se muestra en la figura 11. Este informe aplica varios tonos de #A0C5DB y #CBDFEC (otro color corporativo estándar de SolidQ) a varios elementos, incluyendo el encabezado del informe, encabezados de tablas, encabezados de grupos y fondos de pie de página y texto. También se aplican colores personalizados a todo el texto del campo, a las líneas del gráfico y los rangos de las viñetas y puntos. Todos los colores en este informe final se establecen con expresiones que utilizan la función RGBToHexPalette con uno de dos colores base (#A0C5DB y #CBDFEC).
¿Demasiado o demasiado poco?
El diseño de informes gráficos es un acto de equilibrio entre la sencillez de un diseño de bajo costo y la extravagancia de colores y gráficos exagerados. Este equilibrio cambia para informes de diferentes estilos y efectos. Los anuncios y vallas publicitarias son un esfuerzo audaz y artístico para captar la atención del espectador y causar impresión durante un momento. Los informes e interfaces que un usuario utilizará en el día a día de su empresa, deben ajustarse y funcionar de forma que sirvan a su función sin distracciones ni contenidos innecesarios.
Metáforas
Los elementos gráficos de un informe pueden imitar los instrumentos de medida tangibles y otros dispositivos del mundo real, como se muestra en la figura 12. A veces, los usuarios se refieren a estas metáforas porque les resultan familiares a su experiencia con dispositivos reales. Sin embargo, estos componentes se eligen a menudo basándose puramente en su factor "cool" (elegante) pero pueden ser de un uso muy ineficaz en pantalla. Se debe reconsiderar el uso de elementos deslumbrantes en un informe, pues puede acabar mostrando más la cáscara que la yema. Muchos de los expertos de la industria, incluyendo Edward R.Tufte y Stephen Few, sostienen que, a menudo, no hay lugar para ese glamoroso simbolismo visual en informes y paneles y yo respeto las opiniones de estas autoridades. Creo que hay un tiempo y lugar para todo y hay situaciones en que las metáforas pueden ser apropiadas. Considere si los usuarios encontrarán ellas un valor después de que haber estado usando el mismo informe durante un tiempo.
Efectos 3D
Los gráficos tridimensionales normalmente sólo son eficaces cuando se diseñan pensando en 3 conjuntos de datos relacionados que se muestran en la entrega final. Como un medio de publicidad o presentación, los gráficos 3D pueden funcionar, pero cuando cambian los datos, pueden convertirse en inútiles rápidamente. Como ejemplo de ello, considere el gráfico de la figura 13. ¿Cuáles fueron las ventas totales de Francia, Reino Unido, Australia y Alemania para 2001 y 2002?
En un gráfico de barras agrupado como éste, si las barras de cualquier fila son más grandes que las que están al frente, se ocultan a la vista y los datos se vuelven ilegibles.
Lista de recomendaciones para diseños de informes visuales
Hay mucho que considerar al diseñar informes visuales. Sobre todo, ser consciente del valor de negocio ofrecido al usuario. Si los elementos visuales, colores, características de diseño y gráficos apoyan estos objetivos, el diseño puede ser excelente. De lo contrario, demasiado desorden visual puede distraer al usuario del mensaje central y de la información más importante en el informe o cuadro de mandos.
En resumen, tenga en cuenta las siguientes directrices como lista de comprobación para el diseño de informe visual:
Usar el espacio en pantalla eficazmente, dejando espacios en blanco para que se lea el contenido.
Reducir el ruido para llevar la información más importante a la superficie.
Mantenerlo simple, pero no insultar la inteligencia del usuario por simplificar.
Usar el color en contextos significativos.
No hacer un uso abusivo de imágenes y metáforas.
Encontrar un equilibrio entre forma, ajuste y funcionalidad.
Sobre el autor
Paul Turley (Blog | Twitter) es Mentor con SolidQ y MVP de Microsoft SQL Server. Es autor y coautor de varios libros sobre inteligencia de negocios y diseño de informes, SQL Server Reporting Services Recipes for Designing Expert Reports y Professional SQL Server Reporting Services de Wrox Press. Habla en conferencias del sector, es Director del grupo de usuarios de SQL de Oregón y es un ávido blogger sobre todas las cosas relacionadas con BI. https://sqlserverbiblog.wordpress.com/
