Interactions

The basics

With Proto.io you can easily add interactions to your prototypes. All interactions have a trigger event (that causes the interaction) and an action (the result of the trigger event). Trigger events may be mouse events like click, or touch events like tap, swipe, etc., or may be screen events like on orientation change, on screen show, etc. You can also set keyboard events on each screen. Actions are actions related to navigation, containers, item visibility, audio, video, animations and more.

Interactions can be added through the Interactions tab in the Inspector of any UI item, screen or state.

 Screen_Shot_2017-05-30_at_10.57.41_AM.png

 

When clicked, you are prompted to edit and save your interaction. Each interaction can then be later edited or deleted. You can also sort interactions for better management purposes.

Screen_Shot_2017-05-30_at_10.58.51_AM.png 

Interactions setup forms differ based on the event and action. They, however, share common properties.

  • Title – The title of the interaction
  • Trigger event – The event that will trigger the action
  • Action – The action to be executed
  • Delay – The delay in milliseconds for the action to be executed
  • Callback – Another interaction that can be set when the current interaction is complete

Even though interactions can be sorted, they are called simultaneously with no delay unless otherwise specified (in the ‘Delay’ field, upon choosing an action). A variety of interactions can be set on one UI item (or screen action). For example, when I ‘tap’ on a button, I want one item to hide and an audio file to start playing simultaneously.

Similarly, you can use the callback function to create another interaction when your current interaction is complete, in other words, to create a chain of interactions. For example, you can set an interaction to a button for it to animate an item and when the item finishes its animation, to go to another screen.

The interaction builder is an advanced, yet intuitive user interface, that lets you create various interactions for your prototypes. Based on the event and/or the action of your interaction, a new form with different attributes and settings will appear. If for example, you choose a “Go to screen” action on a “Tap” event, you will be prompted to select the target screen and the screen transition. Or if you choose a “Hide an Item” action on a “Tap” event, you will be prompted to select which item is to be hidden and on which screen.

 

Events-Triggers

Events are part of an interaction and are responsible for triggering the call to action. Events can be added to any UI item on the screen, screen or container. Events can also be called based on the screen loading status and orientation. Last but not least, keyboard events can be set up for each individual prototype screen.

 

UI item events

Touch/gesture and mouse events can be applied almost to any UI component item found in the item libraries. Some items have one action property, e.g. a single button, while others have dynamic action properties, e.g. a tab bar component that lets you create a different set of interactions for each individual tab.

List of events

 

Click

Click is triggered when a user clicks on a component, or similarly taps on that component with a touch event on the actual mobile device. Click is similar to tap but with a longer execution wait timer, to handle better event recognition.

 

Tap

Tap is similar to click but triggered after a quick touch event. On a web browser, click and tap are identical. On mobile devices click runs 400ms after it is pressed, while tap runs 300ms after it is pressed. The 400ms is crucial in some cases to avoid transition and double-click event conflicts, so click might be preferred to tap. However, if it is necessary to have a faster tap response, tap can be used with caution.

 

Note: In case of a “Go to screen” action with no or a fast transition, it is possible for another tap or click event which is on another button, but on the same exact location in the target screen, to be executed.

 

Tap Hold

The Tap Hold event is triggered when a user clicks and holds their mouse (or taps and holds their finger on a mobile device) for more than one second.

 

Swipe

The Swipe event is triggered if any swipe activity is detected (horizontal drag of 30px or more and less than 75px vertically – occurs within 1 second duration), e.g. swipe left, or swipe right.

 

Swipe left

The Swipe left event is triggered when a horizontal swipe left activity is detected (right to left direction).

 

Swipe right

The Swipe right event is triggered when a horizontal swipe right activity is detected (left to right direction).

 

Swipe up

The Swipe up event is triggered when a vertical swipe up activity is detected (bottom to top direction).

 

Swipe down

The Swipe down event is triggered when a vertical swipe down activity is detected (top to bottom bottom direction).

 

Note: Web browser swipe events can be simulated with a simultaneous left and right click and then drag.

 

One or more touch events can be applied to one UI element. Also, the same events can be applied to execute different actions. For example, you can set three different interactions one button. Two interactions that will be called with a “tap” event and one that will be called with a “tap hold” event.

Container events

Container scroll to

The ‘Container scroll to’ event is triggered when a scrollable container is scrolled towards a particular direction (you can choose from downwards, upwards, rightwards or leftwards) and by a certain number of pixels.

 

Container scroll and Container scroll end

‘Container scroll’ and ‘Container scroll end’ are events triggered when a scrollable container starts scrolling and ends scrolling respectively.

 

Screen events

These are events that relate to the screen status and screen orientation. Screen events can be applied on any screen.

Orientation change

This event is called when the user changes the orientation of their device, or when clicking the orientation change button on the web player.

Screen before show

This event is triggered on the screen you are transitioning to, before the actual transition animation kicks off. It is used when calling an interaction is needed before the UI elements appear on the screen.

Screen show

Screen show event is triggered on the screen we are transitioning to, after the transition animation has completed. It is often used to highlight navigation items or go to snap container page.

Screen before hide

This event is triggered on the screen we are transitioning away from, before the actual transition animation kicks off.

Screen hide

An event triggered on the screen we are transitioning from, after the transition animation has been completed.

Keydown

Lets you assign keyboard events on each screen, which will interact with the screen and UI items.

 

Keyboard events

Keyboard events, like screen events, can be set on a screen level. You can apply different keyboard events for each screen. The keyboard event available is “key press” and is triggered immediately when the defined keyboard key is pressed. This feature is commonly used to simulate hard buttons on mobile and other devices that are not part of the touch screen interaction, but instead are physical buttons on the device.

They keys available for keyboard events are:

  • Numeric keys 0-9
  • Arrow keys
  • Space bar
  • Keys A-Z (case insensitive, meaning that hitting ‘a’ is the same as hitting ‘A’)

 

Interaction area

You may also use the Interaction Area component that is common in all libraries. The Action Area component allows you to define a rectangle area and add actions to that area. It is often used when designers upload their own designs to use in their prototype and want to create hotlinks (interactive areas) on different parts of a single picture.

 

Actions

Screens

Go to screen…

Load screen as overlay…

Unload overlayed screen...

Containers

Go to snap container page…

Scroll scrollable container…

Sync Page Controller item...

States

Change screen state...

Change container state...

Stop state transition...

Item animations

Animate item…

Move whole screen…

End loop sequence...

Logic

Change property…

Set variable...

Item visibility

Show item…

Hide item…

Show item and hide after delay…

Toggle item visibility (hide/show)...

Layers

Bring to front…

Send to back...

Item highlight

Highlight navigation item…

Highlight list item…

Highlight page controller item...

Events

Stop event propagation

Fire an item’s event…

Focus input field...

Audio

Play audio…

Pause audio…

Stop audio…

Change audio volume...

Video

Play video…

Pause video…

Stop video…

Change video volume...

Gifs

Restart GIF item...

External Actions

Open external URL…

Send email…

Make phone call…

Send SMS...

Debugging

Alert item id for debugging

Alert variable for debugging

Screen transitions

Screen transitions can be applied when using the “Go to screen” and “Load screen as overlay” actions. A set of common mobile transitions effects can be applied on any screen when navigating to a new screen. The transition effects available are the following:

  • Slide
  • Slide Overlay
  • Pop
  • Fade
  • Flip
  • Turn
  • Flow

The transition duration is similar for all transitions ranging from 325ms to 350ms.

 

Quick Interactions

You have the option to quickly add an interaction to a UI component, by clicking on the little wand on the right of the ‘Add Interactions’ button.

This opens up your options to choose from ‘Go to Screen’ and select a screen to land to, ‘Change State’ and select a state to change to, or 'Play Audio' which opens up Sound Manager for you to choose a sound to play when the UI component is tapped.

Interaction wizard

Proto.io lets you quickly build interactions triggered by tap events by dragging the little thunder icon on the left of a UI component and dropping it on the component to be affected by the interaction (either on the canvas, or in the Layers list).

             

Depending on the type of UI component you ‘drop’ your interaction on, you get a list of relevant actions.



Sorting and managing interactions 

If you right-click or on your interaction in the properties inspector you get a number of options:

 

  • Cut
  • Copy
  • Paste
  • Duplicate
  • Create new
  • Edit
  • Enable
  • Disable

 

You can sort your interactions by just dragging and dropping them in the order you want.

Have more questions? Submit a request