Dynamic Space Management applied to Interactive Maps

Dynamic Space Management

Applied to Interactive Maps

Managing Display Screen Real Estate Within Maps

Summary

This web page demonstrates how my thesis work on screen space management can be applied to enhance interactive maps by allowing applications to automatically show more information within a map by avoiding the overlap of important content. The sections of this web page include:

An explanation of the problem in current map applications with displaying and connecting related information.

A demonstration of our solution, including variants that visualize different types of information within maps.

A description of how our techniques not only improve visualization within maps, but also simplify how users interact with the application.

Our conclusions and future work we will be pursuing.

More information about my publications on space management and view management can be found on my web site at http://www.cs.columbia.edu/~blaine.

My thesis topic, View Management, is the general concept of managing what users see in any kind of display environment, whether 2D or 3D. I recently finished my Ph.D. in the Computer Graphics and User Interfaces Lab at Columbia University in the Computer Science Department under Professor Steven Feiner.

If you are interested or have questions, please contact me at blainecs.columbia.edu. I have recently graduated, and am currently looking for a job. I am looking for interesting opportunities and applications, and am also interested in solving problems that are related to my thesis work.

Problem

User interfaces have a difficult time introducing information without overlapping what is currently presented on the screen. Maps are a perfect example of this problem. Figure 1 shows a screen shot of a selected icon and its related popup within a map view that also shows localized search results for restaurants.
Figure 1. Popup is placed at a location relative to the related icon with no understanding of what else is displayed on the screen. (Image courtesy of Google Maps. Click on thumbnail for full-size image.)

Figure 2. Search results are located in a key to the left of the map, which provides information about the icons on the map. (Image courtesy of Yahoo Maps. Click on thumbnail for full-size image.)
Unfortunately, the popup window overlaps many of the other restaurants' icons within the map (most of the restaurant icons cannot be seen because of the occlusion; however, one partially occluded icon can be seen at the bottom of the popup window). Another problem is that if the user selects another restaurant (or icon) within the map, this currently displayed popup is removed before the new one is shown. This makes it difficult to see information about more than one item at a time. One common way of fixing this problem is to reserve some screen space, (e.g., at the side of the map), where information can be shown in a key (Figure 2). This key relates information to items within the map using different labeled icons. Unfortunately, keys with a lot of information take a large amount of screen area away from the map. They also cause the user to continually move their eyes between the key and the map to find the correct position for the related information. Furthermore, it is difficult to compare information for multiple items within the map. Since the results are sometimes presented within a scroll region, which is not always displayed in its entirety, the users might also need to interact with it (e.g., scroll down) to obtain the necessary information.

Our Solution

Our screen space representation allows the automatic layout of multiple popups that are placed close to their related icons without overlapping any of the icons or other popups (Figure 3). Since the results typically include more information than can be shown at once, we filter them by prioritizing which parts of the results we show. These priorities define the backbone of how View Management works, and can be changed dynamically throughout the duration of the program based on what kind of information the user needs. These priorities can also be computed from the users' preferences in conjunction with an advertising engine, similar to how many web sites work today.
Figure 3. Screen shots of a prototype interactive applet show results of a localized search for restaurants in two different areas. Popups are placed so that they do not overlap any of the icons or any of the other popups. (Map data courtesy of Google Maps. Click on thumbnails for full-size images.)

Variations

We apply these techniques to visualize information within maps when other kinds of information are shown. Figure 4 shows screenshots of a map that shows directions from one place to another, while also showing important information along the way. The directions are considered important, so the system makes sure that the popups do not overlap the direction line as well. From an implementation standpoint, since our space management representation is based on upright rectangles, our algorithms need to approximate the lines with upright rectangles, which introduces a bit more complexity because we need to determine how many of these rectangles to use. Too many rectangles will cause poor performance, while too few will result in a poor approximation and a loss of useful screen space.
Figure 4. Screen shots of a prototype interactive applet show directions from one place to another, including important information along the way. Popups are placed so that they do not overlap the directions, any of the icons, or any of the other popups. (Map data courtesy of Google Maps. Click on thumbnails for full-size images.)

We have also developed maps that show directions that include multiple destinations, such as a bar crawl, as shown in Figure 5. This might be useful for deliveries, drop-offs, carpools, or when someone might need to do some errands and does not know exactly where to go. The popups could also include specific information for each individual stop. This map was created semi-automatically because walking directions were needed, and since only driving directions were available, and one-way streets existed, these queries needed to be manually tweaked.

Figure 5. Map overlaid with multiple directions, items and their popups. (Map data courtesy of Google Maps. Click on thumbnail for full-size image.)

It is also possible to use these techniques in navigation systems, where popups can show information about the directions. Figure 6 shows an example of driving directions, where each turn is annotated with its details. This could easily be combined with techniques used in LineDrive for routes that are difficult to visualize on standard road maps.

Figure 6. Directions along with popup information about each turn. (Map data courtesy of Google Maps. Click on thumbnail for full-size image.)

Interactions

Providing a way to display popups easily within a map introduces new and easier kinds of interaction. The most obvious enhancement allows the user to interactively move the map around, while the system automatically shows information within the view. Instead of manually querying each individual icon or key entry, as described above, the user can focus on controlling the map, and the system will automatically show the necessary information. To help the system determine what is necessary, a number of external factors could be taken into account, including user interactions and situations. For example, if this application is a car navigation system, then the system could show gas stations (and gas prices) if the car is running low on gas.

There are also other ways users could specify importance. For example, the system could automatically prioritize areas within the proximity of the cursor, so that as the user moves the cursor around, popups pertaining to items within the specified area on the map are shown.

Popups can also show interactive annotations, in which selections can have a wide range of functionality. Web pages, videos, and other responses to application queries can be embedded within an annotation to provide easy access. In each of these cases, the application needs to decide, based on the type of information and application, how and where it will introduce the new information. In some cases, such as a web page, an external window might be the best solution. In other cases, placing information within another popup or within the same popup might be best. In all of these cases, these decisions depend heavily on the application.

Conclusions/Future Work

Visualizing information within maps is becoming increasingly important. Location-based information exists in almost every type of field, organization, and personal experience. We show ways of presenting this type of information so that it is meaningful, easy to understand, and easy to access.

My thesis work on View Management helps explain how the development of all graphical applications, both 2D and 3D, needs to address how to manage what users see. Screen space is a limited resource, and it is important that applications use it wisely to help users accomplish their tasks as easily as possible.

These concepts are no different when developing map applications. More and more information will increasingly be visualized within maps and 3D environments. There is already much digitized location-based information available to visualize, such as traffic conditions, weather, personal image collections, and subway, train, and bus schedules. But creating an integrated interface that can visualize all of this information effectively has not been accomplished. Furthermore, with the increasing availability of cell phones with location tracking, not only will people want to know about their own positions and desired locations, but will also want to know about those of their friends and family.

Contact Information

If you are interested or have questions, please contact me at blainecs.columbia.edu. I have recently graduated, and am currently looking for employment. I am looking for interesting opportunities and applications, and am also interested in solving problems that are related to my thesis work.

Reference

This web page builds on work described in:

B. Bell and S. Feiner, Dynamic Space Management for User Interfaces, In Proc. UIST '00 (ACM Symp. on User Interface Software and Technology), San Diego, CA, November 5-8 2000. pp. 239-248.

Bell, B., Feiner, S., and Höllerer, T. View management for virtual and augmented reality. Proc. UIST '01 (ACM Symp. on User Interface Software and Technology), Orlando, FL, November 11-14, 2001 (CHI Letters, vol. 3, no. 2), 101-110.

Last Updated: January 12, 2006 by Blaine Bell


Figure 3. Screen shots of a prototype interactive applet show results of a localized search for restaurants in two different areas. Popups are placed so that they do not overlap any of the icons or any of the other popups. (Map data courtesy of Google Maps. Click on thumbnails for full-size images.)


Figure 4. Screen shots of a prototype interactive applet show directions from one place to another, including important information along the way. Popups are placed so that they do not overlap the directions, any of the icons, or any of the other popups. (Map data courtesy of Google Maps. Click on thumbnails for full-size images.)