Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Corrected links that should have been relative instead of absolute.

GR6 - 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. 

...

Search Page

Results Page

Friends Page

Design Decisions

One of our biggest design decisions was to make our interface very 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 for 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.

...

We did not provide any demo as part of our user testing.

Briefing

I Can Has HASS is a schedule planning and course selection tool aimed at helping MIT students to select humanities courses each semester.

The site allows students to search for courses matching certain criteria, look at what courses their friends are taking, and keep track of courses that they are considering taking. Students can also construct a projected schedule based on their selections.

As you complete the tasks given to you, please vocalize your thought process as much as possible. This is especially important if you become confused or frustrated, because that means you have identified a problem in our design, and telling us what you are thinking will help us fix it.

Remember that you are free to quit the experiment for any reason, at any time.

Thank you for helping us to improve I Can Has HASS!

Tasks

  1. Search for HASS classes of the following criteria:
    1. All HASS categories except 4 and Elective.
    2. No final exam
    3. Don't care about CI-H
    4. Not interfering with your other class, which meets 1-4pm on Wednesdays
    5. From departments STS, 21F, and 9
  2. Select two classes and mark them as a classes that you are considering.
  3. Compare the details of these classes side-by-side
  4. Add Mark Zhang as a friend. Add one of his classes to classes you're taking.
  5. Decide you no longer want to take one of the classes you were considering.
  6. Decide you definitely want to take the other class you were considering.
  7. Remove Mark from your list of friends.
  8. Print the classes that you have selected.

...

  • users didn’t know what all the department abbreviations stood for
  • user tried to click on “I can has HASS” logo to return to Search page
  • users did not immediately notice the legend at the top, as a result did not realize what colors meant
  • users had trouble finding the “Compare” feature
  • users were very confused that “print” link only appeared on results page
  • some users had trouble closing the course details bubbles
  • users were confused by the fact that when you add a friend’s class, the post-it disappears from the friend’s set of classes until page is reloaded. Asked, does he not have that class anymore?
  • users weren’t sure whether friends’ classes were guaranteed to match their search criteria
  • users expected results page to remain populated with results after they navigated away and then navigated back
  • users were not sure what the difference was between putting a class in the “Trash” and dragging it out of the sidebar

Based on these observations, we have compiled the following table of usability issues that could be improved in the next iteration of design.

Issue

Severity

Possible Solution

Department names not visible

Minor

Add tooltip text to department selection widget on Search page

Logo is inconsistent with expectations

Minor

Make logo a link to Search page

Legend not visible enough

Major

Move legend to a location closer to visual focus, or just print category on each class to redundantly encode this information

"Compare" feature no visible enough

Major

Use an icon to draw visual attention and add affordances for interactability

"Print" link not visible/accessible enough

Catastrophic

Add an icon, put "print" link on all pages (was actually supposed to be on all pages, this is more of an implementation problem than a design problem)

Action for closing course details not easily discoverable

Minor

Make bubble close when the user clicks anywhere else, not just when they click on the post-it again

Feedback for adding a friend's class is confusing

Minor

Keep a second copy of the post-it in the friend's box. Maybe an undraggable, faded-out image to indicate that the user has already added this class.

Details like meeting time, category not very visible for friends' classes

Minor

Organize friends' classes spatially in a more informative way, or print more information on the classes. Also need to add a legend to the Friends page in case user doesn't remember what the colors represent.

Results page does not behave as expected when user navigates away

Major

Results should persist on the page until a new search is initiated.

Purpose of "Trash" component on sidebar not clear

Minor

Just get rid of this element. Users did not seem to need the functionality it provided (removing a class from ever appearing in search results again), it was just confusing, and it took up valuable space that could be used for the "considering" and "taking" buckets.

...

We took some design risks in our project. For instance, we designed a calendar interface which allows users to select and deselect blocks of time for when they are busy. The interface is completely unique - I we have not seen one like it. It's similar to Google Calendar, but simplified because we don't need all of the functionality that they provide. Our users loved it! Everyone found it extremely intuitive to use and was able to perform the necessary actions to complete our tasks.

...