...
Task: Search
When Miak first enters the site, he sees a bunch of tags like “HASS-D 4” and “NO FINAL” scattered around the screen. There is a marked area at the center of the screen where he can drag and drop tags with the search criteria he wants. Ben selects “HASS-D 2”, “HASS-D 4”, “HASS-D 5”, “CI-H”, and “FITS MY SCHEDULE”
When Miak drags the “FITS MY SCHEDULE” tag to the center of the screen, a pop-up window labeled “My Schedule” appears with a grid divided into hour-long slots for each day of the week. Miak clicks on the slots for which he already has a prior commitment, marking them with an “X”. When he makes a mistake, he simply clicks on a slot again and the X disappears.
<second image here>
When he has finished, he clicks “OK” and the window vanishes. He’s satisfied with his selected criteria, so he clicks a button at the bottom of the page to begin his search.
...
Eventually, Miak decides that Bioethics (STS.006) looks interesting, so he drags its balloon into a bucket at the bottom of the screen for classes that he plans to take.
He also thinks 21H.467 looks interesting, but he isn’t sure if he’ll have time for it, so he drags it into a second bucket for classes that he’s interested in.
<third image here>
Task: Share
Miak wants to know what classes his friends are taking, so he uses the menu to navigate to the “Friends” page. He types the Athena names of his closest friends into a search bar to add them to his list of friends. The names of all of Miak’s friends who also use I Can Has HASS appear on the page, followed by the classes that they have flagged as “taking” or “interested in.” Miak’s own “Taking” and “Interested In” buckets are still visible at the bottom of the screen.
Miak sees that his good friend Alyssa P. Hacker is taking Rhetoric, which is also a category 2 HASS. He decides that he would rather take Rhetoric with Alyssa than take Bioethics by himself, so he drags “21W.747 Rhetoric” from Alyssa’s list into his “I plan on taking” bucket. He drags Bioethics out of the bucket and it disappears with a puff of smoke.
<fourth image here>
Task: Sync/Save
Finally, Miak uses the menu to navigate to the “Export Schedule” section of the site. It displays the classes that he plans on taking (21W.747 Rhetoric) and three options: Email these classes to me, Print my Schedule, or Sync with Gmail. Miak clicks “Email” and the name of the class, along with its description and a link to its Stellar site, is sent to his MIT email address.
If Miak returns to the site, it will recognize his MIT certificate, and his list of friends and class choices will be saved for him.
<fifth image here>
Learnability
This design makes heavy use of drag-and-drop operations. The use of drag-and-drop has been growing in popularity so many users should feel comfortable with it, especially those who are familiar with the Mac operating system. For those familiar with them, drag-and-drop interfaces are among the most intuitive and easy to learn because they mirror the way we manipulate things in the physical world. However, drag-and-drop interactions are still not nearly as prevalent as the more traditional point-and-click paradigm, and therefore may pose some learnability problems, especially for users who are not as familiar with drag and drop. For this reason, we will need to take extra care to convey clear dragability affordances, such as changing the mouse pointer to a hand when it is hovering over a drag-able object.
...