Justinmind

SUPPORT

Learn how to prototype web and mobile apps

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.

Interactive prototypes: Events dialog

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.

Next tutorial > Design interactive prototypes with events

15 Comments

  1. ulara

    December 12, 2014 at 5:05 am

    hi

    I would like to use sound effect on the click on action.
    Is it somehow possible in Justinmind?

    • Lidia Rodriguez

      March 2, 2015 at 11:26 am

      You can use a flash mp3 player or just any html sound player and embed through the html widget.

  2. David Jeames

    January 6, 2015 at 11:21 pm

    BTW, to do this, I exported the prototype in HTML and then modified the jimMove function defined in function-jim-event-action.js so it could use a calculated expression.
    Then, I modified the event of my page to give a calculated expression in the parameter of my move action.
    Hope you don’t mind.

  3. David

    January 19, 2015 at 6:53 pm

    Just downloaded a few days ago and I’m trying it out. I specified a swipe-down event to show a piece of content (slide down with animation), but it’s not working when I run the simulation. Any advice on how to debug or check if I’ve done it correctly? (I think I did it all correctly… the tool is pretty intuitive and easy to use out of the box… just need to this event to work).

    Please help.

  4. Tom Says :

    April 9, 2015 at 9:22 am

    Is it possible to make a dynamic panel just swap to the next panel, rather than making a chain of conditions to acheive that? Thanks

    • Tom Says :

      April 9, 2015 at 9:52 am

      In fact, I haven’t been able to apply a condition either. When panel state = X go to Y, when Y go to Z, etc. Would you mind shedding some light on how Justinmind handles Dynamic Panels? Thanks. I’m currently evaluating and it’s been great so far, but this could be an issue.

      • Lidia Rodriguez

        April 10, 2015 at 8:19 am

        There’s no need to add a condition. Just use the ‘set active panel’ action in order to swap to the following panel.

  5. ilias drumont

    April 27, 2015 at 7:59 am

    Hi,

    I’m trying to make a drag and drop interaction where I drop an object onto an other and it inserts itself. But I can’t find how to make an so called “container”?

  6. Rick

    May 1, 2015 at 5:24 pm

    It seems that I can not Show/Hide a Hot Spot. Any tips or tricks… or should a devise a work around?

    • Lidia Rodriguez

      July 6, 2015 at 10:10 am

      Hi Rick, you can show/hide hotspots in order to control if they are active or not, but note that hotspots are transparent elements so there won’t be a visual change!

  7. Theresa

    October 11, 2015 at 4:26 pm

    Are events and adding interactions available in the free version?

  8. JasonC

    June 10, 2015 at 11:14 am

    Hi! No update on this for a while. When will simultaneous actions be available?

  9. Lidia Rodriguez

    July 2, 2015 at 10:22 am

    Simultaneous actions are now available in version 6.6.1!