{"id":1552,"date":"2020-04-04T00:00:00","date_gmt":"2020-04-03T22:00:00","guid":{"rendered":"https:\/\/www.neovita.com\/thoughts\/?p=1552"},"modified":"2020-04-13T02:44:28","modified_gmt":"2020-04-13T00:44:28","slug":"interaction-design-the-date-range-picker","status":"publish","type":"post","link":"https:\/\/www.oninteractions.com\/thoughts\/interaction-design-the-date-range-picker\/","title":{"rendered":"Interaction design: The\u00a0date range picker"},"content":{"rendered":"\n

Unfortunately the standard browser interface for choosing dates is really confusing. To reduce the effort of using some Springer Nature forms, I needed to create a custom date range picker.<\/p>\n\n\n\n

My team at Springer Nature builds tools for librarians, primarily via the Librarian Portal<\/a> (“SNAP”) and Metadata Downloader<\/a>. Librarians download usage reports in the “COUNTER” format via one of the tools, and they need to choose which date range the report should be for \u2013 \u201cJanuary 2018 to March 2019\u201d for example.<\/p>\n\n\n\n

Problems with how librarians choose date range today<\/h2>\n\n\n\n

In SNAP we use two month fields to let librarians choose a date range:<\/p>\n\n\n\n

\"\"
Month field and calendar to select month in the Chrome browser<\/figcaption><\/figure>\n\n\n\n

This solution is great for us \u2013 we just tell the browser that we want the user to choose a specific month, and the browser does the rest. Unfortunately only Chrome shows a calendar to select from. In other browsers<\/a> librarians need to write the month in text:<\/p>\n\n\n\n

\"\"
Month field (note: no calendar) in the Firefox browser<\/figcaption><\/figure>\n\n\n\n

And, the calendar Chrome uses is really confusing to librarians. Actually I suspect that it’s confusing to everyone…<\/p>\n\n\n\n

An experience goal for SNAP is that low effort is needed to use it<\/a>. This date picker is not helping librarians be efficient. We need a different solution.<\/p>\n\n\n\n

Let’s do some human-centered design<\/a> to solve the problems!<\/h2>\n\n\n\n

We created a little crew with me, two developers and a designer colleague. We started off by looking at how others let people select date ranges and found good examples:<\/p>\n\n\n\n

\"\"
Date picker on sas.se<\/figcaption><\/figure>\n\n\n\n
\"\"
Date picker in Google Analytics<\/figcaption><\/figure>\n\n\n\n
\"\"
Date picker from the GOV.uk design system<\/a><\/figcaption><\/figure>\n\n\n\n

We got together, ideated wildly and came up with more than ten ways of selecting a range of dates. The ideas fell into a few themes and we spoke about those themes to understand complexity, accessibility, usability, etc of each. In the end we believed that the GOV.UK solution is the best \u2013 it\u2019s clear, simple to implement and instantly accessible.<\/p>\n\n\n\n

We liked a bonus idea as well: having \u201cquick links\u201d for common date ranges like \u201cyear to date\u201d, \u201clast year\u201d, etc. When clicking on the \u201clink\u201d the data fields will be automatically filled in.<\/p>\n\n\n\n

Validate the prototype with librarians<\/h2>\n\n\n\n

I created a prototype for the new date range selector, showing how it would work in the COUNTER usage data download form:<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I then used two methods to test if librarians understand the new design:<\/p>\n\n\n\n

  • Video calls where librarians shared their screen and walked me through how they would use the form.<\/li>
  • Emails where the librarian was asked to tell me in writing what they would put in each field in the form. I’d never done a usability test via email before, but for this specific interface it worked great \u2013 the responses I got back were very clear.<\/li><\/ul>\n\n\n\n

    The usability tests showed that the new data range design works well. Librarians understand what to put in each field. One area was confusing though: the definition of the \u201cquick link\u201d words. \u201cYear to date\u201d means different things to different people. But the functionality of the links was appreciated by librarians. I will need to rethink the words!<\/p>\n\n\n\n

    Next steps<\/h2>\n\n\n\n

    The next steps are to iterate on the words for the quick links and then to go from prototype to real code so we can get all librarians to use the new date range chooser. Based on their feedback we will see if it is as good as I believe it is.<\/p>\n\n\n\n

    It might not be the best solution in the Universe, but I truly believe that this new way to select a date range will make librarians more efficient.<\/p>\n","protected":false},"excerpt":{"rendered":"

    Unfortunately the standard browser interface for choosing dates is really confusing. To reduce the effort of using some Springer Nature forms, I needed to create a custom date range picker.<\/p>\n","protected":false},"author":1,"featured_media":1562,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[23,10,19,7,12,15],"tags":[],"series":[40],"class_list":["post-1552","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-concept","category-critique","category-interaction-design","category-problem","category-prototypes","category-usability-tests","series-skills"],"acf":[],"jetpack_featured_media_url":"https:\/\/www.oninteractions.com\/thoughts\/wp\/wp-content\/uploads\/2020\/04\/interaction-design-date-picker.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/posts\/1552","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/comments?post=1552"}],"version-history":[{"count":44,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/posts\/1552\/revisions"}],"predecessor-version":[{"id":1614,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/posts\/1552\/revisions\/1614"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/media\/1562"}],"wp:attachment":[{"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/media?parent=1552"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/categories?post=1552"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/tags?post=1552"},{"taxonomy":"series","embeddable":true,"href":"https:\/\/www.oninteractions.com\/thoughts\/wp-json\/wp\/v2\/series?post=1552"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}