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
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
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
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.
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 support@pidoco.com or Facebook, Twitter or Google+.
Happy Prototyping!