Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Gavin Carter
closed thread

Clickable button with Hover state?

I want to be able to create buttons that display a hover state on rollover as well as make them clickable (I.e. link to another page/screen/URL)
In experimenting so far, I have found this to not be possible. I can great clickable buttons with a hover however the hovered state remains when rolling off the button. 

Any one looking to do the same things? Surly? 

This post is associated with a known feature request: [[problemTicketSubject]]. Let our Product team know that you’re interested in this feature.

Sign in to add your vote

Thanks for taking the time to share your feedback about making our product better. We’ve let our Product team know that you’re interested in this feature so they can factor that into their product strategy.

comments

Sort by

official comment

Elizabeth Brookshire
InVision ambassador Elizabeth Brookshire , ambassador
Comment actions Permalink

Hello and welcome! It sounds like you're trying to use a multi action hotspot with overlays, which currently has the limitation you're seeing - checking the box Stay on Target Screen in your hotspot settings will allow for the ability to navigate through overlays, but the hover screen doesn't disappear when you hover off of the overlay hotspot.

In the meantime, you can simulate closing the overlay by building hover hotspots with a destination of "Link Back/Close" anywhere you want the overlay to close when hovered. It's admittedly a little bit tricky and does take some work to achieve, but it should work in most cases to simulate closing the overlay/hover state.

Another option would be to change the hover to a click entirely, so that the sequence would be "click" to open the hover state and "click" to close/clickthrough to the destination.

And finally, you can use entire screens instead of overlays to get around this. On screen one, you would have your flat designed page. You would add a hover hotspot on an icon that takes you to a second screen. Screen #2 would have the flat page plus the hotspotted icon window already opened and highlighted.

I'm going to open a support ticket so we can let our Product team know that you'd like to be able to navigate through overlays and have the hover state disappear when you hover off of the overlay hotspot. Thanks!

 


raymassie
InVision ambassador raymassie , ambassador
Comment actions Permalink

how is this not already available?! 

20

Justin White
InVision ambassador Justin White , ambassador Edited
Comment actions Permalink

Agreed… This has been one of the leading reasons why (myself included) designers have been using other prototyping tools. Having to create overlays and clunky "back to previous screen" interactions when building prototypes is time consuming.

 

This kind of interaction is handled well in the following applications:

Axure using Dynamic Panels (as well as natively)

Atomic using components, pages, and actions

UXPin using a similar structure as Atomic

JustInMind, similar to UXPin

 

If this isn't resolved in Studio, this feature should be added sooner rather than later… 

15

Howard Coale
InVision ambassador Howard Coale , ambassador Edited
Comment actions Permalink

InVision's lack of a simple, seamless, non-complex-workaround method of creating quick, realistic hover states and animated interactions (which can then be clicked to a go to different screen) will pretty much end up being the final deal breaker for me if another prototyping app offers it with Sketch integration. And that's not a lie. Time and again I have come up against this and have tried all sorts of kludgy workarounds... some come off better than others. But none of them really work in a way that is convincing or that emulates the real experience. My patience and loyalty to InVision is wearing thin. If I can't mimic a real application's UX flow, transitions and true interaction design without going to Flinto or some other app, InVision becomes more and more iffy as the go-to prototyping tool for serious clients. The types of exchanges that have become customary:

Question: "Why doesn't this rollover work?" Answer: "We'll show it to you in code. It's more realistic."

Question: "There's a rollover here but I can't click it"  Answer: "You can't really do both in a simple way in InVision. We'll show it to you in Flinto."

Yes, there are workarounds. But having run a start-up, one thing became obvious: if you want to beat the competition, find out where their clients are using elaborate workarounds, and start there. You can't lose. It feels like InVision is vulnerable if they can't close this loop in a serious way.

24

Monique
InVision ambassador Monique , ambassador
Comment actions Permalink

Well, this stinks. I was hoping for a "this is how you do it" answer not a workaround.

Honestly, I was expecting to do this like this...

1) Add the overlay hover hot spot to your main screen.

2) Add a hot spot on the overlay (screen) and link to another page (this page would be the clicked state) when clicked.

Apparently when a screen is used as an overlay then the hot spot on the screen is ignored.

16

Jennifer Nguyen
InVision ambassador Jennifer Nguyen , ambassador
Comment actions Permalink

I was very frustrated by this experience as well, it greatly put a hinder when conducting user testing. After much searching on the web, I finally found a way to do it! I'm actually surprised that I had to find the answer in some blog instead of this community thread. What was posted on this thread was a "hack", but there's actually a simple way to do this. Hope this helps: http://plastik.hu/2016/02/13/creating-hover-states-that-click-in-invision/

-6

Yael
InVision ambassador Yael , ambassador
Comment actions Permalink

Jennifer, this does not solve the problem becuase you used another screen for your hover state, and not an overlay. This option makes no sense when you have several buttons on your screen, since then you will need to create many screens with the different hover states, instead of one hover state option as an overlay. 

When Using an overlay, the very annoying problems discussed above are still happening.  

1

Katrina Abbott
InVision ambassador Katrina Abbott , ambassador
Comment actions Permalink

This seem like a very simple thing that UI designers need to communicate to developers, Anima App does hover states well but that don't sync when pushing Sketch files to Invision. Does Invision plan to implement something that allows this to be one with loads of 'work around' time? Or at consider working with Anima app to allow functionality to stream in form Anima apps hovers? Pressed, enabled and other states should be considered also, with inclusion of animations.

 

 

Really want to know whats happening here, I have spent many hours and days looking at the best way to work with hovers moving forward.

1

Howard Coale
InVision ambassador Howard Coale , ambassador Edited
Comment actions Permalink

Chiming in again:

In all of the different threads in which this issue is raised, you see only 3 types of responses:

1.
Posts from many other people irritated and frustrated and running up against the same problem with InVision, and flabbergasted they still haven't upgraded their software to do something that other prototyping apps already do;

2.
Well meaning people offering workarounds that actually don't work for complex interfaces or projects, or involve so many steps that it's absurd (particularly when something like Axure, as much as I hate it, does these things very simply);

3.
Representatives of InVision saying "Yes we can do that! Just follow these simple, multiple workarounds!"

Seriously. This is not going to work. InVision has to make some huge strides in developing their software so that it actually meets more than just the basic needs of a prototype.

4

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador Edited
Comment actions Permalink

Hi Katrina,

I am so sorry that this has caused you so much frustration. I understand that this is a feature that could certainly be improved to make InVision users' lives easier.

At the moment the only solution is the workaround(s) we have posted and that Howard Coale has alluded to. However, I am happy to create a feature request on your behalf so that our Support team is reminded of the frustration this is causing. I will also raise this issue to the Product Manager so that we can work on a solution for this issue.

Please sit tight and look for a message from our Support team soon.

Thanks,

Shaina 

-1

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador Edited
Comment actions Permalink

Hi Howard,

At InVision, we are always looking for ways to improve our product and we appreciate your feedback. I will also be opening a feature request on your behalf so that you are kept in the loop for a solution to this issue.

Please feel free to add anything to this feature request that you think might be helpful to the InVision Product Team.

Thanks,

Shaina

NOTE: We’re currently tracking interest for this. If anybody else would like to add their vote for this feature, please contact Support here and voice your opinion!

2

Ochionet
InVision ambassador Ochionet , ambassador
Comment actions Permalink

That in 2018 a prototyping tool that is not free does not support the hover & click behavior, it is to launch fireworks

Tools like Framer with a soft learning curve are giving wings to designers who want to present prototypes at the height of their work.

I hope that Invision takes note of its great deficiencies, we are not playing.

0

Katrina Abbott
InVision ambassador Katrina Abbott , ambassador
Comment actions Permalink

Appreciate the reply. It seems to be a big problem for everyone that I speak with that is in the same situation. Let us know the progress of the issue when you know. 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Katrina,

Of course! We have brought this to our Product meetings to raise this issue on getting this feature request escalated.

Thanks for hanging in there with us. You will be notified once this feature has been updated.

Thanks,

Shaina

0

Dizzaim
InVision ambassador Dizzaim , ambassador Edited
Comment actions Permalink

Hi all,

I'm also sad that the Screen as Overlay feature (still noted as NEW in Invision O o ) isn't allowing me to add a click / link on it.

The workaround that Elisabeth proposed a few months ago is "working" for me for ages now, but only for not too complex projects or interfaces.
I just fine tuned it by using a Transparent screen (no bg) for the hover state page (2nd screen) with only the Hover Block on it (same position on the page) > loads faster than the full designed page.

Hope Invision will fix the Screen as Overlay click-feature asap.

Regards,
David

 

2

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Dizziam,

I'm glad that the workaround is working for you for the time being. However, we are dedicated to getting this feature enabled.

If you haven't already, please add your vote for this feature by contacting Support here and voicing your opinion!

Thanks,

Shaina

0

Robin Popescu
InVision ambassador Robin Popescu , ambassador
Comment actions Permalink

Completely disappointed by the lack of an essential feature like that. And shocked about the fact, that the community has to tell you that this feature should be available in a prototype Software.... Like you would have not a single designer in your team..

I prototyped a whole Project before I noticed that 2 overlaying hotspots bug each other... And If I try to do it with the workaround:
"Stay on target screen" the whole Project bugs and neither another hover nor a another click hotspot works anymore...

I really can't understand how such an easy-to-have feature that is just essential for prototyping is missed in an established Software like InVision, which doesn't exists since yesterday...

7

Manuel Barrio
InVision ambassador Manuel Barrio , ambassador
Comment actions Permalink

I'm only starting to use Invision and I'm in SERIOUS SHOCK!

So this is a prototyping tool that doesn't do the most basic interaction that has been around since the start of the web........

I'm lost for words, is this really happening?

10

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador Edited
Comment actions Permalink

Hi Robin and Manuel,

Please know that your feedback, and the rest of the feedback in this thread from others, is certainly being considered. As mentioned in my posts above, we encourage anybody who has additional feedback to open a support ticket.

The great news is that Studio, in particular, will include functionality that should help with this issue!

We appreciate you all hanging tight while our team works diligently on this. I will continue to speak with our Product team about this during my weekly meetings with them. 

Thanks,

Shaina

0

Daniel Pipitone
InVision ambassador Daniel Pipitone , ambassador
Comment actions Permalink

I struggle with this often. I support the addition of this feature!

4

Shaina Torgerson
InVision ambassador Shaina Torgerson , ambassador
Comment actions Permalink

Hi Daniel, 

Thanks for adding your feedback regarding this feature. 

In the interim, we suggest using the 'stay on target screen' when setting the hotspot. We know that this is not the perfect solution, but should help. Stay tuned for news on this feature in this thread.

Have a great day,

Shaina

-15