Story/siteflow; group wireframes together/insert story

As I have a lot of screens/wireframes, it's getting really crowded on the siteflow. I nearly can't figure out how the pages are connected.

It would be great if I could just grap a few pages together (like 'order proces' or 'my account') and only see a single link show up to this whole group. Clicking at this group would open up this next siteflow.

So it could be just: - grouping screens together, or - inserting another story in the siteflow/story.

Hi Robert,

Thanks for requesting this. I'd like to explore with you other possibilities to solve your problem. To me it looks like Screen Flow might not be the best solution for it. I see 2 other possibilities:

• Add a Sitemap widget. This would allow you to use a regular screen to design a sitemap. The syntax would be the same as for Tree and individual items would be linkable. The result would look like this:

• Another possible solution is to add a Thumbnail widget. It would let you insert a thumbnail of a screen into another screen. The idea would be to let you design your own screen flow using Thumbnail and Arrow widgets.

What do you think?

The option for a sitemap layout like your image would be useful. I personally like the screenflow and we use it internally, but I have had clients finding the current screenflow confusing and they have requested more sitemap style layouts.

The ability to snap the screens to grids in the sitemap would be good. This would allow grouping of certain screens together horizontally and vertically.

It'd also be useful to be able to add annotations to the screenflow/sitemap. I have found that with the current screenflow, I try to group screens according to the section and then in an image editing package add a title above the group of screens. e.g. Purchase flow. Refund Flow and so on.

The last option Brek mentioned is most important to me.

Not only adding a title to a group of screens in the screenflow, but also showing them as one 'progress' element, preferable clickable to the underlying screens.

I had also requested the ability to place .storyboards as a screen into the screenflow. (different icon, perhaps showing a stack of screens) Which sounds the same as what Robert is requesting.

I'd expect the user could then click the object and it would jump the user to another screenflow. (this could allow the user to have multiple screenflows in the one .pdf)

With the new addittion of being able to link to external files, I wonder if this could be used?

e.g. make a .screen with a link to another .pdf with the first screen showing the new screenflow. (this sounds like it might work, although I've not tried it out yet.) However, unless the external links can jump to a certain page within a .pdf, then going back wouldn't work.

Well, it sort-of works.

Using the external link and entering it as a file allows you to open it. e.g.. file:\C:\WORK\WireframesFlow\Exported_Flow.html

Linking to an HTML export does support clicks, but that doesn't support the screenflow diagram. :(

Linking to a .pdf opens it in a browser and doesn't support clicks to navigate. :(

I'm also not sure if this requires absolute or relative paths, so I'm not sure if it will work on other machines.

Hi guys,

Sorry for being a little late to the discussion. I am still unsure about this "storyboards nesting" feature. I feel that it might be a good solution for organizing storyboards, but I am not sure how screenflow diagram would actually work in this case. Specifically it's the PDF export that poses a problem. Right now it's possible to export a single screenflow diagram for the top level. What about screenflows in nested storyboards? Should those be exported as separate pages too? What do you think?

Hi Robert and Brek,

Based also on your feedback I am experimenting with nested storyboards. I'd like to check with you whether we are on the right path.

This feature basically allows to nest storyboards one into another. So you can create a storyboard B and then add it to storyboard A as you would with a regular screen. Storyboard A then works as if screens from B were added directly to it. When exporting to PDF and checking "Export screen flow diagram" option, both screen flows for A and B are exported.

This feature is available in our development version and it would help if you could try it out and give me your feedback: http://wireframesketcher.com/staging

Thanks!

Hi Peter,

I'm using Wireframe Sketcher Studio. Followed the instructions on adding the staging server.

But I can't install from staging as it keeps telling me I already have Wireframe Sketcher installed.

Hi Brek,

You probably need to run WireframeSketcher as Administrator to install the staging version and then restart it as a normal user again. See this support topic on updating WireframeSketcher for more details.

Hi Peter,

Thanks, that worked. I've just had a quick test of the nested storyboards. It all seems to work well.

The click flows appears to work, the user can tap on the .storys in the storyboard to open that storyboard etc.

You can nest multiple storyboards within a single storyboard and have multiple storyboards within a storyboard.

I exported a PDF, and it all works well.

Some issues...

The .story icon looks very similar to a normal .screen in the storyflow (it has a stacked pages effect) I think this is too subtle, especially when you have a lot of screens as they are displayed smaller and the detail is lost. I'd suggest something else to help make it stand out.

• Bold text on the name (or italic) (still won't be noticeable at small sizes)
• Change the colour to be a grey (would this get confused with a component? The PDF doesn't show grey for components, but grey is sued for components in the program itself)
• Make the stacking effect much more pronounced (stack several page to make it look like a large stack of paper)
• Or you could perhaps place a Square around the .story to make a square within a square.

I like the ability in the screenflow to click the nested screenflows to open them. It helps me explore the product.

Currently if you navigate the links from one screenflow to another screenflow it does this without showing the screenflow diagram. Something that might be nice to have is the ability for a .screen to link to the .screenflow diagram in the pdf. This means that when the user transitions from one .story to another they see they are entering a new area.

If they did this, they would lose their link, so this would only work for single point entires, so I'm not sure how much use it would be for people.

I like the pdf export places the screenflows at the top, but some people may want the screenflows to be exported in the order they choose. That way they can use the screenflow to "bookend" the screens as they are shown in the pdf.

Brek, thank you for your feedback. I went ahead and added another page to the storyboard outline. Could you update and see if it works better like this?

Hi Peter,

That is better, but I still think it isn't obvious enough.

Here is an example of the Nested Storyboards added into a very small project. (approx 38 screens)

As you can see the number of screens and space needed means the stack effect isn't noticeable enough at the smaller sizes.

I'm also working on an app that has many many more screens than this, which means the screens are shown a lot smaller than this screenshot.

Sorry. Didn't know that link wouldn't work.

<a href="http://tinypic.com?ref=2le2dte" target="_blank"><img src="http://i39.tinypic.com/2le2dte.jpg" width="100%" border="0" alt="Image and video hosting by TinyPic"></a>

ARGH!!! Okay, I thought that last one would work as it showed in the preview....

http://tinypic.com/r/2le2dte/5

Just copy and paste that into a webpage. :)

Brek,

Thank you for your feedback. I see your point, but I'll try to address it later. Since the nesting functionality is working I made it part of the latest version: http://wireframesketcher.com/blog/2013-05-08-new-background-color-tags-nested-storyboards.html

Note that I chose to hide this functionality for regular users so storyboards are not visible in "Add Screen..." dialog. To nest storyboards you'll need to use drag & drop from Project Explorer view.

Great Peter, exactly what I need!

If I have any further feedback I'll let you now.

I agree the stacked pages are too subtile, why not add an icon in front of the title?