The Think Blog

5 InVision Tips for Prototyping

Profile image of Sunkwon Bush

Sunkwon Bush Senior Experience Designer December 30, 2015

InVision is a tool that allows users to turn web and app design mock-ups into interactive prototypes. These prototypes can be used in client meetings to present design ideas in a much more dynamic way—allowing stakeholders, clients or product team members to not only see your design, but to interact with the links and features, too.

Over the years, InVision has become a crucial part of the design process throughout the industry, and we’ve spent a lot of time tweaking and improving the way we use the tool in the course of our UX projects. Here are our top five tips for making the most out of the InVision platform.

1. Use a Clickable Sitemap or Workflow to Help Clients Navigate the Prototype

Clickable Site Map Example

The applications we design and build at Think Company tend to have a lot of moving parts. InVision’s section and navigation features work well for small projects, but it’s easy for clients to lose track of what pages they need to review and how the pages relate to one another as the project becomes more complex. Dedicating one screen at the beginning as a clickable sitemap or workflow makes it easier for clients to keep track of the big picture behind the designs.

InVision sitemaps are also a great spot to include status indicators to mark versions or signal whether something needs review. There is a similar feature built into Workflow, but we find that keeping this information in one spot on the sitemap is easier for stakeholders to remember.

How to Build a Clickable Site Map Using InVision

Step 1: Design a workflow or sitemap in the drawing tool of your choice.

Step 2: Upload all of the corresponding wireframes and mockups for your prototype.

Step 3: Create hotspots on each page title in your sitemap that links to the corresponding wireframe or mockup in the prototype.

2. Establish a Naming System for Hotspot Templates

Hotspot Template Naming Example

As designers, most of us are pretty familiar with naming our files, pages, and layers in other design tools. It’s a crucial practice for keeping track of the many little pieces of each project.

InVision has Hotspot Templates that allow you to link up multiple screens at a time, saving hours of repetitive work. This is great when most of your elements stay in one spot, but things get messy when they don’t. One or two buttons may need to change position or hide while others are constant.

One workaround for this problem is to make most buttons a separate template instead of grouping them. This strategy gives most of the time-saving goodness of templates, even if more have to be made and managed. The trade-off, however, is that there are tons of little templates all over the prototype.

Setting up a naming system makes it easier to keep track of every template variation. It’s been much easier for the team to go back in and edit or apply them throughout the life of the project. We typically follow the convention:

[Page Name] – [Element Name] – [Element State or Variation if needed]

This system can handle most of your needs since you can easily skim the menu for each template and recall its corresponding hotspots. Now that InVision released the Overlays feature, it’s helpful to apply this system to those as well.

3. Involve Clients Early and Encourage Using Comments

Comments

Collaborating with InVision can be a joy when there is a good rapport between the clients and your team. Some clients take to the app quickly and actively give and keep track of feedback through comments without any guidance. Others prefer to give feedback verbally and depend on our team to handle comments. Here are some steps we take to make the most of commenting:

  • Establish rounds for feedback and revision.Though few of us at Think Company miss the days of sending and reviewing static PDF documents, one thing it did well was establish clearly documented rounds of feedback. InVision works just fine as a tool for gathering feedback, but to do so it’s important to settle on a pattern with your team and clients early on. The goal is to make it clear to everyone how much work is in scope and what’s expected.
  • Write a few comments during meetings in front of the client. If a picture is worth a thousand words, a live demo is worth thousands more. Making note of some specific comments made by the client during a meeting is a great way to acclimate them to using InVision themselves. This works well in remote meetings, too, if you are screen-sharing.
  • Set clear guidelines on resolving comments. Make sure your team and clients are clear on who handles resolving comments. Decide if you want this to be a way for clients to “sign off” on changes, or if the project manager or design lead will clean up comments when they feel an issue is resolved.

4. Use Project Folders for Versioning

Versioning Project Folders Example

One type of deliverable clients will often ask for is an interactive proof-of-concept. Some of these projects are best served with an html prototype, but we don’t always need that level of fidelity. InVision is a great choice when clients are looking for two things:

  • few interactive elements
  • the ability to navigate to different pages

Some projects are small enough that we can use sections to distinguish between versions or simply keep wireframes and mock-ups separate. InVision’s History mode is also great for tracking changes to single pages.

However, on projects like these, where the entire prototype becomes the final deliverable, versioning can become a challenge. As a design consultancy, we don’t always have the option to receive rapid feedback from our clients, and we need to set clear boundaries for how many rounds of revision are in scope. The bigger the prototype, the harder it is to manage each round of revision using sections alone. Clients have trouble figuring out which version is current, and designers will struggle with managing multiple versions of hotspot templates or screens.

The simplest way to work around this issue is to copy the prototype’s project folder and give it a higher version number. Since this adds to your project count, this tip requires a Team Edition account or higher. This approach has the added benefit of allowing us to maintain a share link to earlier versions of the prototype.

5. Place Overlays Precisely Using Lines or Cropped Objects as a Guide

The Overlays feature is a huge time-saver when our designs call for a little more interaction via modals, menus, or sidebars. The current version of InVision doesn’t provide smart guides or nudges to help you place an overlay with precision. In all likelihood, this means you will need to reposition your overlays several times to get pixel-perfect precision.

One trick to speed up this process is to include a reference point from the current page as a guide. You can do this via the Slice tool in Sketch, then use an overlay to illustrate two different states of a line graph using the two elements above the chart as a reference point.

 

Alternatively, Sketch’s Craft plugin can streamline managing prototyping Hotspots between pages, but it can also help make overlaying elements on the same page—like dropdowns and modals—easy and precise as well.

You may be used to creating small artboards at difference sizes for overlaying components—and doing all the positioning within InVision. Instead, keep all your artboards the same width as the “base” page, and position just the overlaying elements in their proper place within their respective artboards. Then, set up the Craft Hotspots to “Link as Overlay” on “Click,” positioned Top Center.

Screenshot of menu items in overlays feature

Managing overlays within full-sized Sketch artboards gives you the controls to size and place things pixel-perfect and the use of Hotspots ensures proper placement as the design changes.

Using InVision as a Prototyping Tool

InVision fits nicely into our project work and continues to pump out new features. However, even as our tools evolve, the need to set expectations with clients won’t change anytime soon. For now, these tidbits will help make your next InVision project run a little smoother!

Want to learn more about the latest in design and technology leadership? Join our email list.