Integrating Insets Into Networks

Dynamic insets for supporting interactive network navigation.

The Dynamic Insets technique for a map of the Chicago area showing insets for off-screen nodes with their context.

Dynamic insets addresses a common challenge in graph navigation: maintaining context while exploring large networks, such as maps, social networks, or hierarchical data structures. Despite being published at EuroVis in 2011 by a team consisting of my former Ph.D. student Sohaib Ghani, collaborator Nathalie Henry Riche at Microsoft Reaearch, and I, this technique remains relevant today given the prevalence of visual spaces in all kinds of interactive applications.

The dynamic insets technique is designed for so-called multiscale visual spaces. These are visual spaces that have lots of information at different levels of detail. As an example, a geographic map is a multiscale visual space: it can be viewed from afar to see the big picture, such as viewing the entire world map, or it can be zoomed in to show details. The most concrete example of this is Google, Apple, or Bing Maps, which most of us access using the smartphone in our pockets.

Dynamic insets is designed to give both a clear view of the user’s current position in the visual space while also giving an indication of off-screen content: the areas of the space that falls outside the current viewport. This is done by adding small thumbnails of these off-screen regions to the border of the viewport. You can see an example of this in the picture above. Imagine planning a trip from Chicago in the U.S.; the insets could be generated to show all the hotels with available rooms and within a specific budget, making the planning process trivial. Furthermore, by clicking on a thumbnail, the map can automatically pan and zoom to that specific location using a seamless animation.

Dynamic construction of insets for a simple graph consisting of 7 nodes and 8 edges. A is the source node.

Dynamic insets are not limited to geographic maps. They are equally effective in social networks. For example, when exploring connections on Facebook, users can view the surrounding context of off-screen friends, such as mutual connections or nearby social circles, directly through the insets. This enhances the navigation experience by keeping users oriented and informed about their surroundings within the network.

Dynamic insets for navigating a social network.

Our technique employs a degree-of-interest (DOI) function to determine which off-screen nodes to display. This function ranks nodes based on their relevance to the user’s current focus, ensuring that only the most pertinent information is shown. For instance, on a GPS map, the insets might prioritize nearby gas stations or restaurants, whereas in a social network, they might highlight close friends or key influencers.

The relevance of dynamic insets persists today, particularly as we continue to navigate increasingly complex and data-rich environments. Modern applications like Google Maps or social media platforms can benefit from integrating this technique to improve user experience. By offering both an overview and detail without overwhelming the user, dynamic insets strike a balance that many current navigation tools still struggle to achieve.

Insets that overlap are stacked so that all insets are visible. This allows them to be paged through by hovering the mouse over the visible part, bringing it to the top.

Our research demonstrated the technique’s effectiveness through user studies. Participants consistently found dynamic insets more efficient and less disorienting compared to traditional methods such as panning and zooming. This was evident across various tasks, from finding specific locations on a map to identifying clusters in a social network.

The key teaching I take from dynamic insets is this: interactive applications should make use of the structure of the visual space the user is navigating. Geographic maps and social networks are not unstructured bitmaps. In such structured visual spaces, we know where the user is likely to focus their attention: on the places and roads (or the nodes and link), not on empty space. Design your application accordingly.

In conclusion, dynamic insets remain a powerful tool for navigating complex networks. Their ability to provide contextual awareness while maintaining an intuitive interface makes them an essential technique for any application involving large-scale graph navigation. We invite researchers and developers to revisit our work and consider how Dynamic Insets can enhance their own projects, ensuring users remain oriented and informed as they explore vast data landscapes.

Citation

• Sohaib Ghani, Nathalie Henry Riche, Niklas Elmqvist. Dynamic Insets for Context-Aware Graph Navigation. Computer Graphics Forum (Proc. IEEE EuroVis 2011), 30(3):861–870, 2011.