notes on interaction design

February 17, 2012

InVision Prototyping for Usability Studies

A great way to perform a usability test on your application or website is to use prototypes of your work in progress designs.  Sometimes, this becomes the sticking point because prototype creation can take time and technical resources.  InVision  seems to be the solution to the problem.  While there are many prototyping tools out in the market, InVision is inexpensive and leverages your existing UI or design files to create prototypes: You can upload UI sketches or design mock-ups as JPGs, PNGs, or GIFs, and quickly make them interactive. 

 

It doesn’t take long to learn InVision’s interface as there are sample projects and short demo videos to introduce new users to the application.  They have 2 sample projects, an interactive wireframe and a high-fidelity prototype, which serve as tutorials.  The application shows explanatory overlays when you click into different tabs of these projects.

Invision's Overlay for the Build Tab

These overlays leverage the look and feel of iOS tutorials, which encourage exploration by highlighting various areas of the screen.

 

InVision also places links to video demonstrations near the relevant action, making it easy to find help and learn more about a particular feature.

Inline help link

Sample of a link to an tutorial in context

 

Getting started with a prototype is intuitive: Just click “Add New Project,” name your project, and then add files using drag and drop.  Be sure that you’re using file names that are recognizable as it will make it easier to create the prototype.

Drag & Drop Interface and Uploaded Files Shown Drag & Drop Interface and Uploaded Files Shown

Drag & Drop Interface and Uploaded Files Shown

 

Once your files are uploaded, creating a prototype is as easy as drawing boxes over areas that you want to make clickable (or “hot spots”) and then selecting which screen to link it to.

Create hot spots to link screens

Create hot spots to link screens

 

A great time-saving feature offered by the app is that you can create templates of hot spots. This works especially well for global navigation links and tabs.  You create the template of hot spots, and then you can apply it to other pages.

 

An important feature for usability studies is sharing, and InVision allows this. Prototypes can be shared with anyone with a password-protected link or a public link. The share recipients can add comments to the prototype, which you may want to use for client reviews or usability studies.

Share Project Link

"Create Secure Link" is a bit of a misnomer, since there are more options in that menu "Create Secure Link" is a bit of a misnomer, since there are more options in that menu

 

InVision isn’t limited to desktop prototypes: It works on an mobile phones (iPhones, Androids, etc.) and tablets (iPad).  This is essential for testing apps and optimized sites for these devices.  It’s worth noting that you can’t pinch to zoom into your screen.

 

We plan on using InVision when we create prototypes for usability studies–InVision plugs right into our process and can be learned in minutes.  The 3 features that are important to us are (1) the ability to upload existing deliverables; (2) the ease of creating prototypes–anyone on our team will be able to do this, and it shouldn’t take too long to do; and (3) the prototype is simple to share with anyone.  Oh and it doesn’t hurt that it is inexpensive, allowing to allocate more budget toward design.

 

With tools like InVision, there really is no excuse to forgo usability studies.

 

Author:
Tags: , ,
Permalink: InVision Prototyping for Usability Studies

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>