While building an app, two months ago, I encountered the situation where I wanted to make users to confirm when trying to delete a record. The first thing that comes to mind is a little yes/no popup with a message: “Are you sure?”. But the kind of data to delete was, to my opinion, not enough important to build a whole popup + workflows for that action. Plus, it forces the user to redirect his attention to the message and yes/no buttons.
So instead I built a little button that ask for a second click to confirm the deletion. The button appears normal, but when clicked, it changes its aspect to make it clear it is waiting for a second click. And if the button becomes “un-hovered”, it resets to the first state.
No, workflow/custom states/plugin needed!
I thought I wouldn’t be the only one in need for this, so here’s a link to an example: Bubble editor Bubble preview
I will also add, I implanted an additional key that after 5 seconds, the button returns to its original level. I also like the Google approach, a black banner for 6 seconds giving the choice to ‘undo’ the situation. The kind of integration that could be an integral part of Bubble.
Excellent animation! Just what i needed. While im still new to Bubble, i cant figure out how to set the “isn’t hovered” workflow. I can’t find the group i need to hide in the elements dropdown. Help please!
I like this approach, but seeing some quirks. The first approach doesn’t seem usable on touch inputs, it doesn’t stay to allow the second selection. On the second one, if you double click shouldn’t it clear back to either original state or something else? You mentioned you added a couple more states, are those in the demo?
You’re right, these buttons won’t work on touch-based devices since the hovering state is watched to reset the button.
Perhaps it would be a better UX to have the button to reset automatically after the second click. Right now, it resets its state when the pointer is moved out of the button.
