User cancellable action with fade


#1

I am trying to prototype something really simple, but again find it intensely hard in Axure.
We are looking at giving the user a grace period of 5 seconds after selecting something to prevent having to press an Ok button. if user presses the same item again in that 5 seconds, the action is cancelled, if not, the action is performed and the item removed from the list. We want to prototype different visualizations.

First idea is: user clicks, item becomes selected and starts to slowly fade away, when vanished, it’s removed from the list. If user presses again before it’s vanished, it immediately returns to full opacity. Similar to what an email notification would do. Sounds really simple no? But I cannot figure out how to create that cancellable fade.

A very simplified example is attached. Can anyone give any clues?
Cancelable actions.rp (56.1 KB)


#2

I’m unaware of a way to cancel or interrupt any interaction in Axure natively.

But you can fake what you’re trying to do using a dynamic panel: CancelFade.rp (58.6 KB)

The “trick” is to use two buttons and just which to the fully visible one while the original one is still fading away.


#3

Thanks.
That example has removed some of the essentials though. I am trying to build your example ideas into my proto, but have not succeeded so far. Some issues are: in my original the fading buttons were in a repeater. So the timer variable needs to be also (you should be able to start multiple fade-outs simoultaniously). And when the item has faded, it should be removed and the other ones should move up. The selection with the reversed background is also not playing nice. Still trying though, will get back if I don’t get this to work (pffff, I could have coded this in WPF in less than an hour… what’s the point of a prototyping tool if it takes more time than a coded implementation?)


#4

If 99% of the time Axure is faster, 1% of the time Axure is slower. This is one of those 1% times. I’ve been in a similar boat with a similar interaction. In the end I just didn’t bother recreating it in Axure and implemented a lo-fi representation of it.

I think I ended up just using jsfiddle to share the details I omitted.


#5

I think this should give you what you want. The fade is happening in a loop so you can make it smoother if you want by adjusting the loop.

Cancelable actions.rp (58.0 KB)


#6

Hmmm, not quite right because if you click more than one at the same time, only the first one deletes.

Closer but not sure why the other ones are not deleting. Maybe because their position in the repeater changes when the first one deletes ?

[EDIT - i think it is actually because all the repeater items reload when the delete happens, not sure there is going to be any way to fix that]


#7

Yeah. @David_YOW beat me to it. I can’t figure out a way around the repeater update just resetting everything… Sorry I couldn’t be more help.


#8

Thanks you all for your help guys! :+1:

@David_YOW: I liked your solution because it’s much simpler than the 2 state approach, but then I realized you loose the ability to play around with the fade out animations (like doing an Ease Out). As the point was to prototype it to see what feels nice I guess this is not the way to go.

@huban: Also many thanks. Still trying to incorporate your idea, but haven’t figured out the multi-item fade and indeed the repeater resetting it.

@nkrisc: For some reason I like tinkering around in Axure, but I strongly disagree with your statement. In fact, it just the other way around I would say: in 99% I can prototype things more quickly in WPF (though I have the benefit of an extensive (Telerik) library there). Everything I’ve tried so far in Axure ended up in difficulty (resizable windows, light/dark mode proved to be too much of a hassle, a sortable & filterable grid as widget, a maintainable widget library, etc, etc). Perhaps Axure is good for simple stuff like web site or simple interactions, not so much enterprisey class dekstop stuff.


#9

True, it can depend on your domain. I’ve worked primarily on large e-commerce sites and it’s been fine. But if you got a feature heavy native desktop app, I could see how it might be a pain.


#10

I’ve tried to get it working for quite some more hours, but no luck. Instead of using global variables I put the countdown counter in the repeater, so each item could have it’s own timer, but that gave the same problem as @huban indicated: it resets so the animation does not work anymore. Took me a while to figure that out, because I also put a countdown timer on it and did work nicely. :man_facepalming:

Anyways, giving up on this. What a shame, this was the ultimate case to get Axure more embedded in my company. My product owner made this rough design in PowerPoint (though with a kind of ‘progress bar’ instead of the fade). I thought: let’s quickly prototype the 2 variants to see how that works and we can send our customer the link to axure cloud so he can see it in action too. Tried to do this in my spare time to get some goodwill for creating dynamic prototypes in general, but this has failed miserably. :disappointed_relieved: