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.

Subscribe to get your daily business insights

Whitepapers

US Mobile Streaming Behavior
Whitepaper | Mobile

US Mobile Streaming Behavior

5y

US Mobile Streaming Behavior

Streaming has become a staple of US media-viewing habits. Streaming video, however, still comes with a variety of pesky frustrations that viewers are ...

View resource
Winning the Data Game: Digital Analytics Tactics for Media Groups
Whitepaper | Analyzing Customer Data

Winning the Data Game: Digital Analytics Tactics for Media Groups

5y

Winning the Data Game: Digital Analytics Tactics f...

Data is the lifeblood of so many companies today. You need more of it, all of which at higher quality, and all the meanwhile being compliant with data...

View resource
Learning to win the talent war: how digital marketing can develop its people
Whitepaper | Digital Marketing

Learning to win the talent war: how digital marketing can develop its peopl...

2y

Learning to win the talent war: how digital market...

This report documents the findings of a Fireside chat held by ClickZ in the first quarter of 2022. It provides expert insight on how companies can ret...

View resource
Engagement To Empowerment - Winning in Today's Experience Economy
Report | Digital Transformation

Engagement To Empowerment - Winning in Today's Experience Economy

1m

Engagement To Empowerment - Winning in Today's Exp...

Customers decide fast, influenced by only 2.5 touchpoints – globally! Make sure your brand shines in those critical moments. Read More...

View resource