[PowerBi] Efectos en botones mouse over
Si bien hay mucho escrito sobre botones en PowerBi y en este blog se ha escrito bastate sobre el tema, no he visto en mucho tiempo el uso de estos efectos para mejorar la experiencia de usuario.
Este artículo nos mostrará una forma de acondicionar los botones para dar una grata experiencia similar a la que podemos apreciar en distintos sitios y sistemas de información. Se trate de jugar con cambios al posicionar el mouse por encima. Si, muchos dirán, "obvio que cambio el background al pasar el mouse para que se vea lindo". Bueno pues aqui mostraremos otras dos ideas diferentes a pintar el background.
Antes de comenzar me gustaría aclarar una regla de oro para lograr una grata experiencia de usuarios con botones. Con esto me refiero a dar evidencia al usuario respecto a cual es el botón actualmente seleccionado frente a otros. Puede sonar sencillo y muchos dirán que el navigator que existe hoy lo resuelve, pero cuando queremos llegar más lejos con los efectos, necesitaremos un poco de creatividad retro con nuestros amigos bookmarks.
NOTA: Si no conoces como delimitar sencillamente un botón seleccionado pintando su fondo, podes revisar este artículo.
A continuación vamos a ver dos efectos por separado que tranquilamente podrían aplicarse juntos.
Subrayado por sobre fondo
Lo más natural al generar botones es concentrase en el fondo que presentan, tanto para la selección como para el paso del mouse. Sin embargo, si prestamos atención a la web, podremos apreciar que un efecto mucho más liviano a la visa aparece con titulos subrayados.
Con un simple subrayado puedo apreciar rapidamente cual es el botón seleccionado en este momento. También puedo jugar con el mismo efecto para cuando el cursor se posiciona por encima de las otras medidas.
Para construirlo vamos a necesitar de dos botones (el activo y el inactivo como en el artículo anterior) y una linea horizontal común. El botón inactivo en su estado común presenta un fondo sólido (transparencia 0%) con exacto decimal que el fondo que posee con letra gris. Mientras que su estado al pasar el mouse por encima presenta letra blanca y fondo transparente 100% para hacer visible la línea que hay por detrás.
Cuando clickeamos el botón activo, es decir el que lleva el estado actual de lo que vemos, permance oculto hasta clickear el botón. Luego de clickearlo con bookmarks lo haremos visible. Este botón esta posicionado exactamente encima del inactivo. Mientras el botón activo este visible vamos a ocultar el inactivo. El botón activo tendrá como "Default" las mismas propiedades que "On Hover" del inactivo, de manera que haga visible la línea horizontal y letra blanca. Veamos como queda todo armado:
Si nos fijamos este efecto podría ser transferido tranquilamente al menú de la izquierda también con una línea vertical.
Espaciado de movimiento
Aún que Power Bi no tenga visualizaciones que nos permitan jugar mucho con efectos de movimiento, algunas veces podemos simularlo. En este caso vamos a simular un ligero movimiento del texto hacia la derecha cuando posicionamos el cursor por encima del botón. Para lograrlo nuevamente vamos a utilizar 3 elementros, dos botones y una línea vertical. La diferencia en esta oportunidad es que no vamos a cubrir la línea de forma simple como antes sino que vamos a ocultarla y mostrarla. ¿Por qué la complicaríamos de ese modo? simplemente porque el fondo tiene un grandiente. En esos casos no podemos hacer que el botón en estado por defecto la oculte porque sería muy complejo lograr el mismo efecto en el fondo del botón. Por ello vamos a tener las líneas ocultas hasta que el botón sea presionado y la refleje en definitiva.
Para lograr este efecto veamos pondremos el botón inactivo con texto gris sin fondo y el truco estará en su estado "On Hover". En ese estado vamos a colocar carateres invisibles.
¿Qué es un caracter invisible? El texto invisible o caracteres invisibles se refiere a caracteres especiales que no pueden ser vistos en la pantalla pero son tratados como letras normales.
Nuestro texto al pasar el mouse comenzará con caracteres invisibles de manera que genere el efecto de que el texto se mueve levemente a la derecha al pasar por encima. Algo así:
Fijense que parece que hubiera espacios al inicio, pero no son espacios.
Aquí dejo los caracteres por si quieren copiarlos: <- atrás de la fecha. Si quieren comprobar que no es broma ni nada, pueden pegar el texto en Notepadd++ (que es capas de reconocerlos) y verán algo así:
La magia del movimiento ya está. Ahora ¿Cómo sigue la experiencia de usuario? con la regla de oro. Al hacer click vamos a ocultar el botón inactivo para hacer visible la línea vertical y el botón activo que en este caso tiene el texto pintado del mismo color que la línea.
Veamos como queda:
Esto fue todo, espero que les traiga nuevas ideas para ir reflejando nuevas experiencias amigables y similares a aplicaciones web que vemos diariamente. Recuerden que pueden combinar ambos efectos. Podríamos tener la lista vertical mostrando la línea vertical ademas de moverse.