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.
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…
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.
“You cannot succeed in analytics and marketing unless they are central to business operations and are helping business answer the questions that will drive dollars to the top or bottom line,” says Kerem Tomak, Sears Chief Digital Marketing & Analytics Officer.
The use of psychology in marketing and sales is not new, but it may be more useful than ever in an attention economy where time is precious and focus is rare. How can you tap into a demanding consumer to check whether there is an actual interest in your product?
According to a survey conducted as part of OnBrand Magazine's State of Branding Report 2017, marketers are well aware of the new technologies that are expected to be important to their brands in coming years, but the majority aren't rushing to invest in them before they're fully-baked.
Two weeks ago, Foursquare announced what could be the most important component of its data business: the Pilgrim SDK. So what does it do, and what does it mean for location-based marketing?