Why Wireframes Suck
You shouldn’t be explaining dynamic interactions with static visuals
Contrary to the title, I’m not against wireframing as a process. 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 schematics and subsequent documentation to clients explaining in detail how interface’s are 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 & static visuals. 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 (comment shit-storm in 3… 2… 1…).
Rapid Prototyping 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 for interactive behavior. 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 awhile back about the pros and cons of each approach.
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 I’ve had with trying to communicating behavior through wireframes. 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.
