Botones, botones y más botones. Estos simpáticos amigos se
encuentran en casi toda aplicación que conocemos, aplicaciones para el celular,
páginas web, incluso en informes de Power Bi. Pero… ¿realmente conocemos como
utilizarlos de la mejor forma?
Si están comenzando a utilizar Power Bi, les recomiendo vean primero el siguiente post https://blog.ladataweb.com.ar/bookmarks-mejora-la-ux-con-botones-pintados/ que menciona como utilizar los botones de la herramienta y utilizar bookmarks para mejorar la experiencia de usuario.
Comencemos
Hay tantos botones, y cada uno se diseña y se utiliza de distintas formas.
Para poder elegir el mejor uso de los botones y mejorar la experiencia del usuario, necesitamos comprender cuál será su funcionalidad y que impacto tiene visualmente en nuestro diseño.
Los botones pueden ser de distintas formas, rectangulares, rectangulares con las puntas redondeadas, circulares, íconos, una palabra, etc. ¿Cuál elegir? Y depende mucho de nuestra habilidad para diseñar.
Botón con relieve
Un botón que utiliza el sombreado para simular una leve elevación. Añaden profundidad y eso causa que el usuario, pueda identificarlos de manera más rápida. Su comportamiento es el siguiente:
- Button: el botón por defecto debe tener sombra, el color y el tipo de letra deben ser elegidos a libertad, pero también tienen que ser acorde al dashboard o aplicación que estemos desarrollando. Siempre debe resaltar y mostrarle funcionalidad útil al usuario.
- Hover: este estado del botón se activa cuando pasamos el mouse por encima, por lo general, se recuadra con algún color en el cuál se note esta funcionalidad.
- Pressed: este estado es cuando se presiona o hace click sobre el botón. Se puede ver claramente que la sombra, que daba sensación de elevación sobre el botón, no está presente al momento de presionarlo, tampoco debe tener recuadros. Por motivos de funcionalidad, Power Bi permite realizar el sombreado en un botón, pero no permite quitarle la sombra al momento de presionarlo. Esperemos que, en alguna actualización próxima, se pueda aplicar por defecto esta funcionalidad porque hoy solo es posible colocando un botón transparente por encima como muestra el post antes mencionado 😊.
- Disabled: por último, pero no por eso menos importante, tenemos el estado desactivado.
- En Power Bi, se utiliza el Disabled para poder utilizar Drill through, dónde nuestro botón se mantiene desactivado hasta que seleccionamos algún valor o categoría en alguna visualización. Esto provoca que nuestro botón se "active", permitiendo así él Drill through y un análisis más detallado de nuestra información. Para ver cómo utilizar el botón y el Drill through, les dejo la documentación de Microsoft.
https://docs.microsoft.com/es-es/power-bi/create-reports/desktop-drill-through-buttons - También se puede utilizar el mismo color del botón por defecto y aplicarle algo de transparencia para que se note que no está funcionando todavía, o se puede utilizar un color gris. ¿Para qué incluir un botón que esté desactivado y mostrárselo al cliente? Que buena pregunta, ¿no? Se puede utilizar para indicarle al cliente que el tablero o aplicación que estamos diseñando, va a tener aún más funcionalidades de las que se están mostrando actualmente; también, puede utilizarse al momento de diseñar un prototipo. Sabemos que cuando trabajamos con prototipos, lo que esperamos es un feedback del usuario para re-trabajar nuestro diseño y lograr algo donde el usuario quede 100% satisfecho.
Botón Plano
Estos tipos de botones no tienen relieve ni sombra, pero cambian de color al presionarlos. Así de simple tiene buenos beneficios, pero también inconvenientes.
- Beneficio: es tan simple, que evita que el usuario se distraiga con un botón llamativo de un color fuerte y se concentra en la aplicación, en el texto que esta leyendo, en las visualizaciones, etc.
- Inconveniente: si no se define un texto adecuado para la acción del botón, el usuario puede no darse cuenta de que es un botón o tomarlo como un texto.
Veamos un ejemplo, tenemos un reporte en Power Bi y si el usuario, quiere ver más detalles, debe hacer click en los botones que se encuentran en la parte inferior derecha. Como podemos ver, son del tipo "botón plano" porque no tienen relieve, no poseen fondo ni recuadro.
Pero cuando realizamos un click, podemos ver que aparece un fondo, como dándole a entender al usuario que se trata de un botón.
Incluso le podemos cambiar el color del texto al momento de dar el click para dar un mayor impacto.
Botón Fantasma:
Este botón tiene una particularidad, debe tener un recuadro, ser transparente y estar "vacíos" en su forma por defecto.
Se lo utiliza como un botón secundario, es decir, podemos tener 2 botones uno que nos lleva a la información que el usuario necesita ver todos los días, y agregamos un botón más que nos traiga información que puede ser utilizada o no.
Como se puede ver, tenemos 2 botones en nuestro dashboard, uno que nos indica que podemos investigar nuestros datos de costos en mayor detalle, y el otro nos muestra información del cliente (imagínense una tabla con los datos, número de cliente, nombre, dirección, etc.) Ambos botones nos muestran información útil e importante.
Sin embargo, para un gerente, que trabaja día a día con los costos de su empresa, es posible que necesite indagar más en esos detalles que en los usuarios que tiene en su firma.
Los invito ahora a que comiencen a aplicar estos conceptos de UX para ir mejorando la interacción de sus tableros y aplicaciones. Recuerden que, si bien lo más importante en un tablero es mostrar los números correctos, la interacción de los usuarios con él tiene que ser super amigable y cómodo. No se olviden que sus usuarios van a interactuar con sus diseños a diario.
Esto fue todo y espero les haya gustado, si les gusta agregar experiencia de usuario a sus informes, estén atentos a los futuros post en LaDataWeb 😊
Escrito por Bruno Zurita