Use arrow keys to navigate

Interactive design is essential in the prototyping design process. How do you master a prototyping tool within a short timeframe to boost your productivity? Today, we’ll compare three prototyping tools based on how interactive they are. Hopefully, this would help you pick the right prototyping tool fit for your needs.

Here are the three tools we’ll be looking at:

  1. Axure – It is one of the most popular and robust prototyping tools around.
  2. Mockplus – It is new, but shows promise as a rapid prototyping tool.
  3. Justinmind – This is a high-fidelity prototyping tool.

All three are desktop applications. If you’re also interested in web-based tools, we’ll be covering that later on.

Part 1: Interaction Settings

The moment you understand how Interaction Settings work, you will also start to understand interactive prototyping design a lot more. Let’s take a look at the Interaction Settings in two aspects: page link and component interaction.

About the page link

Axure – Select target on the properties panel

Not intuitive. To link a page, you need to select the target page from the dropdown page list under the properties tab. Sure, it looks simple. But if the page list is extensive, it will be time-consuming and annoying.

pic2

Mockplus -Drag and drop with one click

Easy and intuitive. Mockplus makes creating links between pages faster with the drag-and-drop interface. Making it better is the intuitive way that the red link line guides you in selecting targets pages.

pic3

JustInmind – Drag and drop with one click

The Verdict: Justinmind and Mockplus are similar in terms of how the page links are set. However, Justinmind requires you to drag the whole widget to the screen list. The link mark stays invisible until you drop the widget, which makes it less intuitive.

pic4

About the component interaction

Axure – Add case, no drag-and-drop

Axure allows us to set regular interactions through Case Editor. There are several options available. However, it is frustrating to figure out how it works at first. Complicated interactions require knowing the Condition Builder inside and out. This means that some programming knowledge is also required. You have to set aside some time for you to master it.

pic5

Mockplus – Simple drag-and-drop, it’s WYSIWYG

Mockplus visualizes the interaction design using a simple drag-and-drop interface. When you drag the “Link Point” to the target component, a popup window will show you the trigger and command clearly. This makes it extremely straightforward in terms of component interactions. No case or programming knowledge required here.

pic6

Justinmind – Add event, no drag-and-drop

The Verdict: JustinMind and Axure are similar in terms of component interaction to some extent. It lets you build interactive prototypes to enter the event editor. From here, you can choose the trigger, action and target. It supports functions and constants as well, which requires some programming knowledge. It is not easy for first-time users. However, Justinmind is better than Axure because it makes it easier to manage the Condition Builder.

pic7

Part 2: Practice of Interaction Design

In the design process, one of the most frequently-used interactions is returning to the original state once the first interaction occurs. To set a common base, I will use an example to compare the three tools.

Here’s the example:

The first click makes an image move right 200px by linear, while the second-click makes the image move back.

Now let’s explore how to complete this task using each tool. There may be different methods depending on the tool.

Axure

Method 1: Use dynamic panel

Add two states for the dynamic panel and use the condition builder to distinguish the state. Then, set the Move action and parameter. Finally, switch the dynamic panel state.

Here’s a more detailed look:

pic8

Method 2: Add condition

This method will use the condition builder as well. Programming knowledge is required, such as “variable”, “global variable”, “assignment”, “if”, and “else”. The details are shown below.

Method 3: Show and hide

Use two images names A and B. Follow these steps:

  • Show A and hide B
  • Click A to move it to the specified location and show B, hide A
  • Click B to move it to the specified location and show A , hide B

pic9

Justinmind

Method 1: Use Toggle event plus Move action

This method makes this interaction effect easy. However, this interaction effect will not work using a double-click.

pic10

Method 2: Show and hide

This works the same way as the same method used in Axure.

pic11

Mockplus

We can build this interaction effect with the auto-recovery feature. All it takes is one click.

To return to the original interaction, just add a move action for the image using drag and drop, then select “Auto recovery” from the interaction panel.

pic12

pic13

Meanwhile, the “show and hide” method can be used to achieve the same effect, but is unnecessary.

The perfect way to find the perfect tool is to use them in practice. Here’s my take on it:

  • If you have enough time and enjoy the experience of mastering a comprehensive prototyping tool, I’d recommend using Axure. There are plenty of advanced features that are worth exploring.
  • If you would like to create high fidelity and sophisticated interactive prototypes, I’d recommend using Justinmind. However, this would require programming knowledge.
  • If you want to master a tool in a very short time and care about productivity, I’d recommend using Mockplus for rapid prototyping. It simplifies the interaction design, saving you a lot of time.

All in all, the primary purpose of using tools is to prototype more efficiently. These tools should not be a cause for limitation or lack of focus on the project at hand.

Use arrow keys to navigate

Posted by Igor Ovsyannykov

I'm a digital nomad and entrepreneur bouncing around South East Asia. When I'm not working here, I'm out taking photos. Follow me on Instagram: @igorovsyannykov

Leave a reply

Your email address will not be published. Required fields are marked *

Powered by Creative Market