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.
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:
- In InVision V7, open any screen that needs a hotspot.
- In the toolbar at the bottom, click the Build icon () or use the keyboard shortcut: B
- 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.
- Click the Link To drop down and select the destination.
After you set the destination, the Trigger and Transition dropdowns will appear.
- Click the Trigger dropdown and select which trigger will prompt the hotspot.
- Click the Transition dropdown and select the type of animation you want to use.
- 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.
- Click Save.
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:
- Open the appropriate screen in Build mode.
- Move your cursor to one of the corners of the hotspot, where the cursor will change into a diagonally pointing arrow.
- 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:
- Create a hotspot.
- In the hotspot modal, select the Include hotspot in template checkbox.
- Click Create (if creating a new template) or select the pre-created hotspot from the dropdown.
- Click Save.
- 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:
- View a screen in Build mode.
- Near the top of the browser window, click the hotspot template drop-down arrow.
- Hover over the hotspot template name and click the lightning bolt () icon, which will open a screens drawer—just above the toolbar at the bottom of the browser window.
- Select all the screens you want to apply the template to, and then click Done.
When you set up a timed redirect on a hotspot, you can define the time duration that passes before the screen triggers a transition and opens the destination screen.
To set up a timed redirect on one of your screens:
- Open the appropriate screen in your prototype, and enter Build mode.
- Just above the top of your prototype screen, click the timer () icon.
- 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.
- In the After text field, enter the time duration (in milliseconds) you want to pass before the transition is triggered.
- If working with a mobile prototype, click the Transition drop-down and click the transition effect you want.
- Click Save.
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.