- Writing Use Cases
- Creating Screenflows
- Designing Wireframes
- Storyboarding Your Product
- The Three Rs
- The Tools to Use
- Whats Next?
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Storyboarding Your Product
When an interaction or task will exist in a screen, a single wireframe isn’t going to cut it. In this case, you should create another wireframe that details each step of the interaction. This is called a storyboard, a term taken from cartoonists and filmmakers, who use the technique to illustrate the significant points in a scene.
An entire interaction can be wireframed in a single document, but it’s equally common to need more than one document. A storyboard is actually made up of a series of small wireframes, each illustrating one part of an interaction. It starts with the default state of the interaction, moves on to the next step in the use case, and then the next, and so on until the task is complete. For this reason, storyboarding is especially helpful when you’re working through the interactions for an AJAX-based web application.
A lot of people lately have advocated a "just build it" mentality when it comes to web applications, and for some people, who happen to be innately capable of designing effective web-based software to begin with, that strategy works. But it’s unwise to assume that you’re one of those people unless you’ve proven it on at least three occasions. It’s much smarter and much safer to rely on processes, such as the ones spelled out in this series of articles, that are proven to work and can be repeated. Doing work you know results in good design is an obvious choice versus guessing and hoping you win the web lottery. Use cases, wireframes, storyboards, and so on are all repeatable steps, and the simple act of repeating them will make your products more consistent, more reliable, and better designed than those created accidentally by people who got lucky once or twice.
Much like the use cases you’ll now write as part of every project, storyboards force you to think about how an interaction will actually work. With all the knowledge you’ve stored in your head during your career as a web user (as well as designer), you should find it relatively simple to recall good and bad examples of the very task you’re trying to storyboard, and leverage those examples to make your own storyboards as well as you can.