GR3 - Paper Prototyping

Prototype photos

Iteration 1

Search

Entering your conflicts

Friends

Browse search results

Export classes

Iteration 2

Search (with schedule for conflicts at bottom left)

Browse Search Results

Friends Page

User Testing In Progress

Briefing

[Note: all of our test users were part of our target user population, i.e. MIT students, so we did not feel it necessary to provide detailed background information on the MIT HASS requirement or designation system.]

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!

Scenario Tasks

1. Search for HASS classes of the following criteria:
   1. No final exam
   2. Don't care about CI-H
   3. Not interfering iwth your other class, which meets 1-4pm on Wednesdays
   4. From departments STS, 21F, and 9
2. Select a class and mark it as a class that you are considering.
3. See what classes your friends are taking. Add one of Ben's classes to classes you're taking.
4. Email your schedule to yourself.

Observations

General comments

• Test users were surprised by the drag-and-drop interactions, and most tried other interactions (such as clicking) before discovering how to mark classes as "interested in" or "definitely taking." Affordances will definitely be really important here.
• However, after realizing that classes could be dragged-and-dropped, users 1, 2, and 4 all exclaimed "Cool!" --> user satisfaction++
• Although all testers were MIT students, none of the users knew what the HASS-D numbers stood for, and most didn't know what all the department numbers were

Iteration 1 observations

User test 1 (tasks not used):

Search page

• user selected a few departments, reasoning was “I like course 6”, which doesn't really make sense because these are hass classes and there is probably at most one course 6 hass class. He didn't understand what all of the departments were there (was probably confused by the three letter ones like “STS” and such that are not described). He was puzzled why some of the department numbers were underlined and others weren't.
• user next goes over to the categories but has no idea what they are (they are basically listed as 1, 2, 3, 4, 5, Language, and Elective).
• user is confused about selecting a schedule
• user is confused about how to actually search. The search button was very large, but he instead clicked the “Browse” button on the top navigation bar. The button he clicked brings him to the search results, but he was very unsure of whether it would or not.

Search results page

• the user clicks on 21W.747 and 21F.027 and an info card pops up for each of them.
• the user drags one of them to the “I plan on taking” box and it behaves as expected
• navigates to friends page

Friends page

• user is unsure of what he can search for in the search box – can you search for classes there?
• doesn't know what to do on friends page

User test 2 (tasks not used):

Search page

• user clicks not CI-H and doesn't care about final exam
• user doesn't know what the HASS category numbers are, suggests that we label what each one is
• user selects category 3
• user doesn't care about departments or schedule, so proceeds to the search results page.

Search results page

• user wants to know more about 21H.467, like the name. Once the user clicked on it, the name and info popped up, but it's a history class and she was not interested in taking a history class at all. She mentioned that it would be useful to see the name before clicking on it, because she never would have clicked on it if she saw the name of the class ahead of time.
• when she noticed that there was a message saying you could drag and drop classes to the right sidebar, she remarked “oh!”
• user guesses that any classes dragged to these boxes will stay there (will be persistent) – user is correct
• user wants to look at the description again when it's in the box – this operation is allowed
• “what does finalize mean?” - at the time, the “my classes” page was called “finalize” - this was very confusing to people

User test 3:

Task 1

• User wants to see the names next to the numbers on the HASS categories list.
• User attempts to use calendar feature
  • user tries to click on the small icon – calendar pops up
  • user suggests it would be useful to have a “cancel” or “X” button
• user asks why some of the hass departments are underlined
• For course numbers, need tooltips

Task 2

• User finds it annoying that if he/she wanted to change an option using the left sidebar, that the departments are checkboxes inside of a listbox.
• user asked “Can I save searches?”
• user wants a link to ocw from each course's description – “is stellar necessary?”
• user asked “do I drag it over?”

Task 3

• User suggests that it would be useful to keep the schedule up/visible somewhere on the screen
• Might be useful to overlay other people's schedules
• Friends page needs last names as well

Iteration 2

User test 1:

Task 1

• User found all of the options just fine, and found the huge “Search” button

Task 2

• User finds the boxes on the side of the page and uses the correct motion (drag and drop) to place the classes into the boxes.

Task 3

• User clicks on friends button and finds friends

Task 4

• User found the email classes button easily

User test 2:

Task1

• User clicks all of the options properly
• User wasn't sure if they were supposed to repeatedly click or click and drag for the scheduler
• User didn't see the department option at first – confused it with the hass category
• Once the user found the department chooser, they found it easy to select the correct choices to complete the task

Task 2

• User completed this task extremely easily

Task 3

• User found the friends button easily
• To add a class that someone was taking, user guessed “I guess I click and drag”

Task 4

• Found the email option somewhat quickly

User test 3:

Task 1

• User found final and CI-H options easily
• User found departments easily, but had some trouble finding category 9 because it's not in numerical order (departments are sorted by HASS-ness, i.e. the 21's are at the top, etc)
• User did the calendar task easily

Task 2

• User first clicked on a class (more info about the class appeared), then figured out that they could drag and drop it to the boxes

Task 3

• User completed this task easily

Task 4

• User completed this task easily

General thoughts on things to change from second iteration:

• on friends page, instead of having search at top, but it lower on te page.
• maybe put “ ” symbol in corner of class post it notes as a more info popup- currently there is no affordance to click on the post it notes.
• What about a trash can box for classes you definitely don't want to take?
• If you hover on 21M.606 (small post its) it should show name/more info
• Names of classes should appear next to the class number on the large post it notes.
• Only put the 21's at the top of the department list, everything else should probably just be in numerical order

Prototype iteration

Changes from iteration 1 to 2:

• New layout for search page - moved the calendar/scheduler to the top right hand side and changed the UI for the departments. Instead of taking up half the page with the checkboxes for the departments, we changed it to a "Choose..." drop down menu that can be used if necessary, and we moved it to the bottom. We also rearranged the order of the checkboxes to make the more common departments at the top (such as 21L, 21M, 21A, etc).
• New layout for friends page - search bar is in the middle instead of the left sidebar
• Eliminated the left sidebar which was used to easily change options that you searched for. Instead, made the "search" and "results" pages easily accessible to go back and forth quickly.
• Added a right sidebar which displays classes you are considering and classes you are taking. Also displays your calendar/schedule at the top. At the bottom, has options to email your schedule or share it via different communication methods - this replaces the "export" or "my classes" page.
• Changed wording of "Browse" to "Results", and put it right next to the search.
• Added the names of categories 1 through 5 because many users did not know what the categories were.
• Changed friends' classes to sticky notes so that they have affordances to be dragged to the right sidebar.