GR2 - Designs

Scenario

Miak Zan is searching for HASS classes for the upcoming spring semester. He is an intelligent and exceptionally good-looking sophomore who breezed his way through his first three semesters, taking classes that matched his interests without worrying much about HASS requirements. But his advisor has warned him that he will be in Great Danger if he doesn’t take a CI-H this semester, and Miak realizes that the time has come to buckle down and get his HASS in gear.

Miak has previously taken several HASSes including Advanced Fiction Workshop, and Intro to Acting. He is currently anticipating 4 classes in course 6, and needs his HASS classes to fit into his already established schedule. He would like to take multiple HASS classes if there are more than one that interests him, but he needs at least one class that fulfills his requirements. To help him figure out which classes to take, he decides to try a helpful HASS picker tool called “I can has HASS”.

Miak begins by running a search with the following options: HASS-D category 2, 4, or 5; CI-H yes; open-times: MWF 9-11, MW 12-2, TR 12-1, MTWR 3-5. The application provides him with all the classes fitting this description.

Miak sifts through the list. He sorts the classes by rating and number enrolled, and organizes them by various constraints (department, topic, time) to help him focus his search. He views the class descriptions of many classes. Eventually, he selects Bioethics, which is HASS-D 2 and a CI-H. He flags Bioethics as “taking this term”. He also flags several other classes in his result set as “interested in.”

There is nothing good on TV, so Miak decides he wants to see what his friends are taking. He updates his friends list on the site by adding all his closest friends.

Some of his friends also use I can has HASS, and Miak looks up what classes they are taking. He finds several additional classes he thinks are interesting and flags them for the future.

The application automatically saves Miak’s selections. Miak prints out a schedule of his classes this semester and leaves the site feeling emotionally and spiritually fulfilled.

Designs

Design 1: Weekly calendar

after "Save" is clicked...

Learnability

• The interface for creating schedule blocks is very similar to calendar programs, such as Google Calendar, so users who have used similar programs can quickly be able to learn how to use this interface.

Visibility

• Almost all information of interest (search settings, schedule, search results, class details) are visible in a single screen. This makes it very easy for users to quickly refer to any piece of information they might need.
• It is easy to quickly browse through results and see all the relevant details (class description, HKN rating, etc)

• For new users this large amount of information may be difficult to process, and it may not be clear where they should focus their attention.
• It is hard to compare two classes; for example, to compare a class at the top of the results list to a class at the bottom, this would require rapidly scrolling back and forth between the two results.

Efficiency

Error prevention

• Because the calendar has a constant visual representation, you get immediate feedback on how your schedule looks when you click and drag.
• It supports CRUD, by allowing you to create new schedule blocks, update previously created blocks, and deleting blocks.

Design 2: Text-based interface

Learnability

• Learnability for this interface is generally low, since users have to keep knowledge of commands and valid tags in their head, rather than having that knowledge available "in the world"
• However, its resemblance to a Unix shell may increase learnability for users who are familiar with Linux or who use the command line frequently

Visibility

Efficiency

• For expert users, this interface is extremely efficient, since all of the input is done on the keyboard.

Error prevention

Design 3: Balloons

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.

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.

Task: Sift
Miak’s search results are displayed as a collection of objects (“balloons”) floating around the screen. They are labeled with their course number, and when Miak clicks on a balloon, a small dialog box appears nearby with more information about the class. The dialog box stays visible until Miak clicks an ‘x’ in the corner to close it.

Miak is a little overwhelmed by all his results, so he selects “Sort by HASS category” from a list of sorting options at the top of the screen. In response, the balloons self-segregate into 3 labeled categories: HASS-D 2, HASS-D 4, and HASS-D-5.

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.

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.

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.

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.

Another possible learnability issue is that the menu options may not make it completely clear what tasks a user can accomplish in that section of the site. For example, it is not obvious that a user can edit their class choices within the “Friends” tab.

Visibility

This design makes some visibility tradeoffs. On the one hand, displaying results as free-floating “balloons” that can be dynamically sorted makes it very easy to see large trends, such as how many departments are represented or how many results there are from each HASS category. Another visibility advantage of this design is that it makes it very easy to compare two results side-by-side. However, this comes at the expense of being able to quickly browse through results. In order to see the details associated with a particular result, the user needs to click on that result, which can become tedious. In addition, if the user has details for many results open, then the screen may become crowded, further diminishing visibility.

Efficiency

This design is not very efficient, due largely to the visibility problems described above which make it difficult for the user to quickly browse results. In addition, when there are many results the balloons may become very small, greatly increasing the amount of time needed for the user to click on them according to Fitts’s Law. Finally, the efficiency also suffers from the heavy use of drag and drop interactions, which take much more time and require more mouse movement than either clicking or using the keyboard.

Error prevention

Although the design does not include many barriers to prevent users from making errors, most tasks are easily reversible so that error correction is quite good. If a user changes their mind about a class that they have selected or a search tag they have chosen, they can simply and painlessly drag it out of the selection area to get rid of it. And in the “search” and “sift” views, if a user accidentally removes a class or a tag, it is readily available to be selected again. However, if a user removes a class while in the “Friends” view (as Ben does in the above storyboard), an accidental deletion could mean the user has to redo their entire search to find the class again. In that situation, we may want to present him with a confirmation dialogue box.