Page History

Design:

The form contains standard information that the dorm manager need needs 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 Information" panel will contains auto-fill information that help the user speed up the filling out taskcontains tabs which pop out buttons and search tools that help to autofill the information on the left, helping the user complete task creation quickly. One of the important decision decisions for this page is was to fit the two panels into two scroll views without overflow the information to the whole page. The separate scrolls views, so that the user can choose to scroll each panel separately without moving the whole window. It's This was necessary 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.
; being able to scroll the two panes separately allows the autofilling to be done independently of the reading position of the form, something which we and users found to be simple.

 

Figure 1: The start new task page

One of the importance decision that effect the design is the affordances of this Another important decision was regarding the affordances associated with the right panel. Many users mentioned that there wasnweren't enough affordance affordances 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 temporarily auto-fill the input boxes with grayed-out text with the auto-fill information supposed to fill in when the user hovers hovered over those that information. Figure 2 shows the result an example 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.

--------------->

Figure 4: Edit Task functionality

Implementation

The back end of this page is supported by Parse. There are three objects that currently present on the server: Resident, Task, and Room (See Figure 5). Each of this object will have a reference to the other objects so that whenever one object changes, it will also change the other. After the user submitting the task to the server, a task object will be created with each attribute corresponding to a field in the form. Then, the room and the resident will also be updated on the server to reflect the task i.e if a resident Move In to a room, the room becomes occupied and remove from the available room and the resident gets added to the system.

For the updated task, we also have to make sure that we do not created duplicate object on the server since Parse doesn't automatically check for that.

Since there are three main pages sharing the same source of information, we need to make sure that changes on one page will be reflect on other pages too. For example, if a person move out, the main page will show that as a pending task and the floor plan also have to indicate that the room is now vacant. All of the information uploading to and downloading from the server are text-based, so the retrieving time is almost instantaneous which enable the user see the current update from the server at no time. In addition, to respect the anonymity of 6.813, we also use fake data for our database which introduce some inconsistency among information. However, this doesn't present any usability problem for the user.

Figure 5: The current state of the parse server.