Lineamientos de usabilidad para los cuadros de mando (dashboards)

Sistema de Información Social

Noviembre de 2012

HISTORIAL DE CREACIÓN Fecha Versión Descripción Autor

31/08/2012 1.0 Lineamientos de usabilidad para los cuadros de mando

Lorena Moreira, Gerente Sistema de Información Social

HISTORIAL DE REVISIÓN Participante Unidad o Dependencia Firma

Ing. Karina Siguil

Lic. Stuardo Herrera

Programadora, Sistema Información Social

Administrador, Sistema Información Social

TABLA DE CONTENIDOS

I. Introducción ............................................................................................................1

II. Conceptualización .................................................................................................3

III. Diseño .......................................................................................................................5

A. Uso del color ........................................................................................................8

B. Uso de tipografía ................................................................................................9

IV. Presentación de la información ...........................................................................11

A. Errores a evitar en la representación de datos .............................................14

V. ANEXO: Cuadros de mando bien diseñados .....................................................21

υEstándares para la creación y documentación de universos del Sistema de Información Social

LINEAMIENTOS DE USABILIDAD PARA LOS CUADROS DE MANDO (DASHBOARDS)

INTRODUCCIÓN

El presente documento detalla los lineamientos establecidos para favorecer la usabilidad de los cuadros de mando (dashboards) que se desarrollen en el marco de la implementación del Sistema de Información Social (SIS).

La usabilidad se entiende como la facilidad de uso y aprendizaje de un objeto desarrollado por el hombre. En el caso de los cuadros de mando del SIS, la implementación de criterios de usabilidad tiene como objetivo permitir el acceso de usuarios de diversa preparación a los datos e información que proporciona el SIS. Debe recordarse que uno de los objetivos fundamentales del SIS es el de proveer de información oportuna y confiable a usuarios tanto internos como externos a los Ministerios y en los distintos niveles de la estructura organizativa, sea esta central, departamental, municipal o de las mismas comunidades.

Para ser efectiva la usabilidad debe presentar cinco componentes básicos1

Aprendizaje, es decir, qué tan fácil es para los usuarios el completar las tareas básicas desde el primer abordaje con la herramienta.

Eficiencia, medida por la velocidad con que pueden desarrollar las tareas una vez que han comprendido el diseño.

Memoria, entendiéndose por la facilidad con que los usuarios, al regresar a la herramienta luego de un período de no utilizarla, vuelven a ser efectivos en su uso.

Errores. Cuántos errores cometen los usuarios, qué tan severos son éstos y qué tan pronto se logran recuperar de los mismos.

Satisfacción, medido por cuán agradable resulta para los usuarios el diseño.

1 Nielsen, Jakob, Usability 101: Introduction to Usability en http://www.useit.com/alertbox/20030825.html. Consultado el 26 de noviembre de 2012.

φEstándares para la creación y documentación de universos del Sistema de Información Social

Los lineamientos de usabilidad se presentan en secciones que reflejan las etapas de desarrollo de un cuadro de mando.

La primera sección se enfoca en la fase de conceptualización del cuadro de mando, fase durante la cual se define la funcionalidad, niveles de interactividad y sus características conceptuales.

La segunda sección se centra en la fase de diseño, incluyendo aspectos de organización de los componentes del cuadro de mando, la secuencia visual y el uso de color y tipografía.

En la tercera sección se detallan los lineamientos para la presentación de la información con recomendaciones específicas de errores de visualización que deben evitarse.

Finalmente se presentan lineamientos de presentación que mejoran la comunicación entre la información y el usuario de la misma.

χEstándares para la creación y documentación de universos del Sistema de Información Social

CONCEPTUALIZACIÓN

Un cuadro de mando (dashboard) es una “representación visual de la información más importante que se requiere para alcanzar uno o más objetivos, consolidada y arreglada en la pantalla para que pueda ser monitoreada de una sola vista”.2

En línea con esta definición, previo a la creación de un cuadro de mando se debe realizar un trabajo de análisis que permita la conceptualización del porqué del cuadro de mando, estableciendo su razón de existir.

Durante el análisis, fundamento de la conceptualización, se deben responder tres preguntas básicas:

Quién es la audiencia del cuadro de mando, para el uso de quiénes va dirigido.

Cuáles son las necesidades de información de esta audiencia, qué información requieren para fortalecer su trabajo (ya sea desde la planificación, monitoreo, toma de decisiones, etc.).

Qué valor le agregará el cuadro de mando a la labor que desarrollan. De qué manera apoyará las funciones que desempeñan.

En el proceso de responder las preguntas no debe perderse de vista que, en la definición del cuadro de mando, no todos los datos tienen la misma importancia. En la conceptualización debe discriminarse entre los datos que mejor aportan a los objetivos perseguidos y aquellos, aunque quizás deseables, no apoyan de una manera sustantiva.

Adicionalmente en la etapa de conceptualización se debe decidir si el cuadro de mando reportará datos (por ejemplo una serie histórica que permita identificar el comportamiento o tendencias de indicadores) o si permitirá explorar escenarios (what-if).

Finalmente es en la conceptualización donde se define:

Cuáles métricas se incorporarán.

El grado de conectividad que existirá entre el cuadro de mando y las bases de datos que lo alimentan de información.

2 Stephen Few, “Dashboard Confusion” en Intelligent Entreprise. Marzo 20, 2004.

ψEstándares para la creación y documentación de universos del Sistema de Información Social

El nivel de detalle con el cual se compartirán los datos.

El tipo de interactividad que se le permitirá al usuario.

El grado de colaboración que se podrá tener a través del cuadro de mando.

Todos estos aspectos se definirán en el contexto de las respuestas dadas a las tres preguntas básicas trabajadas durante el análisis.

ωEstándares para la creación y documentación de universos del Sistema de Información Social

DISEÑO

Al diseñar un cuadro de mando debe tenerse cuidado de no caer en la trampa de “llenar el espacio”. Más bien debe buscarse reflejar la naturaleza de la información que se está compartiendo.

La lectura de un cuadro de mando, como la de cualquier otra forma visual de presentación (libro, revista, etc.) sigue un orden que debe ser pre-establecido desde el diseño, asegurando que existan ayudas visuales que vayan dirigiendo la lectura de la información en el cuadro de mando en el orden deseado. Los ítems que se encuentran relacionados deben estar ubicados cercanos entre sí y ordenados para crear una secuencia visual.

A mayor importancia de un elemento de información, mayor prominencia visual debe darse a éste.

La ubicación de los elementos define en primera instancia la secuencia de lectura del cuadro de mando. La ilustración 1 muestra la secuencia visual usual que se sigue al visualizarlos.

Ilustración 1: Secuencia visual de un cuadro de mando.

ϊEstándares para la creación y documentación de universos del Sistema de Información Social

El diseño de un cuadro de mando consta de varias secciones. La ilustración 2 muestra la ubicación de estas.

En la parte superior se muestra la marca (branding) del cuadro de mando. Acá se ubicará el logo de la institución y el título del cuadro de mando.

En una siguiente sección, que puede estar ubicado en la parte superior a al margen izquierdo del cuadro de mando, se ubican los filtros que permitirán a los usuarios discriminar la información que deseen consultar.

En la parte principal del cuadro de mando se encontrará el contenido del cuadro de mando, el cual puede estar constituido por varios componentes.

Ilustración 2: Secciones de un cuadro de mando.

ϋEstándares para la creación y documentación de universos del Sistema de Información Social

Finalmente, en la parte inferior se ubica el pie de página del cuadro de mando. Acá pueden colocarse logos de instituciones asociadas a la institución dueña del cuadro de mando que han colaborado en el desarrollo de los mismos e información de la fuente de datos, entre otros.

En la sección de contenidos se ubicarán los distintos componentes del cuadro de mando. En la ubicación interna de éstos debe buscarse un balance y ordenamiento que facilite su lectura. El tipo de distribución variará en función del número de componentes a incluir y la importancia que alguno o algunos de éstos puedan tener. La Ilustración 3 muestra algunas alternativas de distribución.

Ilustración 3: Alternativas de distribución de componentes.

όEstándares para la creación y documentación de universos del Sistema de Información Social

USO DEL COLOR

El color es un elemento clave en el diseño de un cuadro de mando. Cabe recordarse que de acuerdo a la teoría del color a cada uno de éstos se le asigna un significado que refleja un sentimiento o estado de ánimo. La selección de colores puede incidir por ello en la usabilidad.

Por ejemplo, el usar colores de tierra (cafés, verde, etc.) tiene efectos tranquilizantes.

Los colores fríos (celeste, azul) generan sentimientos de calma y confort.

Los colores no naturales (encendidos, neón) generan alarma y son útiles para llamar la atención.

Los colores cálidos son optimistas, activos.

Y el usar un mismo color pero en diferentes tonalidades (mayor saturación o brillo) llama la atención de la vista, significando que un punto en particular es más importante que otro.

Al usar colores es importante mantener la combinación entre colores de una misma familia buscando siempre un contraste entre el color del texto con el color del fondo.

Al representar datos (sea en gráficas, mapas u otro medio de representación) puede utilizarse el color bajo varios esquemas. Los más usuales se presentan en la Ilustración 5.

Ilustración 4: Significado del color.

ύEstándares para la creación y documentación de universos del Sistema de Información Social

Ilustración 5: Esquemas para uso de color.

Una recomendación importante en el uso del color es el evitar el uso de colores similares para áreas adyacentes (Ilustración 6). La representación visual debe facilitar la comprensión del dato. Por ello debe evitarse condiciones donde el usuario debe analizar la representación, no el dato en sí mismo.

USO DE TIPOGRAFÍA

Al igual que con el uso del color, un uso adecuado de tipografía es fundamental para mejorar la usabilidad del cuadro de mando y la correcta comprensión de la información que comunica. Debe entenderse que la tipografía no se refiere únicamente al tipo de letra que se utilice. Abarca un concepto más amplio que incluye adicionalmente el color, estilo, tamaño y disposición de los textos en el cuadro de mando.

Ilustración 6: Percepción de los colores.

υτEstándares para la creación y documentación de universos del Sistema de Información Social

Existen dos grandes clasificaciones tipográficas:

Fuente con Serif. Poseen remates (“serifs”) en los extremos de los caracteres.

Fuente Sans Serif. Por el contrario, no poseen remates en sus terminaciones.

Las fuentes con serif son apropiadas en bloques de texto, pues facilitan la lectura. Sin embargo las Sans Serif (sin serif) son más indicadas para bloques de texto en internet. Se favorece el uso de estas últimas en los cuadros de mando.

Cada sección de un cuadro de mando requiere del uso de una tipografía diferente. Aun cuando debe conservar el mismo tipo de letra, las características de la misma (tamaño, resaltado, etc.) deben variar para ajustar la importancia y legibilidad del texto. En la Tabla 1 se detallan algunas características a tener en cuenta.

Sección Propósito Tamaño Tipo de letra Color Estilo

Cuerpo Texto limpio y legible, entre el 50-80% tendrá esta apariencia.

10 a 16 pts Sans-serif: Arial, Tahoma, Verdana, Century Gothic

Neutral Normal, sin negrilla ni itálico. Espaciamiento de 1.2 líneas

Encabezado Separar y nombrar las secciones más importantes

150-200% del tamaño del cuerpo

Mismo que el cuerpo o cambiar por un serif

Neutral Normal, bold o itálico. Con espacio en blanco encima.

Notas Asuntos adicionales que el usuario deba conocer, fuente de datos, cálculos de métricas.

85% del cuerpo

Mismo que el cuerpo

Menor énfasis, bajo contraste

Normal, no negrilla, no itálico

Enfasis Conducir la vista a un punto clave a comunicar

Mismo que el cuerpo

Mismo que el cuerpo

Color de alto impacto y/o negrilla y/o itálico

Color de alto impacto y/o negrilla y/o itálico

υυEstándares para la creación y documentación de universos del Sistema de Información Social

PRESENTACIÓN DE LA INFORMACIÓN

El objetivo fundamental de un cuadro de mando es compartir y/o comunicar una información. La forma que se elija para representar los datos, su contexto y relaciones marca en alto grado el logro de este objetivo y, en consecuencia, su usabilidad.

Al definir la forma de presentación de la información tenga siempre presente:

El cuadro de mando debe limitar lo visible a una sola pantalla. Debe evitarse el tener que avanzar o retroceder la imagen en pantalla para poder apreciar toda la información contenida en el cuadro de mando.

Si el cuadro de mando está construido por múltiples pantallas, concentre lo más importante en la primera. La primera pantalla debe sintetizar en la medida de lo posible la información más detallada que se presente en pantallas posteriores.

Idealmente limite los componentes que presentan información a un máximo de cinco. La mente humana tiene dificultad para interpretar de manera simultánea más de cinco o seis elementos.

Mantenga fija la ubicación de los menús.

Busque un balance entre la claridad del dato y la estética. En cuadros de mando “menos es más”.

Presente siempre el contexto del dato. Un dato aislado, sin contexto, es de más difícil interpretación.

Ubique los componentes a manera de lograr un orden lógico de lectura (por ejemplo, primero anual y luego mensual, primero departamental y luego municipal, etc.).

La siguiente decisión a tomar es cómo representar los datos. Generalmente utilizará gráficas y formas de visualización de la información y sus relaciones. La decisión de qué tipo de gráfica usar es muy importante. Una decisión acertada favorecerá la usabilidad y la capacidad de comunicar.

La Ilustración 7 muestra un mapa de decisión que puede apoyar la selección del tipo de gráfica a usar en función de la naturaleza de los datos.

υφEstándares para la creación y documentación de universos del Sistema de Información Social

Ilustración 7: Mapa de decisión para gráficas

Como puede observarse en la ilustración, el primer nivel de decisión se refiere al concepto más general sobre los datos a mostrar. Las opciones son:

Comparar (comparison) datos: o Comparación entre los ítems que lo componen, ya sea:

Dos variables por ítem: usar gráfico con columnas y variables. Una variable por ítem:

υχEstándares para la creación y documentación de universos del Sistema de Información Social

Con muchas categorías: usar una tabla o una tabla con gráficas integradas.

Con pocas categorías: o Usar gráfica de barras horizontales cuando son muchos

ítems. o Usar gráfica de barras verticales cuando son pocos ítems.

o Comparación a lo largo del tiempo: Si son muchos períodos:

Con datos cíclicos: usar gráfica de área circular. Con datos no cíclicos: usar gráfica de líneas.

Si son pocos períodos: Con una o pocas categorías: usar gráfica de barras. Con muchas categorías: usar gráfica de líneas.

Mostrar relaciones (relationship): o Para dos variables: usar gráfica de dispersión (Scatter). o Para tres variables: usar gráfica de burbujas.

Para mostrar distribución (distribution) de datos: o De una variable:

Con pocos puntos de datos: usar histograma de columnas. Con muchos puntos de datos: usar histograma de línea.

o Con dos variables: usar gráfica de dispersión. o Con tres variables: usar gráfica de área 3D.

Para mostrar composición (composition)de los datos: o Con cambio a través del tiempo:

Con pocos períodos: Donde sólo importa la diferencia relativa: usar gráfica de

columnas acumuladas (Stacked) al 100%. Donde importan las diferencias relativas y absolutas: usar gráfico

de columnas acumuladas. Con muchos períodos:

Donde sólo importa la diferencia relativa: usar gráfica de área al 100%.

Donde importa la diferencia relativa y la absoluta: usar gráfica de área.

o Con datos estáticos:

υψEstándares para la creación y documentación de universos del Sistema de Información Social

Para participación simple del total: usar gráfica de pastel (pie). Para acumulación o substracción del total: usar gráfica de catarata. Para componentes de componentes: usar gráfica de columnas

acumuladas al 100% con subcomponentes.

ERRORES A EVITAR EN LA REPRESENTACIÓN DE DATOS

Existen algunas recomendaciones sobre errores que suelen suceder en el diseño de los cuadros de mando que dificultan la comunicación y como consecuencia la usabilidad. Se debe evitar:

Despliegue excesivo de detalle o precisión. La lectura de un cuadro de mando no requiere de un alto grado de precisión para comunicar lo fundamental. Un exceso en precisión sólo recarga la visualización sin aportar una mayor calidad en la información.

EVITE UTILICE

Q23,147,738.46 Q23.1M

76.4526% 76.4%

154.848490578 154.8

Usar métricas implícitas. El usuario no debe tener necesidad de realizar sus propios cálculos para entender un resultado. El cuadro de mando debe incluir de manera explícita el cálculo de cualquier métrica que requiera.

EVITE UTILICE

Docentes actuales: 142,170 Docente requeridos: 145,654

Docentes faltantes: 3,494

Usar una forma de representación de datos inadecuada. La forma de representación seleccionada debe facilitar la rápida y exacta comprensión del dato. En la medida que el usuario debe buscar, analizar e interpretar se corre el riesgo que la comunicación no sea la apropiada.

υωEstándares para la creación y documentación de universos del Sistema de Información Social

EVITE UTILICE

En esta gráfica el usuario debe ver el color de la selección que le interesa y luego buscar a qué se refiere en la columna de etiquetas a la derecha de los datos. También es difícil identificar cuál respuesta es la más importante.

En esta gráfica el usuario inmediatamente identifica cuál de las opciones es la más importante y encuentra el nombre directamente con su selección.

Usar una variedad innecesaria de elementos. En los cuadros de mando, como ya se indicara, “menos es más”. El mezclar innecesariamente una variedad diversa de componentes y formas de representación no mejora la comunicación. Por el contrario el usuario debe invertir más tiempo en interpretar la forma en que comunica el dato cada tipo de componente, en lugar de usar su tiempo en entender los resultados presentados.

υϊEstándares para la creación y documentación de universos del Sistema de Información Social

EVITE UTILICE

No hacer evidente lo importante. Como ya se indicara, no toda la información reviste la misma importancia. Siempre existirán elementos de información que requieren una mayor atención del usuario. Eso debe ser claro en el diseño del cuadro de mando.

EVITE UTILICE

En este cuadro de mando todos los componentes tienen la misma relevancia, no pudiendo identificarse si existe algún elemento que tenga mayor importancia que los restantes.

En este cuadro de mando el mayor espacio asignado a la parte central identifica claramente el área donde el usuario debe focalizar su análisis o interacción con el cuadro de mando.

υϋEstándares para la creación y documentación de universos del Sistema de Información Social

Usar de manera inapropiada o excesiva el color. El color debe ser utilizado en el contexto de resaltar elementos de información importantes, como alertas o valores extraordinarios. Debe, en todo caso, favorecer el entendimiento del dato. Debe evitarse usarlo únicamente como elemento “decorativo”.

EVITE UTILICE

El uso de color excesivo en este cuadro mando distorsiona los datos que presenta. Los distintos colores en la barra no diferencian valores, sólo buscan “decorar” sin aportar al entendimiento. Por el contrario tienen el efecto de confundir, pues el usuario busca una interpretación que no existe.

El manejo sobrio del color en este cuadro de mando evita distracciones innecesarias. El color es utilizado unicamente para romper la monotonía y enmarcar las áreas del cuadro de mando (color de fondo) y para resaltar los datos críticos de monitoreo (medidores de avance con colores rojo-amarillo-crítico de alerta).

Usar fondos que saturan la visibilidad de la información. Evite, en lo particular en las gráficas, usar fondos que cargan visualmente el cuadro de mando sin aportar a facilitar la lectura.

υόEstándares para la creación y documentación de universos del Sistema de Información Social

EVITE UTILICE

El uso de líneas para separar las columnas y de color en el fondo cargan visualmente la gráfica y dificultan la claridad en la lectura. Las líneas guía atraviesan las columnas, causando una mayor distorsión.

La eliminación de las líneas guía y del color liberan la vista de distractores y permiten enfocarse en los datos. El uso de líneas intermedias de valores en blanco permiten visualizar el valor de la columna sin interrumpir la lectura.

Otras recomendaciones para favorecer la claridad y legibilidad incluyen:

EVITE UTILICE

Una serie histórica requiere el uso de las líneas de valores intermedios para facilitar la lectura. El fondo sin embargo no aporta a la comprensión y sólo recarga la gráfica.

En esta gráfica se conservan las líneas divisorias de valores pero se utiliza un tono más claro en su trazo para que no entorpezcan la lectura y se elimina el color de fondo, el cual es innecesario.

υύEstándares para la creación y documentación de universos del Sistema de Información Social

EVITE UTILICE El texto con orientación vertical dificulta la lectura de las etiquetas en el eje horizontal.

El uso de los primeros tres caracteres del nombre de cada mes es suficiente para identificarlos y permite una fácil lectura.

El usar una etiqueta para el nombre de la serie, cuando únicamente existe una serie que ya está nombrada en el título de la gráfica es innecesario.

Al eliminar la etiqueta de la serie del lado derecho se gana un espacio que sirve para una mejor visualización de los datos que están siendo presentados.

El usar un fondo degradado para relleno de las columnas dificulta la lectura del dato representado.

El usar un relleno sólido que no distorsione el límite superior de las barras facilita una rápida lectura del valor representado.

φτEstándares para la creación y documentación de universos del Sistema de Información Social

EVITE UTILICE El orden desordenado de las columnas dificulta la comparación entre una marca y otra representada.

El orden descendente permite identificar de manera inmediata el líder y su comparación con sus seguidores.

φυEstándares para la creación y documentación de universos del Sistema de Información Social

ANEXO: CUADROS DE MANDO BIEN DISEÑADOS