A better way to wireframe



What are links?

Links are a way to define a sequential connection of two pages in a project. For example, a "Sign up" button on the "Home" page could link to the "Sign up" page.
That is why links are always defined on an origin page and point to a specific target page. Additionally, links can be tied to a stencil (e.g. a button, a text link or a click area), a layer or the origin page itself. Links can be set via the "Properties" and "Interactions" tab of the context menu.
In Pidoco there are two kinds of links: links to pages within the project and to external URLs.

Linking pages

To link a page (origin page) or layer to another one (target page) within your project,

  • open the origin page in the Page View,
  • select a stencil, that should trigger the page change (e.g. button, click area or image),
  • open the "Properties" tab in the context menu, and then
  • select the desired target page from the dropdown that opens with a click on the grey area next to the "Target" field.

Linking pages, the origin page itself as well as layers can be done in an analogous manner.

You can also link pages in the Simulation View. To do so open the Screenflow View by selecting any screenflow that contains the page you want to link from and select the desired page. Doing so will show all stencils marked as green areas and you can drag the desired stencil to the desired target page. Links within a use case are shown by arrows. You can use the "Hide" button to hide and unhide the arrows. (Note: Hidden arrows appear in light grey, unhidden arrows appear in dark grey.) To delete a link in the Screenflow view select the page and simply press the "Delete" button next to the undesired arrow.

To refine your linking, you can add interactions. To do so open the context menu and select the "Interactions" tab. A click on the "Add interaction" button opens the Interaction Dialog and you can select a certain user action (e.g. "clicks", "hovers" or "turns the device") and define the system reaction, which can either be "show page", "change layer visibility" or "show overlay".

"Show page": To select "show page", open the origin page and the context menu of the stencil, you want to become interactive. You can select the target page from the dropdown of the the "page/URL" field or insert an external link. In the "Options" dropdown you can select the link type - "link with reload" (opens link in the same or a new window) or "link without reload" (opens link within same frame). Finally, you can add further parameters, such as "Animations" (e.g. "slide in from left", "slide in from right" or "fade effect") or a "Delay".

"Change layer visibility": If you have created layers that should appear as a reaction to an user action, select "change layer visibility" to choose an existing layer from the dropdown and define its visibility ("Toggle", "Hide" or "Show").

"Show overlay": To create an overlay, create a new page and change its size and add content to it. This overlay will serve as your target page. To link it with the stencil on it, open the page and the specific stencil, you want to become interactive, and go to the Interaction Dialog. Choose "show overlay" as the user action and finally select the page from the dropdown of the "Content to show" field.

Linking to an external page

To link a page (origin page) to an external URL open that page in the Page View, select a stencil (e.g. button, click area) and open the respective Interaction Dialog. Here you can enter the desired target URL into the text field that will come up when you click on the grey area next to the "Target" field. Doing so will link that stencil to the chosen URL, such that a click on the stencil in the Simulation View will direct to this particular URL. (Note: If a stencil is locked, you have to unlock it before the "Options" button will be available.) To delete a link, simply erase or overwrite the target in the context menu.

Linking pages within the text using stencils

You can also set links directly within the text. To do so, drag and drop the text stencil or text block to your editing panel, type in your text, and mark the words that should become a link. (Alternatively, you can use the link stencil, too.) Then go to the dropdown menu in the editing bar to select the page of your project you wish to link to. If you want to link to an external page simply insert the URL into the field and press Enter on your keyboard. The linked text will be underlined.

Linking two projects

You can easily link two projects by entering the corresponding URL of the target project. To do so, open the respective context menu. Either insert the link in the "Target" field of the "Properties" tab or combine it with respective system reaction in the "Interactions" tab. You can get the desired URL by opening the target project and clicking on "Share" button in the toolbar followed by "Get a link to this project". Copy one of the HTML links and paste it into the "Target" field of your origin project.

back to overview

Newsletter Signup

A new Pidoco is coming this Fall. Sign up for our newsletter to stay up to date.

Don't worry, we won't flood your inbox with daily emails and we'll never send you spam!