From Cs160-sp08

Jump to: navigation, search



Alex Pretzlav - Programming: Implemented back button return to user, changed menu system to use Android's built-in Context menu interface, changed how nav-button taps are calculated to be consistent irrespective of zoom, added warning popup if next person to zoom in is more than two miles away, helped enhance meetup feature visually and functionally, including allowing it find real locations via Android's Geocoding features; various bugfixes, refactorings, and tweaks. Writeup: Problem and Solution Overview, Target User Group, Tasks, added screenshots and some writing to Final Interface Section, in Functionality of Main Menu and Implementation.

William Tseng - Created skeleton for the "Settings" item on the menu which is essentially the advanced options page. Extended to include levels of separation and updated main map populate / draw functionality to take separation into account. Small bug fixes. Helped write Final interface section of writeup.

Chris Myers - Programming: Read the phone's contact data to put them as friends on the map. Automatic (best fit) zoom feature. Toggle satellite/map view. Cleanup of AdvancedMenu code. Corrected issues from changing to Context Menus. Various bug fixes. Writeup - various sections, proofreading, screenshots for Final Interface. Working on poster.

Joe Cancillia - I was responsible for most of the Meetup functionality. With Alex's help I programmed the display of multiple location results. I set up the arrows that show up when moving between locations. I figured out how to make sure that locations were cleared when the user pressed the back button and cleared. I created the MeetupTime Activity which allows the user to set up a time for the Meetup.

Problem and solution overview

The problem with current social networking applications is they do not facilitate social contact in the "face-to-face" sense. Users of existing social websites are often left reading about an activity one of their contacts is currently doing in an away message or status box on their computer instead of participating in that activity. Users are often limited to leaving electronic greetings of "hi, hello, how you doing" instead of being able to tell someone face to face.

We want to resolve these problems by using the unique affordances of a mobile application. By going mobile, our users have access to their social network anytime and anywhere they have access to a cellphone. Using GPS, our users will be able to see where their friends currently are relative to their own position and quickly and intuitively communicate and organize with those friends. We hope by getting social networking off the computer, Friend Finder will make real-world socializing easier and more accessible, rather than limited to a computer.

Target user group

Our target users are generally social people of college age to late twenties. They are already users of popular social networking sites, but don't like spending all their time at a computer. We aren't targeting heavy users of current social networking sites—we hope our application will appeal to socially active people who have been so-far turned off by the limitations of current computer-oriented social websites. They are not necessarily tech-savvy, and we don't expect them to either know everything about social networking or their phone. We imagine most people in this age group who would be buying an Android phone are already familiar with popular internet technologies like Google Maps.


  1. Change visibility from invisible to visible. We expect privacy to be a major concern of users of our program. There are many situations where someone will not want to be interrupted or simply not want friends to know where they are, so we wanted disabling and enabling the ability of friends to see your current location to be a very easy and straightforward task.
  2. Search for a friend by name who isn't visible on the map. If a user wants to contact someone in their social network they have to look them up somehow. In addition to the default map view of our program where you can see friends displayed geographically, Friend Finder can center the map on a specific person. To do this, the user brings up the main menu, selects search, types in part of the name of the intended friend, then selects from a list of names formed by the auto-complete android widget.
  3. Organize something to do with a friend. The real point of social networking is not just to have a list of friends and to be able to see what those friends are up to. We want people to organize activities, meetups etc with their friends. To do so you a user picks a friend, selects an activity, finds a location and then sends the information to the friend so that they'll know where to meet.

Design Evolution

Changes from low-fi testing through Final Project

Easy Task changes

We have changed the location of the broadcast on/off from menu -> settings -> broadcast to living on the main menu itself. This will reduce the number of clicks necessary to access this feature. This change was implemented after we saw confusion in the third user of our low-fi prototyping. The third user when asked to change broadcast status, completely exited the application and restarted it in order to bring up the default "broadcast on/off" dialog box which comes up when the program is first started. She did not know that a middle button click when she herself was highlighted would bring up an option menu which would allow this option to be changed.

This is what our menu bar looked like in low-fi prototype


This is what our menu bar looks like in the interactive prototype


This is the menu bar (and map) from the pilot study prototype


Or original Lo-Fi prototype's Visibility/Broadcast switcher:


Successive Version storyboards: (Later Versions have different menu - thats all.)

Medium Task changes

In our low-fi prototype we originally had a single screen for entering search criteria (name) and a separate screen with the results. When we went about implementing the functionality we realized by using the android auto-complete widget we would reduce the need for separate screens. The autocomplete field would automatically generate a list with several selections which match. The user would then be able to select from the autocompleted list. This reduces the number of screens the user has to go through and would help to maintain continuity as they would never really be more than 1 screen away from the default map screen.

In addition by using the dialog theme we are able to have the search screen pop up as transparent overlay over the main map instead of a separate black screen. This also helps maintain a feeling that one is always close to the default map screen.

This is what we had envisioned during low-fi prototyping. Image:GroupXLoFiSearch.jpg

This is what the interface looked like before and after we implemented the dialog theme Image:Metax_dialog.jpg

Except for some back end stuff with the Person class, this activity remained unchanged for later versions of the program since users seemed relatively satisfied with it.

Hard Task changes

This is what we had envisioned during low-fi prototyping.

Image:GroupXLoFiFriendMenu.jpg Image:GroupXLoFiMeetup.jpg

Much like our Lo-Fi prototype, organizing a meetup with a friend is a simple matter of selecting them on the map, choosing meetup, and choosing a type of place to meet up. Our prototype does not yet allow a user to specify their own criteria for finding a place to meet up, and currently only offers one option, as opposed to our Lo-Fi prototype, which allowed the user to browse a series of possible options.

From our Interactive and Pilot Study Prototypes:


Final Implementation:


Note the change in style for the context menus. The new context menus may not be as attractive as the old style, but they popup a lot faster, which is important for the user, and greatly simply the code, which is important to us. Additional testing might be necessary for the menus. One thing that might help is to reduce the width of each line item, if possible. Also, actual results for places in the area.

Additional Changes

First Implementation of Advanced settings
First Implementation of Advanced settings
Final Advanced settings menu.
Final Advanced settings menu.
  1. changed from a static String arrays to represent lists to more easily mutable arrayList implementation
  2. added ability to scrape data from Android phone contact content provider
  3. added implementation of "advanced settings" page.
  4. added ability to change viewable friends on map based on their degree of separation

Comments on Evaluation Techniques

  1. Usually simply viewing how users actually used our interface was sufficient to show flaws or things we hadn't though of. This showed us why something like contextual inquiry is valuable.
  2. Even though we did try to count clicks and key presses on a number of occasions these often felt like we were doing these things just because they were suggested in the readings. I think in larger scale studies and once the program is finalized more and you are just trying to optimize these types of evaluation techniques will be more useful but since our project is really in the early stages of development where ideas arent set / fixed yet, I think quantitative evaluation had less of an impact than advertised in our readings / lecture.
  3. Numbering the serverity ratings did help in allowing us to know which items were higher priority when we were allocating tasks and thinking of what functionality to fix / implement as we stepped through the iterations of our program.

Final Interface

Our application can basically be divided into two main parts. The main map interface and the menu bar and its functions.

Main map screen


Satellite off, displaying separation of '1'
Satellite off, displaying separation of '1'
Our SMS/Change Status Activity.
Our SMS/Change Status Activity.
  1. cycle through friends on the map
  2. pan around the map
  3. display your friend's status
  4. Press the back button to center on yourself. If you are browsing locations, the back button will instead return you to the person you were trying to meet up with, then pressing it again will center on you. If you press the back button when you are already centered the program exits following the standard Android behavior
  5. bring up action menu
    1. change your visibility
    2. change your status
  6. bring up action menu for others
    1. call your selected friend
    2. Text Message that friend
    3. Meetup With that Friend
      • Selecting Cafe, Bar, Restaurant lets you browse through the nearest places to the midpoint between you and your friends.
  7. Directly call a friend by pressing the Call button when they are selected on the map
  8. Change the map between Satellite and Map view
  9. Zoom in and out on the map
  10. Autozoom to show all friends by pressing 'P'
  11. Switch your own visibility on and off

How to use

Changing your own visibility is an important feature to many users, so we focused on making it simple.
Changing your own visibility is an important feature to many users, so we focused on making it simple.
If the next person to zoom to is more than two miles away, an informative warning is shown before moving the map.
If the next person to zoom to is more than two miles away, an informative warning is shown before moving the map.
  1. To cycle through your friends you "tap" the DPAD in a direction and the application will center on the next friend closest in that direction. If the person is more than two miles away, a warning is shown (see picture).
  2. To pan around the map, simply hold down and "press" a DPAD direction. This will result in the map scrolling around instead of snapping to center on a Friend's location
  3. To display your friend's status you simply have to center on them and the FriendFinder application will automatically fetch their status and display it on screen
  4. You can bring up your own action menu by pressing the CENTER button when you are selected, or by selecting "My Menu" from the main Android menu.
  5. You can change your visibility after having brought up the menu by selecting the correct radio button by using the up or down DPAD and then a CENTER press to confirm
  6. You can change your displayed status after having brought up the menu by entering text corresponding to your status and then selecting save.
  7. You can bring up an action menu for others by pressing the CENTER button when someone else is highlighted
  8. Selecting CALL will result in the FriendFinder application bringing up the android dialing application and dial the friend you have selected
  9. you can send a text message by entering text and selecting send
  10. You can arrange a meetup:

Once you have decided on your place, hit the center button. This time chooser pops up:


Your friend gets an autogenerated message of the time and place to meet.


Some interesting notes about some of the implementations of the above functionality

  1. To differentiate between a "tap and a "press" we decided through a little testing that if the movement of the map while the key was down was less than 7% of the width of the screen, the intention of the user was probably a tap and not panning the map. Users complained that the selecting/scrolling of the map was 'unpredictable' or 'odd'.
  2. To decide who to center on we searched all people in the given direction from the current center, and picked the one with the shortest vector distance from the current map center.
  3. When we change visibility we have the results appear in 3 forms of feedback:
    1. The text at the top of the screen changes between visible and invisible
    2. a pop up window appears notifying you that you have changed your visibility
    3. your circle representing yourself on the map changes color to dark grey
  4. We thought of "Away messages" and "Facebook status" as key components to social networking applications so we wanted the status to be visible along with the contacts name.
  5. When searching for locations to meet up at, we're currently using some undocumented features of the Android API. This allows us to find real places based on arbitrary locations and queries, but unfortunately the Android API for this feature is still unfinished and the name of locations is not available, so we used the URL instead. Hopefully Google will fix this in a future update.
  6. Feedback during classroom presentation suggested that the satellite mode is 'too crowded', so we implemented map/satellite switching.
  7. Also it was suggested to us during our presentation that friends far away would disorient the user. For this we implemented show all friends on the map zoom button - 'P'. Also, when you browse someone far away, a prompt appears letting you know the distance before the map pans.

Left out and Wizard of Oz

  1. A "target" box on the main map which would bring up someones status and focus on someone if they are in the middle of the screen after having used the "panning" functionality of the map.
  2. tie in real SMS / Txt with the Texting application
  3. tie in ability to really enter in a custom meetup location
  4. "friends" gps locations are currently randomly generated instead of grabbed

Menu Bar


Our final menu bar.
Our final menu bar.
  1. Search button - allows you to search for a friend in your FriendFinder friend list
  2. Contacts button - allows you to access your android phones contact list
  3. Zoom button - allows you to change the zoom level on the main map
  4. My menu button - allows you to access the menu items associated with how you appear to others in the FriendFinder application
  5. Settings button - allows user to access advanced features and settings

How to Use

Advanced menu, complete with View Mode Checkbox, separation spinner, and confirm button.
Advanced menu, complete with View Mode Checkbox, separation spinner, and confirm button.
  1. After selecting the search button a text field will appear. Typing in text will cause an autocomplete list to appear from which you can choose a matching query by using the up or down DPAD keys to select and a CENTER button press to confirm.
  2. Nothing special about how to use the contact list functionality
  3. Nothing special about how to use the zoom functionality
  4. My menu brings up the same menu as if you were using the main map screen and had pressed CENTER while yourself was highlighted. Usage is same as in previous section
  5. Settings currently only has one meaning full setting which you can change. This is in the form of a slider wheel. You can use the DPAD keys to navigate to the slider and set the desired value. Then highlighting the "Apply Settings" button and pressing the CENTER key will cause the FriendFinder application to redraw the map based on the updating settings for visible friends based on degrees of separation.


  1. We used a google auto-complete widget to generate a list for the user to select for the search functionality
  2. We decided to use a "dialogue" box instead of a separate screen to maintain more of a level of continuity between different screens in the application
  3. Back button press while in the contacts screen will bring you back to FriendFinder
  4. Friends stored in the phone's global contacts are added to the FriendFinder maintained friends list. (their location is also wizard of oz generated)
  5. we used the default provided zoom widget, but it seems optimized for a different screen size so its not our fault it doesn't look right =).
  6. We decided to implement "My Menu" as a double of the "center press when self is highlighted" because we felt the ability to change ones visibility was important and wanted the user to be able to find this functionality
  7. We had difficulty overriding the "center" press int he advanced menu. Even when over-ridden, a center press while the scroll wheel was highlighted would result in a dropdown menu instead of confirming the current selection. We got around this by forcing the user to highlight and select the apply settings button

Left out and Wizard of Oz

  1. Again we are not really sending / retrieving real data to a network beyond our meetup application so any status / visibility / text message sent are all wizard of oz'ed. This was left out as these backend services are not directly related to the UI. The important feedback and presenation of assumed backend data is already shown in our prototype.
  2. To know if a contact is more than two degrees and how our application would figure out how many degrees of separation is not implemented yet. This idea of filtering based off of degrees of separation was inspired by someone within the group having read an article regarding a "social-graph" program which could do similar functions. The ability to filter the display is what is important to our UI as it presents the data. How we grab and filter the data while worthy of some time and thought would fall out of the realm of a UI design.


[add comment]
Personal tools