Wireframing Tools and Testing

| 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!

Wireframing Tools and Testing - Header

A wireframe is the primitive skeleton of your website. It’s not glamorous or cutting edge, but it holds everything together. Without that skeletal structure even the best-looking website is nothing more than a blob of cyber-goo, impossible to navigate through.

Designers too often begin with an exact idea of the end product (because making a cool-looking site is fun!), but a good website must be built on the proper framework. And a good tool to understand the website framework is a wireframe, which is why many designers and UX pros begin their website design process with a wireframe. The wireframing stage generally focuses on

  • Page layout
  • Interface elements
  • Navigational systems
  • Functionality

Why should I test my wireframes?

Your designers and programmers are probably eager to bring your wireframe to life. But if you value them (and your customers), you need to hold them back for a little while. Why? Because you don’t want to waste time and effort. Frank Lloyd Wright makes the point well: “You can use an eraser on the drafting table or a sledgehammer on the construction site.” If you want to deliver the best product in the shortest amount of time, the wireframing stage is one of your most valuable stages for usability testing. So what would you actually test when users can see only a skeleton of your site or app? Plenty.

What should I ask users when they’re testing my wireframe?

Since wireframes focus primarily on navigation and layout, develop tasks that help you analyze these elements of your site.

  • 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?
  • What is this site about?
  • What would you like to see differently?
  • Think of 3 things you’d want to find on this page, and find them. Which was the most difficult to find?
  • What features are missing?
  • Perform A/B testing of image placement.

Sample wireframing tools

There are a number of different tools for wireframing that range from simple chart and diagramming software to programs with extensive widget and component libraries.

Here are some of the most popular programs to choose from:

Axure

Axure

Axure is a desktop app that runs on Windows and Mac. It has an impressive array of features as well as a complimentary cloud prototyping service.
www.axure.com

Balsamiq

Balsamiq

Balsamiq is the classic wireframing tool. It is a firm believer in the “rough sketch” nature of wireframing. Online and offline versions available.

www.balsamiq.com

Cacoo

Cacoo

Cacoo is a user friendly online drawing tool that allows you to create a variety of diagrams such as site maps, wireframes, UML and network charts.

www.cacoo.com

FlairBuilder

FlairBuilder

FlairBuilder is a program that begins with wireframes and lets you incorporate rich prototype features in later phases.

www.flairbuilder.com

Gliffy

Gliffy

Gliffy is specifically a web-based diagram editor. It is primarily used for flowcharts, networks and floor plans, but can also be used for basic wireframing.

www.gliffy.com

HotGloo

HotGloo

Hot Gloo’s straightforward interface and ease of use make it a great option for beginning the wireframe process and a fantastic introductory tool.

www.hotgloo.com

iPlotz

iPlotz

iPlotz specifically focuses on website wireframing. It is not a generic flowchart program. If you’re looking to do a simple wireframe for your site, that’s their game.

www.iPlotz.com

LovelyCharts

LovelyCharts

Lovely Charts is an online diagramming application that allows you to create professional looking diagrams, such as flowcharts, sitemaps and organization charts.

www.lovelycharts.com

LucidChart

LucidChart

Make a flow chart, org chart, mind map, network diagram, UML diagram, wireframe and other drawings online with Lucidchart’s free flow chart creator.

www.lucidchart.com

MockFlow

MockFlow

Mockflow is an online wireframing tool for software and websites. It provides a collection of collaborative web services for creative designers and usability experts.

www.mockflow.com

Mockingbird

Mockingbird

Mockingbird is an online tool that makes it easy for you to create, link together, preview, and share mockups of your website or application.

www.gomockingbird.com

MockupBuilder

MockupBuilder

MockupBuilder helps you quickly get your ideas on screen. It is a FREE Silverlight powered web app.

www.mockupbuilder.com

MockupTiger

MockupTiger

MockupTiger is easy. It has drag and drop features and vector widgets and icons so you can customize them on your own.

www.mockuptiger.com

OmniGraffle

OmniGraffle

At the root of OmniGraffle are stencils. Create wireframes, flowcharts and mobile apps. You can also download a number of additional stencil packs.

www.omnigraffle.com

Pencil Project

The Pencil Project

Pencil Project is free and easy to learn. It can run as a Firefox add-on or on its own.

http://www.evolus.vn/en-US/wiki/products/pencil/pencil.html

PowerMockup

PowerMockup

PowerMockup enables you to turn PowerPoint into a website wireframe tool. There are a number of templates available for download.

www.powermockup.com

Simulify

Simulify

Simulify is extremely basic, quick and easy. It runs in editor and preview mode.

www.simulify.com

Wireframe Sketcher

Wireframe Sketcher

Wireframe Sketcher is for conceptual design. It has limited hyperlink interactivity.

http://wireframesketcher.com/

User testing your wireframes

    Once your wireframe is ready, post a link to it on UserTesting where you can:

    1. Customize the demographics of your test group.
    2. Create specific test questions and tasks for each user to complete.
    3. Assign specific written questions for each user to answer.

    What do you get out of it?

    1. A video of each user’s screen testing your wireframe.
    2. Audio of the user talking through how he completes the tasks.
    3. Valuable feedback about how to improve your website.
    4. A website that everyday people can use easily!

    View our infographic on wireframing, protoyping, and simulating tools.