Bienvenidos al segundo post sobre leyes de UX aplicadas a Power Bi. En esta ocasión, vamos a estar analizando 3 leyes de UX. Para aquellos que no hayan visto la primera parte aquí les dejo el post anterior.
Las leyes que vamos a ver en esta ocasión son: Jakob's Law, Law of Pragnanz y Gestalt Laws of grouping.
Jakob's Law
"Los usuarios pasan la mayor parte de tiempo en sitios que ya conocen" Esto significa que los usuarios prefieren que los desarrollos de tableros sean siempre similares a los tableros que ellos ya conocen.
Todos sabemos que la creatividad es un punto muy importante a la hora de diseñar un tablero. Sin embargo, hay que mantener una cierta cautela cuando realizamos cambios o agregamos nuevas funcionalidades ¿Por qué? Porque no hay que ser muy radical e ir trabajando de a poco, así, se va progresando y logrando un cambio en la interfaz y en la forma en la que el usuario final se relaciona con los tableros.
Como consecuencia de esto, nuestro reporte debe mantenerse entre las mismas líneas que entienden los usuarios finales. Por lo general, siempre se presentan varios "artefactos" en común que se suele utilizar a la hora de diseñar:
- Filtro de fechas (selector, rango) ubicado
siempre en algún borde superior.
- Logo de la empresa ubicado en una esquina ya sea
superior o inferior.
- Filtros o selectores ubicados en el Header,
debajo de él o en algunos casos, a los laterales del dashboard (en mi caso en
particular, los filtros los utilizo siempre en el lateral izquierdo del tablero)
- Se mantiene la misma gama de colores en las
páginas del tablero.
- Se mantiene un mismo tipo de letra para títulos,
otro para texto, otro para los valores de las métricas.
En la siguiente imagen, podemos observar un título común y simple pero que usualmente podemos llegar a ver en algún reporte del usuario final.
Es ahí donde entra nuestro conocimiento en UX, podemos modificar el formato del título, agregar color (se puede elegir cualquiera, pero recomiendo siempre colores relacionados a la empresa), agregar un tipo de formato a la fecha, de selección, con selector de rangos, como para dar ejemplos.
Las imágenes anteriores, muestran un ejemplo simple de como se puede modificar el título de un informe, y muestra una diferencia grande con el agregado de unos simples detalles.
No solamente podemos tener en cuenta el mantener un mismo formato de diseño, sino que podemos explotar la experiencia del usuario en la manera de utilizar el tablero. Entonces logramos que el usuario haga más foco a sus tareas y no tanto en aprender nuevos modelos o la nueva forma de consumir un tablero.
"Esto agrega claridad y consistencia a tus reportes y hace que los usuarios se sienten como en casa"
Law of Pragnanz
La ley de Pragnanz está basado en "ver las cosas como un todo y no como partes individuales". ¿Por qué? Porque la mente humana busca la simplicidad.
En el ejemplo anterior, podemos ver que la imagen compleja es una representación del logo de los juegos olímpicos, como conocemos el símbolo sabemos que se refiere a eso. Sin embargo, hay que prestar atención, porque tiene detalles extras, la pintura corrida como difuminada, una leve inclinación. Al aplicar la ley de Pragnanz lo que hacemos es interpretar la imagen de la manera más simple posible, la representamos como un "todo", en el cual, ese todo no tiene colores, detalles de difuminado, inclinación y nuestro cerebro lo interpreta como si fueran 5 círculos uno al lado del otro.
Pero lo importante, ¿cómo llevamos la ley de Pragnanz a Power Bi? Debemos interpretar cada una de las páginas del reporte como un todo y no como visualizaciones separadas, esto quiere decir que deben estar relacionadas entre sí, y si en una página hablamos de Ventas que las visualizaciones muestren métricas y datos referidos a Ventas, si en otra página hablamos de Stock, deberíamos estar hablando de Stock en sus visualizaciones y métricas. Si bien esto no siempre es así, hay veces que hay que respetar lo que pide el usuario final y armar el tablero según sus intereses. Pero pueden utilizar la Ley de Pragnanz para que la interpretación del tablero sea mucho más simple.
En el ejemplo anterior, podemos ver datos relacionados con ventas, como cantidad de monto adquirido por producto, o cantidad de ventas por países, etc.
También se puede utilizar la ley de Pragnanz para diseñar prototipos de páginas y así, junto con el usuario final, decidir la ubicación de las visualizaciones, filtros, imágenes, etc
Gestalt Laws of groupings
"Los humanos perciben naturalmente los objetos como patrones y objetos organizados"
Las leyes de Gestalt están basadas en que los objetos están conectados entre sí, ya sea por qué se encuentran agrupados, son similares o están conectados de alguna forma para que la audiencia los perciba así. Existen varias leyes de agrupamiento que son:
- Ley de Proximidad
- Ley de Similaridad
- Ley del punto focal
- Ley de la región común
Vamos a ir analizando una por una y ver la forma de aplicarlas en power bi.
Ley de Proximidad
"Los objetos cercanos o próximos entre sí tienden a formar grupos juntos."
Agrupar objetos que se relación, ayuda a que el usuario pueda interpretar las visualizaciones de una forma más fácil y prolija. Si consideramos la importancia de esta ley, debemos decidir a la hora de diseñar, qué elementos deben ser interpretados al mismo tiempo. Por ejemplo: si tenemos alguna visualización, un gráfico de líneas, y tenemos métricas generales como promedio, valores máximos que pueden ser representadas en una tarjeta, podemos formar un "grupo" entre ambos para que el usuario pueda interpretar ambas visualizaciones a la vez.
En la imagen anterior, podemos observar un gráfico de líneas de casos recuperados del Covid y en su lateral izquierdo, una imagen de una cruz para representarlo, debajo de ella el total de casos recuperados. Juntando las visualizaciones entre sí, formamos un único objeto que se interpreta al mismo tiempo.
Ley de Similaridad
"El ojo humano tiende a percibir elementos similares en un diseño como una figura completa, una forma, o un grupo, incluso si esos elementos están separados"
La similaridad está influenciada por las formas, el tamaño y el color de los elementos. Cuando mezclamos distintos objetos entre sí, nuestro cerebro, busca la forma de crear conexiones entre, ya sea porque tienen un tamaño o forma parecida, o porque encontramos patrones de colores, y esto lo hacemos para tratar de entender o generar relaciones de lo que estamos observando.
En la imagen anterior podemos observar cómo se aplica esta ley de similaridad, vemos de forma espontánea como nuestro cerebro asimila patrones, formas y colores y establece relaciones entre los objetos. Ahora bien, debemos aplicar esta ley en Power Bi
Si volvemos a nuestro ejemplo anterior de Covid. Agregando detalles que relacione nuestros elementos, tarjeta que incluye el total y el gráfico de líneas, con algún color por ejemplo el verde en este caso, podemos aplicar la ley de Similaridad.
Consejos para tener en cuenta:
- Diseñar con la Similaridad en la mente: tanto para el diseño de páginas web, como para un tablero o para la función que se utilice, cuando hay que diseñar, siempre hay que tener en cuenta el para que, para quien, y manteniendo relaciones entre los elementos de mi reporte, de mi página web, ayudamos al usuario a que pueda leerlo e interpretar el contenido de la forma más simple posible.
- Utilizar links o botones: la mayoría de los sistemas tiene algún menú que permite al usuario navegar en aplicaciones, páginas web, etc. Power Bi no está exento de esto, se puede utilizar botones y a través de "bookmarks" o "marcadores" se puede generar botones dentro de nuestro reporte. Pero la similaridad se aplica en cada una de las páginas que desarrollamos, ya que podemos mantener una barra de navegación en cada una y así permitirle al usuario desplazarse y consumir sus reportes de la forma más cómoda posible.
- El contenido: colores, fuentes, tamaño de letras, contraste entre colores, etc, todo esto nos permite generar similaridad de acuerdo con el contenido que estamos mostrando en nuestro reporte. Si por ejemplo estamos mostrando tablas como visualizaciones, podemos definirle algún color a las columnas que se relacionen con otra visualización y que, al mostrar el mismo tipo de letra y color, el usuario entiende que se está hablando del mismo contenido.
- Encabezados o Headers: son esenciales en cada diseño de una página web y en Power Bi también se pueden aplicar (es más, siempre recomiendo el uso de headers en los reportes) Se aplica un header a cada página y se mantiene el formato y se puede cambiar los títulos y representar, de una forma general, el contenido de cada página. También se pueden utilizar filtros en el header, recomiendo el uso de filtros de fecha únicamente.
Estos consejos a tener en cuenta aplican la ley de similaridad porque se aplican a varias páginas y es algo que el usuario puede reconocer rápido y fácil.
Ley de Punto Focal
Los puntos focales son elementos o áreas que forman parte de un gran interés para el usuario. Se definen a través del interés y énfasis que debemos hacer para capturar la total atención de los usuarios finales. En la siguiente imagen, podemos observar que existen 2 puntos focales, el círculo grande y rojo, que denominaremos, punto focal dominante, y los puntos focales representados a través de los cuadrados con un rojo menos intenso. Estos elementos buscan que el usuario se concentre más en ellos que en el resto de la imagen.
Cada vez que diseñamos una nueva página en Power Bi, debemos buscar el objetivo de esa página, quienes son las personas que lo van a utilizar, y buscamos mostrar con una o dos visualizaciones la finalidad de porque se creó esa página. Podemos mostrar una métrica, un cuadro, un gráfico de barras, pero que representa el concepto total de la página, también se puede agregar información adicional con otras visualizaciones, con el fin de lograr un mayor entendimiento de los datos. Pero siempre se busca que el usuario se centre en X gráfico.
Siguiendo con el ejemplo del Covid, podemos ver que el punto focal ahora es el botón Info General. Seguimos teniendo el mismo gráfico con las mismas métricas, pero ahora logramos que el usuario, haga foco en "seguir buscando más información".
Como podemos lograr que ciertas visualizaciones sean el punto focal dominante:
- Generando contrastes con colores.
- Aumentando el tamaño de la letra, de la visualización, de imágenes.
- Aplicando algún detalle extra, como un recuadro, una sombra.
- Un título similar al título de la página. Así muestra que es el objetivo de la creación de la página.
Ley de la región común
Es una forma de agrupar los elementos que se relacionan entre sí, ya sea por su tipo y formato, o por el concepto que representan. Se puede crear algún agrupamiento con líneas, recuadrando los elementos relacionados, generando similaridad con los colores.
Power Bi tiene una función que nos permite crear de manera rápida y sencilla este grupo de elementos. Con lo cual se puede, arrastrar y acomodar a gusto todos los elementos a la vez e incluso generar un recuadro que automáticamente se genera encerrando todos los elementos del grupo de elementos.
Como se puede observar, la región común es el agrupamiento de elementos en común para un entendimiento más rápido y simple.
Hasta aquí vamos a dejar éste, un poquito extenso, post sobre las leyes de UX. En la tercer y última parte, vamos a estar aprendiendo como aplicar las tres últimas leyes que nos quedan por ver, Miller's Law, Serial position effect y Hick's Law. Pero para finalizar, no podía dejar de mostrarle como funcionan las leyes juntas.
Espero puedan sacarle utilidad a esta miniserie de post y puedan ir aplicando este concepto de UX a sus tableros de Power Bi. Los estaré esperando en la tercera entrega :D desde ya saludos y muchas gracias por la atención.