You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 28 Next »

Table of Contents 

Scenario

It's the second day of the new semester, and Sally Student decides that it's time to get organized. She loads up HAAG, and goes to add a new class. She types in 6.005, but notices that someone else has already added the assignments for that class. She subscribes to this feed, saving her the work of entering all of the assignments. Sally also wants to keep track of her assignments for 6.813, but it appears that no one has created an assignments feed for this class. Sally decides to spend 10 minutes adding all of the assignment for the term, and then makes the feed public for others in the class. Sally now has all of her assignments in one location, and saved herself a bit of work.

A few hours later, after finishing her first pset, Sally goes on her laptop and marks that assignment as done. She decides to include a personal milestone for the 6.005 project, and creates a private assignment, hidden from everyone else.

The next day, after finishing a pset with a friend, Sally visits HAAG with her iPhone, and crosses off her assignments list the pset she just finished. She can see that she doesn't have anything else to do until the next week, and decides to go watch tv instead.

Design 1 - Tabbed UI

This design is based on a main window that uses tabs to organize classes and two lists showing incoming messages and the student’s next assignments. This layout forms a dashboard with the items that will be interacted with during daily use. 

The message panel aggregates information from different sources, such as new assignments entered by other students (which must be accepted or declined), news, reminders, and system messages. The assignments panel lists the assignments already accepted by the student. Most of the time, only due assignments will be shown, ordered by their due date or urgency.

New classes and assignments can be created with the “+” icons located in the tabs row and at the bottom of the assignments list. These operations are performed in specifically designed dialogs. 

Storyboard

Sally decides to get organized for the semester that just started. She logs into Haag and is presented with the dashboard; for the moment, it is mostly empty except for a welcome message and a sample assignment prompting her to read the application FAQ.

She decides starts to start with course 6.005 – Elements of SW Construction, and clicks the (+) icon to add the new class. In a dialog, she is prompted the class name and whether she wants to keep its feed public (default) or private.

As she enters the course name, she is told that a class with a similar name already exists. After viewing its details and seeing that it was created by her friend Jill, she simply subscribes to this class.

As a result, all assignments on that feed appear on her messages list. She is given an option to add all assignments at once or to review them individually. She decides to add all assignments, knowing that she can always edit or delete individual items later.

Verifying that no class feed exists for 6.813, Sally decides to create this new class and enter the corresponding assignments into Haag. Now she faces the most laborious in the entire application. With a list of assignments in hand, she need to feed them to the system. The UI is designed to make this task very efficient, with no need to navigate back and forth while adding each new assignment. To create a task, she just needs to click a date in the calendar and type in a short description. When she clicks the button Add to preview list, the new assignment is included in the preview panel on the right. At his moment, her new assignments are not available for everyone to see. Only when she clicks the Done adding assignments button will the new entries be added to the class feed.

Now Sally just finished a Pset, and wants to cross that assignment off her list. On the assignments panel, she marks the checkbox and the assignment appears crossed of in the UI. The completed assignment will linger around in the list for a while (to give the user a sense of accomplishment), but the next time she logs in it will not be shown (unless she explicitly asks to see all assignments).

The next day, Sally finishes another Pset, but she is not at her laptop right now, so she picks her smartphone and uses Haag to cross that assignment off the list. She sees that there are no assignments due that week and decides to watch some TV.

Analysis

Learnability,
positive points

  • The tabs metaphor used for classes makes it clear how to switch between different courses; 
  • The "+" icon on the last tab is easily perceived as a way to add a new class; 
  • Names from the problem domain are used whenever possible (class, assignment, student, etc.); 
  • The preview panel for new assignments offers feedback allowing a user to learn the effect of each field when creating an assignment;

Learnability,
negative points

  • It may be unclear to use the same icon (“+”) for both actions:
    • subscribing to a class when it already exists;
    • creating a new class when it does not yet exist;

Efficiency, 
positive points

  • The most burdensome task is handled in a carefully designed dialog, optimized to require no gratuitous input or commands;
  • When subscribing to an existing feed, an option allows adding all assignments at once;
  • Reminders are created and sent automatically by the system, based on criteria such as due date, difficulty, and average time to complete;

Efficiency, 
negative points

  • When many assignments exist, it is not possible to see all of them in a single page (which would be useful to compare and prioritize assignments);
  • The smartphone application layout may be practical only for marking completed assignments;

Safety, 
positive points

  • New assignments are not immediately committed to the system. Instead, they are kept in a preview list, where the user can check their appearance before submission;

Safety, 
negative points

  • After dismissing a message, there should be a way to retrieve it or see its contents if wanted; 
  • After an assignment has been shared online, it may be difficult to undo any changes.

Design 2 – Calendar View

This view uses the metaphor of a calendar. The main view displays a large calendar, with color-coded assignments visible at a glance. The search function shows a mini-calendar for each result, allowing the user to quickly asses if it has correctly-timed assignments. The assignment creation view allows the user to select a day from a calendar, allowing the user to work with the model (psets that are due every Friday, for example, become very easy to input).

Design 2 – Calendar View

This view uses the metaphor of a calendar. The main view displays a large calendar, with color-coded assignments visible at a glance. The search function shows a mini-calendar for each result, allowing the user to quickly asses if it has correctly-timed assignments. The assignment creation view allows the user to select a day from a calendar, allowing the user to work with the model (psets that are due every Friday, for example, become very easy to input).

Storyboard

Sally logs at the start of the semester, and decides to get organized. At the moment, she sees a blank calendar, as she hasn't added any assignments yet. She selects the + button next to classes, and goes to add her first class.

She searches for 6.005, and sees that Tim the TA has already created a feed for this class. She selects it, adding all of the homework with the click of a button.

The calendar view allows her to confirm that it's the right schedule: she remembers that 6.005 has psets due every Tuesday, and the pattern is prominently displayed.

Sally goes to add her second class, 6.813. She is the first to input the assignments for this class, so she opts to make it public and let others subscribe. She quickly adds all of here assignments from this one page, selecting the due date from the calendar. After a few minutes, she has added everything for 6.813

Sally now has the assignments for her classes organized. She can easily see what she due over the coming weeks, and can, with a glance, see when she will have a busy week. She can use the arrows to view the next month or go back and see old assignments.

A little while later, after Sally has finished her first pset for 6.813, she goes on and clicks on it. This marks it as finished, and it gets crossed out.

Sally decides to add another assignment to her 6.813 calendar. This is a personal reminder to study for the nanoquiz, so she decides to make it a private event. No one else will see it, but she can still cross it out when finished with it.

Later that night, Sally finishes another pset. She is away from her laptop at the moment, so she goes on her iPhone. She marks the pset as finished, and can also see what else she has due next week.

Analysis

Learnability -
positive points

  • Easy to see everything at once
  • Color makes it clear what assignments belong to each class
  • Combining search & creation makes it easy for users to find pre-entered results

Learnability -
negative points

  • No obvious way to interact with scheduled assignments
  • Combining search & creation might be confusing for a user who explicitly knows what they want

Efficiency -
positive points

  • Quickly select the date when adding assignments -- calendar format is natural
  • Easy to see if a pre-existing class has the right assignments
  • Month view allows user to easily get a visual feel for their schedule

Efficiency -
negative points

  • Removing an assignment takes 2-3 actions
  • Have to switch between months, instead of seeing everything at once
  • No way of creating repeating events

Safety -
positive points

  • When creating assignments, calendar allows user to easily & visually check the correct date
  • Seeing due dates in search allows user to confirm that it's the correct class

Safety -
negative points

  • To change an event after creation, it has to be deleted and remade
  • Could accidentally make something public instead of private
  • No way to change the name of a class

Design 3 – Sliding Panels

This design is centered around four panels:

  • Task List - Displays upcoming assignments in chronological order, optionally filtered by feed, with assignments past their due date at the top of the list. From here, users can mark assignments as completed or skipped.
  • Add Assignments - Lets users add assignments to public class feeds or the users private feed(s)
  • My Subscriptions - Lets users see the feeds they are currently subscribed to, along with recent edits for each.
  • Find Classes - From here users can search for class feeds, or create a new one.

Users can click on the label for each panel to switch to that view, or drag the label in order to see two views simultaneously.

Storyboard

  • No labels