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 Properties Inspector of any UI item or from the Screens menu (for screen interactions).
When clicked, a new modal window appears that lets you add one or more interactions. Each interaction can then be edited or deleted. You can also sort interactions for better management purposes.
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 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 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 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.
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.
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.
The Swipe left event is triggered when a horizontal swipe left activity is detected (right to left direction).
The Swipe right event is triggered when a horizontal swipe right activity is detected (left to right direction).
The Swipe up event is triggered when a vertical swipe up activity is detected (bottom to top direction).
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 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.
These are events that relate to the screen status and screen orientation. Screen events can be applied on any screen.
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 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.
An event triggered on the screen we are transitioning from, after the transition animation has been completed.
Lets you assign keyboard events on each screen, which will interact with the screen and UI items.
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’)
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.
Go to screen…
Load screen as overlay…
Unload overlayed screen...
Go to snap container page…
Scroll scrollable container…
Sync Page Controller item...
Change screen state...
Change container state...
Stop state transition...
Move whole screen…
End loop sequence...
Show item and hide after delay…
Toggle item visibility (hide/show)...
Bring to front…
Send to back...
Highlight navigation item…
Highlight list item…
Highlight page controller item...
Stop event propagation
Fire an item’s event…
Focus input field...
Change audio volume...
Change video volume...
Restart GIF item...
Open external URL…
Make phone call…
Alert item id for debugging
Alert variable for debugging
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 Overlay
The transition duration is similar for all transitions ranging from 325ms to 350ms.
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.
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:
- Create new
You can sort your interactions by just dragging and dropping them in the order you want.