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


InVision Cloud V7: Adding Interactivity

The content below provides answers for InVision Cloud V7. If you’re on V6 of InVision, 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 Build mode so you can add interactivity between screens using hotspots as well as adjust various settings for your prototype.

Creating hotspots

 

Hotspots link your screens together. Depending on your prototype type, you'll have various choices for hotspot behavior.

To create a hotspot:

  1. Click a screen.
  2. In the toolbar at the bottom, click the Build icon (invision-v7-console-build-icon.png) or simply press B on your keyboard.
  3. Click your screen and drag a blue box around the area where you want to add a hotspot.
  4. The hotspot menu will open, and you'll be prompted to designate the following:
  • Destination: The destination screen your user will be directed to once they trigger the hotspot.
  • Click or Hover: This determines whether the hotspot will be triggered by clicking it or hover over it.
    Hover is not available for mobile prototypes; however, tapdouble tap, and swipe options are available for triggering hotspots on mobile prototypes.
  • 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. More on hotspot templates below!

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 New (when initially setting up hotspot) or select the pre-created hotspot from the dropdown and click Save.
  4. 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. In most cases it's seamless, but when working with a desktop prototype, if you need to change the background color or replace the color with an image on a given screen, it takes just a few quick steps.

To change the background color or image for your screens in a desktop prototype:

  1. Open the appropriate screen in InVision.
  2. Click the ••• (More) menu at the bottom-right of your window.
  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. Or upload 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.

The background setting is currently not available for mobile prototypes. If you need to adjust the background color of a screen for a mobile prototype, the background color must be updated within the design tool used to create the screen.

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 Cloud 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.


Learn something new

Getting Started Guides