a blog on prototyping by pidoco°

I have already introduced you to sensors embedded in mobile devices, of which GPS and accelerometer are most commonly used. Especially location-based services (short LBS) make use of them. One example for LBS is an interactive city guide, but you may know some of these, too:

• “Find Me” or “Where am I” services (finding nearby restaurants, shops, ATM or apps detecting your current position etc.),
• social networking services (add location to uploaded picture or in your chat),
• locate services (integrated in emergency services),
• interactive location-based games.

In this post I want to show you how to prototype location-based services.

 

Creating a prototype for a location-based service

To show you how to create an LBS prototype, I will use an example prototype for a smartphone app which I call “Berlin UX Guide”. It contains a map of Berlin and various tourist and UX hotspots marked by little icons (sights). You can click on every sight on the map to open a little pop-up with information about the respective sight. In addition, if you have your GPS activated and walk through Berlin with the prototype, the pop-ups will also automatically appear when you come near a sight. This is the LBS part of my prototype. So, let’s have a look at how to create this location-based prototype…

 

Step 1: Create the sight pages

As always, we start our prototype by building the basics including the various pages. In my example, the prototype basically consists of a map page and a little “pop-up info page” for each sight on the map (sight pages). The little pop-up pages will be displayed as an overlay on top of the map page. In addition, there’s also a start page when the app opens up, which I will not describe in further detail here. Here’s an overview of the pages we need:

Let’s start with the the first sight page. Create a new page and adjust the page size via the Context Menu of the page using the width and height parameters in the Properties tab. Pick a size that is smaller than the screen of the smartphone but large enough to disply the necessary information. I have chosen a width of 300 px and height of 240 px.

Now we can add content to the overlay, e.g.

• name of the sight,
• address,
• short description,
• rating scale, and
• contact details (website, telephone number as well as links to social media).

Don’t forget to add an option for closing the pop-up, e.g. an “X” at the top right. Voilà, the first sight page is done! Repeat for every sight you wish to include.

 

Step 2: Create the map page

Now we need to build the map page, which consists of a map image and icons marking the respective sights. First, we need to create a new page. Use the “smartphone landscape” option to generate a page suitable for a full smartphone screen or manually reset the page size if necessary. Next, we need the map itself. I’ve taken a screenshot showing a map of Berlin’s city center in this example. Upload the map via the image upload dialog and insert it as a page background.

 

 

Now add icons to mark the location of the individual sights. In my example a star represents a tourist sight and a flame an UX hotspot. Both icons can be found in the Stencil Palette under Symbols (expand to see all).

Your finished map page may look like this:

 

Step 3: Link overlay and map

Now we have all the basic building blocks in place, so it’s time to link our pages up. To display the sight pages as overlays we will use the “show overlay” reaction. For each sight icon add the following interaction: Open the Context Menu of the icon and click on “Add interaction”. In the Interaction Dialog, select “taps” as the user action and “show overlay” as the system reaction. Then select the desired sight page from the “Content to show” dropdown as the content to be shown. The selected sight page will be shown as an overlay centered on top of the map page in the simulation.

Here’s what the simulation will look like:

To allow the overlays to be closed, add the following interaction to the “X” on each sight page: When the user “taps” then “hide overlay“.

 

Step 4: Add GPS

Finally, let’s integrate the location data so that the pop-ups can be triggered when the user arrives at a sight. To do so, go back to the map page and add the following interaction to each sight icon: Open the Interaction Dialog and select “changes the location” as the user action. Location changes can be triggered when the user enters or leaves a certain spot. As the overlay should appear when the user approaches the sight, select the trigger “enters” and zoom into the map until you have found the correct location. Mark the location by clicking on the map and setting the location radius with your mouse. Then add the reaction “show overlay” and select the desired sight page from the “Content to show” dropdown. To notify the user when sight information is displayed, let’s also add a “vibrate” reaction. (Here: I have chosen a duration of two seconds.)

That’s it! You have successfully created an interactive prototype that can simulate location-based services!

Do you need help with adding location-based interactions to your prototypes? Just send us a message via support@pidoco.com or Facebook and Twitter.

 

Contributing to the Berlin UX Guide

The Berlin UX Guide is designed as a community project uniting city explorers and UX experts. If you want to add a sight or new UX hotspot send an email to support@pidoco.com including your Pidoco user name. If you don’t have a Pidoco account yet, just register at pidoco.com/free. We will send you a collaboration invitation which will allow you to add new pages to this prototype.

 

 

PS: If you would like to read more about location-based services for mobile devices and, have a look here:

“A New Map Gives New Yorkers the Power to Report Traffic Hazards” by Sarah Goodyear

“Advanced Location-Based Technologies and Services” by Hassan A. Karimi

“Location-based Services” in Porlaris Wireless”