SpaceBar: A Scrollbar for a Route

(a) A SpaceBar is a scrollbar for a route. (b) A user can change the size and position of the elevator indicator to make the corresponding portion of the route visible. (c) Conversely, the elevator indicator is also updated as a user interacts with the route. (d) A user can jump to any portion of the route quickly by tapping the SpaceBar, or (e) traverse the route by scrubbing the SpaceBar.

Abstract

Reviewing a route requires both macro and micro reading, i.e., seeing overview and detail. However, overview and detail are polar opposite. Map users often need to repetitively zoom in to see detail, then zoom out to gain overview. These repetitive and excess interactions mar the user experience and prevent users from processing information efficiently. We introduce SpaceBar, a scrollbar-like instrument that associates a simple linear slider with a complex nonlinear route. Similar to a scrollbar, a SpaceBar has an elevator indicator that severs as a 1D overview+detail indicator. A user can change the size and position of the elevator indicator to change the visible portion of a route. Conversely, the elevator indicator is dynamically updated as the user interacts with a route. SpaceBar facilitates a user to comprehend and interact with a route efficiently.

Publication

"SpaceTokens: Interactive Map Widgets for Location-centric Interactions,"
D. Miau, S. Feiner,
Proceedings of the 2018 CHI Conference on Human Factors in Computing Systems, April, 2018.
(SpaceBar is introduced along with SpaceToken in this paper.)
[pdf]




Images


The problem: When reviewing a route on an existing map user interface, a user can either zoom and pan the map directly, or use the forward and backward buttons to step through the route. The figure above shows two screenshots from reviewing a route on Google Maps (captured in February, 2018). However, there are two issues with the existing approach.

First, the interface provides no context. After several steps, the user could easily lose track of how a visible route is related to the global route. For example, by looking at (a) or (b), can you tell how either view is associated with the global route. Anotehr related problem is that the user cannot infer the relationship between a current view and a previously seen view. For example, can you tell how (a) is related to (b)?

Second, the step-through controls restrict a user to move forward or backward one step at a time; A user cannot jump to a random position of the route (e.g., source, half-way, or destination) easily.

When the two issues are coupled, it becomes impossible to revisit a previously seen segment. For example, suppose a user sees (a) and (b) at different points of time during route review, how can the user jumps to either easily?

The idea: A scrollbar is a navigation instrument commonly found in a document user interface. Readers of a news article, for example, can use it to estimate the position of a paragraph, or jump to any position in the article quickly. Why not adapt the concept of a scrollbar to a map? A SpaceBar essentially associates a simple linear scrollbar to a (potentially) complex nonlinear route.

Anatomy of a SpaceBar: Just like a scrollbar, a SpaceBar has two components: an elevator shaft and an elevator indicator. The elevtor shaft holds the elevator indicator. There is a one-to-one mapping between each point on the elevator shaft to each point on the route. Annotations can be added to the elevator shaft to indicate the locations of waypoints. The position and size of the elevator indicator visualize the relationship between the visible portion of the route and the global route. In our implementaton, the size of the elevator indicator can be directly adjusted to change the zoom level of the route. Users can also scrub the elevator to traverse the route. As a user scrubs the elevator, the route is rotated automatically so the top of the elevator indicator corresponds to the top point of the visible route.

Video

Idea brief (32s)

Related Project

SpaceTokens: Interactive Map Widgets for Location-centric Interactions