Often, we use wire-framing or mock-up tools (like the good guys at Balsamiq) to help communicate design ideas between developers as well as to clients. However, there is a need for something more efficient to aid communication of possible user interface flows through our emerging application. This communication is for internal use typically and doesn’t need to approximate the appearance of the final product in any way – it’s just a means to explore the pathways through the program without getting side-tracked by the scenery along the way.
Ryan at 37Signals posted a very interesting way of addressing this issue. As you can see it seeks to communicate the movement between states more effectively. It also avoids getting bogged down with the detail of each representation of state, focusing instead on the salient aspects to each (probably, well-known) state.
The horizontal line separates what the user sees on the screen (topside) from what action he (can) take (bottom-side). Here’s a more detailed example Ryan provides:
As you can see it very succinctly captures the pathway that the user takes through the process of adding an item to a ‘To-Do List’. Building on this Ryan offers equally compact means to capture multiple choices of action by the user:
The dashed lines separate alternative actions that the user can choose from, each naturally leading to alternative views from where further actions can be selected. I like Ryan’s reminder at the end that all these drawings are ‘destined for the garbage’ – like all prototyping and similar tooling, they are part of the process, not the product. The longer they linger the less use they serve.