Cómo hacer cuadros de mando: III

Patrones de diseño, las leyes de Gestalt y la prueba del estrabismo.

Si nuestro objetivo es "hacer cuadros de mando" esta entrada no tenemos por que tenerla muy en cuenta, pero si nuestro objetivo es "hacer BUENOS cuadros de mando" esta entrada se revela como uno de esos puntos importantes que marcan la diferencia entre un buen cuadro de mandos y un cuadro de mandos a secas.

Ya hemos hablado sobre que cualidades debe tener un buen cuadro de mandos. Que se resumen en la frase: "Un buen cuadro de mandos debe ser útil para el usuario, presentarle la información que quiere de la forma que quiere y más fácil para el posible"

Hoy nos vamos a centrar en el aspecto visual - psicológico. ¿Y por qué? Pues es bastante sencillo, porque hay una diferencia entre la información que contiene un cuadro de mandos y lo que el usuario ve. La entrada de hoy se centra en luchar contra la expresión: ¿Donde está? No lo veo.



Y para ello vamos a hacer referencia a las Leyes de la Gestalt  que estudiaba cómo nuestro cerebro percibe los colores y las formas.  Algunas de las cuales citamos algunas aquí:

• Principio de la Semejanza - Nuestra mente agrupa los elementos similares en una entidad. La semejanza depende de la forma, el tamaño, el color y otros aspectos visuales de los elementos.
• Principio de la Proximidad - El agrupamiento parcial o secuencial de elementos por nuestra mente basado en la distancia.
• Principio de Simetría - Las imágenes simétricas son percibidas como iguales, como un solo elemento, en la distancia.
• Principio de Continuidad - Los detalles que mantienen un patrón o dirección tienden a agruparse juntos, como parte de un modelo. Es decir, percibir elementos continuos aunque estén interrumpidos entre sí.
• Principio de dirección común - Implica que los elementos que parecen construir un patrón o un flujo en la misma dirección se perciben como una figura.
• Principio de simplicidad - Asienta que el individuo organiza sus campos perceptuales con rasgos simples y regulares y tiende a formas buenas.
• Principio de la relación entre figura y fondo - Establece el hecho de que el cerebro no puede interpretar un objeto como figura o fondo al mismo tiempo. Depende de la percepción del objeto sera la imagen a observar. 

No me quiero ir demasiado del tema pero,si quiere seguir profundizando en el tema te recomiendo mucho esta entrada que te ayudará a comprender los principios anteriormente citados. Además de que completa y complementa perfectamente este artículo.


Estas leyes nos permiten entender como percibimos la información gráfica y en base a ello desarrollar buenos cuadros de mandos. De estas leyes, para nuestros intereses, podemos extraer que:

• Información semejante debe ser mostrada de forma semejante - Nuestra mente tiende a buscar y agrupar por el principio de semejanza por lo que toda la información del mismo tipo debe ser mostrada de la misma forma. Por ejemplo, la información relativa a la evolución en el tiempo de los recursos económicos deberá ser representada siempre de la misma forma, gráficos de barras todos, o lineas de tendencia todos, o tablas todos. Lo que no debemos hacer es variar y presentar un indicador como un gráfico y otro como una tabla para variar. La variedad aquí es mala.
• Una distribución uniforme  i continua de la información  es mas productiva que un cuadro de mandos muy impactante -  No se trabaja con cuadros de mando impactantes, se muestran en las reuniones con los amigotes pero después cansan a la vista. Es mucho más productivo buscar una interacción relajada y funcional (le pese a quien le pese).
• Una distribución uniforme de la información por toda la pantalla produce un efecto relajante al no tener que "buscar" la información
• Una distribución continua de la información  con el mismo tipo de información en los mismos sitios y ordenada por afinidades hace que sepamos  donde ir a buscar la información y si lo que buscamos se encuentra donde estamos mirando (la frase "esto debería estar por aquí" aquí también aplica ) 
• Un elemento destacado tapa a todos los demás - Un elemento destacado o distorsionaste en nuestro cuadro de mandos hace que sólo veamos ese elemento y dejemos de ver el resto. Tendemos a ver una forma y un fondo por lo que un elemento destacado pasa a ser la forma y el resto el fondo. Muchas veces nos enfrentamos a la petición: "Esto lo quiero en rojo y bien destacado, que es lo más importante" . Pues bien, ese elemento hará que el resto de información mostrada no sea percibida por el usuario. Corremos el riesgo de que nuestro usuario "deje de ver" todo lo demás ya que forma parte del fondo y lo percibimos como no relevante. El hecho de destacar algo hace que nuestro cerebro interprete que eso es lo único   importante y el resto pase a ser totalmente secundario y carente de interés.
• Menos es mas  -  Esta contradicción que es casi un aforismo de los tiempos modernos,  es el patrón de diseño que debemos seguir para conseguir que "de un vistazo se obtenga toda la información necesaria". Esta frase será nuestro caballo de batalla cuando queramos hacer un buen cuadro de mandos para un usuario nuevo.
• Casi siempre nos tendremos que enfrentar a la frase "yo lo quiero todo, todo es importante".
• Será casi imposible de convencer al usuario de que no es que no queramos trabajar y no queramos ponérselo, es que ponerlo todo hace que no se vea nada. Nuestro cerebro busca formas simples. Si le damos una serie de formas simples las interpretará como tal, si le damos un tapiz de formas simples lo interpretará como un tapiz tomando tanta fuerza el todo que se perderán las partes.
• Será  casi imposible de convencer al usuario de que los efectos están muy bien para enseñar a los amigos pero que no aportan nada.
• Finalmente, un consejo práctico, no luches demasiado contra este "error"  el usuario acaba dandose cuenta de todo esto por si solo y en el próximo cuadro de mandos sus peticiones serán mas razonables.
• Menos es mas II - Lo que no es información es ruido - Ante cualquier elemento que vayas a introducir al cuadro de mandos debes preguntarte ¿Que información me aporta esto? Todo lo que no aporte información  es ruido que se añade. Una gráfica, un texto, un fondo, una imagen, un color ¿Aportan información relevante sobre algo? En caso de que la respuesta sea no entonces no debe estar. No tiene sentido incluir nada que no aporte información ya que distrae al usuario del verdadero objetivo: la información. 

La Prueba del estrabismo

Todo lo dicho hasta ahora es muy interesante, pero ¿Como aplicarlo? ¿Como comprobar que nuestro cuadro de mandos sigue y respeta estos consejos? Aplicarlo es quistión de diseño y discusiones. Ahí poco te puedo ayudar desde el blog. Pero ¿Cómo podemos probar si nuestro cuadro de mandos presenta una estructura uniforme  y sigue los principios anteriormente dichos? Pues es mucho más fácil de lo que parece. Quitándonos  las gafas. O  para aquellos que no tengáis la habilidad de desenfocar la realidad naturalmente tomando un pantallazo de nuestro cuadro de mandos y desenfocándolo.

Todo esto se basa en colores, fondos y formas, pues llevemos nuestro cuadro de mandos a, precisamente eso, colores formas y fondos. 

Vamos a verlo, tomemos por ejemplo el siguiente cuadro de mandos:

 Aparentemente está muy bien, bueno, en realidad está muy bien. Es un cuadro de mandos operacional con mucha información pero nos sirve perfectamente para nuestro objetivo... Desenfoquemoslo a ver que pasa:

Ahora tenemos nuestro cuadro de mandos reducido a colores, formas y fondo. Empezamos a ver cosas, hay espacios en blanco, hay partes que destacan mas que las demás, Nos damos cuenta que nuestro cuadro de mandos presenta algunas características de las que hemos dicho que deberíamos evitar:

• Hay elementos de color que destacan sobre los demás. Eso será la figura y el resto  el fondo. Voy a dejar de ver todo lo demás. todos los colores deberían ser uniformes.
• La información no está uniformemente distribuida. Tenemos que ir a buscar información mas allá de donde nos indica la cabecera que hay información.  La distribución no es lineal hay áreas en blanco en un cuadro de mandos casi completamente lleno lo que hace que tengamos que buscar.
• Los selectores forman parte de la cabecera, y son tan importantes como esta ya que ofrecen información al mismo nivel.

Si se marca todo veremos tenemos que:

Por lo que si arreglamos estos puntos tenemos que nuestro cuadro de mandos pasa a ser tal que así:

Vuelve a mirar ahora los dos cuadros de mando.... ¿Notas la sutil diferencia?  Cambia alternativamente de uno a otro y fíjate como los percibes ...... Exacto! se trata de eso!


Y ya que estamos hablando de visualización de datos, te recomiendo mucho esta interesante charla de TED:



Próxima entrada:  Cómo hacer cuadros de mando: IV - El método iterativo.