How to Make A Perfect Interaction Demo that Can Attract Customers?

In the process of interactive design will produce out of a wide variety of outputs, such as flow charts, mind maps, drafts on paper, and even interaction demo. In order to facilitate product managers, designers, developers and project stakeholders to see intuitive effects, and communicate more effectively. The designer usually provides intuitive product through demo that shows how the user interacts with the product.

How to make a perfect interaction demo? I’d love to share some experiences of it here.

Part One: Tools for Interaction Demo

Axure

There are so many tools for interaction demo, I prefer to use Axure. Axure is simple and easy to use for experienced designers, it has a strong ability for interactive demo. For advanced users, the production of a very high fidelity demo is also a great achievement.

Balsamiq

Balsamiq provides web commonly used components with rich hand-drawn style. You can make a right and rapid prototype with it, which is close to the hand-painted prototype on paper. Usually, designers use Balsamiq to make the first demo draft. It makes your demonstration be more attractive.

Mockplus

Although Mockplus is an emerging tool, the simple and rapid prototyping way and concept have won many users. The interactive design in Mockplus is fully visualized, that's WYSIWYG. With a simple drag-and-drop to build interactive prototypes effortlessly. It not only applies to individuals but also for teams. It adds team collaboration and comment in the latest version.

There are other mockup & wireframing design tools for interaction demo, such as Pencil sketch, Design Studio, Prototype Composer, Lucid Spec, Irise Professional Edition, Adobe Reader and so on. Because I haven’t try these tools one by one, I’m not going to introduce them in detail. If you are interested, you can search them online.

Each software has its own characteristics, it has both advantages and disadvantages. The software is only a tool, it’s no matter which one you choose, as long as it keeps up with your habits. The keypoint is the interaction demo output by these software.

Part Two: Interaction Demo with Relative Middle Fidelity

After the introduction of design tools, let’s talk about how to design a demo. For the usual project, I basically use Axure. It’s a commonly used tool in design. The interaction demo only needs to reach a relative middle fidelity. What is the so-called relative middle fidelity? It means that the delivery canreflect the page content user expected, the relative priority of the contents in the page. Besides, it can also provide the process description, operation mode, and response state.

The interaction demo is neither a rough draft nor a draft scheme with high fidelity visual effect. Sketch scheme can be done with hand drawn or hand-drawn tools (Mockplus, balsamiq). While the hi-fi prototype requires more effort but less efficiency, it’s not recommended to use, unless it is used for presentations or usability testing.

Part Three: Principles of Interaction Demo

1. Follow the Grid Specifications

The novices often ignore the grid specifications to make a disordered layout. That will directly resulted in a modify or redesign of the whole project. You can image that, when the visual designer following the grid rules to make the layout, but the content cannot be well covered in the visual draft, even it suited in the interaction demo.

Therefore, a good design habit is very important for designers. You should follow the grid principle to organize the layout at the very beginning. Meanwhile, it’s necessary to ensure the font size and spacing to meet the visual requirements, such as the smallest spacing should keep at 10 pixels. So as to avoid the unnecessary distress.

2. Don’t use screenshot and color

To be convenient, some product personnel and designer use patchwork screenshot to make a page. This is not only non-standard, but also greatly reduce the interactive effect. There is also a certain amount interference to the visual designer, I don’t agree with this behavior.

Also, the output of interactive stage should be more focused on the layout of information, content level, and operation process. To avoid unnecessary interference to the visual designer, I don't recommend the use of color in the interactive drafts (except for text or special status). If you have some ideas, you can describe it through the text. Or directly tell the visual designers what kind ofeffect you want. Hand over the color, texture, and specific situation to the visual designer who can bring to full play.

3. Don’t indulge in complex interactive effects

Axure provides a motion scripting support. It makes dynamic simulation real interface interaction possible, such as the status switching, time animation, and other amazing gadgets.

Before making a interaction demo, we need to think about whether we should spend so much energy and time in our daily work.

It depends on which situation the prototype applies to. If the prototype is used for carrying out preliminary user testing or fight for the resources of the high fidelity demonstration. We need to rapidly produce interactive effect close to the actual interface.

If the demo only provides visual designers or front-end engineers to develop in the design process. Then the excessive design and effect can only be a waste of effort.

4. Have a set of your own widgets

It’s a most practical principle of interaction demo to have a set of your own widgets. You can make your own small unit with the commonly used control, functional establishment, icon, label, and etc. Moreover, you can even insert it into the widgets. Whenever design an interactive demo, you can easily find the control you need, thus improving your efficiency largely.

By the way, each prototyping tool has it’s own prototyping widgets. You can search onlineand use the controls they share. In my opinion, you’d better build a set of standard widgets according to the DPL for personal use.

5. Make good use of Master and improve efficiency

A large number of pages of the unified update is quite troublesome. At this time, you can make a good use of Mater. In the production, you can directly make the multiplexing module to replace the copy and paste. When you need to adjust, you only need to adjust the Master file.

What is Mater? Master is like the custom component function which provided by Axure. You can quote commonly used interactive components on different pages. The most common contents on most pages. They’re very suitable for making a Master, and then drag in each interface to the specified location.

6. Version archiving is also important

Demo just like the actual product, it will be rapidly iterated and constantly modified. Thus, don’t forget to archive your projects. Even if you make changes on the same prototype, please remember to make a record on what you changed. This is important for follow-up retrospect. This is an important principle of interaction demo, if you don’t follow it, your work may be in vain.

Doing the interaction demo is the most basic skills for excellent interaction designer. It is also a good way to sort out ideas. No matter what tool you use, as long as it expresses your design well. It’s worth trying.

Translator: Cherry

Author: Yuchan He

Original website：Heyuchan.com