• Topics
• FAQs
• API Documentation
• Professional Services
• User Experience Dictionary
• Important Notice

Interaction

What are interactions?

Interactions describe a dynamic behavior of the application dependent on the user actions. Interactions can be added to any stencil, page or layer and can be tried out in the preview. They are defined by action/reaction pairs that consist of a user action (what the user needs to do) and one or several system reaction(s) (how the prototype responds to it).

Adding interactions

Interactions can be added in the context menu in the interactions tab. Click the “+ New interaction” button and the interaction dialog will open in which you can define the interaction pair.

Choose the user action from the “When the user” dropdown and specify the system reaction from the “then” dropdown. Click SAVE to add the interaction.

Multiple actions and reactions

You can add multiple user actions to one element in the context menu (e.g. swiping and tapping on an image) and trigger multiple reactions to the same user action in the interaction dialog (e.g. playing a sound and showing a system alert at the same time).

Interaction tab

All interactions available on the page are shown in the right sidebar in the editor. Hover on the listed interactions to highlight the assigned elements and click to edit the interaction.

Note: Interactions assigned to layers are only shown when you select a page on which the layer is displayed, so you need to select the respective layer in order to see its assigned interactions.

Deleting interactions

To delete an interaction click the “Delete” icon next to the respective interaction.

Editing interactions

Click on the pencil icon to edit an interaction. This will open the interaction dialog, click SAVE to keep your changes.

Copying interactions

You can copy an interaction to other elements by selecting the element with the interaction and all elements to which you want to copy the interaction. Open the context menu and click on the “Duplicate” icon in the interaction tab to copy the interaction to all selected elements.

Previewing interactions

Test your defined interactions in the preview by clicking the "Preview" button . In the web browser, touch gestures, device motion or location changes, can be triggered by clicking on the appearing icon shown next to the element. These interactions work as intended on mobile devices.