...
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.
Figure 1. Tasks Sidebar
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.
Figure 2. Add Event pop-up
Figure 3. Choose Date - Calendar Interface
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.
...
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. See the figures below.
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.
Task Calendar
The calendar is set to week view by default but allows for single Day and Month views. The affordance of arrows is used for navigation between the next or previous day/week/month. A Today button provides safety and efficiency by allowing quick navigation back to the original view. Users may add events through direct manipulation: click and dragging on the corresponding area in the calendar.
Shopping List
The Shopping List allows a user to add/delete/reorder items. Previously, the interface had an edit and add buttons placed beneath the user input. However, due to user feedback we modified the design to have the add button directly next to the user input and allow the users to edit through direct manipulation.
...