Design and Implementation
Main Page
Design
Implementation
Task Creation Page
Design:
The form contains standard information that the dorm manager need to fill out when a resident moves in or moves out of the dorm. There are two main tasks including Move In and Move Out. The information on the page changes dynamically depending on the type of the task. This page will be visited very frequently by the user, so it's designed to be efficient for filling out information. The Useful information panel will contains auto-fill information that help the user speed up the filling out task. One of the important decision for this page is to fit the two panels into two scroll views without overflow the information to the whole page. The user can choose to scroll each panel separately without moving the whole window. It's because we want to user to make good use of the auto-fill function, so they can scroll the left panel up and down while keeping the right panel statically in the view port.
Figure 1: The start new task page
One of the importance decision that effect the design is the affordances of this right panel. Many users mentioned that there wasn't enough affordance to show the auto-fill function of the information on the right. Therefore, we have decided to put a place holder on the input where the auto-fill information supposed to fill in when the user hovers over those information. Figure 2 shows the result of the auto-fill functionality.
Figure 2: Auto-fill information when hover over item.
Another important feature is when the user submits the form, if there are some missing fields, the user will receive a pop up noticing them about these fields. The user can have the option to go back and fill out those missing fields or save the form any way. Figure 3 demonstrates this functionality. 
Figure 3: Missing fields notification when submitting the form
In order to follow the CRUD model presented in class, we decided to let the user edit the task. The page will be pre-filled with the most recent updated information. Figure 4a and 4b demonstrates the edit task functionality of the website.
| There are no images attached to this page. |
---------------> 