DEVELOPMENT DOCUMENT

Team Name: Heuristics

Team Members: Albert Jimenez (alj2110) Alex Dorey (ald2175) Jasleen Lamba (jl3809) Rongxin Du (rd2537)

(I) OVERALL PROCESS:

1) Brainstorm:

The project started with all the members meeting and jointly deciding the potential users of the application, what the focus should be on in this project, what the initial prototype would be like and what our users would expect from our application.

2) Hi-Fi Prototype Design:

We decided to use PowerPoint to provide the approximate look and feel of a real system. By using PowerPoint, we could easily edit and modify our prototype iteration after iteration, which speeded up the changes we made to various components of the application during team discussions.

3) User Personas and Scenarios: In this step, we discussed and defined the potential class of users in our application. Then, the we came up with two archetypal users: a first-year international graduate student and a business man who has just arrived to New York City for a visit. The common features of these two personas is that they are both new to New York City and they are both eager to explore interesting places for fun. The differences between these two Personas lie in how they take advantage of several components in our application to achieve their own goals and motivations. In the corresponding scenarios, we tried our best to make the Personas and their interaction with the application live and compelling, filled with detailed tasks and steps. We also designed the scenarios in such a way that they can cover most of the functions our application provides in each component.

4) Prototype Test:

We invited a tester to test our prototype and to use the application as per the use-case scenario. The facilitator gave instructions on how to use our application, while the observer took notes. We encouraged our tester to think aloud. According to what our tester suggested in the testing process, our team members discussed on the tester’s advices and made some necessary modifications. Also, the application was tested by the team members at various levels of the development and necessary changes were made.

5) Roles and Responsibilities:

We divided our application into 4 components: Jasleen Lamba: The layout design and format Albert Jimenez: Getting data from facebook API and processing the data,

sorting/filtering functionality and recommendation algorithms Alex Dorey: Using the Google Map API to visualize places and display search

results on the map Rongxin Du: Result box layout and magnification design

(II) TARGET USERS:

Our application aims at providing an informative visualization of the search results of the

Facebook Place Search. The application allows people to search for places that they might be interested in visiting, centered on a particular location. The tasks that the users might be interested in include sorting the search results on the basis of distance, number of likes, number of check-ins etc, filtering the results according to the different categories that correspond to the user’s search, going to the facebook page of a particular place, or futher expanding the search through suggestions. The users we chose to target in the following scenarios are students and travellers interested in exploring the city by visiting new places.

Initially, the application was to focus on searching “Events” but a modification was done to this concept. Now instead of searching for events we are using the “Places” search. Reasons for Change:

The events posted on facebook are not standardized and well-documented. For some events, the organizer might give a very ambiguous location which is difficult for us to exactly locate, such like In My Uncles’s House, The Factory, etc. Sometimes, the organizer forget to upload a cover picture or leaves the description blank, which might cause troubles if we need to learn more. By contrast, all the places registered on facebook are well documented. They have details about location (longitude and latitude), category (local business, NGOs, restaurant/cafeteria, club, bar, etc.), more cover photos and descriptions. This information will be quite useful if we plan to do some results visualizations, classifications and recommendations for our users. So our team finally decided to take advantage of these benefits and focus on places search. Modified Personas and Scenarios

Persona 1: Lou LeFirstyear

Lou is a first-year international graduate student in Columbia University from China. He has been in New York city for just a few weeks. Lou is more than willing to discover interesting places, especially around the university and in his neighborhood. User Scenario for Lou

Mr.Lou wants to find some places to get coffee at noon before class. One of Lou’s friend recommends our “Facebook Places” application to him and Mr.Lou runs our application to find coffee places as follows:

Mr.Lou waits patiently for the map view to load until our application reminds him that his current location has been detected and marked on our map view. Lou checks his current location marked as a target circle on the map view and feels happy that our application gives a correct response.

As, Mr Lou is a first time user he doesn’t know how to use the application,so he clicks on Help and dialogue boxes giving him a step by step procedure on how to navigate through the application appear on the screen.He reads the dialogue boxes and switches off the Help.

It is noon now, Mr.Lou has some classes in the afternoon, he is really tired and sleepy. So he inputs “coffee” in the Place Search bar to find some coffee shops.

Top results satisfying his criteria are displayed on the right hand side in a list At first, these results are presented in the default order of the relevance. However,

Mr.Lou doesn’t want to go far away from campus, he prefers to sort the results on the basis of the distance from campus. So he specifies that he wants to “sort by > distance”, the list changes to show the places in an increasing order of distance.

Mr.Lou mouses over the top result “Starbucks”, the box corresponding to the result increases in size giving him more information about that particular result. Also,the result on which he is mousing over is highlighted in the map. He checks the address and also some statistics of popularity (such as number of “Likes”). Mr.Lou finally decides to go to this Starbucks for a cup of coffee.

Persona 2: Peter Placeseeker

Peter is a 30-year-old business man who lives in Santa Fe, New Mexico. He has to attend a one-day business meeting around Wall Street in New York city in a week’s time. This will be the first time that Peter will be visiting the Big Apple and he plans to stay there for one week, so he has plenty of time to visit some interesting places and have fun in New York. Peter wants to visit the Empire State Building after the meeting, and he plans to go to a famous bar close to that after his visit. User Scenario for Peter

As Peter has been using the application for quite some time,he knows his way around and doesn’t need to click on the Help button

At first,when Mr.Peter runs the applicaton, he is informed that his current location Santa Fe, New Mexico has been detected and marked on the map view.

Mr.Peter wants to change the location in the map to the place he’ll be visiting i.e.New York, so he clicks the “Change” link right under the Place Search bar. A map search bar then appears at the top left hand side on the map.

Mr.Peter inputs “empire state building, New York” into the map search bar, and presses Enter. He is happy to find out that the map has been relocated to his expected place with a target circle marking the exact location on the map.

Now Peter doesn’t need the map search bar anymore, so he clicks on “Hide” to close it.

Mr.Peter specifies the topic of his search in the Place Search bar as a “Bar”.

Top results satisfying his search criteria are displayed in order of “relevance” on the right hand side. He then specifies that he wants to sort the results on the basis of their popularity, so he sorts the results by doing “sort by > likes”. In addition, he also wants to get some food in the bar, so Mr.Peter filters the results by choosing Restaurant/cafe option in the Filter drop down menu.

(III) DESIGN DECISIONS:

The design decisions have been made keeping in mind what a potential user might expect from our application:

1. At first when the user runs the application, the user might want the search to be centered around his current location. So, we decided to make our application detect the user’s location and set it as the default location. 2. When user makes a search, he might want to see the search results located on the map to give him a better visualization of the results. So, we decided to plot the places in the search results in the map. 3. The user might want to explore more about the search results returned by the application. So, we decided to give the user the ability to click on the result and be redirected to the facebook page of that particular place. 4. The user might want to know more about the location without been relocated the the facebook page. So, we decided to allow the user to view more details like the Number of likes for that place, the number of people who are talking about that place when the user mouses over a particular result. We also decided to highlight the result currently moused over by the user on the map. 5. The user might want to change the location of the map to search places within a specific location. So we decided to add a search box on the map that allows a user to relocate the map to the specified location

6. The user might want Help navigating through the application. So, we decided to add a Help icon which when clicked displays a step by step procedure to navigate through the application. 7. The user might want to sort the results presented to him in a particular order. So, we decided to give the user the ability to sort the results on several criterias including the distance, number of likes etc

8. The user might want to filter the results returned in a particular search. So, we decided to allow the user to filter the results based on all the categories that are present in the current search results of the user. Also the number of the results in a particular category would be displayed in the drop down menu of the filter.

A lot of effort has been made to build our application in a way so as to make it user friendly and satisfy the core usability heuristics.

Justification of how our design decisions satisfy the 10 Usability Heuristics: Visibility of system status

The user always knows whats going on in the application. When the user runs our application, it might take 10-20 sec to load the Google Map and also detect the user’s current location. In our application, we inform the user that he should wait for some time while his currents location is being detected. His current location is then displayed on the map with a pop up window. Also, when our application is busy searching for results that satisfy user specified queries, there is a loading animation symbol shown to let the user know that the results are being fetched. What’s more, the corresponding location of the results are highlighted on the map when the user mouses over a result in the results list. The number of results being displayed are mentioned on the top right corner, which helps users to keep track of how many results we have found for them in real time.

Match between system and the real world The language used in the application are terms that would be very familiar to any user. The application uses terms such that a user who is familiar with the basic functionality and working of Facebook would easily understand, such as relevance, likes, talking about, filter, etc. Also, the application follows real-world conventions displaying the data in a logical manner. The user’s attention goes in a left-to-right manner and so does the flow of the application ( The user specifies his expected location and the name of the place he wants to search for on the left hand side, he is then presented with the results on the right hand side.) In addition, the symbols we use in this application are self-explanatory. For instance, we use the loading symbol from facebook to show to the user that the results are being fetched.

User control and freedom Firstly, in our application, users can choose whether to show the help hint windows or not according to there preferences. Also, users can choose to hide the map search bar if they have already been directed to the right location or if it is obstructing their view of the map. Secondly, our application supports redo and undo. Considering the possibility that sometimes, users can get lost while they explore some places by dragging the map up and down, we add a home button to help users come back to the default map view with 1-click. (the map view of their current location). In addition, when user clicks the “Get similar places” link on the bottom of each magnified result box, our application implements a recommendation algorithm to create the result set. In this situation, user can easily go back to the previous search results by clicking on the blue-colored Results button on the top of the results list.

The user is also given the freedom to view results in the default order in which they are displayed or sort them on a given criteria chosen from the drop down menu. The user can also mouse over the results if he wants to see more information about them or just wants to see them highlighted on the map.

Consistency and standards A user familiar with the language and conventions of facebook would face no problem working with the application as platform conventions have followed. Also, easy to understand labels have been provided such that the user does not have to wonder what different things mean. For example, we use the term “Hide Help” to present the meaning of closing any pop-up helps.Consistency is maintained whenever we mention the category of a place or some statistics provided by Facebook, such as Local business as one of the

categories, talking about and check ins as the statistics. Also, the loading animation is same as that used on facebook to represent the fact that the results are been fetched.

Error prevention Hints are provided to the user such that help him understand the application and navigate his way around. In addition, our application provides some necessary input suggestions in case that a user might input some strange words or phrases that Facebook API can’t find out. For the Place Search tool bar, we will by default display some query examples in grey “Enter a place (e.g. Starbucks, party, bar)”. Similarly, for the Map Search tool bar, we will also by default display some query examples in grey to give the users an idea on how to find a location on the map.

Recognition rather than recall Our application is designed on the purpose of minimizing the user's memory load. The user does not have to remember information regarding the search as it’s clearly displayed on the screen. In addition, we use dark blue thumb tacks to visualize all the place search results within the current map view. Also, when users mouse over one of the search results on the right list, our application will highlight the corresponding location on the left map with a red thumb tack. In this way, we minimize the user’s memory by showing results in a visualized and intuitional way. All the instructions for use of the application are easily retrievable whenever required. Users can just click on ”Help ” to learn to use the application step by step in case that they might forget it someday.

Flexibility and efficiency of use Our application can cater to both inexperienced and experienced users. For novices, our application provides pop-up hints whenever a user click on Help link to seek help. For experienced users, our application also give them the freedom to explore more and to improve search efficiency. Experienced users might use our extra features “Get similar places” and “Get places nearby” to explore similar places and places near a particular place. Also, an advanced user might use the sorting and filtering features to reorganize or classify the search results. For the sake of efficiency, users can get navigated back directly to his home location (the location detected via IP address) by 1-click on the Home button, wherever the map view is.

Aesthetic and minimalist design All information displayed is minimalistic and to the point. Minimalistic design has been implemented to keep the application uncluttered and simple. Also, the data is displayed in three different blocks so as to keep the various concerns different: the search block, the map block and the results block. What’s more, with respect to the results block, we add some magnified effect to every result box whenever it is moused over. We think that this pop-up magnified view effect is to some extent aesthetic, at least we love it very much.

Help users recognize, diagnose, and recover from errors Users are presented with error messages if the measures they specify for the search are not recognized by Facebook search API or Google map search API. For example, if a user inputs a nonsense phrases in the Place Search bar, our application will notice user “Displaying 0 results” on the top of the result list. Also if a user inputs a non-existent location in the map search bar, an alert window will pop up “Could not find location, please revise your search and try again”. All the error messages are in easy-to-understand language and also provides with suggestions to recover i.e to re-enter the measures that are wrong.

Help and documentation

Users can get instructions on how to use our application by clicking HELP link right beside the search button. The friendly hints will pop up as small windows and guide users to get familiar with various features of our application step by step.

(IV) PROTOTYPING AND TESTING PROCESS:

Hi-Fi Prototype Design

Initial Prototype:

The initial prototype is in line with our initial choice of Implementing Event Search. The application gave the user the ability to Search events by entering a keyword in the search Input field. The Events would then be displayed in a linear list on the left hand side, with their location being displayed on the map on the right hand side. Also, a correlation plot could be viewed that displayed the results as points on a graph depending on the variables chosen by the user for the 2 axis, giving the user the ability to easily visualize the results and compare them. The user was also given the ability to sort the results presented to him in the list on the left hand side of the screen.

Prototype 2:

This prototype is in accordance to the modification made to out application to focus on “ Place” instead of “Events”. The layout of the application has been modified. The user can input the Place he wants to search for n the top left hand side. He can also specify the latitude and longitude of the center of the search and the radius within which he wants the results to be located. He is also given a choice of the units for the radius being entered. The results that satisfy the search criteria are then fetched and displayed on the right hand side in a linear list. Initially each result is displayed such that it has a small picture of the place, the name of the place, the category of the place and the address of the place displayed in a small box. When the user mouses over the result, the result box expands giving a detailed description about that particular result, including the number of likes for that particular place, the number of check-ins at that place. Also, the user can search for similar or places near to that search result by clicking on the desired link. The user is also given the ability to sort or filter the results presented to him as per his requirement.

Prototype 3:

In the previous prototype modifications were made to make the application user friendly. Step by step hints would now be provided to the user to help him use the application. Also, as the application would use the initial default location as the user’s current location. The user can then move the center of his search in the map or else enter the latitude and longitude of the location he wants to specify as his center. The user can also select the radius of the circle to specify the area within which he wants his search results to lie.

Prototype 4:

In the previous prototype further modifications have been made to help a advanced user use the application in a more efficient manner. The user is now given the capability to hide the hints being provided to him once he is comfortable using the application and knows his way around. Also, the user is given a way to show the hints whenever he wants if he forgets to use some functionality. The search can now be done in two ways - Basic or Advanced. Either the user can specify his location and the radius of his search in the map or if he is an advanced user and knows the latitude, longitude and radius details, he can do an advanced search by inputting the exact values in the input fields.

Prototype 5:

Based on one of the tests with an external user, we got the feedback that the latitude and longitude and radius fields were somewhat difficult to use. So, instead we implemented a search box on the map that helps the user relocate to a particular location within the map where the user can perform a search for a particular place. Also, the icons that mark the search results and the moused over result were changed within the map to make them look aesthetically better and conspicuous. Initially the map is centered at the user’s current location and he can click on the change location link. When he clicks on it the search box appears in the map. Also, the hints were removed, and instead a help button was added which when clicked displays a step by step procedure to navigate through the application. It can also be switched off as per user’s choice.

TESTING PROCESS

Test No. 1- External tester

During this test, our tester wanted to search for college bars around Columbia campus. Our facilitator gave a brief introduction of our application and necessary instructions on how to use it. The following are the observations that were made:

1) The tester firstly got confused about what he should input in the search box. The tester mainly gave us the following suggestions. “Since the name of your application is called Facebook Places, shall I input a specific place name that I already know? Are there possible suggestions when I enter the place name? It will be difficult for me to input a precise name of a place.” 2) About the unit of radius. The tester wasn’t very comfortable to measure radius in miles. How far is a mile? He suggested we can measure the distance in a more intuitional way, such as blocks, minutes to walk, or minutes to drive. And also, there should be a default value of the radius of circle. 3) Our tester liked our mouse-over magnification view effect. 4) We asked our tester how the searching results should be sorted, by relevance, distance or something else. The tester said that relevance is the No.1 priority, and then comes the distance. Our tester explained that when we are searching for a college bar for instance, we are not expecting some results that have nothing to do with college bars. It will be annoying to display many unrelated results. For distance, he thought that people wouldn’t feel like travelling too far from their homes to attend a party or activity. 5) For the pop-up hints, our tester suggested the hints should only show up once. Once started, people like to explore things on themselves. In addition, he suggested that we’d better put the option “Hide Hints” right beside the close button of each pop up hint window so that a user can hide hints in a more convenient way. 6) Our tester felt lost when he was using our map navigation. He firstly changed map location to “greenpoint” in New York, and then he just wanted to come back to his current location, Columbia University. The problem is that he had to make some efforts to drag the map carefully from greenpoint to Columbia University. So our tester suggested that it might be better if we could provide some link that can take him back to his current location at convenience. 7) When the map view was loaded fully, our tester said that he got confused where he was on the map, and he didn’t notice that the target circle displayed at the center of the map was his current location detected by the IP address. He suggested that we had better make that target circle more attractive or remind the users in a friendly way.

How the Tester’s suggestion were implemented: We changed the label about the data the user can enter to find a place to make it more intuitive that the user can input anything they want, not only the name of a place, but also for more general terms, such as coffee, piano, beer, pizza,etc. Also, we set our default sort order according to the relevance and gave the user an option to search for similar and near by places. We also implemented the Hide Hints as per the tester’s suggestions. The user is also now given an option to enter the radius in kilometers or miles.The feature suggested by the user to allow entering the radius in terms of blocks and streets was not implemented as it is not a universal concept and would cause confusion if the user wants to search for places in a country that does not use streets and blocks as a measure to compute distances.

Test No. 2- Within the Team

The team members also tested the application at various levels of development enacting different personas and scenarios and gave suggestions which were discussed within the team and implemented if thought appropriate. Some of them include:

1. Observation: Initially, we had a circular overlap over the map that helped the user navigate through the map to specify his location and also allowed the user to adjust the radius within the map by dragging the circular region. But, when one of the team members was testing the application, he realised that it may be very confusing for the user as he might get confused between dragging the map and dragging the circular overlay. Also, since we tried to display the circle always within the view range, the result update becomes rather slow and inefficient when we tried to move the circle/map really fast or to a far away place.

Modification: So, we discussed about this problem and agreed to remove the circular overlay, just allowing the user to drag the map to reset the location of the center of the search.

2. Observation: When another member of the team was testing the application he found that the cross icons being used in the map to display places on the map were not that visible and conspicuous.

Modification: So, we the team discussed about it, and we planned to change to icons to make them more visible and easy for users to locate.

3. Observation: Another of the tests, being conducted by one of the team members brought about the suggestion that the waiting time for fetching the results is too much. In the mean while the screen is empty and the user might wonder what is happening.

Modification: So, the team discussed and we planned to implement a loading animation in the right results block and a message “Please wait patiently while the map is loading” in the left map block so that the user knows the system status.

Test No. 3- External tester

Observation: The user was not comfortable with the latitude, longitude and radius input fields. He said that he might not know the latitude and longitude of a particular place and rather would want a search on the map based on the name of a particular location. Modification:

So, after a team discussion we planned on removing the latitude, longitude and radius fields and instead we implemented a search box on the map that helps the user relocate to a particular location within the map where the user can perform a search for a particular place. Also, if the user gets lost in the map, there’s a home button that helps the user locate the map to his current location.

(V) SOFTWARE ENGINEERING:

1) Layout design and format The layout of the application has been made in a way so as to complement facebook to make it look as a subpart of facebook that can be easily integrated into it. The layout makes use of the variety of components provided by Flash Builder.

2) Data Retrieval/Processing and Search Results Functionality

Whenever a search is initiated, a facebook api request is sent and the search results are displayed. Further information about the results such as profile picture and description are retrieved using a separate API request for each of the search results. These are handled asynchronously in order to quickly show all the information for the search results.

Each search result object is comprised of a small, summarized result and a larger result with a larger image and more details. A mouse over the minimized result shows the maximized result and when the mouse leaves, the minimized result reappears. While resizing, results above the selected item are pushed up and result below are pushed down; this allows the selected item to remain in the same position when maximizing and provides a smooth flow as the user navigates.

Search results are sortable by various attributes such as relevance, # of likes, and name. The user can also filter out results based on a category. The categories that can be used for filtering are limited by the categories that appear in the results set and next to the category is a number that conveniently informs the user how many results match.

The maximized result object has two links, in addition to the profile links, that allow the user to further explore the search based on the selected object. The “Get similar places” link creates a new search result set where results are sorted based on their similarity to the result that was selected. The algorithm works by computing a similarity score for all results in the original result set. This score is based on the number of words that appear in common, whether the category is the same, and the distance. The “Get places nearby” link performs a new search based on the same search query except the center location is set to the selected result’s location. Both links generate a new result set that appears as a second link next to the original result. This allows the user to go back to the previous result set.

3) Visualize place locations via Google Maps API

The Google Maps API was used in order to facilitate the searching of places and to visually display the results. When the application begins an API request is sent to determine the user’s current location based on the IP address. The map is then centered on this location. As the user navigates, the coordinates of the center point on the map are passed along to the facebook places API search. The request’s radius is set according to the largest circle that fits on the map’s current zoom level. Whenever the map is changed, a new search is initiated and the results are displayed on the map as placemarks. The map visualization was enhanced in several ways to provide the best experience for the user; a cross-hair icon always appears on the center of the map, to assist the user in pinpointing the center of the search. A zoom scale is conveniently placed, to allow the user to change the zoom level. Next to the scale is a home button to allow the user to recenter the map on his current location. Finally the map was enhanced to include a pop up map search, so that the user can immediately jump to any location. This is activated by the Change link. This map search uses a Google API which transform an address to coordinates.

4) Result box layout and view effect design

The idea of this component is to enhance users’ experience when they are reviewing our searching results shown on the right list. In default view, we only provide basic information of each place, including place category (restaurant, local business, bar, etc.) and also the address. When the user moves the mouse over certain result box, the cover photo will be magnified, more details and extra features will come out in the magnified view. The details here include some important statistics provided by Facebook, such as the number of “likes”, check-in numbers and talking-about numbers. The extra features mentioned above are “Get similar places” and “Get places nearby”, once clicked, will help our users explore further similar places and nearby places related to current place by the way of invoking place recommendation strategy.

In addition, our team found out that the cover images returned by facebook are not uniform in size and shape. Some images are long and flat, some are high and narrow. As we attached importance to this aesthetic problem, we addressed it by an image processing algorithm.The biggest center square part was cut from the original image and the cropped image was scaled to fit in the display square areas.