Visualizing offscreen elements of node-link diagrams

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 are off-screen visualization techniques. Usually, they indicate the existence and direction of clipped elements by overlays at the border of the viewport. In this paper we contribute the application of off-screen visualization techniques to the domain of node-link diagrams in general and to UML class diagrams in particular. The basic idea of our approach is to represent off-screen nodes by proxy elements located within an interactive border region around the viewport. The proxies show information of the associated off-screen nodes and can be used to quickly navigate to the respective node. Beyond that, we contribute techniques which 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 came to suggestions 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 off-screen 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