Design

Login

Parent

Teacher

Implementation

We made a website that helps parents and teacher communicate with each other. We wrote the front-end part of our website in HTML, Javascript/JQuery, and CSS. We wrote the back-end using PHP and used a MySQL database. For the layout of the website, we used Bootstrap. We used a few plugins for commonly-used elements such as datepicker, speech bubbles, table sorting and calendars.

Many of our pages contain tables, so we implemented all of them in the same manner for consistency. We used the tablesorter plugin from JQuery. (We had to do some tricks in order to make the icons in the form table sortable.) This was a pretty smooth implementation.

We used Bootstrap and Font Awesome icons on all of our buttons. According to our user tests, this improved the usability of ConnectEd.

For the pop-ups we used Bootstrap modals. These are very useful but had to be used with care. They allow for user errors if all the  available options are not properly addressed and if the user is not redirected properly. We had some confusion with this at the Create New Form Page.

The calendar was implemented using the fullcalendar plugin. This only provides the calendar layout and some click events. What happens on a click event, and much else, had to be coded independently. We did not expect a calendar UI to take as much time as it did, and this took away time from addressing other usability issues on ConnectEd.

We did not have separate Javascript (we did however had the Bootstrap CSS), but we wrote some of the CSS and all of the Javascript for each page in the HTML files themselves. This might have been a mistake since it required some changes to be made multiple times.  It would have been easier to keep the code that was used many times, such as the code for the top bar, in a separate file and link to it from the webpage files.  This, however, did not affect the usability of ConnectEd.

We tried to keep the website more “wide” than “deep.” This means that user would not have to delve too far into any part of the website and that everything should be available within only a few clicks (to improve efficiency and learnability) . 

Our choice of categories and their icons seems to have turned out well in the end. After earlier user comments, we merged “Assignments” and “Gradebook” into “Assignments & Grades” and we changed the name of “Messages” to “Private Messages” to avoid confusion with “Forms.” From the final user tests, it seemed that overall most users were generally able to quickly find what they were looking for from the homepages, although there were some learnability issues that could use further user testing to determine the best solution.  

Evaluation

We user-tested our website on 3 teachers and 3 parents. Some users were the same as our users from GR1.

User Briefing and Tasks:

Problem Statement and briefing:

There is unsatisfactory communication between teachers and parents. Oftentimes, important information does not flow efficiently and reliably between teachers and parents.

• Parents complain that they are not aware of all their child’s assignments or of the activities in which their child participates.
• Teachers indicate that they have a difficulty getting items like permission slips back from parents.
• In addition, parents have a hard time reaching teachers and teachers are sometimes overwhelmed by overly-involved parents.

ConnectEd is an online tool that allows parents and teachers to communicate and share information.  While carrying out the usability tests, please keep in mind that:

• We are testing the interface, not you.  If you get confused by anything while performing the tasks, it is the interface’s fault, not your fault.
• You are free to stop at any time.
• Feel free to ask us any questions you have at any point.
• All results will be confidential/anonymous.  
• Please think out loud.

Teacher Tasks:

1. Log in at http://talya.scripts.mit.edu/login.php using the username: frizzle and password: password .
2. Please look at the student list for class 4A.
3. Ms. Frizzle’s 4A class is having a science test on chapter 5 next week.  Please add the test to the gradebook/assignments.
   Fast-forward a week: Ms. Frizzle has graded 4A’s tests and needs to enter their grades.  Please enter the grades for the science test
   Ms. Frizzle would like to check if any parents has sent private messages to her.  Please check to see if there are any messages.
4. Ms. Frizzle’s 3rd grade is going ice skating!  Ms. Frizzle needs to check the calendar to help see which day to schedule the trip for. Please check the calendar and add ice skating to the schedule.
5. Ms. Frizzle needs to obtain signed permission slips from all her students’ parents, which is always difficult.  Please send a permission slip about the ice skating trip to all the parents of students in class 3A.
6. Later, Ms. Frizzle wants to find out which parents have signed the permission slip.  Please check which parents have signed and resend it to the parents who have not yet responded.

Parent Tasks:

1. Go to http://talya.scripts.mit.edu/login.php and log in using the username arnoldsmom and the password password .
2. Janet’s class (4A) is going to have a science test, and her mother wants to make sure that Janet is studying all the material she needs to know.  Check what is on Janet’s science test.
3. Janet wants to ask her classmate, Phoebe, something about the test.  She asks her mother for Phoebe’s phone number.  Look up the phone number.
4. Fast-forward a week:  Janet’s mother wants to see how she did on the science test.  Check Janet’s grade.
5. Arnold’s mother needs to sign the form from Ms. Frizzle to give permission for Arnold to go ice skating.  Sign the form.
6. Arnold’s mother wants to make sure that she is aware of all her children’s special activities in school this week (including Arnold’s ice-skating trip with Ms. Frizzle).  She also wants to check what Arnold will be missing this Tuesday morning, as he has a dentist appointment.  View the schedule for all her children.
7. Arnold’s mother would like to inform Ms. Frizzle that Arnold will be coming late to school on Tuesday because of his dentist appointment.  Inform Ms. Frizzle that Arnold will be coming late to school on Tuesday.

Usability problems found:

Parents:

1) One parent liked having the class list to see her child’s classmates and phone numbers, but said that it would be helpful to have email addresses included as well.  Severity: Cosmetic.  Possible solutions: Add email addresses into the list for the parent side, the same way that email addresses are included in the student list for teachers.

2)  The average grade on the “Assignments & Grades” page can be confusing because the average is displayed simply as a number, without including how many points it is out of or that it is a percentage.  Severity: Cosmetic.  Possible solutions: Display the average either as a fraction, or with a percentage sign (%) after it.  

3) On the parents’ side, calendar events are not clickable, so the parent cannot see more details of an event.  Severity: Minor.  Possible solutions:  Make the events clickable like they are on the teachers’ side.

4) Also on the parents’ side, the calendar events are not color-coded by child, so when viewing the calendar for all children, the parent cannot tell which event is for which child.  Severity: Minor.  Possible solutions:  Make the events color-coded by child, similar to the way that events are color-coded by class on the teachers’ side.

5) One parent would have preferred if the interface used the work “Homework” instead of “Assignments.”  Severity: Cosmetic.  Possible solutions:  The word “Assignments” could be changed to “Homework,” but this may be confusing since an assignment could also be a test or quiz.

6) A parent did not notice the child’s grade listed in the grade table on the “Assignments & Grades” page.  The user was confused between the grade and max grade column, and looked at max grade instead of grade. This is a visibility issue with the grades column. Severity: Minor.  Possible solutions: The text of the column headers is in a slightly small font, so enlarging the text in the headers may help the visibility of what each column means.  Also, perhaps showing the student’s grade in bold and the max grade non-bold may emphasize the grade.  Alternatively, all grades could be done as percentages, regardless of how many points the assignment was worth, although this may make it harder for teachers to calculate a final grade for a student when assignments are weighted differently so that each assignment is worth a different number of points.

7) One parent had a hard time figuring out where to find the Calendar for all the children. The parent did not realize that the Private Messages, Forms, and Calendar accessed from the homepage with the “Choose child” icon pertain to all children. The parent went to Arnold’s page expecting the calendar to show event for all the children rather than only Arnold.  Severity: Major.  Possible solutions: The mode visibility should be improved by ensuring that there is always a heading at the top of the Private Messages, Forms, and Calendar pages indicating which child the page is for, or “all children.” Additionally, Private Messages, Forms, and Calendar could be features shared across all children (or all classes for a teacher) regardless of whether they were accessed from the “Choose child” (or “Choose class”) homepage or the homepage specific to an individual child (or class).  Alternatively, replace the two different homepages with only the homepage containing six icons, and allow the user to choose between a specific child and “all children.”

Teachers:

1)  On the “Assignments & Grades” page, a teacher can click on an assignment title in the table in order to enter grades for the assignment and/or edit the content/details of the assignment.  However, although the assignment title is clearly a link, it is not necessarily obvious that clicking on the assignment brings the user to the page for entering grades and assignment details.  Severity: Minor.  Possible solutions:  Place instructions such as “Click an assignment title to enter grades and assignment details” above the table, or place a button next to the assignment title in the table.

2)  When looking at the page containing the details of an assignment and the grades the students received, there is a textbox intended to allow the teacher to enter a description of the assignment (for parents to know what their children’s homework is), but there is no indication of what the textbox is for.  Severity: Minor.  Possible solutions:  Place a label (such as “Assignment description”) above or next to the textbox.

3) One teacher was disappointed that there was no spell check in the preview textbox when creating a form. Severity: Cosmetic.  Possible solutions: Add a spell check feature if possible.

4) A teacher requested that there be more guidelines or instructions, especially when the user is required to enter information into a textbox.  However, the lack of guidelines did not seem to have a significant negative effect on the usability of the website during user testing. Severity: Minor.  Possible solutions: Put as placeholder text a suggestion of what to enter, or include instructions or an example in a small font to the right or below the textbox.

5) One teacher who evaluated the interface had trouble understanding why assignments and grades were combined, since they are two different things in real life.  (The “Assignments” feature on the website is similar to a piece of paper the teacher would give the students, or instructions that the teacher would tell the students, while the “Grades” feature is similar to a teacher’s gradebook in which he/she enters all the students’ grades.)  Severity: Major.  Possible solutions:  For most of the semester, we had “Assignments” and “Gradebook” as two separate features.  After GR5, we received feedback that there was redundancy between the “Assignments” and “Gradebook” and that we should combine them into one page.  We therefore combined the two features before user testing for GR6.  However, if many teachers would be confused like this teacher, it may be a good idea to separate “Assignments” and “Gradebook” again, while linking them to each other.  (For example, a teacher should be able to easily switch between the grades page for one specific assignment and the assignment details for that same assignment.)  

6) A teacher initially thought that to check parents’ form responses, the teacher needed to go to “Private Messages” rather than “Forms.”  Severity: Minor.  Possible Solutions:  Earlier in this project, we already worked on the problem of differentiating between messages and forms in a way that is easily learnable.  “Private Messages” and “Forms” has seemed to work nicely, but could be better.  Perhaps on the teachers’ side, the word “Forms” on the homepage should be changed to say “Forms & Responses” to make it clear to teachers that this feature does not only allow them to send forms to the parents but also to view the parents’ responses.

7) A teacher complained that the create assignment modal allowed her to create an assignment without including all of the fields. Severity: Major.  Possible solutions: make fields in modal mandatory.

8) A teacher was confused why she has to press preview in order to submit a form. Severity: Minor.  Possible solutions: remove the preview button and automatically show the form once the required fields are complete.

9) A teacher was confused by some of the features of the text editor in the Create Forms page.  For example, multiple fonts can be selected at once - user wouldn't know which font she is using.  Also, when she changed the heading, the text of the message body also changed.  _Severity: Cosmetic.  Possible solution: disable multiple selection of fonts and make modifications so that selecting the Heading level changes only the heading.  _However, the teacher did like the quotes, bullets, and indent buttons on the text editor; she found them very helpful.

10) One of the teachers would like to see a time and date of the last resend on the Forms page (where a teacher views the responses from parents).  She would also like to have a counter to see how many times she has resent the form.  Severity: Minor.  Possible solution: add a field on the page that indicates a time and date of the last resend of the form, and keep track of those fields in the database.  Also, place a number besides the Resend button that keeps track of the times of resend.

11) It was apparent that Student List and Gradebook were class-specific features.  However, a teacher was confused as to whether Private Messages, Forms, and Calendar were general features or class-specific features.  Severity: Minor.  Possible solutions: Change the names of the features to Class Forms, Class Calendar, and etc when the teacher has clicked on a specific class before entering any of these pages.  Alternatively, the teacher suggested that we could visually separate the general and the specific features by placing one type on the right, and one on the left, and placing a vertical bar in between.

12) A teacher suggested that for Student List, it would be more helpful if the name of each student also links to the student's general medical information, such as allergies, medications, and emergency contact information.  Severity: Minor.  Possible solutions: Either add a page for each student so that clicking on a student brings the user to the page with more information, or add more fields to the table on the current Student List with information such as primary contact, emergency phone number, and etc, since we are not sure if any teacher is allowed access to a student's medical information.

13) A teacher suggested that for Assignments and Gradebook, it would be easier for the teacher to see if homework assignments are separated from the tests.  She suggested that we could allow the user to select a subject, and the selection then brings the user to another page which shows the assignments and tests of that subject.  Severity: Minor.  Possible solutions: We could do as she suggested, or we could add another section on the current page just for tests, so that assignments and tests are separated.

14) A teacher commented that the icons are great and that they were useful to figure out where to navigate through the website .

Both parents and teachers:

1) On the messages page, there can only be one conversation between any given parent/teacher pair.  When a user clicks “add conversation,” a pop-over allows the user to select from a dropdown the parent or teacher with whom he would like to begin a conversation.  The dropdown only contains parents/teachers with whom the user does not already have conversations.  Therefore, this dropdown becomes empty when a parent already has conversations with all of his children’s teachers or when a teacher already has conversations with all of his students.  This can be confusing for users.  Severity: Minor.  Possible solutions:  Disable the “add conversation” button when there are no more people with whom the user can start a conversation.  Alternatively, consider changing the way messages work so that there can be multiple conversations (with subject lines) between the same pair of people, and the dropdown will contain all parent/teachers to whom the user can send messages, regardless if they already have a conversation between them or not.

2) One user mostly used the browser’s “back” button to navigate and suggested that the breadcrumbs be larger, while some users dominantly used the breadcrumbs to navigate between pages after the homepage and seemed to like the breadcrumbs.  Severity: Minor.  Possible solutions:  Perhaps try enlarging the text of the breadcrumbs, and see if the breadcrumbs are then too big.

3) On the homepage for a specific class or child, it is confusing that the top left icon (showing an individual student such as Arnold, or one class such as Class 3A) is not clickable while the other five icons are clickable, since all six icons look similar to each other.  The only difference between the icons is that the top left icon does not turn gray upon hovering while the other icons do.  Severity: Minor.   Possible solutions:  Remove the top left icon and replace with only text indicating the class name or child name (this text already exists above the icon, but it could be enlarged and vertically centered to replace the icon).  Or, change the color of the top left icon to show that it is different -- perhaps changing the color to gray.

4)  In the “Messages” feature, some users do not realize that a conversation between two people is continuous.  Severity: Minor.  Possible solutions: Consider changing the way messages work so that there can be multiple conversations (with subject lines) between the same pair of people instead of always continuing the same conversation.

5) On the page listing all the user’s messages, the user did not like the table and thought it was not as “clean-looking” as the rest of the page.  Severity: Cosmetic.  Possible solutions: Change the one-column table into just a list, sorted alphabetically.

Reflection

One thing we should have done differently would have been to use a broader scenario for GR2 and thereby have designed more breadth of our interface earlier.  Our scenario focused on permission slips, resulting in other features of our site (such as grades and assignments, calendar, and messages) in being less focused on during the design process.

We ended up implementing two website. While the two share some similarities they also had noticeable differences that required more work. We did learn a lot from developing both site, but due to time constraints it might would have been better to implemented either the parent side or the teacher side. 

We found the process of heuristic evaluation helpful. As evaluators we stumble upon issues and solutions on the sites we evaluated that were also applicable to our site. For example, a user safety issue on one site led us to investigate the same issue on our site. Furthermore, feedback from our evaluator helped us to improve our design. 

The paper prototypes iteration of our design was helpful to fine our implementation. However, the GR required that we each create different paper prototypes and as a group combine them to one paper prototype. However, we think it would have been useful to create have 2 combined paper prototypes so users could give better feedback.

The iterative design process taught us that even concepts that we find easy and trivial might be difficult for our user. The paper prototype and the computer prototype helped us figuring out  how our users actually see the problem and to adapt our solution based on their comments. Further, we learned that it is much easier to fix mistakes early on in the process. A fix to a problem during the paper prototype testing was much simpler than a one in the computer prototype phase.