Friday, June 20, 2008

Sketching in Code: the Magic of Prototyping

Benefits of prototyping

"Over the last year, I’ve noticed more and more conversations about prototyping as a method of approaching web application development. Beyond casual conversations, prototyping has also increasingly been the topic of blog posts or subject matter for conference presentations. The reasons for this increased interest include a laundry list of benefits that prototyping can bring to the process of developing compelling web applications. Ranging from increased collaboration to more effective solutions, these benefits have made prototyping a valuable new approach to consider for your next project.

Wireframes: square peg, round hole

One of the obvious developments in the web application world that has made prototyping approaches more attractive has been the rise of Ajax and rich internet applications (RIAs). Before the arrival of these more interactive approaches, wireframes hit the sweet spot. They could be used in many different contexts and in high or low fidelity to satisfy many different end goals. We could use lightweight, low-fidelity wireframes to explore solutions at the beginning of a project. We could use more developed versions as documentation for developers and designers to work from. We could use wireframes to explain to stakeholders how pages were to look. In many cases, they were a key part of the deliverables associated with a project. Wireframes really were the “go to” tool for web application documentation.

With the rise of Ajax however, wireframes started to come up short. When we leave the world of page-based interactions, how do you document all but the simplest interaction? Flowcharts and diagrams don’t work. Even with a single interactive element on a web page, we often have to generate multiple wireframes or use extensive annotation to convey the different possible states. When there are multiple, possibly mutually interacting elements on the same page, the problem is exacerbated. Even when we do manage to convey all the possible states, we lose a sense of timing.

These shortcomings are difficult enough, but the situation gets worse when we start to consider not just design, but development as well. Development involving Ajax and RIAs requires closer communication between developers and designers, and this communication often has to be iterative. Tossing wireframes over the wall to developers doesn’t work. The critical information required for this interchange often can’t be captured in wireframes. Cross-discipline communication issues aside, attempts to use wireframes to explore tough interaction problems are problematic.

Prototyping is the magic

Prototypes keep us focused on our actual goal. I’ve seen countless hours spent generating thousands of pages of documentation that were never used. This in itself wouldn’t be so undesirable if we had infinite developer resources. Unfortunately, this is rarely the case, and I’ve often seen features cut from a product launch in favor of generating “better” documentation. With prototypes, the focus is always on the application and making it better, and it’s much easier to stay focused on value to the end user.

Additionally, prototyping conveys the “magic” of a web application. I, and likely many of you, have been in this industry for quite some time and I still come across web sites that excite me. There may be some bit of interaction or some nice touch that makes me pause for a moment and say “Damn, that’s fantastic.” I may find it surprising, unexpected, or even just well thought out. These moments have a distinct emotional and visceral impact that I can’t get from wireframes or paper documentation, and are often based on interactivity or features that will set your product apart. The only way to convey this facet of interactive applications is through an interactive prototype."    (Continued via A List Apart)    [Usability Resources]

Sketching in Code  - Usability, User Interface Design

Sketching in Code


Post a Comment

<< Home

<< Home