a blog on prototyping by pidoco°

Can you think of an app that does not have any touch gestures? I cannot and actually think that they are essential nowadays. With Pidoco’s new Extended Interactions you can now add touch gestures, screen transitions, device movements, location data and many more to your prototypes. In this series of blog posts I will guide you through how to use our new features in the next weeks. Today I want to start off by showing you how to add touch gestures and screen transitions to your prototypes. So here is how it goes …

To make this how-to a little more tangible, we will go through an example. Let’s imagine we want to build a prototype of a mobile app with which you can view videos and pictures you have taken – a digital photo album. The pictures and videos are grouped in galleries. To look at them, you can open the galleries by tapping on them. An overlay opens and you can have a look at the content by clicking or swiping through it – like a film strip. The prototype could look like the sample prototype below, which I will call “My Gallery” *.

Let’s see how to create such an interactive prototype!

 

Step 1: Create your mobile prototype.

Before we can start adding rich interactions to our prototype, we need a prototype. First, create a new prototype. Then create the different main pages and add the required elements to them. Then add links between the screens as usual. If elements should be reused on several pages (like the header and footer in my app), use the Global Layer function.

Now that we have our basic prototype set up, we can start adding more interactions.

 

Step 2: Add touch gestures

Touch gestures can easily be added to various elements like stencils or entire pages using the Interaction Dialog. Let’s commence with the first interaction by creating a tap action to link the element “My Pictures” with the corresponding page. To do so, open the Context Menu of the rectangle “My Pictures”, click on the “Interactions” tab and finally on “Add Interaction“. This will open the Interaction Dialog. In the Interaction Dialog select “taps” as the interaction trigger and define the number of fingers to be used. Then choose “show page” as the system reaction and select the target page to link to (here:“My Pictures”). Under “Options” you can define how the next page will be displayed. “Instant link” lets you go to the next page without reloading and can be used for AJAX-style simulations.

To make it look a little nicer, we can add an Animation. To do so, simply select the desired animation from the dropdown. I have chosen “Slide in from top” (Hint: Have a look at Step 4 to select the right gesture directions).

You can add several interactions to an element as shown below.

 

Step 3: Add overlays

On the page “My Pictures” we would like to have an overlay that opens when the user taps on a gallery. Within the overlay, we want to display a sequence of pictures (or videos) that the user can scroll through.

To create an overlay, we need to define the content of the overlay on a separate prototype page. So, let’s create a new page for the overlay. When including overlays, do not forget that they are usually a little smaller than the normal pages. You can adjust the page size via the Context Menu of the respective page, for example in the breadcrumb navigation.

Now we need to add a new tap interaction to the gallery elements. To do so, select the trigger element (here: the image called “Gallery 1”) and add a new interaction via the Context Menu. In the Interaction Dialog, choose the “taps” as the user action and the “show overlay” a the system reaction. Then select the overlay page as content to be shown (here: Gallery 1 – Pic 1). This will show an overlay on the “My Pictures” page when the respective image is tapped. You can add this type of interaction to all gallery images.

Now we would like to allow the user to scroll through all images of the gallery. For this, we need several more overlay pages (one for each picture) that will be linked in a certain order to allow the user to scroll through. We also need a forward/backward option on each overlay. Let’s start with the first overlay page (here: Gallery 1 – Pic 2). Add an image and little arrows to it to allow the user to click through. Finally, add tap actions to these arrows to link the previous and next gallery picture. Do this for each own overlay page.

To allow the images to be clicked through within the same overlay frame without reloading the entire background page, do not forget to select the option “instant link within same frame” when linking the individual overlay pages. This will allow you to show the next image within the overlay without reloading the background page in the simulation!

 

Step 4: Add swipe gestures

Now we would like to make the image gallery a little fancier by allowing users to swipe to see the next image. To do this, we need to add some swipe interactions. Open the Context Menu of the picture on the first overlay and click on “Add Interaction” (or add the swipe gesture to the overlay page directly). In the Interaction Dialog select the “swipes” as the user action. As we want to scroll towards the next image on the right, the user must swipe to the left, i.e. the swipe direction must be set to “left“. Select “show page” as the system reaction and pick the next overlay page from the “Page/URL” dropdown. To show the next image within the overlay choose the display option “instant link within same frame“. If we want to swipe back and forth (e.g. on images in the middle of the gallery), we need to add two interactions to the picture (one to swipe left and one to swipe right).

Finally, we need an option to close the overlay and end the slide show, so that we can go back to our starting page (here: “My Pictures”). For this, add an “Close” icon (to be found in Icon Stencils in the “Symbols” section) at the top right of the overlay and add the interaction pair “When the user taps, then hide overlay“.

Hint: If you have multiple pictures and want to display the “Close” icon on every overlay page, use the Copy & Paste function to copy the arrows and icon to every overlay and simply change the Page/URL on each overlay.

 

Step 5: Add screen transitions (animations)

Now we’re almost done. But there’s a final touch we can add. Let’s use animations like “slide in” to simulate page transitions from one image to he next. To do so, go back to the overlay pages and find the “swipe” interactions in the “My Interactions” panel on the right. Selecting an interaction will open the Interaction Dialog. There you can add an animation to the system reaction. Use “slide in from right” for “swipe left” interactions and “slide in from left” for the “swipe right” interactions.

Now you can add some more touch and swipe gestures to the app to make the page “My Videos” as well as the headers and footers and the galleries not containing pictures so far interactive.

For example, I added a pinch action to the element “Latest Drawing” in the “Picture Gallery” , too. To do so, open the Context Menu and select the User Action “pinches” and chose the direction “pinch out” to create the impression that the element gets enlarged. As an overlay should pop up, define the System Reaction “show overlay” and link the respective page. To minimize the drawing in the overlay again, use the Action Area stencil in the overlay “Free Drawings”. After adjusting the width and height of if, open the Interaction Dialog and select the pairing “pinches” and “hide overlay”. (The overlay can still be closed with the “Close” icon.)

So far, a tap on a gallery opened an overlay. But to point out that the “Drawings” are opened by a pinch action, we can add a system alert to the “Latest Drawings” element on the page “My Pictures”. To do so, open the Interaction Dialog of the Rectangle, select the pairing “When the user taps, then show a system alert” and simply insert your message (here: Pinch! Pinch to enlarge your latest drawing!).

 

That’s it! We have successfully created an interactive prototype with touch gestures and screen transitions! Do you need help with creating interactions? Just drop us a line via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

 

In my next column I will show you how to add device motions to your prototypes and will tell you more about the sensors embedded in your mobile devices.

 

* Please note: To view this prototype you need to be logged in to your Pidoco account. You can also test this mobile prototype on your mobile device. I configured it for the iPad.