Tangible Map

Introduction

The Tangible Map is a an intuitive interface applied over an evolving dataset of community information. We embody this information through the use of static elements (buildings) and dynamic displays. The goal is a seamless experience allowing users from all backgrounds to quickly access and drill through to useful information. As a platform, this allows us to experiment with various configurations and modes of presenting complex concepts and information.

Traditionally, large displays have been confined to the realm of media consumption without interaction. Billboards and movie screens are easy to grasp because the user is not required to make it work. The Tangible Map poses a big challenge because users are not usually used to interacting with an installation large enough that all of it may not be in their field of view at any given time. Effectively guiding the user and managing the user’s attention becomes an important design goal.

From user tests, we determined that users want to explore everything when given a 3D model. Without clear boundaries, users will go out of bounds. With this in mind, the Tangible Map was designed with very specific points of interaction in mind, and certain types of information only appear in their respective sections of the UI. For example, the functionality of the iPad is limited to the search feature and an access point for data visualizations, while details appear only on the Info Panel. Additionally, the iPad is positioned right next to the Info Panel to make sure the user notices the appearance of the Info Panel upon tapping on a search result.

Interaction Trail

When working with a large display area, it is always more tempting to display more information. However, user tests revealed the importance of avoiding information overload in creating a smooth user experience. When presented with all potentially relevant options at once (for example, by selecting a building), users become more easily confused about where to find the information most pertinent to them. To address this, we made sure that the interaction trail the user takes is always long enough and always provides enough context. For example, the use of iconography and submenus in the Info Panel allows users to pick what information they want to see and gives users more context around what appears in the submenus.

Motion Graphics

Using motion to signal change to the user is a powerful tool we use to direct user attention. A prime example is the Pulse, which is activated whenever one or more buildings are selected. The Pulse originates from the top left of the display, directing the user’s attention to the Info Panel. The wave then radiates outwards, lighting up the appropriate buildings along the way. Use of the Pulse conveys information about change happening across the Tangible Map and ensures that the user notices.

Big Data Across Multiple Systems

Fragmented Data

Enormous amounts of data are generated on the MIT campus every second, and many of the entities that generate this data have made it publicly available. However, most of these sources are not only difficult to find, but also are in differing formats and require various methods of access. These methods include APIs, databases, raw file downloads, and even manually requesting files.

Unifying Streams

We created a server that is capable of tapping into the data streams provided from APIs and storing them into a database with a consistent format. A custom handler is created for each stream and updates the local database copy as often as is required by the data source. Because each handler is custom to the data source, the results can be parsed and reorganized to any format we require.

Data Visualizations

We partnered with the organizations that maintained their data in other formats in order construct static and dynamic visualizations from their data. Amidst the rest of our expanding codebase, we needed a standardized process of building a data visualization in order to keep this feature streamlined. The challenge arose from the fact that our data sets had varying formats with differing definitions of intensity.

We broke down the process into two components. The first component takes in and parses the raw data, whatever format it may be, building a mapping from each location point to its corresponding intensity and other relevant information. The second component then iterates through the complete mapping and builds the frontend view for the data visualization using the CreateJS library. This standardized process handles our current datasets comprehensively and is adaptive for new static and dynamic visualizations that may be built in the future.

One API

By caching all the data locally and in a unified format, it is now possible to serve all of it using a single API. This makes it easy for developers to create meaningful applications that use the wide spectrum of data generated at MIT. The Tangible Map is a great demonstration of this but in the future we see many more applications such as mobile applications, chatbots and digital personal assistants.

Conclusion

The Tangible Map was the result of a concerted effort to unify many streams of data into a coherent interactive experience. During testing, we observed that tactile interfaces encourage playful exploration, but often lead users to miss or ignore intended data displays. For others looking to develop larger-than sight displays or tangible interfaces, we discovered that by reducing content available to the user while leading attention with animation cues we could direct the users to specific targets, creating a more intuitive structure for information display.