User Testing

Design:

Design decisions for viewing friends:

1. Make the home screen more intriguing and informative by implementing an interactive map, and marking the locations of friends nearby.

2. The map and button failed to fit in the screen in GR4, so we decided to use a Google Maps API (addresspicker) to resolve this problem.

3. Make the profile picture in the homepage button-like to give users the affordance of clicking.

4. In the friend lists, in addition to providing the name of friends, we provide their profile pictures to make it more efficient for user to find a certain friend. Also, the ">" arrow gives users the affordance of browsing for more information.

5. In friend's page, in response to user1's (in GR3-phase 2) inquiry for knowing all the locashares I am sharing with a certain friend, we use a drop-down menu to list all the locashares.

6. In GR3, users expressed that "View me as sb." this sentence is confusing, so we modified the sentence and make it as a prominent button next to friend's profile picture.

Design decisions for creating a new LocaShare:

Implementation:

LocaShare is a web-based mobile application that can be used across a wide-range of mobile browsers. The server-side code is written in PHP, while the client-side code is written in Javascript/AJAX/jQuery mobile. We used Google Maps API and a jQuery plugin called addresspicker [1] to incorporate maps in the application. The application uses a Model-View-Controller (MVC) framework that was taught in the 6.831 course. Finally, we used a MySQL database to store data.

A schematic of the workflow is shown below.

 
The user can being using the application by visiting the following URL <server location>/index.php?home. When the user enters that URL in the browser, index.php is called from the webserver directory. Index.php provides the parameter ‘home’ to router.php, which in turn tells index.php to call the controller for home.php. The controller's job is to load all necessary data from the database and render it to the user in HTML and JavaScript. In order to accomplish these tasks, the controller for home.php first interacts with the corresponding model for home.php to fetch the data. The model for home.php uses a database helper class called mysqlimproved.php to get the data from the database. Once the model for home.php receives the data, it passes the data along to the controller for home.php. The controller for home.php then interacts with a view class called view.php that contains helper functions to render the data on the screen. Using view.php, the controller for home.php creates an instance of the desired view (home.php) and passes the data along to this view. This view for home.php renders the data using HTML and JavaScript to the user.

A similar procedure is followed when a user submits data to LocaShare using a form. The only difference is that the controller for the appropriate form (say) abc.php obtains the data from the URL (since HTTP GET method is used) before calling the corresponding model and view pages for abc.php.

* Note: The model, view and controller for each page have the same name (e.g., home.php in our discussion) in the corresponding folders, in order to be consistent about which functionality is being handled.

[1]

Evaluation:

Briefing:

Reflection