The Ultimate Wireframing Tools Guide

| October 23, 2012
Sign up to get weekly resources, and receive your FREE bonus eBook.
Thank you!

Get ready for some great content coming to your inbox from the team at UserTesting!

Ultimate Wireframing Tools Guide - Header

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 PDF]

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?

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?

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

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)