Scenarios module: User Flows and Sitemaps

The Scenarios module offers a robust diagraming tool that can be connected to the rest of your prototype. It can provide the stakeholders of your projects different ways to visualize aspects of the application that you’re designing that are hard to visualize in the prototype. The typical usages of Scenarios are to diagram User Flows and to lay out Website Sitemaps. The flexibility of the tools allows you to diagram practically anything.

You can create as many Scenarios as you want and make them visible in the Simulation. You can also link from the screens in your prototype to the scenarios expanding the ways to communicate complex flows. You can even restrict the navigation of your prototype by what is defined in the scenarios to guide the users.

The Scenarios module overview

other scenarios module

  1. Toolbar – contains quick editing options UI elements on the Canvas. The most common tools and commands are found in the toolbar
  2. Components – elements you can use to build a scenario. Choose from Action, Screen, Decision, Note and Image
  3. Screens – the screens of the prototype you’re currently working on the UI module
  4. Scenarios – a list of all the scenarios you’ve created. You can select different scenarios to view here
  5. Outline – the outline of the scenario that’s currently selected. You can see all the elements you’ve added to the scenario here

The Scenarios module toolbar

Create and customize transitions for your scenarios from the toolbar:

  1. Create a new transition
  2. Change the font of a component that contains text
  3. Change the font size
  4. Change the font style
  5. Align text (left, center, right, top, middle or bottom)
  6. Change the color of a component’s text
  7. Change border color of component
  8. Change the background color of a component
  9. Change the order of the scenario components (Bring to Front, Send to Back, Move Forwards, Move Backwards)
  10. All Connector Labels
  11. Show device borders
  12. Zoom

Creating a new scenario

To create a new scenario, click the ‘+’ icon in the Scenarios palette. Here, you will also see a list of all the scenarios you’ve created. If you want to open a scenario, just double click on it.
creating a scenario

Components for your scenarios

In the Components palette, you’ll find all the available components you can use to create a scenario. Drag and drop them to the Canvas to create a scenario.
components for scenarios

  1. Action – allows you to add an additional process that doesn’t necessarily affect the navigation flow of your prototype to your scenario
  2. Screen – allows you to add a blank screen to your scenario
  3. Decision – allows you to add a blank screen to your scenario
  4. Note – allows you to add a note to your scenario
  5. Image – allows you to add an image to your scenario

Creating scenarios from existing screens

You can also use existing screens in your prototype to create scenarios, listed in the Screens palette of the Scenario module. To use one, simply drag and drop it to the scenarios Canvas.
scenarios existing screens

Diagramming transitions and flow validation

Once your scenario components are on the Canvas, you can link them to one another and create navigation flows, using the transition arrow option in the toolbar.

Click on the transition arrow and the cursor will take the shape of an arrow. You can now start creating links between components by drawing arrows between components.
These navigation flows will be validated. When two components are linked by an arrow and both are UI elements taken from real screens, a warning symbol will appear. This warning symbol indicates that there is no link in the first screen to create the navigation described by the arrow.
diagramming transitions
If you create a link and return to the scenario, the warning symbol will disappear.
All information in the scenarios can be exported to a Word document with all the extra information relative to the scenarios.

Creating new screens

You can start defining a prototype by diagramming in the Scenarios module.

To do so, right-click on a scenario screen to create a new screen in the user interface module. You will automatically be taken to the screen in the User Interface.

Now, you can define the content and interaction of the screens to flesh out the navigation flow.
creating new screen
Each time you create a new screen in a scenario, this screen is available with the same name in the User Interface module. Note that a thumbnail preview of the screen will be displayed, instead of an icon.

Simulating scenarios

Visualize your user navigation flow in your interactive prototypes by simulating scenarios. Learn how to do so by following the steps below:

  1. With your scenario created, go to the User Interface module and click “Simulate”.
  2. In the Simulation mode window that appears, click on the hamburger menu in the top right-hand corner. A slide menu will appear with two tabs: “Screens” and “Scenarios”.
  3. Go to the “Scenarios” tab and select the scenario that you wish to simulate.
  4. In the simulation Canvas, click on the component where you defined the beginning of your navigation flow. In the pop up that appears, click “Start scenario simulation”.
Note: if you want to simulate this particular screen without the scenario, click “Go to screen” to be taken to the screen without the corresponding scenario.

You can stop the current simulation and/or change the navigation flow, remove the filter in the top toolbar of the Simulation window like so:
simulating scenarios

Reviewing scenarios

You can also add and view comments in the Scenarios module and to simulated scenarios. Comments can only be added to the full scenario screen, not specific simulation components.
review scenarios