Nuestro objetivo es mejorar el atractivo estético de nuestros informes de Power BI, convirtiéndolos en algo más que simples vehículos para los datos: se convierten en narrativas convincentes.
Al aprovechar Figma, nuestro objetivo es infundir a nuestros informes elementos de diseño que eleven la experiencia general del usuario, transformando datos complejos en historias interactivas que atraigan e iluminen.Una piedra angular de los informes impactantes de varias páginas es la navegación eficaz. Una navegación bien diseñada es el faro que guía a nuestros usuarios a través del mar de datos, asegurando que puedan descubrir la información que buscan sin sentirse abrumados o perdidos. Esta publicación sirve como guía sobre cómo podemos usar Figma para mejorar nuestra navegación de informes de Power BI más allá del uso de formas, botones y marcadores de Power BI para crear una navegación interactiva de informes que mejore la experiencia del usuario de nuestros informes.
En esta guía, exploraremos cómo ir más allá del uso de la opción de botón del navegador de página en Power BI y crear una navegación de informes que sea intuitiva, interactiva y eleve los aspectos visuales de nuestro informe. Profundizamos en cómo podemos usar las capacidades de diseño de Figma, combinadas con las características interactivas de Power BI para crear dicha experiencia.
La navegación que crearemos es una navegación vertical y minimalista que muestra iconos visuales para cada una de las páginas del informe. Esto permite a nuestros usuarios centrarse en los datos y en los elementos visuales del informe y no distraerse con la navegación. Sin embargo, cuando nuestros usuarios requieran detalles sobre las opciones de navegación, proporcionaremos una experiencia interactiva para expandir y contraer el menú.
Sigue leyendo para conocer todos los detalles sobre cómo aprovechar la funcionalidad de diseño que ofrece Figma y los elementos interactivos, incluidos los botones y los marcadores de Power BI. Al final, tendremos todo lo que necesitamos para crear elementos de navegación de informes que cautiven y guíen a nuestra audiencia, haciendo de cada informe una experiencia perspicaz y agradable.
Sumérgete en Figma: Diseñando nuestra navegación
Comenzar el viaje de mejora de nuestros informes de Power BI con Figma comienza con la comprensión de por qué Figma es una poderosa herramienta de diseño. La belleza de Figma radica en su simplicidad y poder. Es una herramienta basada en la web que permite a los diseñadores crear elementos de interfaz de usuario fluidos y dinámicos sin una curva de aprendizaje pronunciada asociada con algún otro software de diseño. Otro gran aspecto de Figma es la comunidad que proporciona miles de plantillas, complementos y kits de interfaz de usuario gratuitos y de pago para poner en marcha nuestro diseño.
Bienvenidos a la comunidad de FigmaExplora miles de plantillas, plugins y kits de interfaz de usuario gratuitos y de pago para poner en marcha tu próxima gran idea.
Para empezar con Figma primero tendremos que crear una cuenta. Figma ofrece varias opciones de cuenta, incluida una versión gratuita. La versión gratuita proporcionará acceso a los aspectos más importantes de Figma, pero limita la cantidad de archivos en los que podemos colaborar con otros. Aquí hay una guía útil para comenzar.
Bienvenidos a FigmaBienvenidos a Figma. Comienza tu viaje de aprendizaje con recursos para principiantes que te harán crear en poco tiempo.
Para nuestros informes de Power BI, el uso de Figma significa diseñar elementos que sean estéticos y funcionales y ayudar en el rendimiento al reducir el número de formas y elementos de diseño necesarios en nuestros informes de Power BI.
Elaboración de la navegación del informe
Una vez que hayamos iniciado sesión en Figma, comenzaremos seleccionando en el menú del lado izquierdo, luego Diseño en la parte superior derecha para abrir un nuevo archivo de diseño en Figma.DraftsFile
Para comenzar con nuestro nuevo diseño, agregaremos un marco a nuestro archivo de diseño y definiremos la forma y el tamaño de nuestro diseño.
Después de seleccionar Marco, se abrirá un panel de propiedades para establecer el tamaño del Marco. En el caso de un informe estándar de Power BI, el tamaño del lienzo suele ser de 1280 x 720. Podemos usar la opción de tamaño preestablecido para TV (en Escritorio). Luego cambiamos el nombre del marco haciendo doble clic en el nombre del marco en el Panel de capas e ingresando el nuevo nombre, aquí usaremos . A continuación, modifique el ancho, ya que la navegación no ocupará todo el informe, a 75 y establezca el relleno en transparente. Esto actuará como fondo o contenedor para nuestra navegación cuando se colapse.Power BI Navigation Collapsed
Creación de variables locales y elementos base
Antes de comenzar a agregar elementos a nuestra navegación, crearemos variables locales para almacenar los colores del tema de nuestra navegación. En el panel, busque variables locales y, a continuación, seleccione variables abiertas.Design
Seleccione y, a continuación, Color para comenzar. Para la navegación crearemos dos variables de color, una correspondiente al color del elemento de fondo y la otra al color del elemento de primer nivel de nuestro tema de Power BI. Si estamos usando Figma para diseñar wireframes o maquetas de nuestro informe de Power BI, podemos expandir fácilmente el número de variables para incluir todos los colores utilizados dentro del tema de Power BI.Create variableComenzamos a construir nuestra navegación agregando los elementos base. En este diseño que incluye el rectángulo azul oscuro que contendrá nuestros iconos de navegación y el icono de menú que al hacer clic expandirá el menú de navegación. En el menú, seleccione el rectángulo para agregarlo dentro de nuestro marco, luego establezca el ancho en 45.Shape toolsPower BI Navigation - CollapsedA continuación, añadiremos el icono de menú que actuará como botón para expandir y contraer el menú de navegación. Para esta navegación utilizaremos un icono de estilo de menú de lista o hamburguesa con una altura y anchura de 25, que está centrado y colocado hacia la parte superior dentro de nuestro fondo de navegación. A continuación, establece el color del icono en nuestra variable background-element. A la hora de buscar iconos para usar que se ajusten al estilo del informe, la comunidad de Figma tiene una amplia gama de opciones que ofrecer.
Adición de iconos de navegación de página
Una vez que nuestros elementos base están establecidos, podemos pasar a agregar los íconos de nuestra página que actuarán como botones de navegación de la página cuando el menú esté colapsado. El informe final al que añadiremos este menú de navegación contiene cuatro páginas, por lo que añadiremos un icono para cada página. Todos los iconos tendrán el mismo tamaño que el icono del menú (altura y anchura establecidas en 25), centrados horizontalmente en el fondo de navegación, colocados verticalmente hacia la parte superior y su color establecido en el color de nuestro elemento de fondo.
Esto servirá como nuestro menú de navegación base o plantilla para todas las páginas. A continuación, copiaremos esto para cada página de nuestro informe y lo modificaremos para indicar la página actual.Para hacer esto, primero agregamos una línea (debajo de las herramientas Forma) con un ancho de 45, un color de trazo de nuestro elemento de fondo, un tamaño de trazo de 35 y un punto final redondo. A continuación, colóquelo en el panel de capas directamente encima del fondo de navegación, de modo que aparezca debajo de los iconos de la página. Una vez creado, alinéelo horizontalmente con el fondo de navegación y centrado verticalmente debajo del icono de la página actual. Actualice el color del icono a la variable de primer nivel y, a continuación, agregue una sombra paralela. Repita este proceso para cada icono de página, creando un menú de navegación que se puede agregar a cada página de nuestro informe.
Creación del menú expandido
Ahora que hemos completado los elementos de diseño del menú contraídos, los usaremos como base para crear el menú expandido. La creación del menú expandido comienza duplicando cada uno de los menús contraídos. Una vez duplicados, cambiaremos el nombre de cada uno de los marcos de navegación de Power BI para reemplazarlos y, a continuación, llevaremos a cabo algunos pasos para cada uno.CollapsedExpandedPrimero, aumentamos el ancho del marco de 75 a 190 y aumentamos el ancho del rectángulo de fondo de navegación y el indicador de página actual de 45 a 155.A continuación, agregue nuevos componentes de texto para cada icono de página en el menú. Para cada componente de texto, el color de la fuente coincidirá con el color del icono, y para el texto de la página seleccionada, el grosor de la fuente se establece en seminegrita.
Además de poder usar el icono de menú para alternar la navegación entre contraído y expandido, también agregaremos un icono de menú de contracción específico al menú expandido. Primero agregamos un nuevo elemento de línea al marco de menú expandido, con un ancho de 15, un tamaño de trazo de 35 y un elemento de primer nivel de color de trazo. Lo colocamos en el lado derecho de nuestro fondo de navegación y lo alineamos verticalmente centrado con el icono del menú. A continuación, añade un icono de cierre con las mismas dimensiones que todos nuestros otros iconos y colócalo centrado en este nuevo componente de línea.
Al seguir estos pasos, hemos dado el primer paso hacia la creación de un elemento de navegación visualmente atractivo, dinámico e interactivo que hará que nuestros informes de Power BI sean más atractivos y fáciles de usar.
Exportación e importación de diseños de Figma en Power BI
Una vez finalizado nuestro elemento de navegación en Figma, el siguiente paso es darle vida dentro de nuestro informe de Power BI. Esto implica exportar los diseños de Figma e importarlos a Power BI.
Preparando nuestro diseño de Figma para la exportación
Antes de exportar nuestro diseño, siempre es una buena idea comprobar el tamaño de los diferentes componentes para asegurarnos de que son exactamente lo que queremos y para que se integren con nuestro informe de Power BI sin problemas. Figma nos permite exportar nuestros diseños en varios formatos, pero para Power BI, los archivos PNG o SVG son una opción común.Para exportar nuestros diseños, seleccione el marco en el panel de capas (por ejemplo, Power BI Navigation – Expanded – Sales) y, a continuación, en la parte inferior del panel de diseño de la derecha, busque exportar. Seleccione el tipo de archivo de salida deseado y, a continuación, seleccione Exportar.
Importación y alineación de diseños de Figma en Power BI
Una vez exportados nuestros diseños, importarlos a Power BI es sencillo. Podemos agregar imágenes a través del menú, seleccionando y navegando a nuestros archivos de diseño exportados.InsertImageUna vez importada, ajustamos algunas configuraciones de propiedades en la imagen, para que se integre con nuestro informe creando una apariencia cohesiva. Primero seleccione la imagen y en el panel Formato, en Propiedades generales de >, desactivamos la opción y luego establecemos la altura en 720 y la anchura en el ancho del marco de Figma (por ejemplo, 75). Luego ponemos el relleno en todos los lados a cero. Esto garantiza que la navegación tenga la misma altura que nuestro informe y aparezca correctamente.Lock aspect ratio
Repita el proceso anterior para el diseño de navegación ampliado.
Dar vida a nuestra navegación con la interactividad de Power BI
Cuando fusionamos nuestros elementos de diseño con la funcionalidad de interactividad de Power BI, elevamos nuestros informes de Power BI a recorridos dinámicos y centrados en el usuario a través de los datos. Esta fusión se logra a través del uso estratégico de los botones y marcadores de Power BI, junto con la delicadeza estética de nuestra navegación diseñada por Figma.
Comprender el papel de los botones y los marcadores
Los botones de Power BI sirven como el elemento interactivo con el que interactúan los usuarios, lo que lleva a acciones como la navegación por la página, el filtrado de datos o el inicio de vínculos externos. La clave para aprovechar los botones de manera efectiva es diseñarlos de manera que sean intuitivos y estén alineados con el diseño general de nuestro informe.Los marcadores capturan y recuperan estados específicos de un informe y, lo que es más importante para nuestra navegación, esto incluye la visibilidad de los objetos. Para crear un marcador, primero vaya al menú y seleccione marcadores para mostrar el panel Marcadores. Luego configuramos nuestro informe como queremos que aparezca, luego hacemos clic en Agregar, o si el marcador ya existe, podemos hacer clic con el botón derecho y seleccionar actualizar.View
Guía paso a paso
Primero, desde el menú, activaremos el panel Selección y marcadores para configurar nuestros objetos de informe y marcadores para nuestra navegación. Veremos el objeto de imagen en nuestro panel de Selección, que serán las dos imágenes de navegación que importamos anteriormente. Cámbieles el nombre para darles nombres descriptivos, de modo que podamos distinguirlos. Por ejemplo, y .Viewnav-collapsednav-expanded
We will add two bookmarks to this page of the report, one for corresponding to the collapsed navigation and one for the expanded navigation. To keep our bookmarks organized we will give then a descriptive name ( and ) and if needed we can use groups to further organize them.<page-name>- Nav Collapsed<page-name>-Nav Expanded
Now we will add buttons that overlay our navigation design element to add interactivity for our users. We will a blank button to our report with a width of 45 and a height of 35.
Then on the Format pane under Style, locate the Fill option for the button and toggle it on, and set the following for the Default, On Hover, and On Press states.
Default: Fill: Black, Transparency: 100%
On Hover: Fill: Black, Transparency: 80%
On Press: Fill: Blank, Transparency: 60%
Duplicate this button for each page icon and position the buttons so that they overly each icon in the navigation menu. In the Selection pane double-click each button to rename the object providing it a description name (e.g. ). Then select all and group them, providing the group a name as well (e.g. ).nav-collapsed-menunav-collapsed-buttons
Now that our buttons are created, styled, and positioned, we will set the specific actions required by each.
Navigation menu icon
Action
Type: Bookmark
Bookmark: Sales – Nav Expanded
Tooltip text: Expand Navigation Menu
Current page icon button
Action
Type: Page navigation
Destination: None
Tooltip text: Sales Analytics
Style
Fill: Toggle off (this will remove the darkening effect when hovered over since this page is active)
All other page icon buttons
Action
Type: Page navigation
Destination: Select the appropriate page for the icon
Tooltip text: Name of the destination page
Next we copy and paste the group to duplicate the buttons so we can modify them for our expanded navigation menu. After pasting the group ensure to set the position to the same position as the initial grouping. nav-collapsed-buttonsnav-collapsed-buttons
Rename this group with a descriptive name such as .nav-expanded-buttons
Additionally rename all the buttons objects within the group to keep all our object well organized and clearly named (e.g. ).nav-expanded-menu
Adjust the visibility of our object so that the group and image are not visible, and their counterparts are visible.nav-collapsed-buttonsnav-collapsedexpanded
Set the width for all the page navigation buttons to the width to 155, this will match our navigation background with we created in Figma. No other properties should have to be set for these buttons.
Update the action of the button and select the bookmark we created previously. nav-expanded-menuSales - Nav Collapsed
Copy and paste this button, then rename the new button as .nav-expanded-close
Cambie el tamaño y coloque este botón sobre el icono de cierre en nuestra navegación ampliada.
En el panel Selección, arrastre y suelte este botón en la agrupación.nav-expanded-buttons
Cuando se expande la navegación, queremos evitar la interacción con los objetos visuales del informe. Para ello, añadiremos un nuevo botón en blanco al informe y le daremos un tamaño que cubra todo el lienzo del informe.
En el panel Selección, coloque este botón directamente después de las imágenes de navegación para que quede debajo de .nav-expanded
En el panel Formato del botón nuevo, en la pestaña General, active el fondo y establezca el color en negro con un 80 % de transparencia.
Active la acción de este botón y configúrelo en un tipo de marcador y establezca el marcador en nuestro marcador. Esto garantizará que si un usuario selecciona fuera de las opciones de navegación, cuando se expande la navegación, se devuelva al estado de navegación contraído donde podrá interactuar con los objetos visuales del informe.Sales - Nav Collapsed
Por último, estableceremos nuestros marcadores, de modo que se muestren los objetos de navegación correctos para los marcadores expandidos y contraídos.
Haga clic con el botón derecho en cada marcador y desmarque la opción, por lo que este marcador no mantendrá el estado actual de los datos. Cuando un usuario expande o contrae el menú o se mueve a una página diferente, no queremos afectar a las segmentaciones de datos o filtros seleccionados que haya seleccionado.Data
Asegúrese de que la agrupación y la imagen estén ocultas mientras sus contrapartes expandidas estén visibles. A continuación, haga clic con el botón derecho en el marcador expandido y seleccione actualizar.nav-collapsed-buttonsnav-collapsed
Seleccione el marcador contraído, muestre los objetos contraídos y oculte los objetos expandidos. Haga clic con el botón derecho en el marcador contraído y seleccione actualizar.
Ahora que hemos creado toda la interactividad para nuestra navegación en Power BI para nuestra página de Análisis de ventas, podemos copiar y mover fácilmente estos objetos (por ejemplo, las agrupaciones de botones) a cada página de nuestro informe. Luego, en cada página, importaremos los 2 diseños de navegación de Figma específicos para esa página, luego los dimensionaremos y alinearemos. Después de esto, podemos agregar dos nuevos marcadores para esa página para almacenar el estado contraído y expandido, usando el mismo proceso que usamos en el paso #9. Y finalmente, actualice el botón de la página actual para desactivar el relleno de estilo y active el relleno de estilo para los botones del icono de ventas (consulte el paso # 4).Al combinar las capacidades de diseño de Figma con las características interactivas de Power BI, podemos crear una experiencia de navegación que no solo eleva la apariencia de nuestro informe, sino que también se siente intuitiva y atractiva. Este enfoque garantiza que nuestros informes no solo se vean, sino que se interactúe con ellos, lo que proporciona información detallada y una experiencia de usuario más agradable.
Sumando todo: una experiencia de navegación completa
Después de crear nuestros elementos visuales de navegación en Figma e integrarlos con los poderes interactivos de los botones y marcadores de Power BI, es hora de reunirlo todo y verlo en acción.
Probar y perfeccionar la navegación
La clave de una experiencia de navegación exitosa para nuestros usuarios radica en su usabilidad. Es importante realizar sesiones de prueba de usuario para recopilar comentarios sobre la intuición de la navegación. Durante estas sesiones podemos tomar nota de las zonas en las que los usuarios dudan o se pierden. Luego, con estos comentarios, podemos refinar aún más nuestra navegación, haciendo ajustes para garantizar que los usuarios puedan encontrar sin esfuerzo la información que necesitan dentro de nuestros informes.
Sugerencias de experiencia de usuario (UX) para informes de Power BI
Una navegación bien diseñada es solo una pieza del rompecabezas de la experiencia de usuario. Para mejorar aún más nuestros informes de Power BI, también debemos tener en cuenta lo siguiente.
Claridad: asegúrese de que nuestros informes sean claros y fáciles de entender de un vistazo. Debemos usar un etiquetado coherente y evitar saturar una página con demasiada información.
Coherencia: aplique el mismo diseño y estilo de navegación en todos nuestros informes, y quizás incluso en diferentes informes. Esta coherencia ayuda a los usuarios a aprender a navegar por nuestros informes más rápidamente.
Comentarios: proporcione comentarios visuales y textuales cuando los usuarios interactúen con los elementos de nuestro informe. Por ejemplo, establecer las opciones de encendido y pulsado para nuestros botones o el uso de información sobre herramientas para explicar lo que hace un botón.
Elevación de informes de Power BI
Al adoptar la fusión de las capacidades de diseño de Figma, los consejos de UX y la interacción y el poder analítico de Power BI, podemos desbloquear un nuevo potencial en nuestros informes y la participación de los usuarios. Este viaje desde el diseño hasta la funcionalidad ha mejorado el atractivo estético, la facilidad de uso y la funcionalidad de nuestro informe. Recuerde que el objetivo de nuestros informes es contar la historia de los datos de una manera perspicaz y atractiva. Continuemos explorando, iterando y mejorando nuestros informes a medida que trabajamos para lograr este objetivo, mientras elaboramos informes que van más allá de las herramientas de análisis, sino experiencias que informan, involucran y alimentan las decisiones basadas en datos.
