GR6 - User Testing
Design
Front Page:
The Campus Connect homepage is characterized by a very simple design. We decided that the main feature of this page should be the text box where users can search for the college they are interested in. Although we currently only implemented the MIT page, we added auto-complete to the search box because we thought this would be an important feature for error prevention and efficiency. We also added four boxes at the bottom of the homepage that reflect the colors of the tabs on the university-specific page. In each box, we added the name and a description of the corresponding tab, in order to introduce the user to the different section and thus increase learnability.
Tabs:
Our design is characterized by a tab layout that divides the information about each college into four different sections: Main, Student Reviews, Photo Map and Forum. These tabs are highlighted by the selection of four highly contrasting colors. Initially, we didn’t have a way to indicate which tab was currently being displayed and we found that users were getting confused about which section of the website they were in. To improve the visibility of the tab layout, we added the thick line of the same color as the tab.
Based on the user feedback from the paper prototype, we found that many students were confused about the difference between the Reviews and the Forum tab. They were unsure of where to find the information they were looking for and the majority of them went straight to the Forum when looking for current students’ perspectives since they perceived the reviews as being more formal and official. As a result, we decided to change the review tab’s name to “Student Reviews”. The feedback from the Heuristic Evaluation also pointed out that users were initially confused about why they were presented with a map in the Photos tab until they actually clicked on the pin to find the pictures. Due to this confusion, we changed the name of the tab to “Photo Map” in order to build the user’s expectations that the photos would be presented on a map of campus.
Main Tab:
The Main tab is a crucial part of the design since it is the first page the users sees about the college they are interested in. The final version of this page has four components: the quick facts, a carousel with pictures of campus, the average ratings in five categories and some recent reviews. We have the quick facts as a bulleted list so that the user can quickly skim over the facts, leading to greater efficiency. The ratings are shown as icons that represent the topic of the rating, for example footballs for sports. We chose to use icons because they are more learnable for the user and it is easier to understand what they represent (more books = stronger academics). Finally we decided to have a recent reviews section to reiterate the fact that Campus Connect is about students and their opinions.
Topic Visualizations:Our final design includes two different visualizations for the topic names in the Student Reviews and Forum tabs. Both tabs follow the same design in order to maintain some consistency in the layout. While maintaining a consistent layout, we differentiated them by setting the color of the text to be the same color as the corresponding tab color (green for Student Reviews and purple for Forum) in order to improve visibility. This was especially important since the distinction between reviews and the forum was not always very clear in the users’ heads.In our initial design, we only had the tag cloud view for the topic names. However, based on the feedback from our paper prototype, we realized that the tag cloud was effective for browsing but very inefficient when looking for a specific topic. As a result, we decided to add the list view with the topics sorted alphabetically. We also added the possibility to sort the topics in the list view since the feedback from the heuristic evaluation pointed out that it would be useful to sort the topics both alphabetically and by frequency.
Ratings:As shown in the screenshot of the Main page, a set of five ratings are displayed using icons that represent the topic of the rating. These ratings are out of five, and the number of colored icons represents the average value of the rating. We decided to use integer values for the ratings as it would make the graphic design more simple and clean; having partially shaded icons would make the rating values less visible.Our final design also includes a way for a student attending the school to add their own rating. We considered having this directly in the main page, but decided that this would be more confusing for the user so we placed the part to submit your own ratings in a separate overlay. While this might sacrifice some efficiency, it improved learnability and visibility. We also wanted the rating system to be very intuitive and consistent with other star rating systems, while still keeping the icons used on the Main page. The final rating system is an example of a direct manipulation interface since the user can drag across the icons to fill in as many “stars” as needed.Photo Map:The Photo Map tab displays a map of campus with pins on locations where photos are available. When the user clicks on the pin, they can see the name of the building and a link displaying the number of photos present for that building. When they click on the link, they can scroll through all the corresponding pictures. Originally this tab was just called Photos. After confusion from our test users about seeing a map when they clicked on photo, we changed the name to Photo Map. During user testing our users also praised our improvement on the Facebook photo overlay. They loved how you could see which pictures were coming next.Reviews Page:On the reviews page we wanted to have all the information about the user next to the review they posted. As some students might want the opinion of younger students when they want information about campus parties or if some users would relate more to students of different majors. When adding a review we wanted you to have the option of creating your own topic if you wanted to.
Implementation
Our implementation uses the Facebook Connect API in order to sign into the website. We decided to use this instead of having the user create a new username and password, seeing as it would be more efficient and easy for the user. We used Facebook Connect to obtain the user's profile picture, name and educational history. In fact, the application only lets users post reviews and ratings about their own college, so we used the educational history in order to access the names of the schools they have attended.
We also used Google Maps API v3 for the PhotoMap tab. This new version of the API did not allow integration with the Fancybox framework that we were using for overlays. As a result, we changed our design so that the images would be displayed directly in the info window that pops open when a user clicks on a pin. In addition, due to the limited documentation and examples with the new API, we were unable to get the info window to resize when the user clicks on the link to see the photos. As a result, the info window is automatically as big as the photo carousel. The new API allowed us to not have to use an API key which is good for working with partners.
For the persistence layer, we used Ruby on Rails, which unfortunately we were unable to integrate with the frontend.
Evaluation