Overlapping Buttons

[adobe5505]

Hello, I am working on an interaction where I need to have two independent buttons in the same location.

What I am trying to achieve: The buttons each perfrom a different Advanced Action that is made active by a previous selection. The user will be clicking an image that I would like to have both buttons overlay. I know that it is not possible to have buttons overlap and that only the top one will be the active button.

What I have tried: The work around I tried was to instead of two buttons, I create four buttons in a four square pattern so if the user essentially cliked in the middle of the image they could click one of the four boxes. This however poses an issue because they have to click in a sweet spot for this to work.

Does anyone have any possible ideas for a work around for this situation?

[Lilybiri]

Not sure to understand what you really want. Adding screenshots could help.

Anyway I hope that this is not a responsive project, because stacking in a fluid box is not allowed.

Two interactive objects in the same location, if they are active at the same time is never a good idea. If I understand your requirements well, maybe another workflow could be proposed. Why  not one button with multiple states, and have the appropriate advanced action triggered by using a condition? Seeing a preview of those advanced actions could help as well.

[adobe5505]

Thank you for your reply, I went ahead and created an example so you can get a visual of what I am trying to achieve. Any help is much appreciated!

[Lilybiri]

Sorry, still not clear.  Moreover I don't see overlapping buttons: see only the red square button, the rectangular green and red buttons which do not overlap. I would prefer SVGs over shapes because you can limit the clickable area to the image insteadof the bouncing box.

Where are the advanced actions? 

[adobe5505]

I didn't put them overlapping in the picture so you could see that they were two independent buttons. I did not know that about the SVGs instead of shapes that is a thought.

Here is a closer look at one of the objects:

[Lilybiri]

Still no preview of the advanced actions.

You need to use one button with different states. I really don't see how you can click the red button or the green button at all. From the description above I understood that you want the button to be clicked in a certain sequence,  and that red or green square will appear if the sequence is wrong or correct for this button. Why would you need to have two buttons? This is looking more like some of the games I created (you'll find them on my blog or in the eLearning portal), there is no need whatsoever for stacked buttons unless I still don't understand the goal at all.

It looks also a typical case for a shared action....

[adobe5505]

[adobe5505]

The object could be both correct and in correct, correct if it is clicked in the correct order, but in correct if not thats where I am struggling with the 2 buttons

[Lilybiri]

Sorry, I give up trying to understand why you need two buttons! Animations? What do you mean by 'animations'? Are those OAMs or animated GIFs, or even Effects?  You need to combine the two actions so that they can be triggered by one button, but I don't see how you define whether the click was in the correct sequence or not. How will you define that?

I may be wrong, but you have not thought at all about a conditional action, where the actions to be done depend on a condition. That is the reason I want to know how you'll define which click is correct, or incorrect. Store that in a user variable, a Boolean (values 0/1) and based on that value execute either the correct or the wrong sequence of actions.

[adobe5505]

Thank you for trying! The animations are GIFs nothing to do with the situation I am trying to solve, but you asked to see the advanced actions so since they were there I was saying they are the X's. 

I tried to think about how the conditional actions would work, I already built out the advanced action based on enabling and disabling the buttons which is how they select in the correct order. Before the adition of the wrong answer buttons at any given time only the correct answer button would be enabled on the page and it functions perfectly. But now adding the wrong area buttons is where I come across two actions with one button hence the two buttons. 

[Stagprime]

I would take an approach using variables.

Use one button and have it perform a conditional check.

Depending on the value set by your previous selections, the button would perform a different set of actions.

[adobe5505]

Thank you for this! I tried to explore the conditional actions with variable before but it got messy since I already had the advanced actions built out (just explained above) I am going to start with a blank slate and see if I can fiddle with them again to make it function like I need too

[Lilybiri]

Have a look at this blog post:

http://blog.lilybiri.com/sequence-check-slides-updated-version