Introduction to Interactions

The Interactions feature is used to create prototypes by applying interactivity to any object on a Moqups page.

When you add an interaction to an object, you make it possible for that object to respond to a variety of triggers while in Preview mode.

The two main use cases for interactions are in:

• Prototypes, where interactions are used, during the design and testing phase, to mimic the eventual user experience of the developed product – either an app or a website.
• Project Management, where interactions are used to organize information by linking any individual element of a design, diagram, storyboard, sitemap – or the whole page itself – to subsequent pages. This helps team members jump between specific sections of a complex project to view relevant specifications, notes, requirements, or details.

There are two kinds of interactions that can be applied to an object:

• A Page Interaction is used for navigation, and it links designated objects to other pages within the Moqups project itself, or to URLs that are outside the project.
• An Object Interaction is used to mimic the transformation of objects on the page – changing button states, opening dropdowns, showing the context menu on right-click, opening modal dialogs, etc. – that simulate the way a user will experience the final product.

Both of these interactions can be applied to any kind of object: Stencil, Icon, Image, or Template.

But, there is also a dedicated, interactive object – called a Hotspot – that can be used to designate specific areas of a page as interactive.

In this article, we will show you where to find the Interactions Panel, and provide a bit more detail about how interactions are used in both Prototyping and Project Management. We’ll also explain how to use Preview mode to activate interactions.

Then, in the subsequent articles of this section, we will explain how to apply Page Interactions and Object Interactions, and how to add Hotspots.

Interactions panel

To open the Interactions Panel, go to the Right Sidebar and click the Interactions Tab. The tab will turn blue, and will open the panel. There you can:

• See all the interactions that have been applied to an object
• Build a new interaction
• Add a hotspot

In the subsequent articles of this section, we’ll demonstrate how to use the Interactions Panel to add both Page Interactions and Object Interactions. But, for now, here’s a brief orientation.

Once you have clicked on the object to which you wish to apply the interaction:

1. Choose a Trigger from the top dropdown: On Click or Tap, On Right-Click, On Double-Click,, Mouse Enter, Mouse Leave.
2. In the second dropdown, select an Action from the Page Interaction or Object Interaction list.
3. Set a Target, using the dropdown or the crosshair button, to select an object or a page as the interaction’s endpoint.
4. Click Done to apply the interaction.
5. You can use Preview to see how your interaction works.
6. You can also use the Hotspots section below to add Hotspots and set their visibility.

Interactions in prototyping

The primary use of interactions is to turn designs into prototypes. This step is often the last stage of app and web design before the coding and implementation takes place.

The design process typically begins with a diagram that represents the user-flow, or with a sitemap for a website. These visualizations help convey abstract, generalized ideas about the data flow and information architecture of a project.

And, as more details are added, those diagrams generate storyboards. Storyboards are visually richer than diagrams, and can help convey the specific details of the screens and their navigation flow.

Then, each element in those storyboards break out to become pages of their own – containing wireframes or more detailed mockups that represent the design of that screen or webpage.

A wireframe or mockup finally becomes a prototype when interactivity is added to those individual pages. The addition of interactivity means that, before any actual coding is done, the design can mimic the final product by responding to user input in the form of clicks, hovers (mouse enter and mouse leave), item selection, and page navigation.

Even though a prototype isn't live or fully functional, interactions mimic enough of the eventual UI so that all stakeholders can get a sense of the ultimate UX. Designers, developers and product managers can iterate freely, test different versions – and most importantly, build consensus before the final product enters the production cycle.

When the prototyping and testing stage is complete, the design is handed over to developers, after which any changes to the design become both costly and labour-intensive. Using a prototype to preview the UX – before the developers even begin to write the code – can save your team time, money, and frustration.

Interactions in project management

The Interactions feature, and especially its ability to provide links and navigational ability, has lots of uses beyond formal Prototyping within the design workflow. Many users – including Business Analysts, System Architects, Product Managers and Developers – use Moqups as a shared creative space where all stakeholders can collaborate and build consensus.

For all kinds of design and product management jobs, Moqups can be used to create quick, issue-specific projects, or to build large-scale, multi-user projects with dozens – or even hundreds – of pages. But, no matter the scale of the project, they all have several needs in common:

• Organize complex information, in a variety of forms, and update it in real time
• Provide access for a wide range of stakeholders to create, edit and comment on content
• Visualize requirements, convey context, and communicate clear specifications

Typically, one of these projects may include flow diagrams, UX storyboards, sitemaps, mind maps, org charts, use-cases, and information architecture diagrams – alongside wireframes, mockups and prototypes.

With the Interactions feature, you can link all those elements together, and enable instant navigation within the pages of the Moqups project itself, or beyond Moqups – to Google Drive, Dropbox, Slack, Trello, or any URL. Interactions can also be used to apply Object Interactions, where necessary, to demonstrate requirements or specify design elements.

For instance, in a single Moqups project, you might have a workflow diagram that shows the process of developing a new feature for your app. With interactions, you can make each element of the diagram interactive so that, when your team members click on it, they are redirected to a new section of the diagram, a full page of design detail, or a relevant external location. This way, you can make sure that each team member knows the exact context of their task, and that they have all the information needed to execute quickly, independently, and effectively.

In this kind of project, all stakeholders can navigate, create, check, comment, and contribute. And, most importantly, they can add their own links, both internally and externally, to provide up-to-date requirements and provide a single source of truth.

Using preview mode to activate interactions

Interactions are designed to be added to objects in Edit mode, but experienced in Preview Mode.

Switching to Preview will activate all the project’s interactions so they simulate the interactivity of the eventual product, once it has been developed.

Read more about Preview Mode here.