We should optimize the time slider UI for mobile screens or get it out of the way.
Problem
The time slider panel takes up too much screen real estate, especially on a typical mobile screen. By default, the panel is expanded, obscuring the entire map except for some tiny slivers at the top and bottom. The user must manually collapse the panel to reveal the map.
Worse, both the site navigation panel and what would normally be a sidebar overlap a large portion of the time slider panel, including not only the controls for setting the date range but also the control for collapsing the time slider panel. If a user follows a link to a specific element, the inspector and time slider together will obscure the entire map. To reveal the highlighted element, the user needs to dismiss the inspector, collapse the time slider, and navigate back to the previous browser history item to restore the inspector. This is very unintuitive.
The controls for collapsing the panel and setting the date range are also obscured in landscape orientation. To access the control for collapsing the panel, the user must rotate the phone to portrait orientation. If the phone has screen rotation locked, the user may need to exit the browser and navigate system preferences to disable that setting – just to see the map on our homepage.
Possible solutions
A quick fix would be to collapse the time slider panel by default as long as the site is showing its mobile layout. To detect this layout, look for the small-nav class on the document body. The downside is that the time slider will be less discoverable when collapsed, since all it does is display the current date.
A more thorough fix for this issue would require a redesign of the time slider UI. Even the desktop viewing experience would benefit from a streamlined time slider. We could reduce redundancy in the slider (#648), narrow the dropdown menus to fit their contents, hide the date range and animation controls in favor of dialog boxes similar to the Change Date dialog box, and replace some text labels with icons (with alt text and tooltips). We shouldn’t however shrink any font or button sizes or reduce spacing between the controls; that would only make them more difficult to manipulate on a small touch screen.
We should optimize the time slider UI for mobile screens or get it out of the way.
Problem
The time slider panel takes up too much screen real estate, especially on a typical mobile screen. By default, the panel is expanded, obscuring the entire map except for some tiny slivers at the top and bottom. The user must manually collapse the panel to reveal the map.
Worse, both the site navigation panel and what would normally be a sidebar overlap a large portion of the time slider panel, including not only the controls for setting the date range but also the control for collapsing the time slider panel. If a user follows a link to a specific element, the inspector and time slider together will obscure the entire map. To reveal the highlighted element, the user needs to dismiss the inspector, collapse the time slider, and navigate back to the previous browser history item to restore the inspector. This is very unintuitive.
The controls for collapsing the panel and setting the date range are also obscured in landscape orientation. To access the control for collapsing the panel, the user must rotate the phone to portrait orientation. If the phone has screen rotation locked, the user may need to exit the browser and navigate system preferences to disable that setting – just to see the map on our homepage.
Possible solutions
A quick fix would be to collapse the time slider panel by default as long as the site is showing its mobile layout. To detect this layout, look for the
small-navclass on the document body. The downside is that the time slider will be less discoverable when collapsed, since all it does is display the current date.A more thorough fix for this issue would require a redesign of the time slider UI. Even the desktop viewing experience would benefit from a streamlined time slider. We could reduce redundancy in the slider (#648), narrow the dropdown menus to fit their contents, hide the date range and animation controls in favor of dialog boxes similar to the Change Date dialog box, and replace some text labels with icons (with alt text and tooltips). We shouldn’t however shrink any font or button sizes or reduce spacing between the controls; that would only make them more difficult to manipulate on a small touch screen.