While much has been written about buttons in Power BI, and this blog itself has covered the topic extensively, I haven't seen these effects being used often to improve the user experience. This article will show a way to enhance buttons in order to provide a pleasant experience similar to what we can see on various websites and information systems. The idea is to play with changes that occur when the mouse hovers over a button. Yes, many people might say, “Of course I change the background on hover to make it look nice.” Well, here we will explore two different ideas beyond simply changing the background color.
Before we begin, I'd like to clarify a golden rule for creating a great button experience: users should always have a clear indication of which button is currently selected compared to the others. It may sound simple, and many will argue that the Navigator visual available today already solves this problem. However, when we want to go further with custom effects, we will need a bit of retro creativity with our old friends, bookmarks.
NOTE: If you are not familiar with how to easily highlight a selected button by changing its background color, you can review that article first.
Next, we will look at two effects separately, although they could easily be combined.
Underlining Instead of Background Highlighting
When creating buttons, it is natural to focus on their background, both for the selected state and the hover state. However, if we pay attention to the web, we can see that a much lighter visual effect is often achieved with underlined titles.
With a simple underline, I can quickly identify which button is currently selected. I can also use the same effect when the cursor hovers over the other measures.
To build this, we will need two buttons (the active and inactive versions, just as in the previous article) and a shared horizontal line. The inactive button, in its normal state, has a solid background (0% transparency) that exactly matches the page background color, along with gray text. When the mouse hovers over it, the button changes to white text and a 100% transparent background, making the line behind it visible.
When we click the active button, meaning the one that represents the currently displayed state, it remains hidden until the button is clicked. After the click, we will make it visible using bookmarks. This button is positioned exactly on top of the inactive one. While the active button is visible, we will hide the inactive button. The active button will have the same properties in its Default state as the On Hover state of the inactive button, making the horizontal line visible and displaying the text in white. Let's see how the complete setup looks:
If we pay close attention, this effect could easily be applied to the left-side menu as well, using a vertical line.
Motion Spacing
Although Power BI does not provide many visual elements that allow us to experiment with motion effects, in some cases we can simulate them. In this example, we will create the illusion of the text moving slightly to the right when the cursor is placed over the button. To achieve this, we will once again use three elements: two buttons and a vertical line. The difference this time is that instead of simply covering the line as we did before, we will hide and show it. Why make it more complicated this way? Simply because the background has a gradient. In those situations, we cannot have the button in its default state hide the line, because reproducing the exact background effect on the button would be very difficult. Therefore, we will keep the lines hidden until the button is pressed, at which point they will be displayed.
To create this effect, we will set up the inactive button with gray text and no background. The trick will be in its On Hover state. In that state, we will add invisible characters.
What is an invisible character? Invisible text, or invisible characters, refers to special characters that cannot be seen on the screen but are treated like normal letters by the system.
When the mouse hovers over the text, it will begin with invisible characters, creating the effect that the text shifts slightly to the right. Something like this:
Notice that it looks like there are spaces at the beginning, but they are not actually spaces.
Here are the characters if you'd like to copy them: ← after the arrow. If you want to verify that this is not a joke or a trick, you can paste the text into Notepad++ (which can recognize them), and you'll see something like this:
The movement effect is now in place. So, how do we continue enhancing the user experience? By following the golden rule. When the user clicks, we will hide the inactive button to reveal the vertical line and the active button, which in this case has its text colored the same as the line.
Let's see the final result:
That's all for this article. I hope it gives you some new ideas for creating user experiences that feel more modern, friendly, and similar to the web applications we interact with every day.
Remember that these two effects can be combined. For example, you could have a vertical navigation menu that not only displays the vertical indicator line for the selected option, but also applies the movement effect when users hover over the items.
Super User