Posts from "September, 2014"

How To … Play a Sound?

Whether it’s a game, a music app or the alert function of your favorite social media app – sounds are an essential part of modern applications and can significantly affect user experience! That’s why with Pidoco’s Extended Interactions, you can now add sounds to your prototypes.

A while ago, I created a mobile prototype called “Fortune & Destiny”, which is an interactive dice and cards game. To create a realistic playing atmosphere, I added a few sounds. Below, I’ll show you how its done…


Step 1: Select a trigger element and add an interaction

To play a sound in your prototype, you need an element that will trigger the sound. For example, you may want to play a sound when a certain button is clicked. That button will be the trigger element, to which you will need to attach the sound. You can also tie a sound to a page or a layer.

So, first find and select the trigger element. In this example I attached the sound to a page. This is done via the Context Menu of the trigger element using the “New interaction” option in the “Interactions” tab. Clicking “New interaction” opens the Interaction Dialog, where I specified the interaction “When the user shakes the device then play a sound” using the two dropdown menus at the top.

Adding a sound interaction to a page using the context menu

Adding a sound interaction to a page using the context menu


Step 2: Upload a sound

Once the sound interaction has been added to the trigger element, we can upload the sound file.  To do so, click on the “Upload” button to select the desired sound file from your local or external drive. (Please note: only MP3 files are supported.)

Uploading a sound from the local drive via the Interaction Dialog

Uploading a sound from the local drive via the Interaction Dialog


Step 3: Choose a sound and save

Right below the “Upload” field, you will see a list of all sound files you have uploaded. Now all you have to do is choose the file to be played (to preview the sound, simply press the “Play” icon next to the file), set the duration and decide if there should be a delay. At the end, don’t forget to click “save”.

Choosing a sound via the Interaction Dialog

Choosing a sound via the Interaction Dialog


By the way, if you want to apply the same sound to multiple trigger elements, you don’t have to repeat all steps! Simply select the first trigger element that already has the sound attached as well as any other elements that should use the same sound, open the Context Menu, and select the Interactions tab. Here you will find the “All” icon to apply this interaction to all the selected elements.

Apply this interaction to multiple elements

Applying an existing interaction to multiple elements


That’s it! You have successfully created a prototype that can play sounds!

Do you need help with adding sounds to your prototypes? Just send us a message via or FacebookTwitter or Google+.


Happy Prototyping!

Pidoco gets a facelift

At Pidoco we constantly work on improving our tool and listen to your feedback in order to deliver you a great prototyping experience! That is the reason why we are bringing you some new exciting features today, including a bigger canvas, an improved toolbar, and a modernized look! With this facelift, prototyping will be even easier and faster. So what is new?

Brighter UI, Less Clutter And A Flat Design
First off, we have given the Page View section of Pidoco a brighter, more modern look by removing unnecessary UI elements and flattening the design. This makes it easier to navigate Pidoco and makes work more comfortable for your eyes because there’s less clutter. In fact, the entire look of our tool has been simplified, which will help you to find things more easily.

The new UI allowing for a more efficient prototyping

The new, cleaner UI features a flat design and allows for more efficient prototyping


More Work Space
Many of you work on large screens, but some do not. So we took a look at how to improve the prototyping experience of those working on smaller screens. As a result, you can now collapse the My Global Layers and My Interactions panel in order to enlarge the work space of your Editing Panel. Just click on the little arrow to hide or unhide the panel. While we were at it, we also shortened the names of the panels to “Layers” and “Interactions”, respectively.

Collapsible layers panel

Collapsing the layers panel increases work space


Improved Usability
With the design changes we have also given our Toolbar a makeover. Now it wows with shiny new buttons that are both larger and easier to click and feature a text label that makes their functions more obvious, saving you time looking for the right button. We also updated our icons to make them even more intuitive. The most important buttons “New” and “Simulate” have been highlighted for you in green and orange.

The new toolbar including new icons

The new toolbar including new icons and text labels as well as highlighting


Smart User Support
Pidoco offers a number of great features that are not always obvious at first glance. To make them more easily accessible to you we have improved our tooltips that give you hints on working with Pidoco. When editing your prototype, little hints and tricks will be displayed in the top right corner to facilitate your work with Pidoco. But if you already know what you are doing and don’t need those hints anymore, your can now turn them off.

Hideable help section

Hints make “hidden features” more easily accessible but can be turned off if not required


So, what do you think about the design update? Drop us a comment here or via Facebook, Twitter or Google+ or contact us via We are looking forward to hearing from you!

By the way, did you know that you can submit your feedback and ideas in the Pidoco Forum, too? Simply make a suggestion and all other users can vote on it. Our developers will comment and keep you updated on the status of your suggestions.

Happy Prototyping!

You are not a Pidoco user, yet? Why not register for a free 31-day trial today!