Posts from "July, 2014"

How To … Simulate Device Motions in Your Prototypes

Modern mobile devices, e.g. your smartphone, are quite powerful. They are little computers with both a high capacity and a high sensitivity. One might even say they have razor-sharp senses including the best eyes and ears and a brilliant sense of balance -all because of the multiple sensors, which are embedded in a mobile device. It is quite impressive how many sensors some devices include nowadays: Environment sensors like the barometer, thermometer or light and proximity sensor measure different properties and environmental parameters of your mobile device, motion sensors such as the accelerometer, gravity sensor or gyroscope measure acceleration and rotational forces, while position and orientation sensors measure the device’s physical position using magnetometers, GPS or compass features. Further sensors are of course the microphone, the camera, and the touch screen, which probably are the best-known sensors, not to forget sensors like the finger print scanner, as well as WLAN and GSM antennas and finally Near Field Communication (NFC) and Bluetooth. The picture below provides a nice overview of the various sensors.

Overview of common mobile device sensors

Overview of common mobile device sensors. Source: Inter Free Press via Wikimedia Commons, licensed under Creative Commons Attribution 2.0 Generic

 

These sensors enable a wide range of great functions, e.g. light and proximity sensors tell the device to lock the screen when you hold it to your ear during a phone call in order to prevent accidental touch gestures, while the accelerometer is used when you turn your mobile device and the screen orientation changes from portrait to landscape. But these sensors also provide a host of novel opportunities as they can be applied to a great variety of domains, such as healthcare, safety or transportation and social networks. Furthermore, these sensors are useful in improving the user interface, in providing LBS and helping to detect and use environmental data. Examples include fitness apps that make use of the GPS sensor to track your route or apps tracking eye movement across the display using the built-in camera. Some apps using sensors can be real life-savers: Patients suffering from Alzheimer’s disease or dementia can use apps that track their locations via GPS and inform family members when they leave a certain route.

It is only natural that with so many options available, developers want to make use of them. And if you can create such beautiful apps, your prototypes should also be able to simulate them. So, why not use these opportunities in your prototypes? Here’s how!

 

Creating a prototype that reacts to device motions

To demonstrate how to create a prototype that can react to device motions I created a small interactive gaming prototype for mobile phones, which I called “Fortune & Destiny”*. There are two modes: Dice of Fortune (which will give you a score) and Dice of Destiny (which will give you an answer to a question). Shaking or tilting the phone will roll the dice and present you a result after giving a signal (vibration). So here is how it goes …

Preview of my prototype "Fortune & Destiny"

Preview of example prototype “Fortune & Destiny” (in landscape Format)

Step 1: Create the prototype pages

As usual, we start by building a basic prototype that includes the various pages used in the application. In my example I need a start page (actually, I have created two pages – one for portrait and one for landscape orientation), a page to choose between the two modes, an instructions page for each mode, and a page showing me the result (actually, I need one page per result I wish to simulate).

Now that we have created all the pages (you don’t know how to create overlays anymore, have a look here), let’s add some interactions that will use some the sensors in our mobile device. In this prototype we will mostly make use of the accelerometer.

Screenflow of "Fortune & Destiny"

Screenflow of “Fortune & Destiny”

Step 2: Add a “Turn Device” interaction

Interactions in Pidoco always consists of a pair of User Action and System Reaction (check out our blog post on Extended Interactions or have a look at our Glossary for more information). Let’s start adding the first device motion interaction. First, let’s connect the two start pages (see screenflow above) with a “turns the device” interaction so that the user can switch between the portrait and landscape view by turning his device. To do so, open the Context Menu of the portrait start page, select the Interactions tab, click on Add Interaction and the Interaction Dialog will open.

Accessing the page context menu via the Breadcrumb Navigation

Accessing the page context menu via the Breadcrumb Navigation

In the left column, choose “turns the device” from the dropdown and select “Turns to Landscape”. To have the landscape start page displayed as a result, pick “show page” as a reaction in the right column (then) and select the appropriate page from the Page/URL dropdown. You can add an animation and maybe also a delay to it. Here, I decided on “slide in from left”. That’s it. Now we can proceed with the next interaction.

Interaction Dialog for the User Action "Turns the Device"

Interaction Dialog showing the settings for a “Turns the Device” interaction

 

Step 3: Add “Shake Device” interactions

As this prototype is about dice, we want to simulate real dice rolling! Let’s make it a bit advanced and create a reaction chain. To do so, shaking the mobile device seems to be a good way. At first, we start with the sound of rolling dice, which I recorded in advance. Again, open the Interaction Dialog of the page from where the user will roll the dice and select “Shakes the device” as the trigger action and define the Intensity (lightly, medium or heavily) and shaking Duration the user needs to apply to trigger a reaction. I chose a light shaking intensity for only one second to make it easy for the user. Now add the System Reaction. As an example, I decided on three reactions: the sound of dice, a vibration signal (vibration) for the shake feedback and the display of the result page. To add a sound, select “play a sound” and upload it as an MP3 from the respective drive by selecting it and clicking on the upload button (please mind copyright and make sure you own the rights of it!). If only part of the sound should be played, define the Duration. If you leave this field empty, the entire sound is played, which is what I have chosen in this case.

Add the System Reaction "Play A Sound"

Interaction Dialog showing how to add a “Play A Sound” system reaction

To add a vibration signal select “vibrate” in the reaction dropdown (“then“) and define both the Duration (here: two seconds) and, if desired, a Delay. To display the result page, select “show page”, select the respective page and define any desired animation, additional option or potential delay.

Add the System Reactions "Vibrate" and "Show Page"

Interaction Dialog showing how to add “Vibrate” and “Show Page” system reactions

I did this for all my “Dice of Fortune” pages. Furthermore, I decided to use delays to create a sequence of System Reactions and to get a more realistic feeling.

 

Step 4: Add a “Tilt Device” interaction

For the “Dice of Destiny” pages, another function of the accelerometer can be used – tilting the mobile device to make it look more like cards. To add this Interaction to your prototype page, repeat the steps described in Step 3, but select “tilts the device” as the trigger and define the tilting direction (left, right, up and/or down), the movement to be made (forward and/or backward) and finally the tilt angle. For the System Reaction, I have selected a vibration and the display of a result page. I applied these interactions to all of my “Dice of Destiny” pages and varied the parameters (tilt angle, movement, and direction) to give you an impression of all the potential setting you can chose. If you play cards, you usually throw or tilt your cards in different angles and directions anyways, so these variants make the simulation more realistic. Finally, you may have already noticed I added a sound again. This time, it is the sound of cards, which I had previously recorded.

Add the Multiple System Reactions to the User Action "Tilts the Device"

Interaction Dialog showing a set of multiple System Reactions to the User Action “Tilts the Device”

 

That’s it! You have successfully created an interactive prototype that can simulate how the app reacts to device motions! Do you need help with adding device motions to your prototypes? Just send us a message via support@pidoco.com or Facebook and Twitter.

 

Happy Prototyping!

 

In my next column I will make use of even more sensors and show you how to integrate location data and maps (GPS) into your prototypes.

 

PS: If you would like to read more about sensors in mobile devices and about apps used in healthcare, have a look here:

Mobile Phone Sensors in Health Applications by E. Stankevich, I. Paramonov, I. Timofeev

Improving Health Care Through Mobile Medical Devices and Sensors by D. M. West

Sensors Overview (in the API Guides) by the Android Developers

 

 

* 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.

How To … Create Touch Gestures and Screen Transitions?

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” *.

Preview of my Gallery App

Preview of “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.

Screenflow of "My Gallery"

Screenflow of “My Gallery”

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.

Add Tap Gestures to the "My Gallery"

Add Tap Gestures to the “My Gallery”

 

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.

Add Overlay

Add an Overlay to “My Gallery”

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).

Add a Swipe Gesture

Add a Swipe Gesture to “My Gallery”

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.

Interaction Dialog of Overlay

Interaction Dialog of  the Overlay

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.)

Add an Action Area

Add an Action Area

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.

Pushing the Limits of Prototyping: Extended Interactions

Here at Pidoco we’ve been hard at work to bring to you some exciting new features that push the boundaries of prototyping as you may know it. With this post we proudly announce our latest release featuring “Extended Interactions” that provide you with a powerful way to prototype modern web and mobile applications.

Extended Interactions

Extended Interactions allow you to go beyond traditional click type interactions and leverage the full range of interactivity available on PCs and mobile devices like smartphones or tablets. With Pidoco you can now:

  • prototype touch gestures like swipe or pinch
  • simulate screen transitions like slide in or fade
  • define new system reactions like alerts, browser back or playback of sounds
  • let prototypes react to device movements like tilting, orientation changes or shaking
  • incorporate location data (e.g. GPS) to simulate location-based services
  • use parameters like direction or angle to refine interactions
  • choreograph complex interactions using multiple reactions and delays

With these new possibilities you will be able to create even more realistic prototypes and test a much wider range of applications and features before you go ahead and build them. Examples include interactive sightseeing tour guides or rental car finder apps utilizing location data, mobile applications utilizing touch interactions, or health apps responding to shaking a mobile phone. Since touch gestures and device movements are a great way to make interacting with technology more natural and tangible for users, we have dubbed these features “Tangible Interactions“.

Code-free Prototyping

As always you will be able to use Extended Interactions entirely without writing a single line of code. Rich interactions are easily defined via the new Interaction Dialog by selecting pairs of User Actions and System Reactions from a wide range of options. A set of parameters allows you to refine these interactions using, for example, animations, delays or defining directions. You can also combine multiple reactions to compose complex sequences of reactions, for example, to build a slide show.

Extended Interactions with Pidoco: Adding rich interactions to your prototypes is easy.

Extended Interactions with Pidoco: Adding rich interactions to your prototypes is easy.

In our Enterprise Edition you can combine these new options with our scripting module, which opens up almost infinite possibilities as it allows you to add your own code snippets to your prototypes.

Simulation on Mobile Devices

Together with our Extended Interactions we have also released a new version of our mobile app, which allows you to simulate your prototypes directly on iOS and Android smartphones and tablets to test drive your apps immediately. All it takes is sharing a link or logging in via the Pidoco App, which you can get directly in the respective app stores (get the iOS version here, get the Android version here). The new app is able to use inputs from the various sensors of the mobile device in order to simulate your prototypes. Enjoy!

 

Try it now at pidoco.com. Happy Prototyping!

 

If you need help or have questions, just drop us a line at support@pidoco.com, give us a call or contact us via Facebook or Twitter. We are happy to help you! You are not a Pidoco user, yet? Why not register for a free 31-day trial today?