...
Design 1 - Tabbed UI
This design is based centered 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 usewindow presenting most items required during daily use. This window – the dashboard – is composed of the following main items:
1) A tabs panel, corresponding to the classes subscribed by the student;
2) A messages panel, aggregating information from different sources (other students, instructors, system messages, etc.);
3) An assignments panel, listing the next due assignments for the student.
New classes and assignments can be created with the “+” icons, located in the tabs row and at the bottom of the assignments list.
The message panel aggregates information from different sources, such as notifications of new assignments entered by other students others (which must be accepted or declined by each student), news, reminders, and system messages.
The assignments panel lists the assignments tasks already accepted by the student. An assignment can be added to the list in two different ways: by accepting it when it appears in the message window, or by creating a new assignment via the UI. Most of the timetimes, only due assignments will be shown in the list, usually ordered by their due date or urgency.
This designed is well-suited for a web application, especially if techniques such as AJAX are used to provide high-level feedback and to improve UI responsiveness. In a typical dashboard layout, a large part of the user’s time should be spent on the main page (i.e., the dashboard). In the proposed design, frequent and simple actions will be performed in modal dialogs, while some specific tasks (especially those involving larger data entry) will be carried out in specifically designed pages.
This design also contemplates a smartphone interface, which will be used mainly to mark completed items when the student is not at a desktop computer.
This design is centered on a main view that presents most of the items required during daily use. This view – the dashboard – is composed of the following main items:
- A tabs panel, corresponding to the classes subscribed by the student;
- A messages panel, aggregating information from different sources (other students, instructors, system messages, etc.);
- An assignments panel, listing the next due assignments for the student.
New classes and assignments can be created with the “+” icons, located in the tabs row and at the bottom of the assignments list.
The message panel aggregates information from different sources, such as notifications of new assignments entered by others (which must be accepted or declined by each student), news, reminders, and system messages.
The assignments panel lists the tasks already accepted by the student. An assignment can be added to the list in two different ways: by accepting it when it appears in the message window, or by creating a new assignment via the UI. Most of the times, only due assignments will be shown in the list. These operations are performed in specifically designed dialogs, usually ordered by their due date or urgency.
This designed is well-suited for a web application, especially if techniques such as AJAX are used to provide high-level feedback and to improve UI responsiveness. In a typical dashboard layout, a large part of the user’s time should be spent on the main page (i.e., the dashboard). In the proposed design, frequent and simple actions will be performed in modal dialogs, while some specific tasks (especially those involving larger data entry) will be carried out in specifically designed pages.
This design also contemplates a smartphone interface, which will be used mainly to mark completed items when the student is not at a desktop computer.
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. |
...