A better way to wireframe



What are interactions?

Interactions are properties you can add to any stencil, page or layer in order to simulate how a user interacts with your application. Interactions are defined by action/reaction pairs that consist of a user action (what the user needs to do to trigger a certain system response) and a system reaction (how the project responds to the user’s action). Every action you have defined in your project thus triggers a specific reaction. You can add more than one interaction to an element to simulate different responses to different user inputs, for example a swipe gesture on an images could show the next image while a tap might enlarge it. You can also create interactions that include multiple reactions, for example to play a sound and show a system alert at the same time. You can think of interactions as if-then statements that define how your project reacts to certain user inputs.

Creating and adding interactions

To add an interaction in your project, select the element which you would like to make interactive. Open the context menu and select the “Interactions” tab. Then click the “Add interaction” button.

The Interaction Dialog will open. Now 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.

You can refine interactions with additional parameters, such as

  • directions,
  • angles,
  • intensity,
  • click type,
  • characters,
  • finger count,
  • individual sounds,
  • animations, or
  • delays.

To add multiple reactions that will follow a user’s action, use the “Add reaction” option. The “Delay” parameter is helpful if you want to stage reactions or create sequences of reactions, for example to simulate a slide show.

You can add interactions to specific stencils like buttons or images that will trigger the desired reaction. If the user action is not specific to a certain stencil (e.g. tilting the device or changing location), you can add the interaction to the page from which it should be executed. If the same interaction should be available on several pages or throughout your entire project, you can add the interaction to a (otherwise empty) layer, which you can activate on all desired pages.

Note: To add a simple “show page” (same as “go to page”) interaction, you can use the “Target” option in the context menu of the respective stencil as a shortcut.

Available user actions and system reactions:

Below you can find a list of available user actions and system reactions and the respective parameters available to define them:

Available user actions:

  • clicks/taps: Define the mouse button on which the user needs to click (left or right click).
  • tap and holds: Define how long the user should tap and hold the fingers on the respective element.
  • Hovers: Determine if the user should enter or leave the selected element.
  • Swipes: Select the swiping direction (left, right, up or down).
  • Pinches: Choose the pinching direction (in, out or any direction).
  • Changes location: Define the GPS-location here on a map and determine if the user should leave and/or enter this specific location.
  • Presses keyboard shortcut: Define the key or shortcut, which should be pressed to trigger a reaction. This will be shown under Sequence. (Adding multiple keys and/or shortcuts is possible.)
  • Turns device: Define the direction the device should be turned to, either landscape or portrait.
  • Tilts device: Define the tilt direction of the device (to the left, right, up or down), the tilt movement (forward and/or backward) and the tilt angle of your device.
  • Shakes device: Define the intensity (1 = low, 3 = high) and the duration the device should be shaken.

Available system reactions:

  • show page: To show an additional page chose if you would like to create a link with or without a reload and if the link should open in a new tab or if it should be an instant link within the same frame. Animations, such as fading and translations and delays can be added, too.
  • change layer visibility: Define if the header and/or footer should be visible, hidden or toggled.
  • play a sound: You can upload a sound here, which can be played for a specific duration.
  • go back (browser history)/go forward (browser history): With this reaction you can move back and forward in your browser history.
  • show a system alert: Write a message that should be displayed as a system alert.
  • show overlay: To create an overlay, select the page from the dropdown.
  • hide overlay: If you use an overlay, you can hide again. To do so, chose this reaction and define the point of time when it should disappear.
  • Scroll page: Determine the position (to top or to bottom), the duration of scrolling (in seconds) and the point of time when the automatic scrolling of your page should commence.
  • close browser window: To close a browser window, define the delay.

Note: You can use the “Delay” parameter on every system reaction. This is especially helpful when you are working with multiple reactions you wish to arrange in a chronological sequence.

Managing interactions

All interactions available on a given page can be found in the My Interactions panel. Here you can get an overview of all interactions on a page or layer (Note: Interactions assigned to layers are not shown when you select a page on which the layer is displayed, so you need to select the respective layer separately.), copy or delete interactions, open the Interaction Dialog to edit interactions, and find out which elements are associated with a given interaction or share the same interaction.

Hover over any interaction in My Interactions to see which element it is assigned to. The corresponding element will be highlighted. Click on any interaction in My Interactions to open the Interaction Dialog and edit the selected interaction.

If two or more elements share the same interaction, they will be shown as an Interaction Group in My Interactions. To find all elements sharing the same interaction, select one element with that specific interaction and click on the “Find All” button select-all of the interaction you are interested in.

You can copy an interaction to other elements by selecting the element with the interaction and all elements to which you wish to copy the interaction. Then click on the “Duplicate” icon not-applied-to-all to copy the interaction to all selected elements.

Editing interactions

To edit an existing interaction select the element to which the interaction has been assigned and open its context menu. Choose the “Interactions” tab to see all interactions attached to the element. Now select the interaction you would like to edit. This will open the Interaction Dialog. To remove a reaction you have defined, use the “Delete” button delete next to the respective reaction. Simply click “Save” to keep your changes.

Alternatively, use the My Interactions panel to access the interaction you wish to change directly.

Deleting interactions

To delete an interaction, select the element to which the interaction has been added and open the context menu. Select the “Interactions” tab to see all the interactions assigned to this element. Click the “Delete” button .

Alternatively, open the My Interaction panel and click the “Delete” button delete of the interaction you wish to remove. Note: Deleting an element will also delete any interactions assigned to it.

Simulating interactions

You can simulate interactions either in your web browser (e.g. on a stationary PC) or on your mobile device (e.g. using the Pidoco App).

To simulate interactions in your web browser, click the "Simulate" button icon-simulation . This will open the simulation in a new browser tab. To simulate touch gestures, device motion or location changes, hover over the respective element or page with your mouse and click the corresponding icon shown next to the element.

To simulate interactions on a mobile device, download the Pidoco App from iTunes or the Play Store, log in using your Pidoco credentials and open the desired project by selecting it from the list of projects. Alternatively, share a link to the project via email using the option “Send ‘Mobile App’ Invitation Mail”. Clicking the link will directly open the project in the Pidoco App without having to log in.

Note: The Pidoco App is a viewer only which allows you to simulate projects on mobile devices. Editing of projects is not possible in our app. To edit your project, log in to pidoco.com, edit the project there and refresh your app.

<< back to overview