...
One of our biggest design decisions was to make our interface very graphical visual 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 of providing an elaborate graphical interface, and an interface entirely based on text commands , which would be more efficientfor efficiency. 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. In addition, we found that a common use pattern was that people selected a small subset of courses that they were interested in and then wanted to compare them side-by-side to make their final course decisions. With a tradition interface that simply listed all results vertically, such as the current Course Catalog, users reported that they often opened two tabs and switched back and forth between them to accomplish this; by representing courses as manipulable objects we enabled users to physically group the courses they were interested in in just one window.
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.
...
- 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.
- We also used php and mySQL to implement the persistency of classes in the right sidebar. Every time the user added or removed a class from a balloon, we would use an AJAX call to update a table in the database. This increased simplicity of the interface by removing the need for a "save" button. It also increased reliability of the website because the changes were always saved as soon as the user made them.
- Friends were also implemented with a mySQL database. The friends page is pre-populated with the names of everyone who has an entry stored for "classes I'm taking" in our database. This allows for fast,efficient searching of friends.
Wiki Markup
Evaluation
Reflection
We've learned a lot over the course of the iterative design process. Being forced to sketch out three user interfaces that were significantly different from each other showed us that there really are multiple approaches to arrange the inputs and outputs to our software. The paper prototypes showed us serious usability problems early on in the process, before we became attached to any code that we might have written. Our first paper prototype had a lot of a problems, which were easily fixed in the second and subsequent versions.
...