Screen Flow Diagram (Wireframing)

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

Except for general (undefined) interaction, various specific kinds of user interactions are supported:

• mouse
• touch
• stylus
• keyboard
• keyboard + mouse

and also non-user interaction: timer

Flow types in Screen Flow Diagram

Each flow may be limited by a condition. The condition is displayed in the brackets - e. g. [the text box is active]

The Referenced Element property allows you to choose an element from the screen diagram (e.g. button) for which you want to model the interaction represented by the flow (e.g. click on the button).

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.

Key and Mouse Combination Interactions

The screen-flow diagram allows you to specify interactions that include key and mouse combinations - e.g. CTRL key pressed and left mouse button clicked. The shortcut key can be set in the same way as simple key interactions using the Shortcut Key Definition parameter. Alternatively, you can also click into the key field in the diagram editor and enter the desired key name there.

Screen Element

The Screen element represents a single view in your application. You can set an user interface diagram to the Screen element. The diagram will be rendered inside the element. You can change the appearance and the meaning of the Screen element using the Screen Type property. You can change it either using the Properties sidebar (or dialog) or the context menu (right-click on the screen element). You can choose from the following screen types:

• General
• Window - suitable especially for desktop application views.
• Browser - represents a view inside a web browser. You can use it to show that your app navigates to the web browser or for any web app views.
• Full-Screen - represents a full-screen mode of your app.
• Screen
• Tablet
• Smartphone - suitable for mobile app views.

Screen types in Screen Flow Diagram

How to Set Specific View to Screen Element

If you want to set a specific view diagram (user interface diagram, web page diagram, or mobile app diagram) to a screen element, you have several options:

• Drag&drop a diagram from the project tree in the Project sidebar
• Click on the Set View Diagram button in the context bar for the screen element and then choose the desired diagram from the picker dialog
• Right-click on the Screen element and choose the Diagrams submenu and choose the Associate New Diagram item, if you want to create a new view from scratch or the Associate Existing Diagram item, if you want to show an existing diagram inside the Screen element.

Screen Flow Diagram Example

Screen Flow Diagram Example

Download Screen Flow Diagram Tool

Are you new here? You may be interested in downloading our screen flow diagram tool Software Ideas Modeler and start to design your screen flow diagrams: