GR5 - User Testing

Design

Final Design
In our final design, we divided our website into three pages: Search, Results, 
and Friends. These pages were navigated with a tab interface. The search page 
allowed users to input their search criteria. It included a widget that allowed 
users to efficiently select times for which they were busy, as well as a drop 
down menu for selecting specific departments. The results page displayed the 
results of their search in a gigantic table which was organized by starting-time 
of the class. Finally, the friends page allowed a user to search for their 
friends and see what classes they were taking. 
Our final design was very graphical. We used colorful post-it notes to represent 
classes. These post-it notes were draggable, and we had several windows in a 
sidebar on the right which users could drag the classes into. These windows 
represented classes the user was considering, that they planned on taking, and 
that they were not interested in. The contents of these windows were saved for 
the user, so they could return to the site and view their selections at any 
time. Users could drag both the classes on the Results Page, and classes their 
friends were taking on the Friends page. We also had a feature that allowed 
users to print their selected classes.
Design Decisions
One of our biggest design decisions was to make our interface very graphical and 
to incorporate drag-and-drop operation. Our reasoning was that this scheme has 
been growing in popularity, so it would be familiar and comfortable for many 
reasons. Our alternatives were a more conventional interface that simply 
displayed all the results in a list instead providing an elaborate graphical 
interface, and an interface entirely based on text commands, which would be more 
efficient. The results from our paper prototyping and our heuristic evaluation 
made us more confident about this design decision, because everyone seemed to 
like the colorful, draggable interface.
Much of our website's layout and organization was also guided by our 
evaluations. Through our paper prototyping, we decided to have a small drop-down 
menu for department-selection instead of taking up the whole page. We were 
originally going to have a "My Classes" page which had features like printing 
classes, but we instead just moved that to the right sidebar. 
Other design decisions focused on visibility of information. We chose to make 
pop-up info boxes appear when the user clicked on classes, include the class 
names on the post-it notes, and include a legend for the HASS categories. We had 
originally not included these for sake of simplicity, so that the interfae would 
look cleaner. However, an application that works with classes inherently handles 
lots of information, and through our evaluations, we found that users 
unanimously requested the information we had hidden. So we included it at the 
risk of making the page appear more cluttered. 
There were many other minor decisions, like making the mouse a finger-icon when hovering over the draggable post-its. Needless to say, the evaluations were invaluable in improving our design and finding flaws.

Final Design

In our final design, we divided our website into three pages: Search, Results, and Friends. These pages were navigated with a tab interface. The search page allowed users to input their search criteria. It included a widget that allowed users to efficiently select times for which they were busy, as well as a drop down menu for selecting specific departments. The results page displayed the results of their search in a gigantic table which was organized by starting-time of the class. Finally, the friends page allowed a user to search for their friends and see what classes they were taking. 

Our final design was very graphical. We used colorful post-it notes to represent classes. These post-it notes were draggable, and we had several windows in a sidebar on the right which users could drag the classes into. These windows represented classes the user was considering, that they planned on taking, and that they were not interested in. The contents of these windows were saved for the user, so they could return to the site and view their selections at any time. Users could drag both the classes on the Results Page, and classes their friends were taking on the Friends page. We also had a feature that allowed users to print their selected classes.

Design Decisions

One of our biggest design decisions was to make our interface very graphical and to incorporate drag-and-drop operation. Our reasoning was that this scheme has been growing in popularity, so it would be familiar and comfortable for many reasons. Our alternatives were a more conventional interface that simply displayed all the results in a list instead providing an elaborate graphical interface, and an interface entirely based on text commands, which would be more efficient. The results from our paper prototyping and our heuristic evaluation made us more confident about this design decision, because everyone seemed to like the colorful, draggable interface.

Much of our website's layout and organization was also guided by our evaluations. Through our paper prototyping, we decided to have a small drop-down menu for department-selection instead of taking up the whole page. We were originally going to have a "My Classes" page which had features like printing classes, but we instead just moved that to the right sidebar. 

Other design decisions focused on visibility of information. We chose to make pop-up info boxes appear when the user clicked on classes, include the class names on the post-it notes, and include a legend for the HASS categories. We had originally not included these for sake of simplicity, so that the interfae would look cleaner. However, an application that works with classes inherently handles lots of information, and through our evaluations, we found that users unanimously requested the information we had hidden. So we included it at the risk of making the page appear more cluttered. 

There were many other minor decisions, like making the mouse a finger-icon when hovering over the draggable post-its. Needless to say, the evaluations were invaluable in improving our design and finding flaws.

Implementation

• We implemented the backend with php and a mySQL database. All of the class data is stored in the database. Using mySQL was very useful because it makes searching for different criteria very quick and efficient.
• We chose scripts.mit.edu to take advantage of features such as certificates login. The certificates allow us to save the sidebar data to a particular username, so that no login is needed to use the site.

...