The ultimate wireframing tools guide

By UserTesting | October 23, 2012

If you’re into building websites, mobile sites, or apps, you probably use some type of mockup tool—prior to coding—to help you envision how a site will work and look. But do you get customer feedback on them? In this ultimate guide, we’ll explore leading mockup tools -- wireframing, prototyping, and simulating --and show you how to run user tests with them.

[High resolution JPG]

How to Test at Each Design Stage

Wireframing	Prototyping	Simulating
Low-fidelity structures that allow for function and thought flow to be designed without worrying about aesthetics or visual elements.	High-fidelity interface that allows for aesthetic design and basic interactivity. Usually associated with clickable, dynamic mockups. Typically focused on behavior and advanced function.	Allow for simulation and site testing with a highly interactive interface. Typically not paired with design features; however, more prototype tools are beginning to include advanced levels of simulation.
Sample Test Questions Where would you find [x]? (test items from different navigation areas, such as top-level items, second-level items, header and footer items, etc.) If you could move one element on this page, what would you move, and where? Think of 3 things you’d want to find on this page, and find them. Which was the most difficult to find? Wireframing Ideas »	Sample Test Questions If you clicked on [this element], what would you expect it to do? Where is your eye drawn the most? Do you trust this website/brand? Look at this page for 5 seconds, then look away. What do you remember? What is the primary message of this page? How would you rate the appearance of this page? Prototyping Projects »	Sample Test Questions Test the [signup / registration] process. Explain any difficulties you encounter. Add any 3 items to your cart, and explore the shipping options available. How clear were the shipping options for this order? Download and install [this app]. Describe the installation process Simulate This »

Wireframing

Prototyping

Simulating

Low-fidelity structures that allow for function and thought flow to be designed without worrying about aesthetics or visual elements.

High-fidelity interface that allows for aesthetic design and basic interactivity. Usually associated with clickable, dynamic mockups. Typically focused on behavior and advanced function.

Allow for simulation and site testing with a highly interactive interface. Typically not paired with design features; however, more prototype tools are beginning to include advanced levels of simulation.

Sample Test Questions

Where would you find [x]? (test items from different navigation areas, such as top-level items, second-level items, header and footer items, etc.)
If you could move one element on this page, what would you move, and where?
Think of 3 things you’d want to find on this page, and find them. Which was the most difficult to find?

Wireframing Ideas »

Sample Test Questions

If you clicked on [this element], what would you expect it to do?
Where is your eye drawn the most?
Do you trust this website/brand?
Look at this page for 5 seconds, then look away. What do you remember?
What is the primary message of this page?
How would you rate the appearance of this page?

Prototyping Projects »

Sample Test Questions

Test the [signup / registration] process. Explain any difficulties you encounter.
Add any 3 items to your cart, and explore the shipping options available. How clear were the shipping options for this order?
Download and install [this app]. Describe the installation process

Simulate This »

Start Testing Your Wireframes, Prototypes, and Simulations

Regardless of what tool you use—you should be regularly and consistently testing—before you even start coding. Start now >

How We Roll

myBalsamiq (www.mybalsamiq.com)

For designing simple web pages after the whiteboard, myBalsamiq (the web version of Balsamiq) usually gets the nod. It's easy to use, it has a great widget library, and the fact that it's cloud-based makes collaborating as a team easy.

JustInMind (www.justinmind.com)

When we need to design for mobile, JustInMind makes it fun. The rich level of interactivity that it enables is helpful for testing mobile specific issues like touch target size.

Axure (www.axure.com)

We recommend Axure for big projects where every detail counts. Axure is a pro tool, the learning curve is a little steeper, but there is a great learning center and many resources.

InVision (www.invisionapp.com)

We ♥ InVision even though we've barely scratched the surface. Once comps get into Photoshop, InVision makes it a snap to upload our JPEGs and get feedback. The sharing options are fantastic, and we're looking forward to trying out some of the real power -- adding interactivity.

Several new tools have come on our radar recently though and we are looking forward to testing them out. What's your favorite?

Insights that drive innovation

Get our best human insight resources delivered right to your inbox every month. As a bonus, we'll send you our latest industry report: When business is human, insights drive innovation.

About the author(s)

UserTesting

With UserTesting’s on-demand platform, you uncover ‘the why’ behind customer interactions. In just a few hours, you can capture the critical human insights you need to confidently deliver what your customers want and expect.