Storyboarding Complexity

Hi,

I'd like to use the Storyboarding function but am stymied: I'd like to depict a workflow situation where screen A offers the user, say 2 options, and each triggers a different series of screens - like a decision tree, if you will.

I see how I could set up a number of small story boards for each segment, but then I lose the overall picture, and I want my developer to understand how it all is supposed to hang together. Is there a way to represent these various logical workflow paths with the Storyboard tool?

Also, I'd like to be able to add comments on the storyboard that are related, not to the screens themselves, but to the data processing that goes on between screens, or about the workflow itself. is there a way to do that.

Thanks

Jean-Daniel,

Right now storyboards are linear. You can have different paths through screens via links but there is no way to see an overall picture. I was thinking about adding a "Map" tab to the Storyboard editor. This "Map" tab would visualize links between screens and allow you to arrange them graphically on a canvas. Do you think this would help you?

Regarding additional notes for workflow, I could see something like this added to the "Map" tab. For example you could have the palette with a few annotations widgets like Note and Arrow that you could place on the canvas. These widgets would work almost the same they do in the Screen Editor. What do you think?

Hi Peter,

Yes, having a Map capability with a variety of link widgets where one can describe the nature of the link would exactly meet my need. This would allow me to express the architecture of the site's (or app's)interaction with the user to make sure it is consistent and that I have covered off all the loose ends/possibilities.

The map would also be a great guide to doing functional testing of the site's ability to manage both the "happy path" as well as all the "roads less travelled" where the bugs and defects usually hide.

While the link feature within a given screen is useful, it is too granular to do what the Map would do.

I think this would be a substantial feature addition to an already excellent application.

I started working on sitemap feature. Here's what it looks like right now:

Let me know what you think about it! If you wish to try it yourself then you can get the development version here: http://wireframesketcher.com/staging

This is great!

Suggestion: allow the creation of a node distinct from a screen where the wireframer can insert some logic. For instance, the node could be used to interpret a decision. From screen A to Node 1: “User Exists”. “Yes” From Node 1 to screen B (User portal screen); “no” from Node 1 to screen C (Registration screen).

This would allow explicitly showing the logic underlying the navigation.

That said - what you have done so far is a great step forward.

Thanks!

Hi Jean-Daniel,

Thank you for your feedback! What you are describing is a flowchart diagram. In my case the diagram represents screens and actual links between those screens. I know, the difference is subtle but there is one.

I am not sure if Sitemap is the right name for what I am doing. Perhaps I should name it differently. Screen Flow?

I may add a flowchart editor in the future but for now you can use a tool like XMind. Here's a blog post that talks about prototyping UI workflows with XMind. Note that they use exported PNG images for thumbnails so it's not ideal. But if you can also use just symbolic nodes for your pages.