a blog on prototyping by pidoco°

Sometimes, we need to simulate use cases where one single action by the user triggers multiple reactions. For instance, a click on the “Play” button of a song within a music application on your computer or mobile device not only plays the music but also gives a visual feedback by displaying e.g. the album cover. This can easily be modelled in Pidoco using the “Extended Interactions” feature.

 

1. The basics

In Pidoco interactions consist of one user action (the trigger) and one or several system reactions. Interactions can be attached to pages, stencils and of course to layers and can vary depending on where you use them.

To add interactions, just open the context menu of an element, select the “Interactions” tab and click “New interaction”. Now you can start defining how the system should react to specific user inputs.

Hint: When working with interactions, it is helpful to structure the project first, i.e. create pages and layers upfront, and then come back to add interactions. This makes linking content much easier.

 

2. The project setup

So much for the theory. Now let’s have a look at an example: the online shop and to give you a little inspiration in advance, here’s what my finished project of the online store looks like. It also includes a complete checkout process for the purchase of article 1 as well as for the purchase of two articles and includes a “Success” page, too. All those pages, especially the redirections, contain multiple reactions and are based on the below mentioned interaction pairings.

And here is how it goes …

To visualize the following two use cases, I prototyped a simple online shop that includes a carousel showcasing several products, as well as a selection of articles that can be added to the shopping cart. Both are displayed on the start page (titled “Online store”), the cart being accessible via the header. Below is a map of the prototype:

 

3. Use Case “Carousel”

Goal: The carousel automatically starts after accessing the page for the first time, then runs through several product slides. The slides change every 2 seconds.

Ingredients: The carousel consists of three layers, each representing one product slide on the main page.

 

Step 1: Building the first slide

The first page in our project serves as the basis of our store. We now create the first of our three slides by clicking on “+ New layer” in the interaction panel. Then we add the content, in this case an image placeholder and some text. Now that we’ve finished the first slide of the carousel, just copy the content of slide 1, create a new layer and paste it there to create slide 2. Repeat for slide 3. (Hint: If you want to you can also add two arrows to go back and forth. If you decide to do so, don’t forget to make them interactive like the carousel.)

Step 2: Making the carousel interactive

Since the carousel behavior is tied to the page being loaded, we attach the interaction to that page with a right click on the page to open the context menu and add an interaction. Select “When the user loads the page” as the trigger and “then change layer visibility” as the reaction, choose the layer with the first slide and set the visibility of slide 1 to “show”. To make the carousel cycle through several slides one after another, we need to add additional reactions and use delays (2 seconds) to space them out over time. So we click on “Add reaction” at the bottom of the Interaction dialog. We change the visibility of the layer again, but this time we select “Hide” and add a delay of 2 seconds. At the same, slide 2 needs to be displayed. So we add another reaction and set the visibility to “show” and add the delay of 2 seconds. Repeat for slide 3.

That’s it! The first part of our web store is already built!

 

4. Use case “Cart”

Goal: Adjust the status of the shopping cart independently of the current page (e.g. to continue shopping after adding an article to the cart).

Ingredients: Based on the main page, the online shop consists of one page per product, one page for each completed purchase and one layer to depict each shopping cart status. In my project I used:

– 3 pages, one for each article and its description,

– 2 pages, one for each completed purchase, and

– 3 layers for the cart icon on the top right of the page including the different cart states (empty cart or 1 article, 2 articles).

 

Step 1: Making the “Buy” button interactive

Let’s assume we have designed a product page (called “Article 1”) with a “Buy” button that, when clicked, should bring up a confirmation page and change the state of the shopping cart. To model this behavior, we can add the following interaction to the button: For the trigger, select “When the user clicks/taps” and add the following three reactions:

• “then show page” to display the confirmation page informing the user that the article has been added to the cart
• “then change layer visibility” with visibility set to “hide” to let the layer with the status “empty cart” disappear
• “then change layer visibility” with visibility set to “show” in order to make the layer with the new cart status “cart – 1 article” appear.

 

Step 2: Adding the “Continue purchase” link

Now let’s jump to the confirmation page, which should offer an option to return to the article overview to continue shopping. To model this behavior, we can use a similar reaction: a click/tap trigger should be combined with a show page reaction to display the start page as well as two change layer visibility reactions to display the correct cart status (1 or 2 articles) and hide any other cart status layers.

 

That’s it! You just finished the last part of your online store.

Do you need help? Then do not hesitate and drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!