Screenflows are a great way to visualize the structure of your prototype. Screenflows allow you to create maps of multiple pages in order to demonstrate navigation paths, site maps or workflows. They can also facilitate the creation and organization of your prototype as they allow you to focus on specific use cases and quickly see how pages relate to each other. So here is how it goes …
Step 1: Create a screenflow
Simply put, a screenflow is a selection of pages of your prototype, i.e. a subset of all available pages. You can manage and create screenflows from the Prototype View. To create a new screenflow, click on the “New” button.
Creating a new screenflow from the Prototype View
Step 2: Edit the screenflow
In order to edit the screenflow, double-click on it. This will direct you to the Screenflow View where you can add, arrange and link pages. To add a page, simply drag it from the My Pages panel on the left and drop it into the editing panel in the middle. You can arrange pages by simply moving them with your mouse. To remove a page from the screenflow, use the “Hide page” button in the Context Menu.
Add all previously not used paged to your screenflow
Hint: If you want to use all the pages of your prototype, click on “Add all unused pages”. Each page can only be used once per screenflow. Pages you have already included are greyed out.
Step 3: Link pages and create maps
Screenflows are a convenient way to link the pages of your prototype. To do so, select a page and all linkable elements will be highlighted (Note: elements that may contain multiple link targets must be linked directly in the Page View). Now drag any highlighted element onto the desired target page to create a new link. Use the “Remove link target” button to break unwanted links. Yes, it’s that simple.
In order to create a map that shows connections between pages, you can choose to display relevant links in the screenflow. To do so, select a page and you will see all existing links as little grey arrows going to and from the page. Use the “Show arrow” and “Hide arrow” buttons to pick which links should be visible in the map.
Screenflow showing a map of linked pages
Hint: Double-click any page in the screenflow to edit it.
That’s it! You have successfully created and edited a screenflow!
Do you need help creating screenflows? Just send us a message via support@pidoco.com or Facebook, Twitter or Google+.
Happy Prototyping!