Design
Left Sidebar
Scheduler
...
There are three main sections in our interface: the Tasks Sidebar, the Task Calendar, and the Shopping List.
Tasks SideBar
The Tasks Sidebar holds an array of panels where each panel corresponds to a specific task or event in the caretaking of the child. Each panel holds a large button with an icon alongside a smaller drop-down button. The motivation behind the design was the use of affordances for higher learnability through the creation of information scent. The icon in the larger button is meant to be representative of the panel’s corresponding task while the use of a drop-down arrow is meant to signal more options. The larger button is a “Quick Add” button that adds the corresponding task to the Task Calendar as an event scheduled at the present time. The smaller button leads to an Add Event pop-up that allows the user to modify event properties (e.g., time, duration, etc. – see below).
By default, the Tasks Sidebar includes Sleep, Diaper Change, and Feeding event panels. Our User Analysis and Observation revealed the tasks to be the most common and reoccurring tasks across the user groups. We limited the number of tasks to four in order to avoid overloading the novice user.
Add Event pop-up
Each task’s Add Event pop-up includes the title of the task, date input, time input, and a text comment box. The first three are basic event attributes for calendaring while the fourth provides the ability to provide additional information.
For higher usability (learnability, efficiency, safety), we chose to utilize interfaces for the input of date and time. A click inside the date input brings up a small calendar interface with the date chosen displayed in bold and users can then click on the appropriate date. Users are also given the freedom to type in the data inputs. Similarly, when the user clicks inside the time input a time picker interface pop ups up and the user can increment/decrement to their choice of time. Clicking on buttons placed next to the corresponding data input also provides access to the interfaces. The buttons are blue for higher visibility and are given corresponding white icons to help distinguish the two.
When appropriate, the pop-up also includes the Shopping List Add feature, the option to add a corresponding item to the Shopping List; e.g., a user can add Milk to the Shopping List while simultaneously adding a Feeding Task to the calendar. Efficiency was the motivation behind this feature.
For safety, users can click on the X near the top of the pop-up or the Cancel button to exit out of the event pop-up without adding an event.
Additional Quick-Add Panels
To provide increased efficiency for more expert users, the interface provides the option to add additional panels for frequently occurring tasks. At the end of the sidebar are two buttons for this purpose. Externally consistent, the green button with a plus sign icon opens the New Quick-Add Panel pop-up when clicked while the red button with a minus sign icon allows for the removal of individual custom panels.
When the red button is clicked, Quick-Add Panels change to reflect the state change in the Sidebar. Default panels are grayed out to signal that they cannot be edited. For custom Quick-Add panels the larger icon button is grayed out while the smaller button changes to red with a minus sign. Clicking on the smaller button deletes the corresponding Quick-Add panel. The color change (red for alert), size, and position of the delete button provide safety for this action.
New Quick-Add Panel pop-up
To add a new panel, users specify the title for the new panel and have the option to include the Shopping List Add feature in the new panel. They may also choose the panel’s representative icon by choosing and uploading a picture file.
Implementation
dBabies, in good web programming practice, is implemented using html for content, css for presentation, and javascript for behavior, however in minor instances, these boundaries were blurred for convenience.
At the frontend, we used the jQuery javascript library extensively for selecting manipulating, and adding click events to html elements. Additionally, we used the Bootstrap framework for many of our base components and for the responsive design of the page. The sortable interaction of jQueryUI was also used within the Shopping List section of our page to allow the sorting of individual items. In the left Sidebar, bootstrap date picker, bootstrap time picker, and jQuery-fileupload were used for the purposes that their respective names imply. The scheduler in dBabies is library from dhtmlx with customizations set via the API to fit along with our overall theme and certain affordances e.g. the highlighting of the current day and time within the calendar.
In the backend, we are using node.js to run our server and handle user picture uploads. Additionally, we are using a short php script to handle saving of scheduler events across user sessions. Lastly, our code is being hosted on Heroku.
...