Beginner’s Guide to Interactive Prototyping: Which Tool Should I Choose

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:

 

Axure – It is one of the most popular and robust prototyping tools around.

Mockplus – It is new, but shows promise as a rapid prototyping tool.

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.

 

1. 5 Golden Rules about Lightweight App Design

2. What’s Behind an Advanced Product Manager

3. What We Talk About When We Talk About Prototyping Tools

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s