Visualizing offscreen elements of node-link diagrams

Abstract

Visual representations of node-link diagrams are very important for the software development process. In many situations, large diagrams have to be explored, whereby diagram elements of interest are often clipped from the viewport and are therefore not visible. Thus, in state-of-the-art modeling tools, navigation is accompanied by time-consuming panning and zooming. One solution to this problem is offscreen visualization techniques. Usually, they indicate the existence and direction of clipped elements by overlays at the border of the viewport. In this article, we contribute the application of offscreen visualization techniques to the domain of node-link diagrams in general and to Unified Modeling Language class diagrams in particular. The basic idea of our approach is to represent offscreen nodes by proxy elements located within an interactive border region around the viewport. The proxies show information of the associated offscreen nodes and can be used to quickly navigate to the respective node. In addition, we contribute techniques that preserve the routing of edges during panning and zooming and present strategies to make our approach scalable to large diagrams. We conducted a formative pilot study of our first prototype. Based on the observations made during the evaluation, we suggest how particular techniques should be combined. Finally, we ran a user evaluation to compare our technique with a traditional zoom+pan interface. The results showed that our approach is significantly faster for exploring relationships within diagrams than state-of-the-art interfaces. We also found that the offscreen visualization combined with an additional overview window did not improve the orientation within an unknown diagram. However, an overview should be offered as a cognitive support. CR categories: D.2.2 [Software Engineering]: Design Tools and Techniques— User Interface; H.5.2 [Information Interfaces and Presentation]: User Interfaces— Graphical User Interfaces General terms: Design, Human Factors