Design
Navigational Buttons
For our final interface design, we decided to stick with our initial idea of placing the buttons used for navigation along the top of the screen in “chronological order”, meaning from left to right, we have previous classes (past), current registration (present), and required courses (future).
Both the comments from our TA in GR4 and the comments from our classmates in HW2 stated that we needed to rework the navigational buttons because they were too difficult both to read the text and to see the current status of the data below the buttons. As a result, we made dedicated buttons with a colored background behind them. When not active, the buttons have a red background. When active, the buttons have a green background. This makes the instantaneous status more visible to the user as shown below:
Above: User is currently browsing all classes.
Above: User is currently browsing previously taken classes.
Search
Another design decision we made came from our users in testing and from our classmates in HW2. In our GR4, we hadn’t done anything with capturing keyboard strokes to use in navigating the interface. For GR5, we enable searching by hitting the enter key. Users mentioned that it is a standard for websites to complete a search query by striking the “Enter” key (gmail search, etc.) so we added this functionality (in addition to being able to search by typing in a query and clicking on the “Search” button). Below is a screenshot of a user searching for 6.005:
Displaying Course Information
Our users in testing mentioned that we need to have a better method of displaying the significance of the data they are viewing. Specifically, we needed to (a) always show users the status of a class whenever it is displayed (already taken, currently registered for, not registered for) and (b) show users when course information is being viewed. Below are screenshots showing the decisions we made for both:
Above: When all courses are listed, the buttons to the right of the course name reflect the status of the class (“Completed” if taken already, “Remove” if class is already in current registration, and “Add” if class can still be taken).
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Above: Course information about 6.00 has not yet been loaded (by selecting the “plus” sign)...
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Above: Course information for 6.00 has been loaded.