Sketching, prototyping, and Balsamiq Mockups

Although it is a few years old, Sketching User Experiences by Bill Buxton is one of the best books I've ever read describing the user experience design process. In the book, Buxton basically argues that UI/UX designers everywhere are omitting one of the most basic and fundamental steps in the design process: Sketching. Many software professionals use the terms "sketch", "prototype", and "storyboard" interchangeably, when in fact they are very different. Sketches are meant to be cheap, plentiful, and ambiguous. Sketches should raise questions - you need to be able to get more out of a sketch than what you've put in. Too often, designers commit themselves to a design that was never measured against alternatives. Designers cling to early ideas, and before long, they've created elaborate power point presentations, pixel-perfect Photoshop mockups, and GUI specification documents of the wrong design. Buxton contends this happens because designers aren't prolific enough in their sketching, but also because managers, developers, and customers like to see "finished" designs - reinforcing the notion that higher fidelity designs are *better* designs. "Sketches" or "hand-drawn" artifacts don't convey the warm and fuzzy feelings of a finished design; consequently, they are given less importance as deliverables.

Below is a (long but good) video of Buxton explaining how Sketching relates to the User Experience Design process:

After I've done my homework creating sketches and had some help identifying some viable designs, I usually try to create a paper prototype to test with users. From my experience, this step has been invaluable for learning about the user's mental model, expectations, and is very helpful in flushing out design flaws in early in the process. Perhaps the most important part of a paper prototype involves creating the right scenario or tasks for your users to effectively exercise your design. By making someone "use" your design, you start to reveal the "arrows" or "transitions" between states (the static screens). Buxton stresses the importance of these transitions in his book, contrasting the difference between interface design and experience design; if you only design states, and do not design the transitions, you are not accounting for the experience - only the interface.

I mention Buxton's book and his ideas about the importance of sketching, in particular the call for lower fidelity designs early in the process, because I just stumbled on a new tool that I think could help. To keep designs from getting too polished too early, take a look at Balsamiq's Mockups. Mockups is a tool that allows you to quickly create software mockups using popular GUI components using a WYSIWYG drag 'n drop interface. Unlike traditional paper and pencil sketches, Mockups allows you to work electronically, making it easier to share and collaborate on ideas - especially on geographically dispersed team. Unlike other electronic design tools, Mockups renders controls with a hand-drawn style, making them appear as unpolished, works-in-progress. The combination of electronic authoring and hand-drawn appearance provide a great tool for any UI/UX designer's toolkit. Although Mockups does not replace the need for paper and pencil sketches, I think it could fit well between the sketching and prototyping phases.

To learn more about Balsamiq's Mockup, see the video above, or check out some of the examples posted on the website.

article comments



allowable tags:<a>, <b>, <i>