Create Smart, Interactive Prototypes with inVision

I’m a web developer who’s not much for prototyping, at least not using some online tool. I’ve changed up my process a lot, but the only thing that’s still frustrating is the sketches phase. Sometimes I’ll dive right into code and start mocking up using just HTML and CSS. Other times I boot up Photoshop and create a series of mock-ups from nice, organized layers. If I need feedback, I’ll upload the screenshots into a project manager and ask people to comment.

This admittedly is not a very good way to do it. Then I heard about inVision, a fantastic prototyping tool that allows you to create user experiences and get feedback. We’ve recently seen a Quick Look post about it, and several lucky readers got free subscriptions to it in our recent giveaway. For everyone else, keep reading to learn more about InVision.

InVision: Beautiful Online Prototypes

inVision is a prototyping web app that allows you to upload screenshots and create an experience out of them. You can easily let others interact with the screenshots to get a feel for how they’d interact with the real application, before you put down any code. On top of that, the users can place comments anywhere on the screen, which you can then view, as well as check off as completed.

Creating Projects

First thing’s first: You need an account to use inVision. Luckily, you can try it out for free as they have a free 1 project account. They’ve also made it incredibly quick to signup and try it out. Simply add your info, and you can immediately jump in and get started prototyping without verifying or activating your account. If you like it and realize you’ll need more than one project, they have several upgrades available. The plan prices aren’t bad, especially if inVision helps you become more efficient.

Once you create an account and sign in, inVision has a nice 5 minute video tutorial that you can watch to show just how easy the app is to use. And actually, everything you need to know is in that video – it’s very helpful! The only annoying part is that the video plays every time you log in, and it doesn’t seem there’s a way to stop that from happening.

Once you get to your dashboard, you’ll have 2 sample projects, including the project featured in the video tutorial. There is also a nice big button you use to create new projects.

Just click the big plus sign, name the project, and boom- you now have a way to create a nice, interactive prototype. Clicking on the new project will take you to that project’s dashboard, where you can upload screenshots and create an experience.

Remember: you actually create the screenshots in Photoshop or your favorite image editor, or take screenshots of an HTML/CSS mock-up in your browser. You’re simply uploading images.

To upload, simply drag and drop all of the screens into the project’s dashboard and inVision will automatically add them to the project and name them, based on the file name. You can also rename those screens by clicking on the name.

Once all of  the screens are uploaded, the fun starts. Click on one of your screens to begin the prototyping process. The first thing you’ll notice is a help screen that gives you a nice little tour. These screens show up the first time you use a feature. Unlike the main video, you’ll only see each help screen once.

After checking out the help screen, you will move on to the screen where you’ll build the experience. Make sure to switch from “Experience” to “Build” mode in the bottom right, and start selecting areas to make clickable. To do this, drag your mouse over an area and then select one of the other screens. When the user clicks that area, he or she will be taken to the proper screen.

One of the coolest features of inVision is the ability to make templates. Create a template using the drop down box at the top. Then, when you create a clickable area you can choose to add it to the template. Apply that template to another screen, and those clickable areas are automatically added. This can allow you to create experiences quickly and easily, which means you’ll be able to send it out for feedback faster.

Getting Feedback from Users

This is likely the real reason we create a prototype in the first place – to garner feedback from users. Luckily, inVision makes it very easy for us to do this.

inVision will provide you with a link to share with whoever you’d like. No login is required , though if you are concerned about security, you have the ability to create a secure link, as well as password protect the project so only those who know the password can offer feedback.

The interface is very easy to use. Just click on the screen anywhere you want to add a comment, and your comment will show up right there. When you leave your first comment, inVision will ask for a name and an email so the developer knows who the comment is coming from. You can also view comments from others to see what they’ve said, or turn off comments to see the clean design.

Being able to comment on specific spots of a design is pretty great because the user can select the exact area he or she is talking about instead of trying to describe it in an email or project manager. While everything on the screen might be obvious for this quick example I created, in more complex designs, it’s sometimes tough to describe the area in words. This eliminates that confusion.

You can also view a list of all the comments on the screen very easily. While in Comment mode (next to Build while editing a screen), click on the Comments tab on the left. You’ll then see a list of all of the comments with the ability to mark them complete. This serves as an excellent to do list on a project. Once you mark a comment complete, it’s removed from the screen, but you can still see it in this list.

On top of that, you can view all of the comments on a project, organized by screen. Just click on “All Project Comments” from a screen’s comment list.

You can also get to the list from the project’s dashboard. Simply click, “Comments” in the top right and you’ll be taken to the list of comments.

You can see who made the comment and on what date (sorted newest first), what the comment is, and you have the ability to mark it complete. The only difference here is that when you mark a comment complete, it’s removed from the list completely. It would be nice if instead you could view a list of completed comments, or remove comments from the main list. For now, though, remember to only check off comments you don’t need anymore!

Finally, you can also subscribe to a project (My Account->Notifications), so that you get an email everyone someone leaves a comment on a project. Beware though- this could get pretty annoying if you have a lot of screens or a lot of people giving feedback (or both).

Other Features

On top of the two major features- creating experiences and getting feedback, I wanted to point out two other things I noticed when using the app. The first is the ability to add collaborators. This is incredibly helpful if you have more than one designer for the app. People you add as collaborators will be able to add, edit, and delete screens, attend to comments, and do everything that you can do as the project owner for that particular project. This way, your core team can contribute to the actual design, while getting feedback from anyone you’d like!

The second thing worth mentioning is the mobile experience. I noticed some areas of inVision being flash based, which prompted me to see how it worked on my iPad. InVision will default to a mobile version, where you can only view the screens. However, you’re also given the option to view the desktop version, which worked a lot better than expected. It’s not flawless, but if you’re in a pinch and need to use your iPad to change something, you’ll probably be able to pull it off.

Conclusion

InVision is a really nice, feature rich way to create prototypes and get feedback in a simple, organized, time-saving way. On top of that, the comments create a nice to do list for improving your user interface (UI). The ability to add contributors makes it a true project manager, and the fact that users don’t have log in makes it dead simple for them. While there are a few things I would change, overall, this is a really great app. I definitely recommend it!