...
Design decisions for viewing friends:
...
- Make the home screen more intriguing and informative by implementing an interactive map, and marking the locations of friends nearby.
...
- 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.
...
- Make the profile picture in the homepage button-like to give users the affordance of clicking.
...
- In 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 user the affordance of looking for more information.
...
- 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.
...
- 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.
Create a new LocaShare |
|
|
|
|
|
|---|---|---|---|---|---|
| | | | | |
...
Design decisions for creating a new LocaShare:
...
- Make creating a locashare as a step by step process. Even though this sacrifices user's freedom to jump between steps, this tremendously enhances the learnability of creation especially for less-savvy users. Also, all the steps in creation have a default value which boosts the efficiency of creating a LocaShare.
...
- In step 1, users are allowed to select multiple friends at one time. It also provides useful feedback in the form of a checkbox to make it so that you know which of your current fiends you are sharing with. If user selects no friends, the app doesn't allow user to proceed.
...
- In step 2, we provide auto-complete of choosing a location, we also mark the chosen location to give user immediate feedback.
...
- In GR4, users criticized that the start date box in step 3 looks like a textbox. We resolved this problem with a datepicker which pops up whenever user clicks on the empty space. The datepicker also provides simple constraints such as the end date shouldn't be earlier than the start date.
...
- In step 4, we adopted the idea of user1 (in GR3-phase 2) which allows user to select the scale of aggregation by using a slide bar. An example sentence was also included to assist user understands the sharing of "aggregated information."
...
- System provides a summary page at the end of creation to prevent user from recalling.
Edit a LocaShare |
|
|
|
|
|
|---|---|---|---|---|---|
| | | | | |
When editing a LocaShare, there are four tabs that can be navigated independently. They allow you to modify, respectively, the friends, location, time, or history properties of the share. These tabs are analogous to corresponding pages in the create process.
Design decisions for editing a LocaShare:
...
- Editing allows user to edit the same class of parameters as create. However, instead of being as a step-by-step process, we arrange the parameters as tabs. By doing so, we increase users freedom and efficiently reduce the button clicks if user only wants to edit "history".
...
- While editing, we automatically save users modification.
LocaShare overview |
|
|
|
|
|---|---|---|---|---|
| | | | |
Katrina’s profile page has several interactive elements. At the upper right, It links to her overview page. Next, it allows her to turn on or off sharing of her current location. When she turns it off, it overrides the settings of any individual LocaShares for the current location. When the toggle is on, there is a list below it of friends who can see Katrina in her current location.
...
Design decisions for LocaShare overview:
...
- In GR3, users complained that the notion of LocaShare is not clear, thus, in the last design, we tried to match users mental model by incorporating a list of LocaShares and classify them into different levels.
...
- The Overview page has tabs for three levels of sharing, this gives user more freedom to browse only the share they are interested in.
Implementation:
Wiki Markup 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.
...