User Testing

Design

Describe the final design of your interface. Illustrate with screenshots. Point out important design decisions and discuss the design alternatives that you considered. Particularly, discuss design decisions that were motivated by the three evaluations you did (paper prototyping, heuristic evaluation, and user testing).

	Selecting Students Users can dynamically select groups of students, by toggling the icon box on the far left for a particular student. Originally each box consisted of only the name of a student but from the feedback we got during the paper prototyping, we decided to add the student’s picture to make the interface easier to learn. We also used to have a button called "Class", that would select all the class. But from the feedback we got we decided to change it to a small selection box which selects/unselects the entire class. From our paper prototype testing we also learned that users were having trouble understanding who they were communicating with, so we decided to add a context window to the left of the tabbed frame, displaying the pictures of the selected students. Hovering over a student’s profile picture in the context window, provides extra information about the student. After the heuristic evaluation we thought it was important to add a message icon beside a student’s name in the left menu when a teacher had a new message from that student’s parents.
	Messages This page allows teachers to have different conversations with parents or groups of of parents. Originally, it wasn’t divided into conversations. When the user would select several students, all the messages related to those students would appear in the window. With those students selected, the user could send a message to those student's parents, which they would receive individually, without knowing who the other recipients were. This seemed to be very hard to learn, so we decided to divide messages into conversations. Now, when several students are selected all the conversations appear listed at the left of the messages window. The top conversation is that corresponding to the selected students. Hovering over a conversation provides extra information about the student. From the user testing, we learned that it is still hard to understand how the conversations are related to the selected students. To solve this we will add a title to the list of conversations, to clarify what they are. We have also decided that we will add the ability of labeling conversations so it is easier for teachers to remember what each group is (study group, team, etc). Finally, we are also going to edit the page so that when the user clicks on a notification, the new conversations (that triggered the notification), appear first in the list of conversations, and so the notification button disappears when the conversations are read (and not when the notification is button is pressed).
	Calendar The calendar page allows teachers to post events. Originally, it was designed so that teachers would also post their availability. However, we learned from the paper prototype testing that users have their own calendar platforms for keeping track of their events and their availability. We therefore decided to limit this page to a page where teachers would post events they want parents to see (exams, excursions, meetings, etc ) The user can create a new event for the selected students by clicking on a day. A popup form appears, where the user must specify an event title, and can determine a start date/time and end date/time. The user can also further details for the event such as reminder times and event details. By default, the date displayed in the date fields is the day the user clicked on. And the time fields are also populated if he created the event from the week or day view. A user can edit attributes of an event by simply clicking on it. The user can modify any field and then click ‘Save’ to make the changes. No matter what students are selected that moment, the event continues to have the same participants as before being edited. When the form displaying the event details is open, the user can click ‘Delete’ to delete the event. The event is deleted for all the participants. By putting his mouse over an event the user can see the pictures of the event attendees. There is a legend at the bottom of the page which explains what the color of an event represents. We decided to add this after the feedback we got from the heuristic evaluation. We designed it is so that you can hide it (experienced users who already know what the colors mean do not want to see the legend any more). Lastly, we still rarely experience an error where the calendar doesn’t load. Simply refreshing the page takes care of the problem.
	Grades Users can send grade reports to the parents of the students selected by clicking on "New Grade Report". This brings up a form where the user can specify the assignments he wishes to send, add comments to the report, and add SMS or email as additional means to submit the report. Users can also edit the grade book in line by clicking on the score they want to change. This makes it safer as the teacher can correct grades she entered wrong/changed. Originally the table colors were different, but after the feedback we got from the heuristics analysis we decided to change them and to add a legend to the page. We also made the design of the reports form consistent with the calendar form. Finally, after our last testing, we are looking forward to adding some extra features that provide more feedback to the user, such as a button that shows all the reports the user has submitted.

Implementation

Implementation:
The implementation of check mark is based on a few key technologies that help string everything together. The backend is deployed on top of node.js. We use socket.io for a web sockets transport layer and the jade templating language to dynamically render html. On the client side, our javascript code is built ontop of the jQuery framework and we bring in a couple of other libraries. The calendar is primarily implemented through the FullCalendar library and there is an additional DatePicker library that we use to help with event creation and editing. The entire interface is supported by Twitter's Bootstrap which we use to establish the layout, a lot of the styling and iconography, and some small javascript based animations. Our server is hosted on the AppFog platform.
The implementation of data transportation is slightly peculiar. All objects are stored as javascript classes which are utilized by both the front end and the backend. However, to transport the classes from the backend to the front end, we convert the classes to json objects--which strips all function calls. This JSON representation is then passed to the frontend and the frontend parses this and adds all of the data back to the new classes on the front end. Although unconventional, the advantages of this are obvious. We have 1 easy to use class file for each type of object used in our implementation, both for the backend and the front end. Updates to this one file are seen on both sides. We simply had to write very general data parsing -> class creation functionality and the rest worked seemlessly.
The implementation of CheckMark is based on a few key technologies that help string everything together. The backend is deployed on top of node.js. We use socket.io for a web sockets transport layer and the jade templating language to dynamically render html. On the client side, our javascript code is built on top of the jQuery framework and we bring in a couple of other libraries. The calendar is primarily implemented through the FullCalendar library and there is an additional DatePicker library that we use to help with event creation and editing. The entire interface is supported by Twitter's Bootstrap which we use to establish the layout, a lot of the styling and iconography, and some small javascript based animations. Our server is hosted on the AppFog platform.

The implementation of data transportation is slightly peculiar. All objects are stored as javascript classes which are utilized by both the front end and the backend. However, to transport the classes from the backend to the front end, we convert the classes to json objects--which strips all function calls. This JSON representation is then passed to the frontend and the frontend parses this and adds all of the data back to the new classes on the front end. Although unconventional, the advantages of this are obvious. We have 1 easy to use class file for each type of object used in our implementation, both for the backend and the front end. Updates to this one file are seen on both sides. We simply had to write very general data parsing -> class creation functionality and the rest worked seamlessly.

Evaluation

We conducted user testing with the following users:

Sophia Teacher: A teacher for middle school students with special needs in a low-income community in Philadelphia (sister of group member)
Tricia Teacher: An elementary school teacher at a school in Barcelona (aunt of group member)
Emily Teacher: An educational coordinator at the Stata Childcare Center (visited in-person)

Prior to user testing we introduced our users to our problem statement, told them they would be testing our website as teachers - which is their profession - and provided users with a website briefing (below). We then presented them user tasks (below) to complete, one at a time. We encouraged them to talk out loud and explain what they were doing & provide feedback during testing, which we took notes of. This helped us identify usability problems with our interface and suggest potential solutions in an evaluation (below).

Website Briefing:

Selecting Students

Users can dynamically select groups of students, by toggling the icon box on the far left for a particular student

Sending Messages

Users can select the text input, type a message, and click send (or hit enter) to send a message to all the currently selected students.

Creating Events

The user can create an event by clicking on a day, with the student attendees selected in the left menu.

Sending A Grade Report

Users can send grade reports to the parents of the students selected by clicking on "New Grade Report". They can also edit the grade book in line by clicking on the score they want to change.

User Tasks:

You are the fourth grade elementary teacher, Tammy. As a teacher, you have many things to do before the weekend. Please, complete the following tasks:

1. Greg, Elisa, and Barbara have a group project on ancient empires. You found the following webpage link: http://en.wikipedia.org/wiki/List_of_largest_empires and you thought it might be useful to share this link with (the parents of) Greg, Elisa, and Barbara. Your task it to share this website with their group.

2. Sarah and several other students recently failed your math midterm. As a usually high performing student, Sarah's mom, Brenda is concerned and messaged your about Sarah's performance. You want to schedule a study session for the students who have C's in the class and respond to Brenda's message.

Your task is to:
A. Schedule a study session on May 17th at 4 pm for Greg, Sarah, and Mary
B. Respond to Sarah's mom, Brenda, letting her know about the study session.

3. You've finished preparing grades for all but a couple of students. You still want to send out grades but also want to let the parents who receive no reports that their children's grades will come soon.

Your task is to:
A. Send out grades to all students except Steve and Mary.
B. Send a message to Steve and Mary telling them that they will receive their final grades soon.

Evaluation:

Heuristic	Severity Rating	Problem
Learnability & Efficiency	Minor	In our Messages tab, users are required to select a conversation before writing a new message. Although a grey banner with "Select a conversation to the left" is displayed to inform users of this requirement, during testing, two of our users tried to click inside the message text area box to begin writing their message before they realized they first had to choose a conversation. One user commented that this threw her off a bit, and she felt like
Safety & Learnability	Major	Pressing enter in the text area for messages causes the message to be sent rather than creates a new line
Learnability	Major	She tried to click on the message icon itself within the wrong context to see the message, said it was confusing that the message icon went away and the conversation wasnt selected (she said she never saw the message)
Learnability	Minor	Thinks the several conversations as being confusing: where names are no longer listed because of too many names, said shes not sure even with icons who is selected because they are so small (less helpful to identification, subject heading would be better)
Efficiency	Minor	Having a way to automatically bring up a group of students under a title would be helpful
Efficiency	Minor	Tried to send grade report without selecting SMS or Email (not internally consistent with messages, need to fix) Teachers time is very pressed, its good to have a simple layout and not have too much customization (SMS or Email, for example should already be checked), needs to be quick and simple
Learnability	Major	the way conversations are displayed, labeled, scale them to how many messages have been sent, and sort them in a more intuitive way (would have expected to see most recent message listed first, not by people) Confusing to have the most recent conversations that person was involved in displaying , useful but not intuitive, make it more clear with a title or something

Reflection

Child pages