• Abstract and Figures
• Public Full-text

Journal of Visual Languages and Computing 31 (2015) 48–69 Contents lists available at ScienceDirect Journal of Visual Languages and Computing journal homepage: www.elsevier.com/locate/jvlc A mobile interface for navigating hierarchical information space$ Abhishek P. Chhetri a,n, Kang Zhang b,c, Eakta Jain c,d a Computer Engineering Program, Erik Jonsson School of Engineering and Computer Science, University of Texas at Dallas, Richardson, TX 65080-3021, USA b School of Software Engineering, Tianjin University, Tianjin, China c Department of Computer Science, University of Texas at Dallas, Richardson, TX 65080-3021, USA d Texas Instruments, Dallas, TX, USA article info abstract Article history: This paper presents ERELT (Enhanced Radial Edgeless Tree), a tree visualization approach Received 2 June 2015 on modern mobile devices. ERELT is designed to offer a clear visualization of any tree Accepted 5 October 2015 structure with intuitive interaction. Such visualization can assist users in interacting with Available online 22 October 2015 a hierarchical structure such as a media collection, file system, etc. General terms: In the ERELT visualization, a subset of the tree is displayed at a time. The displayed tree Algorithms size depends on the maximum number of tree elements that can be put on the screen Design while maintaining clarity. Users can quickly navigate to the hidden parts of the tree Human factors through touch-based gestures. We have conducted a user study to evaluate this visuali- zation for a music collection. The study results show that this approach reduces the time Keywords: and effort in navigating tree structures for exploration and search tasks. Hierarchy visualization & 2015 Elsevier Ltd. All rights reserved. Mobile devices Navigation RELT (Radial Edgeless Tree) User interface 1. Introduction Although the screen resolution in mobile devices has been increasing, in terms of screen size they are still much Current market trends show strong rise in smartphones smaller than laptops/PC monitors. This makes it difficult and tablets. Smartphones can now match the processing to present tabular and hierarchical structures in mobile capabilities of laptop/PCs from a few years ago with a device when a large proportion of application data are fi fraction of the power usage. With emails, contacts, docu- hierarchical in nature. For example, a le system is a fi ments, pictures and music all stored in the cloud, one no hierarchical structure, and a le list within a folder is usually displayed in tabular format. A multimedia collec- longer needs to sit in front of a personal computer to tion such as music, pictures, videos, etc. may exist in access data. There are, however, still many challenges in hierarchical structures, and is usually displayed in tabular mobile computing, such as smaller screens and lack of form in laptops/PCs. Fig. 1 shows music hierarchy pre- separate input devices such as keyboard. sented as a table in a PC media player. Apart from the presentation issues, how we interact with these data structures on mobile devices is also chal- ☆ This paper has been recommended for acceptance by Gennaro lenging. Modern mobile devices are mostly equipped with Costagliola. n touch screens, and soft keyboards. Any keyboards or but- Correspondence to: 25 Grant Cir, Richardson, TX 75081 USA. E-mail addresses: [email protected] (A.P. Chhetri), tons displayed on screen take space, which is already at a [email protected] (K. Zhang), [email protected] (E. Jain). premium. Thus, it is necessary to come up with intuitive http://dx.doi.org/10.1016/j.jvlc.2015.10.002 1045-926X/& 2015 Elsevier Ltd. All rights reserved. A.P. Chhetri et al. / Journal of Visual Languages and Computing 31 (2015) 48–69 49 Fig. 1. Tabular display of artist/album/track in a media player (edited to show hierarchical division). methods of interaction without sacrificing screen area for perform exploration and search tasks. In some cases, the input. Most hierarchical structures are represented by lists number of touches is reduced by nearly 50%. This suggests in mobile devices, as shown in Fig. 2. Lists offer fast that ERELT is a more appropriate interface for users for interaction but can only display one level of hierarchy at a interacting with hierarchical data than the traditional list time. This paper presents a technique for visualizing and interface. navigating hierarchical structures on mobile devices that The next section reviews the previous research on the focuses on following two issues: subject, including our own, and explore their short- comings and our latest improvements. Section 3 describes 1. Maximal utilization of screen area to display hier- our visualization approach. Section 4 focuses on navigation archical structures. and interaction details, followed by the evaluation of the 2. Intuitive interaction to allow rapid navigation and research through user tests. Finally, Section 5 presents exploration of the structures. conclusion and ideas for future work. The research aims to utilize the screen estate to display maximum possible information, without sacrificing clarity. The objective is to use touch technology in most modern 2. Background and related work smartphones to implement gesture based commands that are intuitive and mimic real-world object interactions. The 2.1. Hierarchy visualization paper presents further enhancement over our earlier prototype [1], and a user study using media player appli- 2.1.1. Implicit vs. explicit visualization cation utilizing ERELT. Our user study shows that ERELT Hierarchy visualization techniques can broadly be fi – supports faster exploration of tree structures than tradi- classi ed into two types implicit and explicit [2]. Explicit tional list based interfaces. visualization techniques display the edges between the To date, considerable research has been done in the connected vertices of the hierarchy. In contrast, implicit areas of information visualization and human-computer techniques, also known as enclosure techniques, show interaction (HCI). While recent advances in visualization hierarchical relations through shape, location and area of techniques for hierarchical structures have been promis- vertices [3]. ing, little previous work has focused on utilizing visuali- Explicit visualization techniques are simpler to under- zation as UI elements. Our contribution is a hierarchy stand as each relation between nodes is explicitly dis- visualization technique for small screens with a practical played through links. However, the edges require larger approach for user interaction. We extensively evaluate the area to draw and much display area around edges and ease of user interaction with the proposed ERELT visuali- between nodes is unused. There has been some research zation through a user study. Our results show that it takes on explicit visualization for mobile devices, such as Magic- significantly less time and fewer number of touches to Eye view [5] and Space Manager [6]. 50 A.P. Chhetri et al. / Journal of Visual Languages and Computing 31 (2015) 48–69 Implicit visualization techniques vary in area utilization clearly show parent–child relationships. Nodes can be depending on the scheme to show parent–child relation shaped like thin lines for large trees, making individual between nodes. They generally take up less area because nodes less distinct. they do not use connecting edges between the nodes. The Squarified Treemaps [9] and the Cushion Treemaps Space efficiency is crucial for visualization of hierarchy in a [10], shown in Fig. 5, attempted to solve the problem of small screen [4]. We focus mainly on implicit hierarchy node shape in Tree Maps by forcing the nodes to be as visualization since they better cover the display area than square as possible. This makes the individual nodes more explicit techniques [2]. In case of implicit layouts, the distinct. Moreover, the Cushion Treemaps displays indivi- relationship between two adjacent nodes can be repre- dual nodes with gradient shades to give them a 3D look. sented through inclusion, adjacency or overlap [3],as There are other variations of Tree-Maps which have shown in Fig. 3. Techniques based on inclusion and adja- non-rectangular nodes. Generalized Treemaps [11] applied cency are widely used for hierarchy visualization whereas tree map concept to pie (circular) and pyramid (triangular) overlap techniques are not commonly found. shapes. Voronoi Treemap [12] represents nodes using arbitrary polygons. Jigsaw Map [13] uses a complex algo- 2.1.2. Inclusion based implicit visualization rithm to sub-divide the parent node into child nodes, One of the most commonly used implicit visualization where nodes take the shape of complex jigsaw puzzle techniques is the Tree-Map [7,8]. A Tree-Map uses inclu- pieces. sion to show parent–child relations between nodes. It In space-filling inclusive visualization techniques, like maximizes area utilization by enclosing child nodes in tree maps, leaf nodes take up all the space. Thus, inter- their parent node. As shown in Fig. 4, the tree-map is good mediate nodes are hard to identify. Circular Partitions [14] at displaying many leaf nodes in a small space but cannot uses boundary thickness to differentiate levels of the Fig. 2. Android's list view showing albums list and songs list. Fig. 3. (a) Explicit layout, (b) Implicit layout by inclusion, (c) Implicit layout by adjacency, (d) Implicit layout by overlap. A.P. Chhetri et al. / Journal of Visual Languages and Computing 31 (2015) 48–69 51 Fig. 4. Tree-Map (top), Sunburst (bottom). hierarchy. Voronoi Treemap [12] uses colors to indicate levels. Packing is a technique where each node has a dis- sub-division of intermediate nodes. tinct boundary, and child nodes are placed inside their Inclusive techniques that use node packing instead of parent node instead of being creating by dividing the sub-division provide better representation of intermediate parent node. Pebble Map [15] and CropCircles [16] have 52 A.P. Chhetri et al. / Journal of Visual Languages and Computing 31 (2015) 48–69 Fig.

Load more

  22

Copy Link