A better way to wireframe


5. Linking pages (interactions)

Now we've finished designing version 1.0 of our prototype, but we still only have three independent, unconnected screens. Let's link them up, so that they can come to live! Links between individual pages are one type of interaction that you can add to any element (stencil, custom stencil, image, page, layer) of a Pidoco project to breathe life into your designs. Others include displaying or hiding layers, going back and forward in the browsing history, playing a sound or dialing up a phone number.

Each interaction consists of a trigger action (referred to simply as the "action") that the user executes in the preview and a system response (also called the "reaction"). To add an interaction to any element, simply open the context menu (e.g. using a right click on the element), select the "Interactions" section, and click on "New interaction". This will open the Interaction dialog where you can define the interaction. Each element can carry multiple interactions (one for each type of trigger action), and each interaction can include multiple system responses, giving you a wide range of modelling options.

In our case, it's even easier: We will be using simple links, for which there is a shortcut in the "Properties" section of the context menu. So in our example, we don't even need to open the Interaction dialog. Let's start by linking the "Home" page to the "Signup" page. Open the "Home" page in the Page view and right-click on the "button" stencil. In the context menu, select the "Signup" page from the "Link" dropdown. Done.

Now go to the "Signup" page, select the "button" stencil and link it to the "Welcome" page. Perfect!

By the way, instead of linking to pages of your project, you can also link to external URLs by pasting them into the dropdown field.

<< previous next >>