Once your screens have been uploaded, you'll be ready to add interactivity between them using hotspots, as well as change various settings within Build Mode.
Hotspots link your screens together. Depending on your prototype type, you'll have various choices for hotspot behavior.
To create a hotspot:
- Click on a screen.
- Click into Build Mode at the bottom.
- Click on your screen and drag a blue box around the area that you want to be clickable.
- Your hotspot menu will pop up and you'll be prompted to designate the following:
- Destination: The destination screen your user will be directed to once they click the hotspot.
- Click or Hover: This determines whether a user will need to click on a hotspot or hover over it in order to trigger the hotspot. Hover is not available for mobile prototypes.
- Maintain scroll position: 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:
- Go into Build mode.
- Move your cursor to one of the corners of the hotspot. You should see it change into a diagonal pointing arrow.
- Then click and drag the corner to resize the hotspot.
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, then 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 on an action button/link. In the hotspot setup, select the destination screen.
- Check the Include in Hotspot setting.
- Click Create New (when initially setting up hotspot) or select the pre-created hotspot from the dropdown and 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, click the check box 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.
- Click the hotspot template drop down at the top and hover over the template to apply.
- Hover to the right of the hotspot template name, then click on the lightning bolt icon to open a screen drawer below.
- Select all the screens you want to apply the template to and click Done.
InVision pulls the bottom corner pixel colors and tries to match the background as closely as possible. In most cases it's seamless, but if you need to change the background color on a desktop prototype then you can easily change the background color or image for your screens if need be.
To change the background color or image for your screens in a desktop prototype:
1. Click on the appropriate screen.
2. Click the configuration icon in the lower right side of the bottom menu (next to the lightning bolt).
3. In the screen config modal, update the color image and select to apply to the specific image or across the entire prototype.
Please note that this 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 go a long way in raising the bar of fidelity and realism in your prototypes.
You can set fixed headers/footers on mobile and desktop prototypes. While viewing the screen in build mode, you'll notice a fixed navigation slide bar(s); just slide to where it's needed and it’ll lock that header/footer into 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 even after adding fixed headers or footers.
DROP DOWN MENUS
Here's a video that will explain how you can create drop down menus:
Currently, you'll need to use GIFs for custom interactions in InVision, however, we're working on this in a future release. Here's how to use GIFs for interactions in your prototypes:
Note: The link referenced in the video can be found here.
If you want a button to float on top of your design as you scroll, you can create a fixed element using fixed headers and footers. Fixed sidebars are not present at this time, but the functionality is being considered within a future release.
To create a fixed element:
- Go into your design file and add extra empty space to the bottom of the design.
- Drop your button or fixed element into the extra space.
- Export your screen as a transparent .png.
- Upload it to your prototype.
- Go into build mode and mark that transparent area at the bottom as a fixed footer or header.
When you set up a timed redirect on a hotspot, you can select the amount of time until the screen changes, the screen triggers a transition, and opens the destination screen.
To set up a timed redirect on one of your screens:
- Go to the appropriate screen in your prototype, and then go into build mode.
- Click the timer icon at the very top of your project.
- Select a destination, a transition effect (mobile prototypes only), and the amount of time. You can optionally select to maintain your scroll position after the screen redirects.
- Click Save.
If you want to turn off the timed redirect, click the timer icon again, 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.
Overlays are a type of hotspot that allows you to link to another screen as an overlay, rather than as a separate destination screen. That makes it simple to implement overlays into your existing workflow: Just export your modals and menus as separate files.
Overlays give you the power to overlay and animate one screen on top of another. Overlays can simulate modal windows, dropdown navigation menus, and other on-screen prompts – all without leaving your current screen. What’s more: Simply add your hotspot to a template, and you can repurpose your overlay in screens across your prototype.
That means you can use overlays to...
- Easily set up dropdowns & modals
- Include dropdowns and modals in your prototype hotspot templates
- Display overlays either on click or hover
- Customize the position and animation type of your overlay
- Set custom background colors and opacity levels on your overlay
To create an overlay:
- Open your prototype and view a screen.
- In the toolbar, switch to build mode (B).
- Create a hotspot and select Screen as Overlay from your Link To options.
Select whether you want your Overlay to appear on Click or Hover. If you’d like your Overlay to appear on Hover, also decide whether you would like to Stay on target screen when your Overlay is opened. If you select this option (ON), your Overlay will stay open until you click outside of the Overlay, and/or on a Link Back / Close hotspot set on your overlay screen. If you leave this option un-checked (OFF), your Overlay will disappear once your mouse moves off of the hotspot – so be sure to set your hotspot large enough to cover the intended mouseover area.
*Note: Hotspots within a hover overlay won’t be interactive if the Stay on target screen option is unchecked.
If you're working on a mobile prototype, select your Gesture from the drop-down menu.
In the next dropdown, select the screen which you would like to use for your Overlay. Or use the Browse function to bring up the screen drawer and select another screen from your prototype.
Set your Position from amongst several common options, and use the input boxes (where available) to define an offset. Or select the Custom option to assign a custom position for your overlay; drag the overlay into place and press Enter to set your position.
Select a Transition type to animate your overlay, or use Instant for no animation.
Change the BG setting to increase the opacity of your background layer. The color of this background layer will be pulled from the background color set on the target screen for your overlay. (If working on a mobile prototype, be sure your desired background color is included in the bottom right pixels of your design.)
Change additional options, as desired.
- Reverse transition on Close link – If selected, your Transition will animate on both open and close of the Overlay.
- Close on clicking outside of overlay – If selected, a click outside of your Overlay will return to the screen underneath.
- Fix position of overlay – If selected, your Overlay will not scroll along with the rest of the page.
Include your hotspot in a template, if desired.
Save your hotspot and preview with the Share button.
For more details and FAQs about Overlays, click here.