Design
Home Page
For this page we tried to have big logos, that the user should associate with each activity (these logos are also used in the archives page). The archives page does not have its own button because it is not an action (in all the other pages the user is actually going to submit some information while the archives page is just for consulting). In the first iteration the logos were not buttons (just images), but in the heuristic evaluation some users mentioned that the logos did not afford clicking. In the second iteration we put the logos in buttons and we made them responsive.
Check In/Out
The design for this page was mostly decided after the paper prototypes. During user testing with the paper prototypes we realised that the symmetry of the check In and check Out actions created some confusion in for the users. In the Check In/Out page the daycare worker continuously builds a set of children that are at daycare in a specific day. At first the only way to check in/out a child was to drag the Id Card of the child from one side to the other. After the heuristic evaluation, we modified the page so that a child could be checked in with a double click on the Id Card, and we also modified some CSS so that the Id cards would better afford dragging. One thing that is different on this page from all the others is that as soon as the daycare worker finishes dragging an id card from one side to the other the action is recorded (the user does not have to press any ‘submit’ button). Due to this we display a toast message at the end of the dragging action that informs the user that the action was recorded. In addition as soon as the user checks in a child, the label with the last checked in date is updated to: “Just Now”. This label will display the last checked in date in a few different ways:
Time |
How it is displayed |
|---|---|
< 5 minutes |
"Just now" |
< 60 minutes |
displays actual minutes eg. 45 minutes |
< 24 hours |
display actual hours eg. 8 hours |
> 24 hours |
displays date eg. 03/04/12 |
This page works very well on an iPad (or any other touching device) as a lot of actions on the iPad are “dragging” actions. Another important detail is that as the screen/window size gets smaller the id cards keep getting smaller and loosing some elements (picture, last checked in label) so that this page is still usable in small windows/screens (this is specially useful for devices such as tablets).
Share Story
Users found this page fairly straightforward to use because it is essentially equivalent to sending an email/message. One of the main design decisions we had to make for this page was how the user was going to select which children the story was about. We allow for two different ways:
Autocomplete |
|
Popup |
|
Report Lunch
For this page we made the assumption that most times, all the children ate the same meal except for a few kids who might have some special dietary constraints (Eg. Allergy to cheese). Therefore, we wanted to make this page efficient, in the sense that it should be easy for the daycare worker to say that most children had the same meal, but we also wanted to accommodate for the cases when a few children had a different meal for some special reason.
We came up with this design after the paper prototypes. The changes that we made after the heuristic evaluations to this design were minor, but nonetheless important. One of the more relevant changes was adding animations to indicate that the options in the dropdown menus had changed in some way.
The drop-down menus glow every time a meal is added to the list of available meals, a meal is deleted from the list of available meals, the fill all button is pressed.
Report Daily Log
This page is fairly similar to the Report Lunch page. We decided to use sliders because we wanted the user to have a good amount of options (the sliders have 5 states), but we also wanted it to be efficient to report information about a good number of children at the same time. Sliders also have the advantage of being very glanceable. One thing that users found helpful were the labels that appear on top of the slider thumb.
Archives
The main purpose of this page was to allow the daycare worker to have a sense of what he has submitted about each children. Through the archives page the daycare worker can check if he has not submitted events abour a particular child in a long time. We use the same icons we use in the home page, which allows the daycare to quickly identify the type of events that he is looking at. Because there will be a fair number of events reported each day, we allow filtering by type and by children.
