Why Wireframes Suck

Contrary to what the title may lead you to believe about me, I'm not against the process of wireframing. I think it can be a very valuable tool in the designers kit when used properly. However, with more and more clients requesting increasingly complex functionality from their sites and apps, wireframes simply fall short in conveying the most important part of an interface design: how it will behave.

This really isn't a new problem; designers have been hacking around this issue for some time, providing highly annotated wireframes and subsequent documentation to clients explaining in detail how the interface is suppose to work. Unfortunately in my experience, this always ends up leading to further discussions with the client requiring clarification for what you were trying to convey in writing & simplified mockups. The real issue here is that wireframes are static documents and not well suited to describe the dynamic interactions that exist in most digital products today. And frankly, wireframes just aren't very user friendly (ohhh, the irony of it all). That's where (rapid) prototyping comes to the rescue.

Prototyping doesn't necessarily replace the process of wireframing; it fill's in the gaps where wireframes really suck and brings you a few steps closer to a proof of concept. With prototyping, you can "stitch" together your wireframes or mockups, while creating basic interactions that showcase in a physical sense, how your app should work. Rapid prototyping with HTML, CSS, and JavaScript is even better, because it brings you even closer to the final product by speeding up production time, improving the iterative design process, and reducing the amount of surprises during later development stages.

There are multiple approaches to developing prototypes, whether it's working with low-fidelity wireframes and stitching them together, or creating a clickable version of your final mockups for a more accurate representation of the end design. I personally feel the earlier you can get in to prototyping the better, since it will ultimately save you time in the end and help solve a lot of the cloudy areas of the visual design process (where figuring out how a feature should look before knowing how it works can get you in to trouble). UX Magazine published a great article a couple of months back about...

I've discovered quite a few tools recently that make integrating rapid prototyping in to your current workflow a lot easier:

• Foundation by ZURB - A responsive HTML/CSS framework that comes complete with preset UI components and dozens of style options that helps you go from clickable prototypes to polished production code with ease.

• Ratchet - an iPhone prototyping framework made with web technologies (HTML/CSS/JS components) that you can save to your device as a web app and mimic native iPhone behavior. I used this framework on a project recently and was able to build an app with 16 wireframed screens (which took about a week to put together & document) in about 2.5 hours. And because it was just HTML/CSS, I could test the prototype on Android devices as well. And oh yeah, the Ratchet framework was built by the guys who created Twitter Bootstrap (since leaving twitter a few months ago).

• Solidify - an online service by ZURB (man, I love these guys) that lets you upload your sketches, wireframes, or mockups to create click-through, interactive prototypes, which you can send out to your clients. It is a paid service, but they also provide you access to their user-testing and analytics services as part of the paid account, which can provide you tremendous insight on your designs.

The important thing to keep in mind when choosing a prototyping tool is that it should help you communicate your design solution as close as possible to the final product.

Hopefully this workflow can help some of you solve the headaches that communicating wireframes has caused me. I'm interested in hearing about other products or solutions that others may have implemented in to their design workflow, so feel free to leave a comment.