When implementing context menus with sub menus, and other similar hover-triggered UI, you run into an issue where the user needs to be extremely precise when moving their cursor to the target area - otherwise they will inadvertently hover over a different item and the target UI will be hidden.
Others have created workarounds for this, and the most popular solution is to implement a “safe triangle” between the user’s cursor and the target UI, allowing the user to move diagonally from the current hovered item to the target item.
In essence, you get the current position of the user’s cursor, measure the height and position of the target UI, then draw a triangle between the points that the user can move their cursor across without triggering the target UI to hide.
To accomodate the cases where the user DOES intend on hovering a different item, people typically use delays that will hide the safe triangle if the user’s cursor stays within it after X number of milliseconds.
Now, my question is: What would be the most efficient way to implement this in Bubble?
I am not a developer, but I’ve heard that React makes this much easier due to how it interacts with the DOM.
Would it be best to somehow port in React in order to accomplish this? or is their an efficient way to accomplish this solely using bubble + custom JS / CSS / HTML?
We have a UI that absolutely needs functionality like this in order to not be a giant pain for users. Any help here would be massively appreciated!
If you open the menus/submenus with a click/press rather than hovering, this shouldnt be a problem. And even it would be mobile-friendly as well (a nice side effect).
Some brainstorming here - and I haven’t played around with these settings so i couldn’t say for sure - but 2 thoughts I had:
I’m curious if you could setup a trigger after a certain amount of time of hover on a choice, (0.5 sec?) the others temporarily do not have hover triggers?
Additionally I was curious about building a waterfall of transparant groupfocus that would effectively block the lower choices without being visible.
As a user, I would hate this.
As a developer, I would hate building this.
As a guy on the forums who does not have to be apart of this after I finish typing my message… I have a lot of thoughts.
I think that this triangle approach is weird and does not take into account a user slightly bumping their mouse to the left originally before moving right. So you could create another boundary located around that specific option.
Creating these boundaries leads to a UI that does not update when the user hovers over an item they may want therefore causing poor UX.
Introducing Rapid Value Decay.
Upon Hover over an option the options is assigned a value X increasing at a rate Y.
When the user is no longer hovering over the current option the value of X decreases at a rate of Y^2.
The cursor over an area increases values, and when not hovered those values rapidly decrease.
The active menu is the one where the user has the highest point value.
This causes the user to have similar UX to what they would expect normally which is that hovering over an item will lead to the user seeing the active menu.
Thank you and if you want a more complicated system to solve a really simple issue I’m always here! (But really I think this would solve your use case perfectly and you can modify the values slightly to result in the expected behavior. It also addresses the issues that a user might bump their mouse slightly or wobble slightly out of the triangle area.)
I have heard this approach before. But moving the mouse to the left is already still hovering because the mouse is still on the button. So it won’t close the submenu. The second link in the original post has a demo:
When an item in the main list is hovered/focused, the pane to the right updates with summary information about that item along with actions the user can take on that item.
This allows the user to efficiently churn through a large list of items that would otherwise have to be clicked each time.
The app is primarily built around keyboard shortcuts (moving through the list with up/down arrow keys, adding labels with the “L” key etc.), but not every user will use them all the time - and when you want to use your cursor to interact with the right pane, it gets annoying when you accidentally hover over a different item and the pane changes.
You might say “well, why don’t you make the pane update upon clicking an item?”, but clicking the item pulls up a detailed view of that item, so we can’t use click for this functionality.
I’d go more of the hubspot style click to open panel, close button to hide.
That UI is a dev nightmare on bubble & UX isn’t super common. Unless you’re already cash flowing and have a large user base then staying as close to standards as possible with simpler Ux is better.
I believe you might be misunderstanding about this part, however: “I think that this triangle approach is weird and does not take into account a user slightly bumping their mouse to the left originally before moving right”
Also, you can check out software that uses the safe triangle method like slack, linear, attio, notion, and MacOS to play around with the behavior. I’ve never encountered any friction with these apps/OS’s when trying to hover over a different element.
I think you have a valid reason trying to design the way you want. I will give this a shot as a personal challenge in my next free time and report back here
We’ve already built this UI / UX in bubble (minus the safe triangle). Involves quite a bit of custom code but it works great.
The main goal of this app is to bring a hyper efficient UX to a space that has really clunky incumbent apps that everyone hates using - so we can’t skimp on UX unfortunately.
I mentioned this elsewhere, but to provide more context:
The primary UX path is using up and down arrow keys to page through each item, taking actions with keyboard shortcuts based on the information in the side pane, with the ability to hit enter or click an item to open a detailed focused view for that item.
However, not every user will use keyboard shortcuts all the time, and the lack of this safe triangle feature makes things annoying, similar to how 2 stage menus without this feature are annoying.
