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
Wireframing - Screen Flow Diagram

New Comment