Skip to main content
InVision Support Home Page

Getting Started

Loading...

[[ rootSection.name === "Studio" ? "InVision Studio" : rootSection.name ]]

Adding Interactive Hotspots to InVision V7 Prototypes

The content below provides answers for InVision V7. If you’re on InVision V6, read this article instead. Not sure which version you're using? Find out now.

Once your screens have been uploaded, you'll be ready to open the prototype in the InVision V7 console, so you can add interactivity between screens using hotspots as well as adjust various settings for your prototype.

Creating hotspots

Hotspots are the links that let your stakeholders explore your design as a fully interactive prototype, providing a more realistic user experience when reviewing.

Create a hotspot

To add a hotspot to your desktop prototype:

  1. In InVision V7, open any screen that needs a hotspot.
  2. In the toolbar at the bottom, click the Build icon (invision-v7-console-build-icon.png) or use the keyboard shortcut: B
  3. Click and drag a blue box around the area you want to be interactive.
    The hotspot modal will open so you can complete steps 4 - 8.
  4. Click the Link To drop down and select the destination.
    After you set the destination, the Trigger and Transition dropdowns will appear.
  5. Click the Trigger dropdown and select which trigger will prompt the hotspot.
  6. Click the Transition dropdown and select the type of animation you want to use.
  7. If wanted, select one or both of the settings checkboxes:
    • Maintain scroll position after click: Check this box if you don't want the scroll position to reset after the hotspot is clicked; if you choose to maintain scroll position, the user will be taken to the same point on the destination screen.
    • Include hotspot in template: Check this box if you want to duplicate hotspots across multiple screens. Learn more in the "Creating hotspot templates" section below.
  8. Click Save.
    invision-v7-create-hotspot-overlay.gif

Select a link destination

When creating a hotspot, you can point the link to numerous types of destinations:

  • Another point on this screen: Create an anchor link that points elsewhere on the same screen you have open.
  • Link Back / Close: Create a link to the screen the user previously visited.
  • Screen as Overlay: Create an overlay link to simulate modal windows, drop-down menus, and other on-screen prompts—all without leaving the currently selected screen.
    Screen overlays are extremely popular, because they're extremely useful. Check out this article to learn the finer points: Using overlays in InVision V7
  • Previous Screen in Series: Create a link to the screen directly to the left of the currently selected screen when viewing all screens in the expanded thumbnail tray.
  • Next Screen in Series: Create a link to the screen directly to the right of the currently selected screen when viewing all screens in the expanded thumbnail tray.
  • External URL: Create a link to a separate website URL.

Resize an existing hotspot

To resize a hotspot you’ve already created:

  1. Open the appropriate screen in Build mode.
  2. Move your cursor to one of the corners of the hotspot, where the cursor will change into a diagonally pointing arrow.
  3. Click and drag the corner to resize the hotspot.

Creating hotspot templates

 

You can save time and energy using hotspot templates. When screens share common links, you only have to create hotspots for them on one screen, and then you can add those hotspots to a template. From there, you'll be able to apply that hotspot template to the rest of your screens. You can assign a new or existing hotspot to a template.

To set up and apply hotspot templates:

  1. Create a hotspot. 
  2. In the hotspot modal, select the Include hotspot in template checkbox.
  3. Click Create (if creating a new template) or select the pre-created hotspot from the dropdown.
  4. Click Save.
  5. Repeat the above steps for any additional templated hotspots on this screen only.

Once you've added all the hotspots to your template on that screen, go to any other screen. From the templates drop-down, select the checkbox next to the template.

You can also apply a template across multiple screens at once. To apply a bulk hotspot template:

  1. View a screen in Build mode.
  2. Near the top of the browser window, click the hotspot template drop-down arrow.
  3. Hover over the hotspot template name and click the lightning bolt (invision-v7-hotspot-template-bulk-add-icon.png) icon, which will open a screens drawer—just above the toolbar at the bottom of the browser window.
  4. Select all the screens you want to apply the template to, and then click Done.

Background color or image

InVision pulls the bottom corner pixel colors and tries to match the background as closely as possible. If the background color isn't quite perfect, however, you can change it in just a few quick steps. If working with a desktop prototype, you also have the option to replace the background color with an image.

To change the background color (or image) for your prototype screens:

  1. Open the appropriate screen in InVision.
  2. Toward the right end of the console toolbar, click the ••• (More) menu.
  3. Under the Background heading in the screen configuration modal, update the color using a hex code or by clicking one of the document colors.
    If you're editing a desktop prototype, you can replace the background color with an image by clicking Upload New and then setting the placement of the image to Center (invision-v7-background-image-center-icon.png), Tile (invision-v7-background-image-tile-icon.png), Tile Horizontally (invision-v7-background-image-tile-horizontally-icon.png), or Fixed (invision-v7-background-image-fixed-icon.png).
  4. To use the background on all screens in the prototype, select the Apply to all current and future screens checkbox.
  5. Click Save.

Fixed headers and footers

Adding subtle transparency to things like fixed navigation goes a long way in raising the bar of fidelity and realism in your prototypes.

You can set fixed headers and footers on mobile and desktop prototypes. While viewing the screen in Build mode, you'll notice Fixed Header and Fixed Footer checkboxes in the upper-right corner of your browser window. Once you select one or both of those checkboxes, simply drag the slider control icon (invision-v7-fixed-header-slider.png) to define the area that will remain locked in place while the rest of the screen scrolls.

Fixed headers and footers are limited to 45% of the image height to ensure that the prototype is still scrollable after adding fixed headers or footers.

Fixed elements

If you want an element—such as a button or perhaps a Contact modal or other important element—to float on top of your design as you scroll, you can create a fixed element using the fixed headers and footers described above. Fixed sidebars are not present at this time, but the functionality is being considered within a future release.

To create a fixed element:

  1. Open your design file and add extra transparent space to the bottom of the design.
    Be sure to leave room for approximately 20px of margin to the right and bottom of where you will place the fixed element.
  2. Drop your button or other fixed element into the transparent space.
  3. Export your screen as a PNG, so the file will maintain the transparent space (rather than fill the space with a color, like a JPG or other image file would).
  4. Upload it to your prototype in InVision V7.
  5. Open Build mode and mark that transparent area at the bottom of your prototype screen as a fixed footer or header.

Timed redirects

When you set up a timed redirect on a hotspot, you can define the time duration that passes before the the screen triggers a transition and opens the destination screen.

To set up a timed redirect on one of your screens:

  1. Open the appropriate screen in your prototype, and enter Build mode.
  2. Just above the top of your prototype screen, click the timer (invision-v7-timed-redirect-icon.png) icon.
  3. Click the Automatically Redirect To drop-down arrow and select your destination screen.
    Alternatively, click Browse to open your screen thumbnail drawer and select the destination screen there.
  4. In the After text field, enter the time duration (in milliseconds) you want to pass before the transition is triggered.
  5. If working with a mobile prototype, click the Transition drop-down and click the transition effect you want.
  6. Click Save.
    invision-v7-timed-redirect.gif

To turn off the timed redirect, click the timer icon again, and then click Turn Off. Timed redirects within an overlay (animated or static) aren't supported today, but this is something that we're considering for the future.