Using the User Flows editor

 

Symbols

 

Adding a new symbol / page


To add a new symbol / page, select the new symbol / page you wish to add from the symbols menu in the toolbar and drag it onto the canvas, OR click anywhere on the canvas and select your new symbol / page from the pop-up menu:

 

 

The following symbols can be used in your user flows:

  • Start / End
  • Decision
  • Action or Process
  • Document
  • Input / Output

 

Editing a symbol

 

1. Adding text / renaming a page

To rename a symbol, double click on the symbol to open up the text editor, enter the new text or overwrite the existing text, and click on the canvas or press 'Tab' on your keyboard to save.
To rename a page, double click the text at the footer of the page as you would in the Sitemap Pages section, and click on the canvas or press 'Enter' to save. 

 

2. Changing a symbol

To change a symbol, click or right click the intended symbol, and wait for the options menu to appear above.

Click the current symbol / page icon on the left of the options menu, and select the new symbol / page you want to switch to from the menu.

 

3. Changing a page

To change a page template, move your mouse cursor over the page and click to open the page options drawer to the right hand side - you should now see two tabs: Pages and Wireframes.

 

3.1 Pages

To select a linked page from your sitemap, select the page from the list of pages in the drawer.

Any changes made to a linked page in the sitemap will be reflected in this page within the user flow, and vice versa. 

All linked pages will have a small link icon in the top right hand side of the page, as below.

 

Screen Shot 2020-02-18 at 15.40.09

 

3.2 Wireframes

To select a wireframe for your page template, click the 'Wireframes' tab, and select the new wireframe you wish to choose from the list:

 

Screen Shot 2020-02-18 at 15.40.18

 

4. Changing symbol color

To change the outline color of a symbol, click or right click the intended symbol / page, and wait for the options menu to appear above.

Click the current color option in the middle of the options menu, and choose the new color you wish to select from the menu.

 

5. Deleting a symbol / page

To delete a symbol, click or right click the intended symbol / page, and wait for the options menu to appear above. Click the delete option from the right of the options menu to delete the chosen symbol.

 

To delete a page, move your mouse cursor over the page, and click the 'X' button that is now showing on the top left hand side of the page.

 

Connectors

 

Adding a new connector line


To add a new connector, move your mouse cursor over the page / symbol you wish to start the connection from, and the entry points should appear on the top/bottom/left/right of the shape.

 

Click the entry point you wish to start from, and move your mouse across to the page / symbol you wish to draw the connector line to - click down on your chosen exit point to finalise the connection.

 

 

Editing a connector line

 

To edit a connector line, click the line you wish to edit to show the options menu above your cursor.

 

1. Changing the connector line type

To change the connector line type, click the line symbol at the left of the options menu, and select your new connector line type from the drop menu.

 

2. Changing the connector line color

To change the connector line color, click the color circle in the middle of the options menu, and select your new connector line color from the drop menu.

 

3. Deleting a connector line

Click the trash icon at the right of the options menu to delete the connector line.

 

Connector Icons

 

Adding or changing a icon


To add a new connector icon, move your cursor over the connector line you wish to add an icon to, and click the 'plus' icon that should now be shown in the middle - this will bring up a menu of 1,000 icons to choose from.

 

To change an icon, follow the same steps above, but note that the 'plus' icon will not appear - if you click the current connector icon, this will bring up the icons menu for you to select another.

 

 

Deleting an icon

 

To delete an icon, open the icons menu and click the trash icon on the top-right hand side of the menu.