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:
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.
Node Details
Clicking on a node shows the details panel on the left for that node.
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
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.
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.
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:
- 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
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:
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.
