Should you always use hotspots for interactions on widgets?

I’ve been using Axure for years, but sometimes I add my interactions to the widget instead of using a hotspot. Should you always use a hotpot to fire interactions instead of the widget itself?

Just wondering. :slight_smile:

I wouldn’t unless there’s some reason you have to. What happens when you move the widget but forget to move the hotspot? Now you’ve got a potentially annoying issue to debug. Better to just keep the interactions with the widgets.

Hotspots are useful if you just want to make an image clickable, you can just throw them on top of the image and link to different pages or whatever.

1 Like

I only use Hotspot if am designing 1 page style website, to scroll to the hotspot.

1 Like

I’m puzzled by this question.

Can you explain a bit more about what you mean?
-have you got an example to share?

I’m genuinely interested in the different approaches people use with axure to solve a problem.


I agree with other respondents here, and will build on what they’ve said. Once you get used to Axure, it is usually best to limit the number of widgets and the complexity of widgets as much as possible. Faster and easier to create, and easier to maintain, debug, update.

So, if you want a button with a label and click action, you don’t need to create it with separate widgets–as designers tend to do with Illustrator or Photoshop:

  • button shape
  • text label in front of button shape
  • hotspot in front of text label with interaction code (the Click or Tap event)

Rather, just make one button widget, edit it’s text value, and assign interaction events directly to it.

As nkrisc points out, hotspots are useful if you want to make only a portion of an image (or any widget) interactive. For example, I will often take a screenshot of an entire webpage (or app, or presentation slide, or photo of a hand-drawn sketch) and place a few hotspots in front of it where a button or link might exist. Likewise, you might want to make several widgets have the same interaction/click result, so you could place a hotspot that covers all of them (versus selecting all and grouping or creating a dynamic panel --not always what works best.) Similarly, it is sometimes necessary to make the clickable area (touch zone) larger than a visual affordance–as in a small icon, logo, or text link–to make it easier to use. So, creating a hotspot larger than your widget is an easy way to create “touch zone padding.”

You can also use hotspots to prevent interactions–or change interactions, bringing a “null” hotspot to front to block interacting with one or more widgets (without disabling them all or incurring a visual change) and then sending to back to allow normal interactions.

Like jamesorior, I often use hotspots for scrolling “anchors”, as well as padding and margins–I usually place one at the bottom of a page as a margin to allow breathing space–so the bottom-most elements aren’t stuck exactly at the bottom of the browser window (or dynamic panel.)

To be honest I only ever use hotspots as a last resort these days.
From way back a few versions ago the original use was to add a clickable object over the top of a page mocked up in Illustrator or Photoshop but you can’t use roll-over styles or make interaction changes to targetable objects. It was a quick and easy way to get a prototype up and running and use it to explain the IA to developers or the client.

I only use hotspots for scrolling to the top and adding some minor interactivity to a static image. Other than that it’s not useful for me.