Getting Started with the New Facet Date Picker

Introduction

A key first step when performing an analysis with Metamarkets is to select the date range of interest. Last year, we introduced a new date picker in Facet with more features as shown in Figure 1. After the release, we collected usage data. We learned that users mostly use presets to set the timeframes and rarely use the day-parting option (where you can view data for just a portion of the day). This made us wonder if the UI’s design made it hard for people to discover that capability. To improve the user interface, we adopted a well-known and inexpensive approach called a ‘heuristic evaluation’ where we evaluated and iterated on the existing design to improve our answers to the following three questions:

• Is the information presented in the interface bite-sized and easily digestible by the user?
• How much can we limit non-essential detail?
• Does the design enable learning through discovery?

 

Figure 1: UI design of the date picker released with Facet in 2014.

The outcome of our work is a new date picker with a simplified interface that improves the ability to discover features (see Figure 2). The essential elements of date picking: the presets, day-parting and time zone options, are visible at the topmost layer. Also, the primary and the comparison timeframe option layouts are symmetrical, with similar interaction behavior.

 

Figure 2: New interface of the Facet date picker.

Key Features

Here are the key features of the new Facet date picker:

• Select from 7 presets for most common date range choices
• Add up to 3 custom date ranges including filtering on particular days of a week
• Use the day-parting option to filter on particular hours of a day
• Lock and unlock date ranges and presets for easy comparisons between primary and comparison time frames
• Choose from among 13 popular time-zones including UTC

Quick Access to Presets

Since you will be using presets more often, a single click gets you access to the 7 most common date ranges as shown in Figure 3.

Figure 3: Preset options available in the Facet date picker.

 

You can also use the day-parting option to filter on particular hours of a day as shown in Figure 4.

Figure 4: Day-parting options in the Facet date picker.

 

You can also set the time zone by choosing from 13 options, as shown in Figure 5.

Figure 5: Time zone options in the Facet date picker.

Custom Date Ranges

If you would like to customize the date range, you can also add up to 3 custom date ranges by selecting the dates in the calendar. Figure 6 shows 3 different date ranges that were chosen with the custom range option and whose union makes up the primary timeframe.

Figure 6: Three date ranges chosen for the primary date range.

 

You can also filter on a custom date range by choosing a “day of the week” filter as shown in Figure 7. In this example, only the Tuesdays for the custom range defined will be used to make up the primary timeframe.

Figure 7: Filtering the custom date range to only use Tuesdays.

Comparing Timeframes

To simplify comparison, there is a “same as primary” option provided within the day-parting option as shown in Figure 8 for the comparison timeframe. This locks the date ranges in step with those set in the primary timeframe. Choosing this option does the following:

• Offers appropriate preset options in the comparison timeframe if a preset is chosen in the primary timeframe
• Uses the same day-parting options in primary and comparison timeframe options
• Automatically brings up a custom range option for the comparison time interval if such a choice has been made for the primary

Figure 8: “Same as primary” option locks down the settings for primary and comparison timeframes and simplifies the comparison.

Now, It’s Your Turn

Give the new Facet date picker a try and let us know what you think.