Screen Flow Diagram (Wireframing)
Screen Flow Diagram allows you to connect your wireframes into a flow with branches according to the user's interactions.
The screen flow diagram supports the following elements:
- Start - defines the beginning of the screen flow.
- Flow - connects two elements.
- Screen - shows a wireframe of a user interface screen
- Decision - creates a branch in the screen flow.
- End - defines the end of the modeled screen flow.
Flow Definition
Various kinds of user interactions are supported:
- mouse
- touch
- stylus
- keyboard
and also non-user interaction: timer
Each flow may be limited by a condition.
Mouse Interactions
You can further specify which buttons are used during the mouse interaction:
- Left Button
- Right Button
- Middle Button
The flow also includes Referenced Element field that allows you to specify which element is used in user interaction - e.g. which button in the window was clicked.
Key Interactions
You can further specify which key or combination of keys is used in this user interaction. The shortcut key can be set using the Shortcut Key Definition parameter. Examples of possible values: X, Enter, Ctrl + V.

Wireframing - Screen Flow Diagram
New Comment