AnalyticsROI MarketingInteractive Wireframing Comes of Age

Interactive Wireframing Comes of Age

If you are still making plain old static wireframes, it's time to start adding life to them: a clearer understanding of your project's flow will save you time and money later.

As you most likely know, wireframes are black-and-white box drawings that describe a screen (be it a web page, a mobile app, or anything else that needs to be laid out and designed). Traditionally, wireframes are created in the design process to show the client the functionality, process flow, and general layout of the application before the designers and developers go to work implementing the idea. Wireframes are great because they are easily changeable and help the client get a “hands-on” feel for what we are building so there will be no surprises once the system is built.

The only real drawback of wireframes is their implicit static quality: they tend to exist on a sheet of paper. In this day and age in which in-page interactivity has become the norm, and when some processes happen over a series of pages/screens, simple wireframes fall short. They traditionally aren’t good at letting the user “feel” the application, and only trained eyes are really good at following wireframes across multiple pages to get a feel for where the eye goes as pages refresh during a specific task.

For the last 12 years, my company has used “interactive wireframes” as part of our design process. These have traditionally been simple HTML pages that contain graphic versions of the mockups, and use image-mapped hotspots to let the users click around. Sometimes we’ll create full HTML versions instead of use images if the interactivity is easier shown in HTML. While this is a time-consuming task, interactive wireframes give our clients a much better sense of what the finished application, site, or process will feel like.

Recently, an iOS app called POP (short for Prototyping on Paper) was released that is the perfect tool to help us (and you) make this interactive wireframing task that much easier. The tool is simple: snap photos of your wireframes and link them to each other using rectangular hotspots. You can then walk through your prototype and click around as if it were a real application.

pop-app

Of all the rapid prototyping tools we’ve tried, POP is certainly the easiest. But it’s not without some major drawbacks. At the moment it is really geared toward app development, and when you share the prototypes, the screen shape/size reflects that of an iOS device. The system shows prototypes via any web browser, but puts an iPhone frame around the prototype. This makes the app unrealistic to use for any professional purpose beyond iOS prototyping.

It is my hope that the makers of this app will realize that its potential uses go far beyond mobile apps and they expand this to allow for full-page prototypes for regular websites.

Until then, we’ll continue making our interactive wireframes by hand. If you are still making plain old static wireframes, it’s time to start adding life to them. The ROI is simple: a clearer understanding of your project’s flow will save you time and money later, as there will be no surprises in the development phase. Plus, clients like to interact with the work, and letting them do this in the wireframe stage adds to your wow factor, and gives them something more tangible to understand.

Until next time…
Jack

 

Editor’s Note: As 2013 comes to a close, we feature our columnists’ most helpful resources from previous months. This column was originally published March 29, 2013.

Related Articles

Q&A: ReachMobi’s CEO Matt Hoggatt on turning website visitors to subscribers

Analytics Q&A: ReachMobi’s CEO Matt Hoggatt on turning website visitors to subscribers

10m Leonie Mercedes
Five ways to boost your conversion rate without wasting ad budget

Analytics Five ways to boost your conversion rate without wasting ad budget

2y Tim Nichols
Three digital dilemmas that are really opportunities

Actionable Analysis Three digital dilemmas that are really opportunities

2y Catherine Magoffin
Three ways to grow your total customer community

Analyzing Customer Data Three ways to grow your total customer community

2y Dave Evans
Reviving sluggish sales with email personalization

Conversion & ROI Reviving sluggish sales with email personalization

2y Guest Writer
An absolute beginner's guide to setting up Google Analytics for your website

Analytics An absolute beginner's guide to setting up Google Analytics for your website

2y Yuyu Chen
How can publishers use analytics data to save themselves?

Analytics How can publishers use analytics data to save themselves?

2y Andrew Edwards
How meaningful is your campaign attribution?

Analytics How meaningful is your campaign attribution?

2y Andrew Edwards