Prototype Power

I proved the value of prototyping to myself a while back. A product manager and I had a disagreement about the way an interaction should work in an iPhone app. We agreed to disagree until after I made some wires to show the two different possibilities. Rather than making wires that sat inside the image of a phone on an 8x10 page, I made phone sized PDF wireframes for him to look at on his phone. He sat down in the meeting, put his phone on the table, opened the wires, and the decision was made. Even with a stupid simple static pdf, just being able to see it in context was the answer.

Since that day I’ve gotten more and more into prototyping. I’ve moved from simply viewing static wires on the phone, to building out functional prototypes using jQtouch and jQuery mobile. Todd Zaki Warfel has been running around preaching this gospel for a few years, and if you haven’t seen his talk or read his Rosenfeld book on the subject I couldn’t recommend them any more highly as ways to introduce yourself or others to the concept.

In his talk Todd boasts proudly about how long it’s been since he’s made a wireframe. I realize that for many folks, completely dropping the wireframe might not be feasible, but I have to say that it feels like the future. Especially as tools like jQuery, Twitter’s Bootstrap, and for the true nerds Serve, evolve into better and better tools for rapid prototyping. And as we each build up our own repositories of interface patterns that we can essentially drag and drop into new prototypes, I have to think (and hope) that wireframing is going to become a thing of the past. Moreover, there are three big nails in the coffin of static interaction designs: CSS3, responsive design, and mobile.

CSS3

CSS3 is the easy place to start, since it’s the reason why people are talking about the browser being the new photoshop. I couldn’t miss the old photoshop less. Gone are the days of “sliding doors” for rounded corners, huge amounts of non-semantic markup for box shadows, and tiled images for gradients. Especially since we can demand that prototypes be viewed in A-grade browsers, we can use bleeding edge CSS with impunity. You might not need so much fidelity in your prototype, but a little button shading never hurt anyone.

Responsive

“Responsive design” is all the rage, and with good reason. Web designers have never been shooting at a static target, and have simply had to do the best they could to make their design functional in the most browsers possible. Now we’re fully empowered to have a beautiful functional design at all screen sizes. The hitch comes when you try to “resize” your photoshop file to reflect this capability. The only way to really see how your content will “respond” to changing screens, is to design it in the browser. This is most important at the architecture phase when we’re figuring out where our content will sit.

Mobile

I split “mobile” apart from “responsive” because designing for native apps is a different beast, and no less aided by prototyping. Screen real estate constraints on mobile demand efficient design. Even more than size, design is impacted by animation and touch.

The way that screens animate from one to the next is an enormous part of the user experience, particularly on tablets. Animations provide interest and delight, but also annoyance and terror. Touch is a fickle monster. Directly manipulating the content with one’s finger is a whole different ballgame than interacting abstractly through keyboard and mouse. As my hero Josh Clark has been preaching, buttons are are a hack in mobile interfaces. Fine tuning these things before production is incredibly important. The only way to truly feel these interactions is to build prototypes that let you do just that.

.. aaaand we’re back

Which brings us back to my phone sized PDF. Don’t be freaked out by a lack of technical expertise. Get out there and fake it ’till you make it*. Keep using Omnigraffle if that’s what you know and love, just be sure get those files out in the world in a way that folks can get their hands on them. And while you’re at it do yourself a favor and learn some HTML and CSS.

*Credit for this sentiment definitely goes to Todd ZW