Button Group for filtering time range with no default value selected

Question

I'm working on a Timeline component at the moment, and by default, this timeline would show the activities/events for the day.

Users can select predefined time ranges such as the day, week, month, etc. Also, it has a date picker element that lets the user choose a custom date range.

The problem I'm facing here is that by default, the button group has a time range value of 'Today' selected. But when the user selects a custom date range value, the button group will have no value selected.

I know that button groups are similar to radio buttons and it's OK to have no value selected by default for radio groups when there is no possible accepted default value. (Such as payment options)

But does that work in Button Groups/Segmented Control?

Is there an established pattern for this scenario?

Answer 1

Having no active options selected might cause confusion to user.

Having no options selected in the button group with no indication in the custom date range picker hides the system status since there is in fact a date range is selected.

Visibility of system status, as discussed in the 10 Heuristics For User Interface by Jakob Nielson, tells us that a good UI provides user feedback on the state of the application. While Consistency and standards tells us that we should keep controls of the same type in a consistent method.

From another perspective, the button group can be seen as a navigation of the data too.

Wayfinding principles tell us that best navigations show users: Where I came from, Where I am at, and Where I can go.

The example violates this by giving no indication when the user is actually at the “custom date range” section.

A suggestion is to include “Custom” as a button in the button group, and show the date range picker when "Custom" is active. This shows the user all possible options, and also the current one.

See an example from Yahoo Finance where the custom date is being integrated to the options with an active state for simplicity.

Reference:

10 Usability Heuristics for User Interface Design By Jakob Nielsen on April 24, 1994

Lidwell, William, Kritina Holden and Jill Butler. Universal Principles of Design. (Rockport Publishers, Beverly, MA, 2010) p. 260.

Google Material Design

Yahoo! Finance