Design
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. 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.
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 with jQuery-fileupload-middleware. 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.
Evaluation
Briefing
When a child is born, parents have to adjust to a new sleep schedule, keep track of the newborn’s needs, and manage vital supplies. Management of these things is not intuitive and often results in one of the areas being neglected. Our website "dBabies" is designed to help parents of newborns record important events for the baby and have a running list of baby supplies that need to be purchased. In this user test, you are a stay at home spouse for your baby Marvin where you will be walked through a few typical events in the life of a newborn's parents.
Scenario Tasks
1) After a long day of playing, Marvin and you are very tired and both take a nap. After an hour of sleep, you wake up but Marvin is still fast asleep.
Task: Log onto dBabies to log Marvin's nap.
2) As Marvin sleeps, you realize that you want to start tracking whenever Marvin goes to the park.
Task: Since going to the park is a pretty common task, you want to be able to quickly and easily log it.
3) Marvin is finally awake from his nap and is quite hungry. You grab a bottle of milk from the fridge, and, after warming it up, start to feed Marvin. With Marvin in one arm, you log onto dBabies yet again to mark his feeding.
Task: Track that you fed Marvin now.
4) As you feed Marvin, you notice he is starting to run a fever. You're worried that he is starting to get sick, so you set up a doctor's appointment for tomorrow afternoon at 1:00 PM.
Task: Add Marvin's appointment to the schedule.
5) As you try to soothe Marvin by picking him up and rocking him back and forth, you notice that his diaper is wet. You go to change Marvin and realize that you are down to your last 5 diapers. After changing him , you get on dBabies and log the diaper change and note that the diapers are low.
Task: Log that Marvin has been changed and let your spouse know that she needs to buy new diapers.
6) Marvin is uncomfortably warm from his fever and is starting to cry. You decide that you should get him some baby Advil. Luckily, your spouse is almost out of work and he/she always checks dBabies to see if anything needs to be picked up for Marvin as the make their way back home.
Task: Let your spouse know that you need baby Advil ASAP
User Testing
Users were selected based on whether they had been or were currently any form of a caretaker for an infant. The user could be anyone from a babysitter to a new parent. Additionally, the user was not chosen based on any specific educational/technology experience background. The only assumption made was that the user knew how to use a computer and browse the internet.
User 1
User 1 is a female in her early twenties who frequently babysits for her family and friends' infant children.
- User successfully and easily logged into dBabies from the login screen.
- She noted and asked if she needed to create a user account, which she did not.
- She found it easily due to its location, which maintained external consistency to other websites.
- In the modal for Adding Events, user thought that the add to shopping list toggle should automatically add the item when click not when submitted. This is a minor issue that stems from the fact that the component is a toggle button rather than a simple checkbox. We should either use a checkbox with a label for this feature instead or keep the button and have it automatically add the particular item to the shopping list.
- The user did not use direct manipulation of the schedule to add events. There are many ways to add things to the scheduler, but we should also include an "Add Button" on the scheduler itself that opens a modal with the same interface as the rest of the modals in the system.
- Noted the adding of a new quick-add panel was useful and liked that it could be personalized with user uploaded images.
- For every task that needed an event, she simply added a new quick-add panel. This can be amended by adding and explicit "Add Button" to the scheduler as previously mentioned
- Direct manipulation of events on the calendar was useful, but hard for the user to handle in some instances, such as dragging to lengthen the duration. This seemed to be more of an issue with the mouse actually connecting with the correct section the event itself. This could potentially be an error on the user end (i.e. not efficiently controlling the mouse), but does warrant some investigation to find if it is a problem for most users.
- The user noted an internal inconsistency in that the digital clock on the page is in a 12-hour format, but the scheduler is in a 24-hour format. This is a minor issue in some sense because most people can readily make the switch between the two formats. However, this is a large internal inconsistency that was overlooked and should be fixed as soon as possible.
- Found that using that using the Quick-add to put the event on the calendar then directly manipulating the event to be the "best" course of action.
User 2
User 2 is a male in his mid twenties who recently had a baby with his wife.
- User successfully and easily logged into dBabies from the login screen.
- When asked to add an event in the future or past the user always attempted to use the drag feature of the calendar.
- The user made the connection of the affordance of google/apple calendar.
- When asked to add an event in the present, the use of the sidebar was clear and the user simply clicked on one of the quick-add buttons.
- The user was not able figure out that one could add items from the add form. This is only a minor problem and can be fixed by providing helpful hints at the top during first use of the website when the user is not too familiar with it. Additionally, if a feature has not been accessed for a long time since log in, a feature popup can reveal the feature to the user and suggest it for future use.
- The user successfully added a new item to the shopping list but was confused when the two static items disappeared.
- Found it very easy to add a new sidebar quick add button.
- Found it very easy to remove an added button.
- When directed to add specific events, icons from the sidebar were clear with respect to the completed task.
- Found that dragging events in the scheduler was not so easy (may be an effect of the apple trackpad). This is a cosmetic problem only because it is not the case that this happens when using a regular mouse. Additionally, if the user is accustomed to mouse control of their own machine, this should not occur.
- Noted that when trying to add items to the shopping list from the add form, it was not clear that the toggle button would actually add the item. This is a major problem and it can be easily solved by either adding a checkbox or highlighting the toggle button a different color when pressed to indicate that item will be added to list when event is added. Alternatively, instead of a toggle, it could be a button that adds the item immediately giving the user immediate feedback.
User 3
User 1 is a female in her early twenties who frequently babysits for her family and friends' infant children.
- User asked if she needed to create a user account, no.
- User easily logged into dBabies from the login screen.
- User looked over site without using cursor.
- She added the event through direct manipulation rather than using Quick Add/Add features.
- This is a minor issue: while the user did not use the implemented shortcut through the side panel, she discovered the function later on. The issue could be solved by implementing a Site Tour when the user first logs in.
- User made connection between panel sidebar and its function after not easily finding how to do it through direct manipulation. Also made the connection between the icons and their function after hovering cursor over the areas. She then added Park Visit to sidebar.
- As before, she marked future even through direct manipulation of calendar.
- She used the Quick Add feature to mark a diaper change and manually added the item to the shopping list.
- This was a minor issue: the user's actions were fine, but did not take advantage of the shortcut implemented in the interface. As before, this could be solved through the implementation of a Site Tour and a Help page.
- She added an item to the Shopping List and not finding a way to emphasize it, she deleted it and looked over the area. In doing she found the ability to drag and reorder items on the Shopping List and dragged the item to the top.
Reflection
Over the course of the iterative design process we learned several things of what goes into a solid website design. What we found to be the most important is taking note of feedback and incorporating those comments into our design as much as possible.
If we had the opportunity to redo the project all over again, we would spend more time about thinking how the UI would connect with the backend. We hoped to have a more complete website in terms of how it interacts with the backend but that is not the case. While the focus of the project was on providing users with a learnable and efficient interface, if we would have thought about how we would want to integrate the backend, we would have had a better transition in terms of working with node.js.
Additionally, we believe less time could have been spent on picking the correct fonts and colors. While coloring and font are important for the user experience, we could have set a strict amount of time for deciding which font and color scheme to use. This would have allowed for more time on less trivial components of the website.
During the iterative process of deciding which features to implement or which ones to leave out from our original designs, we took priority to the features that enhanced usability and the basic features that would solve the problem we were tackling in the first place.
After receiving feedback, we would take those opinions seriously but also took into consideration that everyone has a different experience with the UI. If there was a clear consensus as to whether a feature seemed unnecessary or hindered the usability, we would normally make the proper change. However, if there was a clear divide or a small population, we would go back and discuss how the user would benefit from the feature and whether it would need to be removed or modified slightly to please both the majority and the few that did not think it a good feature.
The process of iterative design and constant feedback was essential in building a learnable, efficient, and aesthetically pleasing user interface.