Personalized Compass: A Compact Visualization for Direction and Location

Where is Yellowstone National Park? Answering this question from a mobile search result often involves (a–b) unnecessary application switching and (b–c) repetitive zooming. (i–iii) A Personalized Compass (P-Compass) uses important points of interest to provide a first-order approximation to the answer, and can function independently or with a map. (a–c) Screenshots from a smartphone. (i–iii) Proposed P-Compass visualizations to be superimposed on the screenshots at the designated locations.


Maps on mobile/wearable devices often make it difficult to determine the location of a point of interest (POI). For example, a POI may exist outside the map or on a background with no meaningful cues. To address this issue, we present Personalized Compass (P-Compass), a self-contained compact graphical location indicator. P-Compass uses personal a priori POIs to establish a reference frame, within which a POI in question can then be localized. Graphically, a P-Compass combines a multi-needle compass with an abstract overview map. We analyze the characteristics of P-Compass and the existing Wedge technique, and report on a user study comparing them. P-Compass performs better for four inference tasks, while Wedge is better for a locating task. Based on our analysis and study results, we suggest the two techniques are complementary and offer design recommendations.


"Personalized Compass:
A Compact Visualization for Direction and Location,"

D. Miau, S. Feiner,
Proceedings of the 2016 CHI Conference on Human Factors in Computing Systems, May, 2016.


Where am I? Localization on a smartwatch form factor using (a) P-Compass, (b) Overview+Detail, and (c) Wedge. Note that P-Compass is a hybrid technique that integrates spatial separation (Overview+Detail) and cue-based (e.g., Wedge) techniques. While P-Compass and overview map both add an overview to the underlying detail view (a, b), the use of POI cues allows P-Compass to reduce the amount of occlusion. Furthermore, while P-Compass and Wedge both use proxies to indicate off-screen POIs (a, c), the overview provided by P-Compass allows it to communicate the relationship between multiple off-screen POIs.

P-Compass is a multi-needle compass that extends the concept of a conventional compass to help users establish a reference frame (i.e., associate the current visible map to the bigger world). P-Compass occupies a small footprint.

A user can change the position or size of a P-Compass. To move a P-Compass, the user first long-presses the P-Compass, then drags it to the desired location (right). To resize a P-Compass, the user uses the two-finger pinch gesture to adjust its size (left).

How does P-Compass help users establish a reference frame? P-Compass visualizes the locations of landmarks with respect to the compass reference point (which corresponds to the longitude, latitude of the map location underneath the reference point). In this example, three major US cities are shown to provide context to this otherwise non-descriptive map of Yellowstone National Park.

P-Compass is dynamically updated as a user interacts with the map. Here, as the user zooms out the map, a FOV box appears to indicate the locations of the off-screen POIs (Seattle, San Francisco, and Chicago in this example) with respect to the display boundary.

We performed a formal user study to compare P-Compass and Wedge, a well known technique to visualize off-screen POIs. Our study consists of five laboratory tasks: three smartphone and two smartwatch tasks. The above image shows the setup of the smartwatch tasks (the smartwatch is emulated on a wrist-worn smartphone). Based on our analysis and study results, we suggested the two techniques are complementary and offered design recommendations (please see the paper for details). As a rule of thumb, as the display size becomes smaller, and/or the distance of a POI increases, the benefits of P-Compass eventually outweigh those of Wedge.

P-Compass occupies a small footprint. On the last page of our paper we even tried to embed a P-Compass directly into text content. Here this P-Compass, like an inline equation, visualizes the location of Yellowstone National Pak with respect to three major US cities: Seattle, San Francisco, and Chicago. The three needles and the reference point of the P-Compass are color-coded.

Where is this place? In Street View it could be challenging to determine the location of a scene without sufficient context. For example, while this Street View indicates the address of the scene (141 N 1st St, San Jose, California), and shows a detail map of the area (St James Park), a visitor to San Jose may find it difficult to relate this scene to her mental map of San Jose.

In addition to the iOS applicaiton shown above, we prototyped P-Compass in StreetView. In our Street View prototype a P-Compass is formed by selecting locations from a known database locations (manually entered by a user). Here this P-Compass has two needles that visualize the direction of and ditances to two known locations to this user: San Jose Convention Center and Japan Town. Together, the two needles help the user interpolate where this scene is with respect to San Jose Convention Center and Japan Town.

P-Compass can also be embedded into a 3D map application. P-Compass can help a user maintain a reference frame as the user explores a 3D scene. This figure shows a clip captured from our prototype 3D map application with P-Compass. Here the P-Compass visualizes the location of the scene with respect to two New York City landmarks: Wolrd Trade Center and Columbia University. Note the P-Compass is dynamically updated as the user interacts with the scene.


Teaser (30s)

Full video (3m 35s)


[CHI 2016 presentation]


This research was funded in part by NSF Grants DGE-1144854, IIS-0905569, and IIS-1514429. We thank Mengu Sukan and Barbara Tversky for discussions, Hong Guo for refining the iOS prototype, James Xue and Kevin Lin for developing a web-based prototype.