Zoe Monosson

My goal was to research both the guidelines and standards for a datepicker. A date picker is a component that allows a user to select a single date. The first step in this project was to research current datepickers. These are examples of some of the date pickers I researched: Kayak.com, ADP Timesaver, and a community datepicker.

I researched the general use cases for a datepicker, which are selecting a single date, selecting a range of dates, selecting a time, selecting multiple dates, and using text input to select a date. Also, I analyzed the specific use case that initiated the need for a datepicker on PatternFly. There is a team called Cockpit that was looking to implement a datepicker by a github user named Eternicode. This is an image of eternicode's date picker and the wide range of capabilities it offers.

Because Eternicode's datepicker had a large range of functionality, I decided to run a usability test using Eternicode's datepicker in order to determine which features should be supported by PatternFly. I decided to test if PatternFly should support text input, autoclose, a "Today" button, and the icon to indicate calendar entry.

I conducted my usability testing at Red Hat Summit, which is a conference that Red Hat holds every year. During the usability test, I showed the participants a prototype and allowed them to self click through tasks while being asked follow up questions.

This is an image of the prototype I made for conducting usability testing. I coded it using CSS, HTML, and JavaScript. To access the code for my prototype, click on the link to my GitHub account: https://github.com/zmonosson/redhat This screen shows the first task the participants completed for the usability test. The user was asked to select June 30, 2015. This task allowed me to observe whether the participant typed in the date or selected the date by using the calendar.

For task 2, the user was asked to select a future date and then navigate back to the current date in order to let the participant explore the datepicker without the presence of the "Today" button. The user was also asked his opinion on "autoclose" during this task.

During task 3, the user was asked his opinion on the "Today" button.

During task 4, the participant was asked to input a date by typing it into the datepicker. This task was used to observe how the participant interacted with the text input.

For task 5, the participant was asked, "which of the following icons are acceptable for a datepicker?"

The results from the usability test showed that eight out of nine participants preferred autoclose. Therefore, I recommended that we incorporate autoclose into the PatternFly datepicker.

The results from the usability test also showed that seven out of nine participants would use the "Today" button. Therefore, I recommended that we incorporate the "Today" button into the PatternFly datepicker.

I recommended the use of the Font-Awesome calendar icon. However, I did not recommend the use of text input due to inconsistent data.

All my feedback and recommendations culminated in a usability test report and presentation. My research was utilized in the final implementation of the datepicker on PatternFly.org