Last Updated on February 26, 2024
Table of Contents
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:
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.
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.
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.
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.
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.
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.
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:
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
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.
Method 2: Show and hide
This works the same way as the same method used in Axure.
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.
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.
Posted by:Igor Ovsyannnykov
Igor is an SEO specialist, designer, photographer, writer and music producer. He believes that knowledge can change the world and be used to inspire and empower young people to build the life of their dreams. When he is not writing in his favorite coffee shop, Igor spends most of his time reading books, taking photos, producing house music, and learning about cinematography. He is a sucker for good coffee, Indian food, and video games.
ncG1vNJzZmihnqi9qr7AraCoppaasqV6wqikaJqVnLavusSrqmafpZ6xpnnTqGSipqSav6Kv06KtnmWgp7y1u9Oyp6Kml2LEqbXCoWStp5%2BherS0zq6jnWWZYrCpu86snGg%3D