The Observation Deck

Creating Functions within a Justinmind Prototype

Over the past 6 months, our product design team has been making heavy use of the Justinmind prototyping tool.

Justinmind is a great tool if you are looking to create highly interactive wireframes or even fully functional prototypes. It definitely takes more time to build an interactive wireframe than it would take to build a ‘flat’ wireframe, but the payoffs are pretty awesome. The amount of discovery that you can accomplish with dynamic wireframes is significantly higher than you could find in traditional wireframes.

Justinmind is a very powerful tool, but it can become a bit cumbersome as you layer more events onto your prototype. There are a few big issues that we’ve encountered with complex prototypes:

  1. The order of events can be difficult to organize. If you have events on multiple elements that each get triggered by the same action (e.g. page load) then you cannot control which one gets triggered first.
  2. It can be hard to find what event is causing a change to an element.
  3. If you delete/move/change a visual element (e.g. a dropdown) you could lose any events that are associated with that element.

In order to solve these problems we’ve started applying some MVC concepts to Justinmind by creating functions that are not tied to on-screen elements. We generally put these in the prototype as hidden text elements.

Here’s an example. If you want you can download the .vp file as well here -> Function Example.vp .

In the example almost all of the events are in the ‘LOAD PAGE’ and ‘CHANGE RESTAURANT’ text elements. I would normally hide those elements, but for the purpose of this example I am leaving them displayed.

The one event that is not in the function list is the trigger for the change restaurant function – which is a change of the dropdown. To trigger the function I use the On Variable Change trigger. I created a variable called change_restaurant that has a default value of zero. Every time the dropdown gets changed I simple increment this variable by adding one. The value of the variable has no meaning, all I care about is triggering the CHANGE RESTAURANT function. The on variable change trigger was added with Justinmind 7.0 and is very powerful. You can (for example) string multiple functions together by using On Variable Change as your trigger.

To summarize the methodology:

  1. Try to avoid putting events on visual elements (exception=triggers)
  2. Create hidden text elements that contain groups of events in functions
  3. Add Set Value events on your trigger UI elements that increment a variable by 1
  4. Use on variable change triggers as ‘listeners’ to run your functions.

OK – well I hope this helps somebody. If you have any questions leave a comment. Cheers

No comments yet.

Leave a Reply

Back to top