En nuestro blog hemos pasado por muchos métodos de documentación de reportes y modelos semánticos. Lo cierto es que no todos son iguales para las distintas audiencias. A veces con simples efectos bastará para darle al usuario la información que necesita.
En este artículo veremos un efecto que podemos introducir para dar rápidamente información al usuario con solo pasar el mouse por el lugar que desean.
Comienzo aclarando que si bien el título de este artículo dice que vamos a hacer un efecto sobre un tarjeta, en realidad, se puede hacer sobre cualquier visualización. Lo que si recomendamos es hacerlo sobre visualizaciones estáticas, es decir, aquellas que no proveen otra información adicional a lo que se ve sin interacción. Si la visualización provee más información posando el mouse o clickeando, entonces es dinámica. Esto hace a las tarjetas, kpis, y gauges como los candidatos más apropiados.
Seguramente les ha pasado que hay personas preguntando por la definición de un métrica o una tarjeta para enteder lo que hace o cual es el contexto en el cual opera. Para esos escenarios, este efecto podría fortalecer la experiencia del usuario.
Esto da un veloz vistazo a lo que necesitamos que el usuario preste atención. En un resumido texto podemos establecer la fórmula, el concepto, detalles de la construcción (ej, tipos de costos asociados, etc). Veamos como se hace.
Sabiendo que la tarjeta es estática procedemos a poner un objeto por encima, dado que poner el mouse encima de la tarjeta no suele dar información adicional dentro de Power Bi.
Colocamos nuestro botón exactamente encima de la tarjeta. Para la primera parte del efecto, lo volvemos transparente sin texto para el estado "por defecto":
Finalmente cambiamos al estado "on hover" y ponemos el mismo color de fill que la tarjeta posee adicionado un texto:
De ese modo generamos el efecto de tener información adicional al posar el mouse.
Puede ocurrir que el usuario esté acostumbrado a que una tarjeta no produce un efecto y perderse esa información. Aquí es donde entra nuestra creatividad. Podemos poner un tercer objeto que llame la atención. Este objeto estaría entre la capa del botón transparente y la tarjeta para llamar la atención del usuario.
Otra opción sencilla sería agregar un ícono informativo en el botón transparente que llame la atención al usuario para posarse por encima. Esto evitaría sumar visuales y podemos posicionarlo a nuestro gusto jugando con el formato de padding. Algo así:
Espero que el efecto les resulte atractivo y ayude a sus usuarios a comprender mejor los tableros.