How to create prototypes with rich interactions
Create fully-functional and interactive prototypes by defining rich interactions in Justinmind. This tutorial will explain how to do so using events, a key Justinmind feature.
The events consist of two main components: an event trigger (or user event), i.e. what action the user should make (e.g. a click, or a mouse hover), and a set of actions, i.e. what the trigger will cause (e.g. a page change, or a style change). Additionally, one can define conditions for every interaction.
Every event must be defined on a specific element on the screen, which will act as the source of the event trigger. All the events will be simulated respecting any conditions and order defined in the user interface.
Follow the steps below to add rich interactions to your web and mobile prototypes:
1) In any of your prototypes, choose a component that you would like to add an interaction to and then click ‘Add event’. Choose the user’s trigger from the options available in the menu on the top left side (1). Remember that you can assign more than one trigger to a single component. For example, you can make a button have one reaction when clicked and another reaction when the cursor moves over it.
2) Then choose the type of action you want to execute (2). In the bottom part of the events dialog (3) you will be able to select all the relevant options. You can see an outline of the canvas content selecting the “Outline” option in the top right-hand corner (4).
Once you selected the type of action, click OK: it will appear in the Events tab.