Keywords

1 Introduction

Various existing interaction and visualization techniques for large datasets aim at displaying all linked items, using node-link or space-filling approaches [1]. Enhanced node-link approaches give the opportunity to visualize and select elements from various datasets, whereas radial space-filling ones are centered on hierarchical data [2]. These approaches have drawbacks when used on mobile devices, especially when datasets are substantial. To overcome these limitations, we propose RICHIE, a Radial InCremental Hierarchy Exploration widget composed of two concentric quadrant shapes, which are placed at a bottom corner of the screen, facilitating thumb usability. The first arc contains a first level selected item and its siblings, whereas the second arc contains its children.

Our approach is inspired by ControlTree [3], which defines three zones for a selected item: a sibling zone, a children zone and a parent zone. However, for minimizing occupation space, we display only few items at once from sibling and children zones; circular dragging gesture on quadrants allow navigation through hidden items. Moreover, depth exploration is made selecting an item on the second quadrant and by shifting itself and its siblings to the first quadrant (forward navigation) or by shifting items from the first quadrant to the second one, allowing items from the parent zone to appear on the first arc (backward navigation).

We choose this specific design because we do not want our widget to occupy the whole screen area, like Radial Edgeless Tree [4] or Radial Space Filling [5] methods, as we implemented it in a C2 (Command and Control) system [6], in which users interact mainly on a map but also need to control a large number of hierarchical units (Fig. 1).

Fig. 1.
figure 1

View of the existing C2 system.

Full size image

Finally, we think that our widget can be used in different domains, such as files browsing or phylogenetic trees exploration, which requires exploration of large hierarchical datasets.

This paper is organized as follows. First, we will give a review of the current hierarchy exploration techniques and especially those that can be used on tactile devices. Then we will present our RICHIE widget, designed to overcome broad hierarchy navigation issues on mobile tactile devices. The next section will describe in details the functioning of the widget, and the different interaction techniques that we are developing in order to evaluate them from a user’s point of view. Finally, some considerations on the usability of our widget in different domains will be exposed.

2 Related Work

There exists numerous hierarchy visualization and navigation techniques, but we can classify them into two categories [1, 4]: (1) node-link, connection or explicit visualization techniques [4] aim at representing relations between connected data with semantic links whereas (2) space-filling, enclosure or implicit techniques [7] use positions and sizes of nodes to convey hierarchical meaning.

2.1 Node-Edge Approaches

Hao et al. [4] show that major issues for node-link displaying approaches are the location and the connection of the nodes. Visualization’s optimization of graphs and especially hierarchical ones have been exhaustively researched, and approaches like H-Tree or Radial trees [8] (Fig. 2) are convenient for simple desktop usages. But, when users want to interact with graphs, they need adapted interaction techniques. ControlTree [3], for instance, helps user by displaying siblings and children of selected item in specific spaces (Fig. 3). However, these visualization and interaction techniques are not well designed for tactile devices, due to the lack of cursor and fingers occlusion, which limit precise interaction. That is why there is a growing need in Information Visualization domain for novel interaction techniques that enables multi-touch graph interaction [9].

Fig. 2.
figure 2

Radial tree visualization [8]

Full size image
Fig. 3.
figure 3

ControlTree zones [3]

Full size image

More recently, Holzinger et al. [10] made a multi-touch graph-based interaction review that highlights the techniques used and the challenges new devices offers for information visualization. Yet, for hierarchical graphs, where links between nodes are quite implicit (parents-children or siblings semantic relationships), the space-filling approach seems more adapted to mobile devices, even if some mixed techniques such as SpaceTree [11] or EnCon [12] tried to take advantage of both approaches by adapting a graph to a specified size.

2.2 Space-Filling Approaches

Links in enclosure visualization techniques are implicit, and the geometric positions and sizes of nodes reveals the nature of their connections. Treemap [13] is the most simple space-filling approach, but lacks clarity regarding the hierarchy (Fig. 4). That is why, radial or concentric techniques were developed [2], such as InterRing [5] (Fig. 5). RELT (Radial EdgeLess Tree), developed by Hao et al. is a visualization technique that aims at maximizing the space used by data and providing a clear hierarchy view [4]. These techniques are less convenient when hierarchies are imbalanced (when items have very different number of siblings or children). To curb this issue, Chhetri et al. proposed ERELT (Enhanced RELT) [7] which allows users to perform a drag gesture in order to display hidden items, allowing the visualization of large hierarchies without reducing node sizes (Fig. 6).

Fig. 4.
figure 4

TreeMap [13]

Full size image
Fig. 5.
figure 5

InterRing [5]

Full size image
Fig. 6.
figure 6

ERELT [7]

Full size image

All of approaches made for mobile devices tends to maximize the utilization of screen area, which sometimes is not required, when for example you do not want to lose the view of an application while browsing some data hierarchy. Moreover, the size-changing of items could limit finger interaction, if their number is too important.

In the next section we will introduce RICHIE, a step-by-step widget that tends to curb these issues.

3 Design

We designed the RICHIE technique with the constraints that it should not take whole screen space, items size should be finger-adapted, and the interaction should be easy on mobile tactile devices, such as tablets or smartphones.

3.1 Concentric Shape

The radial concentric shape was proved efficient for displaying hierarchical data [7]. Moreover, putting the center of widget in a bottom corner of the device facilitates thumb [14] or two-hands interaction [15], due to the grasping position and the physiology of hands [16]. By taking inspiration from the wheel metaphor [14], we decided to consider a quadrant radial design, similar to a corner menu [17]. But, we do not want all items of the same hierarchy level to be visible, so, as ERELT [7], we display only a part of items and user can access hidden ones by dragging them on the active view. This design allows us to make all items the same size (Fig. 7), which can fit through tactile guidelines [18], and not to limit the broadness of hierarchy datasets.

Moreover, to facilitate lisibility of hierarchical links between items, selection of a first quadrant’s item puts it at \(45^{\circ }\), in a highlight zone (Fig. 7), whereas its children appears on second arc.

Fig. 7.
figure 7

Prototype view of item’s positionning.

Full size image

3.2 Navigating Through Hierarchy

We called our widget RICHIE (Radial InCremental HIerarchy Exploration) because we do not want to display the whole hierarchy at the same time. We propose a navigation technique that is different from Moire graph [19], Stacked-half-pie [20] and wavelet menus [21], because we only want to interact with two levels of hierarchy, for limiting screen occupation (Fig. 8). The first quadrant contains selected item and its siblings whereas second one contains selected items children (Fig. 8a). We took inspiration from ControlTree [3] zones, namely sibling zone, children zone and parent zone which is hidden in our widget. Forward navigation (Fig. 8b) is made by dragging second quadrant s selected item to the first quadrant and backward navigation (Fig. 8c) by dragging first arc ’s selected item to the second one. Drag and tap gestures used in this navigation technique are considered direct manipulation gestures, and are proved effective for selection tasks [22, 23].

Fig. 8.
figure 8

Different states of the widget compared to a hierarchical view

Full size image

The next section will provide information about development issues and choices.

4 Implementation and Development

We developed our widget with Unity3D, a real-time game engine. This choice was made because this software allowed us to design the shapes and behaviors we wanted, in a framework that takes into account tactile events and which is more evolutive than sketching or prototyping tools, partly because of its multiplatform capabilities.

4.1 Display and Interaction with Items

We designed a unique function that allows positioning of same level hierarchy items. Let U being a list of M items and N the number of visible elements we want on our widget’s quadrants (\(N>1\)). By taking the center of widget, horizontal and vertical axes of device for geometrical frame, position \(\overrightarrow{U_{i}}\) of U[i] item will depends on two coordinates and its angle \(\theta _{i}\) with abscissa axis, given the radius R of the display circle (Eq. 1):

$$\begin{aligned} \theta _{i} =\frac{i\times \pi }{2(N-1)}+C \end{aligned}$$
(1)

where C is a variable controlled by dragging: dragging to the upper side of the widget increases C whereas dragging to the bottom side decreases it. Initial positions of U’s items are, for \(i \in [0,M-1]\) (Eqs. 2, 3, 4):

$$\begin{aligned} \mathrm{If\ }\ \theta _{i}<0 :\ \ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{x}=R;\ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{y}=-\theta _{i} \times K \end{aligned}$$
(2)
$$\begin{aligned} \mathrm{If\ }\ \theta _{i}<\frac{\pi }{2} :\ \ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{x}=R\times \cos (\theta _{i});\ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{y}=R\times \sin (\theta _{i}) \end{aligned}$$
(3)
$$\begin{aligned} \mathrm{Else\ } :\ \ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{x}=(\frac{\pi }{2}-\theta _{i})\times K;\ \ \ \ \overrightarrow{U_{i}}\cdot \overrightarrow{y}=R \end{aligned}$$
(4)

where \(K>1\) is a constant that spreads out-the-screen items.

This function allows us to move all items correctly, and by defining a number of visible objects we can adapt the visualization to the device.

4.2 Step-by-step Navigation

One major issue raised by HCI researchers is the importance of animations or animated transitions for user’s understanding of interface behavior [24] or decision-making [25]. These animations should therefore be cancellable if user stops interacting, allowing him to undo his action in a fluid way [26]. That is why we modeled a Behavioral State Machine for each of our widget’s items which describes items states and transitions (Fig. 9).

Fig. 9.
figure 9

Item’s behavior

Full size image

On the Fig. 9, one can notice that Anim states represent animated transitions from one circle to another, allowing the cancellation of actions and the understanding of interaction. All items are initially on the Init state, and depending if they are at the first level of hierarchy, they go either on the first circle or hidden below their fathers. In Unity3D, we put children at the same position of fathers, but we deactivate their sprite renderer and box collider, disabling their interactive capabilities. uC1, sC1, uC2 and sC2 corresponds respectively to unselected state on circle one, selected state on circle one and the same for circle two. C0 and C3 Hidden states correspond to specific hidden states which represents non-interactive states displayed respectively at the origin of the widget and above the second circle, as represented on Fig. 7.

When a user selects an item on the first circle for the first time (Double arrow), this item goes from uC1 to sC1, and its children goes from Hidden to uC2. If user selects another item from the first circle, formerly selected item goes from sC1 to uC1, its children from uC2 to Hidden and the newly selected item and its children behaves as previously described. When a user selects an item on the second circle, it goes from uC2 to sC2 and its children goes from Hidden to C3 Hidden. Selecting another item from second circle acts as previously said for circle one. When a user perform a forward navigation (square-beginning arrows), items from circle one disappeared and goes to C0, origin of the widget, but we are saving their status (selected, unselected) for backward navigation. Items from second circles goes on the first one, according to their selected statuses, and items from third hidden circle goes all unselected on the second one.

Backward navigation (round-beginning arrows) makes items hidden in circle zero to move to circle one, items in circle one to circle two with same statuses and items from circle three to Hidden state, under their parent.

We also add a global state machine for the widget, for controlling the global behavior and saving statuses of items (if an item is selected, its siblings should be deselected and so on).

This section described the implementation and development of RICHIE, a step-by-step hierarchy exploration widget. The following one will present shortly the Command and Control application in which we implemented and tested it, and other domains we think it can be used for. We will describe also our on-going efforts to evaluate usability of our system.

5 Tests and Perspectives

C2 systems usually deal with large and imbalanced hierarchies of units displayed within a map and in a linear classic way [27]. These constraints limits the screen space used by the hierarchy visualization and its interaction, that is why existing multitouch C2 systems were developed usually for interactive tabletops [28, 29]. As we want to adapt an existing C2 system showed in Fig. 7 to handheld tactile devices, we are currently testing a C2-tactile prototype which embeds our RICHIE widget (Fig. 10). Our widget might be used in every domain that need browsing through large hierarchies without displaying the whole dataset. Genomic data visualization systems such as those proposed by Shaer et al. [30] could, for example, benefit from our solution. Semantic relationships between elements could also be explored, such as with the MASCARET Virtual Environment meta-model [31]; our widget could facilitate the exploration of information towards a simulation.

Fig. 10.
figure 10

Sketch of our adaptation.

Full size image

We will perform experimentations in order to test different ways of interaction (for example adding a breadcrumb trail will allow users to jump from one level of hierarchy to a previous one, as in file systems or websites [32, 33]). Simultaneous map interaction and hierarchy exploration will be evaluated too [34]. Performance comparisons between RICHIE and existing exploration techniques for item retrieval or other specific tasks would bring cues of user’s preferences [35].

6 Conclusion

This paper has presented RICHIE, a step-by-step widget that allows the exploration through larges data hierarchies on tactile handheld devices. Unlike other approaches, it uses minimal on-screen space, enabling the interaction with distinct tools, such as interactive maps. Users do not dispose of a global view of data, but instead they navigate level after level through hierarchy. Our immediate future work is to made experimentations in order to explore RICHIE’s capabilities and usages in different applications and on different devices.