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. 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 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”
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
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 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.
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.
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.
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.
Thanks for sharing this nice article.I read it completely and get some interesting knowledge from this.I again thankful to your for this sharing such a nice blog.