Till Nagel


Exploding Menu

by Till Nagel.

Exploding Menu enables high precision selection of geo-located markers on multitouch interfaces.

In a geo-visualization, in which the visual scatter shall show spatial patterns, places must be displayed at their original geo-locations. In contrast to non-geographic layout strategies, where a positioning algorithm can prevent occlusions, this may result in overlapping markers for places in close proximity.

However, precise selection of small or overlapping markers is difficult due to the “fat finger problem” [Remy 2010]. Thus, we designed Exploding Menu, a mechanism to ease the selection of near-by markers.

Figure 1: Interaction sequence of the Exploding Menu

In the beginning, multiple overlapping markers are shown on a map (Fig. 1a). When a user touches the marker cluster, a radial menu appears with all the markers evenly laid out on a concentric ring (Fig. 1b). The user can slide (or tap with a second finger) onto the markers, which will be highlighted (Fig. 1c). When the user has chosen one marker and releases his finger, the corresponding place is selected (Fig. 1d).

To select another marker of the same cluster, the interaction pattern has to be repeated. The same mechanism can be used to deselect markers.

[Remy 2010] Remy, C., Weiss, M., Ziefle, M., Borchers, J. 2010. A Pattern Language for Interaction Tabletops in Collaborative Workspaces. EuroPLoP 2010.

Prototype

We implemented an Exploding Menu for the Muse application. Here, all markers represent research institutions with their number of publications mapped to the size of the marker.

Figure 2: Exploding Menu in a geovisualization

In the above example, multiple markers are shown on the south of Great Britain with various sizes (Fig. 2a). The user taps on the marker cluster, and a radial menu is displayed with a black transparent circle, darkening the background map and other markers (Fig. 2b). Note, that the marker proxies in the menu are shown in their original sizes. When the user slides over a marker, the title of the institution is displayed (Fig. 2c). After the user releases his finger, the radial menu disappears, and the selected marker is shown with all its connections (Fig. 2d).

Reference implementation

Here you’ll find a sketch in Processing.js, which can be used as basis for your own application. It’s a simple reference implementation, and not multitouch capable, but the mouse interactions can easily be rewritten to work with TUIO or other events. Comment below, if you’d like to have further code examples.


Download the Exploding Menu Processing sketch.

Click on the marker cluster in the center, and then move over one of the markers in the radial menu.

In this example one marker is pre-selected, and all markers are shown in debug mode, i.e. both (original and exploded) positions are shown.

6 comments on ‘Exploding Menu’

  1. Florian says:

    I bet it feels good on a multitouch device. At first I was not sure whether it requires that complex press A, drag A-B, release B gesture and why a standard selection with tap A (show connections and markers), tap B (select marker, hide the connections) would not fit in that case. In general I don’t like drag-gestures depending on the surface but I see that there are some benefits that lead to a more dynamic system that enables multiple users to open spots without closing others or leaving unused ones open.

    The supporting images and sketch were really helpful in understanding the interaction pattern.

  2. Till Nagel says:

    You are rising one of the issues we tried to find a good solution for. As you suggested, the tap A, tap B not always works in multi-user scenarios.

    I thought of offering an alternate first-finger touch A, second-finger tap B, which might work similarly well. But one of the ideas behind the sliding is, that users could learn the gesture, and apply it from muscle memory without looking at the radial menu.

    In any case, thanks for the feedback! When we are going to do a user study, we definitely will include the simpler mechanism as well.

  3. Florian says:

    Please let us know how it worked when it has been tested. As I said it totally makes sense to me in specific scenarios.

  4. [...] http://tillnagel.com/2011/07/exploding-menu Recently I’ve been working with displaying geo-located data and found this a useful read. [...]

  5. [...] interacciones básicas en nuestro mapa, como pueden ser el zoom o pan, a otras más complejas como gestos multitáctiles. Esta librería facilita la conexión con varios proveedores de mapas como OpenStreetMaps, Bing o [...]

  6. [...] interacciones básicas en nuestro mapa, como pueden ser el zoom o pan, a otras más complejas como gestos multitáctiles. Esta librería facilita la conexión con varios proveedores de mapas como OpenStreetMaps, Bing o [...]

Leave a Reply