GR6 - User Testing

Design

The purpose of PickFind is to facilitate the process of finding worthwhile games of pick-up basketball to participate in. With this in mind, we ultimately chose to focus the design of our interface around the master list of pick-up games. Overall, we tried to keep our design minimalist, employing a white background and a simple color scheme with sufficient contrast.

INTRO/LOG-IN The first page that the user sees is the login/intro page. There are two outlined boxes that fill the center of the page. The first is a quick description introducing the user to PickFind. The second is a member login that allows the user to enter his/her username and password to access their personal version of the site. We include a link to register for users needing a new account.

REGISTER The user is asked to enter a set of information to identify themselves to the rest of the community. We indicate that required information is marked with a red star next to the corresponding field. The Gender entry is a pair of radio buttons that can only be selected one at a time for either Male or Female. The self-assessed Skill rating is a slider from 1-9. We chose the slider for simple visual comprehension and immediate graphical feedback. We include a tooltip over the question mark to explain the meaning of skill to the user.

MAIN The main page of the site focuses on the list of games that are available to the user. There are options for filtering, searching, and clicking for further details. A sidebar includes the user's personal schedule and news feed for following activity. The core functions of the site are delineated by location, position, color, and in some cases, borders. In order to avoid inundating the user with details, we minimize some pieces of the site that can be expanded upon use.

GAMES The available games are displayed as individual boxes on the main page of the site. Primary attributes are all formatted consistently in the same size, location, and color across all games. The skill level attribute is displayed as a progress bar so that users can quickly scan down the page and get a sense of the difficulty of the games. There are also question marks next to the "Location" and "Skill Level" attributes that users can click on to obtain tooltips about those specific fields. Having the information hidden simplifies the look of the box. At the same time, vaving the information display on the user's command gives control to the user. These question marks behave consistently throughout the website. The game boxes themselves are colored according to the user's role in the game. We chose to design the boxes in this way so that users will be able to quickly visually distinguish between his/her different roles in each game. We include large buttons for adjusting the game itself (edit/delete) or the user's participation in the game (join/leave/watch/unwatch). We made the buttons glow when the mouse hovered over them to give more feedback to the user.

FILTER Games may be filtered according to several desire parameters. When the site is first loaded, the filters box is minimized so the user is not confronted with too much information. Clicking on Show Filters expands the box and allows the user to choose which games to display. Clicking to filter the date pops up a calendar next to the mouse, making it more efficient and visible for the user to choose a date. Similarly, clicking on time drops down a list of times the user can choose. Filtering by skill level invovles sliding two buttons across a slider, which again serves to help visibility.

SHOW MORE Once the user scrolls down to the bottom of the list of displayed games, he/she can click on Show More Games to display additional games that fit the filter parameters. This button saves the page from having to load excessive information and allows the user to choose how much to display.

SIDEBAR The side bar includes a schedule of games that the user is participating in and a news feed for following activity. An abbreviated set of game information is provided for each entry. Game name links can be clicked to pop-up a more detailed game box.

DETAILS Game names with blue links can be clicked to pop up a complete game box with full details. The remainder of the page is shaded to reduce visually conflicting information. This gives the user efficiency because instead of being redirected to a separate page containing details about the game, a simple pop up appears. This way, the user can easily close the pop up and resume his/her actions.

USER The upper right corner shows which user is currently logged in. Mousing over the name drops down a menu with which the user can use to view profile, change password, or logout. All of these tasks were grouped for similar functionality. The search bar allows the user to search through all established profiles.

PROFILE User fills in relevant personal information to create a profile viewable by the community. Large visible icons indicate capabilities to edit profile and change profile picture.

FOLLOWING List of other users that you are currently following. Users are displayed by profile picture. Clicking on the picture links to their profile page. The total number of users displayed is capped, but can be expanded using a link. Search bar allows user to sort the people you are following.

UPCOMING Upcoming games are displayed using the same game box structure as in the main page. This achieves consistently throughout the site and improves learnability. Game history for past games also uses the box structure.

Implementation

PickFind is implemented using web technologies including HTML, CSS, Javascript, PHP, and MySQL. The front end layout and color scheme is in HTML/CSS. The middle layer interfacing front end client side with the back end server side is implemented in Javascript. The back end uses PHP and MySQL.

1. Back End
We store our data in two MySQL tables -- one for user data and for game data. We created a PHP file for each large operation into the database, such as create a game, edit a game, get the user’s upcoming schedule, get the news feed games, get all the filtered games, etc. To call these operations, we use Javascript and AJAX post requests to the specific PHP files.

• Game data
  The gamedata table stores a new record for each game. Each entry is identified by a unique, auto-incrementing game ID. Other fields include game start date, game end date, location, organizer, and game name. The organizer field contains the user ID of the organizer and can be used to direct an entry in the userdata table. In addition to these fields, there are also two fields that are a list of user IDs that relate to the userdata table. These two fields are list of players field and list of watchmen field.
• User data
  The userdata table stores a new record for each user, each identified by a unique, auto-incrementing user ID. Typical user fields include their first name, last name, username, password, email, age, gender, skill level, phone number, about me blurb and a profile picture URL. There are also a set of fields that keep track of lists of ID’s referencing another user record (user ID’s) or a game record (game ID’s). One field stores a list of user ID’s referencing a list of users you are currently following. Three other fields: list of games, list of organized games, and list of watching games, store a list of game ID’s. These ID’s provide a means to relationally access the other game data database.

2. Website Pages

• Login Page
  The login and logout process is handled with PHP.  A login cookie is created for each user session after a user successfully logs in with their registered username and password. Unless the user logouts or the cookie expires, the user will have access to their personal PickFind profile (their profile information, active games, game history and list of users they follow). The login page has a “Forgot your password” option. Passwords are  encrypted with MD5, and as a result, if a user misplaces their password, it must be reset.
• Logout Page
  The Logout page is accessed from the dropdown menu next to the username. As with the login process, logout is handled in PHP. On logout, the session cookie is deleted, and any attempt to load the main index.php page will redirect the user to the login.php page instead.
• Registration Page
  The registration page was implemented with a html frontend and PHP backend. The entries are checked to make sure the username and email address are unique, and also that both password entries match. If all conditions are met, a new record is inserted into the MYSQL database.
• Change Password Page
  The changing password page is also accessed from the drop-down menu next to the username. A PHP script verifies that both password fields match, then encrypts the string with MD5 before updating the user’s record in the MYSQL database.
• Logged-in Main Page
  The main page of PickFind, or the index.php file, is the page the displays whenever the user is logged in. It is split into three sections: the top header section, the right section with the schedule and news feed, and the large section containing either game information or profile information. The top and right sections are organized with <div> tags, while the large section is an <iframe> tag.
• Home Page (frame)
  The home page is the page inside the <iframe> tag the shows up when a user first logs in. This page displays the filter and list of all games as specified by the filter. The home page is organized with <div> tags. The filter portion is a <div> that expands and collapses as dictated in Javascript. Inside the filter, we use a few JQuery libraries to display the calendar when filtering date, display the time list when filtering by time, and display the slider when filtering skill level. Clicking on the “Filter” button or changing a filter field sends an event to Javascript that triggers an AJAX request to the database. The request retrieves the filtered games to display on the page. When we get this filtered result, we use Javascript to parse the data. Javascript then populates the game boxes in the All Games <div> and changes the window height. When the user clicks to expand/collapse the roster, a Javscript event fires to change the page accordingly. The appearances of these game boxes are defined in CSS.
• My Profile Page (frame)
  The profile page is divided into four main sections. The first section presents the profile information about the user. This is taken from the user database. All entries are initially non-editable. Clicking the “Edit” button/icon toggles the fields, and they become editable. This was implemented with a series of hidden fields that would toggle between hidden and unhidden by clicking the “Edit” button/ icon or the “Cancel” button in edit mode. In edit mode, making changes to the fields and clicking “Save changes”, sends an update command from PHP to the MYSQL database, changing the value in the fields as requested.
  The second section presents a list of users you are following. When you follow another user, you get updates about their game statuses, which show up in your news feed in the right pane. Five users are displayed in each row, with the option to display more available by clicking the ‘show more’ button. Javascript expands the size of the frame. This allows us to only request data from a small set of records each time, instead of having to pull the entire user database from MYSQL. There’s a filter option which let’s you search your following list. The search looks for matching substrings in the username.
  The third section displays a list of active games you the user are currently involved in. This includes future games you are organizing, joined as a player or watching. This list is pulled via a list of corresponding gameID’s stored in game lists in the user database. To display the games, both databases are queried. For consistency, these game boxes are identical in appearance  to the ones of the main page, and each provide the option to leave, join, edit, delete, watch or unwatch are required by the current status of the user in the particular game.
  The fourth section displays a game history: all games the user has participated in in the past. Similar to the third section, the game data is pulled from the game and user databases, but as expected without the options to leave, join, edit, etc.
• Other User’s Profile Page
  Clicking on the link of another user’s username takes you to their profile page. This page is presented in the same manner as your own profile page. The difference is that instead of the “Edit” button, you have an option to follow or unfollow them (depending on your current status). Clicking “Follow” or “Unfollow” has immediate feedback, updating the page by toggling the follow/unfollow button as appropriate.
• Update Profile Picture Page
  Profile pictures are stored are a URL string in the user database. To upload/remove a profile pic, PHP was used to check the validity of the uploaded file, including file type (.png, .jpeg, .jpg or .gif) and also the maximum file size. If requirements are met, the file itself is uploaded into the athena locker and the URL path to this file entered into the user record. Removing the picture, removes the url from the record. During page load, an empty entry in this field loads a default user image instead.
• User search page (frame)
  User search is accessed from the user search bar at the top of the page. This searches for a matching substring in the usernames across the entire user database. Clicking ‘Go’ takes you to the user search page, which displays the filtered results. Similar to the list of followers presented on the profile page, once again five results are displayed at a time to limit the requests required of the database server.

3. Event-handling

When the user triggers an event (normally by a button click), the event is handled through Javascript. Oftentimes it requires Javascript to make an AJAX request to change the back end database. Such events includes when a user joins, leaves, watches, or unwatches a game. These events trigger AJAX requests that update that particular game entry in the gamedata table and also updates the user’s list of joining games or list of watching games. Then the frame and feeds reload so the user sees the most up-to-date information. The same happens when an event triggers through creating, editing, or deleting a game.

Other events include following and unfollowing a user. When this happens, an event triggers to make an AJAX request update the user’s list of people he/she is following. The right side news feed also repopulates to include information that takes into account the new follow/unfollow change.

Events that do not involve AJAX include events where the user expands/collapses the roster/filter or clicks to see a pop up dialog. These are handled solely in Javascript.

4. Design Decisions

• The reason we used an <iframe> on the main page is so that we could change the contents in that section without changing the top or right sections. For example, moving to the user’s profile page does not require repopulating the user’s right section containing the schedule and news feed. This requires fewer AJAX calls to retrieve duplicate data from the back end.
• The reason we went with MySQL instead of some other database representation is because it handles concurrent actions, is easy to select specific table entries (making filtering easy to do on the server side), supports a large amount of data, and is easy to interface with through PHP. Originally we had planned to use JSON. However, drawbacks to that included that it was stored in a single file which limits concurrency and data size. It also forced us to write Javascript functions to manually get everything from the database and filter those entries.
• Our very first paper design used a separate game page to give users detailed information about the game. Eventually we took out the game page because it did not give much more information than what was presented in the game summary boxes. However, as we were implementing our page, we found that it was necessary to have some way for the user to get information about games on the news feed by simply clicking on those game links. Since a separate game page was out of the question, we decided to implement pop ups that looked like the game boxes that the user was already familiar with seeing.
• The reason we implemented a followers system instead of a buddies system is because we would not need to require mutual agreement and acknowledgement from both parties. See the first bullet in section 5 for more details.

5. Implementation Problems

• One problem we faced during implementation is that of the buddies system. Our design called for a buddies system, but while implementing we found that our system made it difficult to keep track of pending buddies, accepted buddies, blocked buddies, etc. This affects the usability because now a user can follow other users without them following the user back.
• We had problems implementing the news feed to include information about new follow events from people the user is following. In order for this to happen, we needed to keep track of the time when a user follows another user and display the most recent events. Because our system was not set up for this, we did not implement this feature. It is a step backwards for usability because information becomes less visible to the user.
• A major problem we ran into while implementing is the issue of getting information from the server side PHP and passing it to Javascript. We eventually decided to use AJAX requests and to put the data Javascript needs into the AJAX responses. For example, when a user filters a list of games, we send an AJAX request for the filtered games. We then use PHP to get those games from the database and put it in a response. It is only after the response is complete that Javascript gets the list of filtered games to display. In other words, the list of games cannot display until the response is received. This damages the latency reduction (visibility) aspect of usability because it sometimes takes a little time to receive the AJAX response, thus giving a longer response time.

Evaluation

We conducted our user test on three basketball players who regularly play pick-up games at MIT. They represent three different skill levels and are from diverse subsets of the MIT community. Our users all volunteered to participate in our evaluation. They were briefed with an overview of PickFind and then were presented with a series of tasks to accomplish. We chose not to include a demo so that we would be able to test the initial learnability of our interface. Response was generally positive, and users were curious to see how PickFind would work.

Briefing:

"Thank you for agreeing to test out our 6.813 project, PickFind. Your feedback and our observations will be vitally useful to our design process. PickFind is a website designed to facilitate the process of finding pick-up basketball games to participate in. As things currently stand, pick-up games are not guaranteed. People may show up at a court looking to participate in a game, but there might not be anyone else there. If there are other players, there is no guarantee that they will be of similar skill level, or even that they are interested in participating. By creating a system that organizes the creation, and joining of pick-up games in a community, we hope to bring people together to make more enjoyable games occur more often. We will now ask you to complete a series of tasks that cover the breadth of functionality of our website. Do your best with each task, but there are no wrong answers. Please feel free to ask us questions, but we will only answer ones that help clarify the tasks at hand. If you're ready, we'll get started now."

Tasks:

1. Login to PickFind. Register for a new account if you need one.
2. Create a game for others to participate in.
3. Filter available games to find one that meets your criteria.
4. Join or Watch a few games that you would like to participate in.
5. Leave or Stop Watching some games that you are no longer interested in.
6. View/Edit your profile.
7. Search for the user named tonystark.
8. Follow tonystark and then follow some of the people he follows.
9. View the details of a game on your Schedule.
10. Logout of PickFind.

Problems discovered and possible Solutions:

1. Cosmetic Once game is created, it takes a while for the new game to show in the active games list. - Solution: optimize the backend to make the page updates load faster.
2. Minor Registration does not verify email addresses. - Solution: run a check to make sure that email address field is a valid email string.
3. Cosmetic It would be clearer if user names were real names. - Solution: have users identified by their first name and last initial.
4. Cosmetic User expected tooltip to pop-up on hover rather than on click. - Solution: pop-up tooltips on hover using javascript.
5. Major No error message when organizer tries to set game date to a day in the past. - Solution: add a similar error message as the one that notifies invalid game times.
6. Major User is confused about Watcher status. - Solution: include a legend that describes user roles in PickFind games.
7. Minor Takes a while to figure out the color correspondence of the game boxes. - Solution: include colors in the legend that describes user roles.
8. Minor Can't figure out where to edit profile. - Solution: place the text "Edit" next to the edit icon.
9. Minor User wonders if you follow someone, do they follow you back. - Solution: make following mutual if the other person confirms.
10. Good User likes the visual information in the skill level bars. - Solution: thanks!

Reflection

It was extremely valuable for our group to carry through an iterative design process from beginning to end. We learned a great deal about the strengths of rapid-prototyping and constant user evaluation. In most of the Course VI classes we take at MIT, there is usually some process, but it is never as deliberate or as user-centered as the iterative design we performed for this project. For example, none of us had paper-prototyped before, but we'll all likely use this tactic at least once more in the future. The idea of using quick, low-fidelity early prototypes is not exactly novel, but the implementation was an eye-opening experience for us. Involving the users at each iteration really helped to focus our group on improving the design for usability. Our final implementation has come a long way from our first brainstorming session in the basement of Stata.

We initially came up with the idea for PickFind as an online planner for basketball games. We knew that we wanted to solve the problem of inefficiency in pick-up basketball organization. A good decision we made at this step in the process was not to become too attached to any single idea. As we were brainstorming, we just threw features up on the board to get things going. The beginnings of a website started to coalesce, but we didn't not rule anything out either. At this point, we had several decent ideas to build on in parallel.

Once we got to storyboarding, we put together our ideas into cohesive outlines. Each of us took ownership for a few ideas and incorporated them into one of three storyboards. If we could do it again, we would have made a better effort to come up with our storyboards independently before we shared our ideas. By pulling from the same pool of ideas, we didn't take full advantage of three different minds with three different creative abilities. In the future, we would try to think of unique ideas before consulting with each other so that our own perspectives would each be brought to the table undiluted.

In the prototyping stage, we started with a paper model, then moved on to a computer mock-up. The paper prototype surprisingly took a while to put together although it was by no means a high fidelity prototype. During user testing, it was difficult to simulate the full functionality of our site, especially the tricks we wanted to pull with javascript and AJAX techniques. Next time, we might use a smaller paper prototype to speed up the iterative process so that we could make more changes on the fly. Nonetheless, we received good feedback from our testers that we were able to reflect in our computer prototyping. With our computer prototype we were able to implement a lot more of the features that made our site more intuitive. We added several tooltips so that users could clarify the intent of forms and fields on our website. The one major challenge with the computer prototype was that we didn't have a true back end supporting all of our data manipulation.

With our final design, our group really felt like we were able to accomplish most of the design objectives that we set out to achieve. Logistically, we underestimated the code complexity of our site. If we could do it again, we would definitely use a SVN repository for our version control. Throughout the process, our observations helped guide our design to be focused on the user experience. Our group's philosophy was to try to balance the severity of the user feedback with the feasibility of the implementation. In the end, we are very satisfied with PickFind and have already started to refer some of our friends to try it out.