UserBit's user flow module is a powerful and intuitive module to quickly visualize user's paths through your app or feature. It is no secret that manually creating and maintaining these flow diagrams using vector graphics tool is painful and cumbersome. This module was built specifically for UX interaction design to save you tons of time and effort. You can enable it for existing projects by accessing the edit project modal:

Enable user flows module for existing projects on UserBit
Enable user flows module for existing projects 

Ok so now that you've enabled it, lets get familiar with our brand new module!

User Flow Nodes and Edge

Adding a new node to the flow diagram

The panel on the left of the canvas contains the node library. To add a new node into your flow, simply drag and drop them wherever you want on the canvas. The library hosts both flow diagram nodes as well as screen nodes so you can easily create a hybrid user flow.

Add nodes to your user flow by dragging them from the left panel on UserBit
Add nodes to your user flow by dragging them from the left panel

Node Details

Clicking on a node shows the details panel on the left for that node.

User flow details panel shows more information about selected node or path on UserBit
User flow details panel shows more information about selected node or path

Here you can add a new label or description to your node. For screen nodes you might want to keep track of the visual design that corresponds to it. The details panel allows you to attach an image to the node as well.

Switching node type

Any existing node can be switched to any other type on the fly. Just select the type from the node type dropdown.

Creating edges between nodes

Creating paths between nodes on UserBit flow module
Creating paths between nodes

When you hover over a node, you'll see the node's anchor points. Clicking an anchor point will begin an edge and show you possible end points on the map (anchor points of other nodes). To create an edge between two nodes, click once on the start point and then click again on the end point. The in-built algorithm will take care of laying out the edge for you.

Tip: You can also drag from one anchor to another to create an edge, but you'll find that the two-click method is more convenient.

Once the nodes are connected, you can move them around - the corresponding edges will re-adjust and stay connected.

Adding a label to an Edge

Just like with nodes, when you select a path the right panel will show you path details.

Edge details on User Flow
Edge details in User Flow

Here you can add a label to your edge to give it more context.

Changing edge styles

Just like nodes, you can also change the type of an existing path. On the details panel, select an option under Edge Style to instantly change the look of the edge.

Deleting nodes and edges

Deleting a given node and path is straight forward. Select the node or path by clicking on it and then press Delete or Backspace button on your keyboard.

Deleting nodes or edges on user flow diagram
Deleting nodes or edges on user flow diagram

You can also use the Delete button on the toolbar to delete the selected items.

Selecting multiple items on canvas

There are two ways to select multiple items on the canvas:

Select multiple items on the canvas by holding shift key on UserBit's user flow module
Select multiple items on the canvas by holding shift key
  • Hold shift and click on the items you want to select.
  • Hold shift and click-drag any where on the canvas.

User flow canvas toolbar

user flow toolbar on UserBit
user flow toolbar helps with useful interactions

Zoom: The user flow canvas allows you to zoom-in and out using your usual zoom interactions (scroll wheel, gestures). The toolbar also provides you with a few buttons to zoom in and zoom out.

For larger flow diagrams, you might find the zoom-fit button useful. It allows you to instantly fit your flowchart in your current canvas viewport so that you can see all of it at once.

Pan: You can also pan the canvas around by clicking and dragging anywhere on the canvas.

Undo & Redo: UserBit's flow module also comes with operation stack so anything you do can be undone or redone with Ctrl + Z (undo) or Ctrl + Shift + Z (redo). You can also use the buttons in the toolbar to do the same.

Export User Flows

You can export your user flow diagram instantly by clicking on the 'export' button on the top menu:

Export user flow diagrams
Export user flow diagrams

Duplicate User Flows

UserBit also allows you to create a duplicate of an existing user flow so that you don't have to start from scratch if the new user flow is similar to an existing one.

Create Collapsible Groups

UserBit also allows you to create collapsible groups of nodes to better organize your user flow. Read more about it here.

User flow module is available on every pricing plan on UserBit. We're so excited for this new addition to our powerful research platform and the value it adds for researchers and interaction designers. Try it out today on UserBit.