Radr Interactive Prototype

Problem and solution overview

Mobile computing is more prevalent than ever, but advances in technology move faster than the societies that use it. There have been few examples where recent advances in technology have been truly integrated into our everyday lives. Our social networking site, Radr, bridges the gap between technology and the real world and brings people and their social networks closer than ever before. Radr is a social networking site built specifically for the iPhone with similar functionality to existing networking sites like Facebook, but with one twist: Radr takes advantage of location-detecting technology to connect a person’s online network with their real world location and activities. You can use Radr to show people your current location, search for and locate friends, save and share favorite locations, and learn information about strangers in your proximity who have Radr.

Tasks

Locating a friend on a map (easy)

In the real world, it is sometimes necessary to determine where your friends are. Perhaps you need to give them something, or you need to pick them up, or they need directions but they have no clue where they are. Radr allows customers to locate their friends on a map by viewing their friend’s profile and click on their map to see where their precise location is.

Finding out information about the people around you (moderate)

If you’re in a crowded place, you may want to find out if anyone you know is nearby. If not, perhaps you might want to learn about the strangers that are. Customers can use Radr to view a list of their friends not only alphabetically, but also by proximity. If no friends are immediately nearby, customers may then choose to include information about strangers on their friends’ list as well.

Customizing privacy features (difficult)

A huge problem with location based social networking will be giving customers the right amount of control over who and where people can see their location. Our last difficult task helps to solve this problem by allowing only specific people to see where you are within a specific region. This task can be expressed more simply as setting your visibility. Creating custom visibilities is relatively difficult to allow for flexibility in customization and because there is no currently existing metaphor for customers to compare it with. There are two parts to customizing visibility settings: selecting/creating a region on a map, then choosing/editing the people who can see your location while you are in that region.

Revised interface design

After conducting a low-fi usability test with a paper prototype, we discovered several problems with our UI that needed to fixed. The main problems we encountered were with our most abstract and therefore difficult task that included creating and editing visibilities. These problems mainly stemmed from the fact that this task lacks a familiar metaphor, creating a steep learning curve. We made many changes to our interactive prototype based on the results of our paper prototype.

The first problem we found was that users did not see how to first find the visibility settings. We originally had intended for the current visibility status to be displayed at all times. However, this caused a lot of confusion with our users who believed the visibility we had chosen to display (“School”) was related instead to a particular social network. In the end, we decided that it was more important for our customers to be able to recognize how to edit the visibility immediately rather than view the current visibility setting.

We also found that people did not know where to begin once they entered the visibility-editing process funnel. Due to the cluttered look of the paper prototype, we had originally been weary of adding new items to the UI and hoped to stick with a minimalistic design. After our usability tests, we decided that there was more we could do to help our customers while maintaining a simple design, so we added a small, persistent tool-tip to show what actions to take next. These tool tips not only cue the customer as to what steps to take, they also act as a gently reminder for those who can’t quite remember what each visibility tool is for.

One smaller problem with the visibility setting was that the functionality of the original visibility menu wasn’t immediately obvious. We originally intended the window to have checkboxes to set one or more visibilities and a button to edit any selected visibility. Unfortunately, while the ability to edit visibilities was clear, the ability to simply check the visibilities to set them was not. We decided to add an additional button to clarify the purpose of the checkboxes and make the functionality of the visibility menu more clear.

Task scenarios

Prototype overview

Programming tools

To implement our UI, we used JavaScript, CSS, and PHP to access a database that contains all of the information utilized by Radr. The database consists of four tables: for friend relationships, user locations, user information, and saved visibilities. Using PHP, queries are issued to the database and XML is returned, which is then processed using additional JavaScript. We chose to use raw JavaScript over a toolkit because we felt that a toolkit would require some members to face potentially steep learning curves, whereas most of our group already knew the basics of JavaScript.

Overview of implemented UI

Our prototype implements all of the features that were proposed in our Friends tab. The Friends tab provides a way to order the results by distance, those “nearby” as well as alphabetically. There is also a check box which allows the customer to add strangers into the list of friends, should they choose. Clicking on a friend’s or stranger’s picture or name in the friends list will bring the user to the “Info” portion of that person’s profile page. Clicking Map will bring the customer to a screen that will display that person’s position on a map. Clicking the Locations tab will bring the customer to a map that will display all of his friends as well as provide a list of all of the friends’ names and relative distances from the customer. Since it is not possible to click and drag within the map, we have added large arrow buttons which allow the customer to pan around the map.

In the visibility page, the customer is given three tools to interact with the map. The map is scalable, via clicking or using the “+/-“ buttons, and pan-able via the use of arrows. While in the “pencil mode” the customer can add points on the map and create a shaded area for the visibility which is completed by switching tools or selecting done.

Omissions

We decided to implement only those features that are essential to completing our tasks. As such, we did not implement the inbox, home, or log-in screens. We also chose not to implement the settings portion of the prototype as this would mainly be used to customize a user’s experience with the final product, and is thus out of the scope of the prototype. Also, rather than requiring a customer to register as a user or log in to the system, we hardcoded the current user of our system.

“Wizard of Oz” techniques

One area that we “hacked” together is the distance the friends or strangers are from the current customer. We do not have live GPS data available that can change dynamically, so we decided to hardcode the latitude and longitude of the costumer. In addition to this, we decided to hardcode some of the values for the distances rather than manually calculating each of these individually. We believe that the distance calculations will be run or updated as a part of the database position updates and since our data is static, there was no point to include such a function at this time.