The Micro Smart Grid Tabletop

The Micro Smart Grid Tabletop

— A real world case study for tangible multitouch technologies for communicating complex concepts

Published in the Workshop Proceedings of the workshop Tactile/Haptic User Interfaces for Tabletops and Tablets (TacTT) 2014 during the ITS conference 2014 in Dresden.

Download Paper as PDF


In this paper we present a case study for an interactive surface, an explanatory tangible multitouch system in an exhibition context. The system is used as an expressive representation of the complex concept of Micro Smart Grids (MSGs) and their influence on our future energy infrastructure. We built the experience upon research on integrating tangibles into playful and exploratory learning environments. Beyond the well-researched learning experience with tangibles, we developed the system to stimulate and foster discussions on the subject of MSGs. Besides the technology behind the system we will discuss limitations and advantages of combining tangible and multitouch technologies. To conclude we present reflections on the design and interaction concepts that were embedded into the system.

General Terms

Design, Reliability, Experimentation, Human Factors


Tangible, Touchscreen, Surface, Interaction, Case Study


Global warming, sustainability and lately resilience are topics that matter to an audience beyond the scientific community. Due to the growing interest and the urgency presented by these topics, new tools for scientific communication are required. Tools that allow scientists as well as decision and policy makers to communicate complex issues to non experts, to foster an inclusive discussion on the basis of facts and scientific results.

The Berlin based research institute InnoZ is focusing on those topics, especially how transport, energy and information and communications technologies (ICTs) are involved in shaping the urban future and how new products and technologies in these areas of research are adopted by society (Wolter, 2014). The InnoZ runs a showroom in their Berlin headquarters, allowing visitors to explore new technologies and learn more about future changes in our energy and transport infrastructure.

In 2012 the InnoZ explored possibilities to extend their educational material to explain the topic of MSGs to other scientists, the public, as well as decision and policy makers. The InnoZ campus itself is a MSG, which is made visible by live data shown on a control terminal. The envisioned tool should go a step further and explain the structure of MSGs as well as their impact on our future energy infrastructure.


2.1 Design Process

The design process followed the principles of human centered design (Abras, Maloney-Krichmar, & Preece, 2004), by including not only stakeholders but future users in the design process from the beginning. The human centered design was executed in an iterative and adaptive manner (Smith et al., 2012), meaning that e.g. insights gathered from paper-prototyping (see Figure 1) were quickly implemented in feasibility prototypes to test the interactions on the actual hardware. Especially when working with large multitouch systems and tangible interactions, the prototyping becomes an important part of the design process, as it is the only way to experience the interactions e.g. in regards to responsiveness. This allowed us to identify and resolve problems in the interface and interaction design throughout the process and by that limiting the revisions at the end of the development process.


Figure 1. Paper-prototyping of the tangible interface

2.2 System Overview

The initial aim of our designs was to create a tool that would allow the research team to use the proposed system as an explanatory system to educate visitors on the matter of MSGs. As a basis for the explanatory system we created a virtual model of a MSG as well as a model of the surrounding energy infrastructure. The model was built upon statistics and estimations on energy consumption and production in Germany. On top of the model visualization was implement to explain the workings of the underlying model, respectively a MSG. The components of the model, consumers, producers, storage components and MSG-controller were represented by tangible tokens that could freely be combined by the users. In this paper we will refer to the tangible, physical objects that are placed on the interactive surface as tokens. Those tokens were an attempt to overcome the initial barrier of interacting with a complex system. Thus we made use of the attractiveness and playfulness of tangible interactions (Nagel, Pschetz, Stefaner, Halkia, & Müller, 2009; Wakkary & Hatala, 2006). We employed an interactive surface with tangible interactive tokens, thereby creating a setting for multi-user interaction and observation.

2.3 Interaction Concept

2.3.1 The components

As explained above, the basis for the system is a complex model based on statistics and estimations of energy production, consumption and storage. By analogy with the collected data the model is made up of three categories of components: consumers, producers and energy storage. The consumers are private households and industrial consumers, their consumption is dependent on the external parameters daytime and time of year, e.g. during daytime and especially during the winter the consumption is higher. The energy producers are divided by fossil fuels including nuclear energy and renewable energy. The latter are, similar to the consumers, dependent on external parameters. This includes e.g. solar energy’s dependency on cloudiness or wind energy’s dependency on wind speed. The category of energy storages holds electric cars, water pumps, natural gas energy converters as well as large batteries. In addition to the three main components a forth component, the MSG-controller is available to create a MSG.

Each component is represented by several tokens that can be combined freely by the users. For a more intuitive interaction the tokens belonging to the same category share the same form factor: triangle = producer, circle = consumer, square = storage, hexagon = MSG-Controller (see Figure 2). The specific identity of the component is printed on top of the token in the form of an icon.

Figure 2. The set of tokens

Figure 2. The set of tokens

2.3.2 Parameters

As mentioned in 2.3.1 the model has several parameters that influence the individual components. The whole model is running on a time loop of day/night as well as months, which influences the energy consumption as well as the production of energy e.g. through solar cells. In addition to the time data, the weather parameters wind and clouds can influence the energy production of the renewable energy producers. Beyond daytime and time of the year, the system offers three time scenarios: present-time, in 10 years ahead and in 20 years ahead. The three scenarios influence the datasets for the components behind the model. All parameter “states” are not only visually supported by highlighting the current state in the control bar, but also the visual appeal is changing. For example modifying wind speed changes the speed of the clouds or changing daytime changes the brightness (see Figure 3). This allows the spectators to create a connection between the changes of parameters and the changes within the system, e.g. less brightness equals less light and thereby less solar energy.

Figure 3. Parameter daytime: left-night, right-day

Figure 3. Parameter daytime: left-night, right-day

2.3.3 Relationships

The system displays two types of relationships between the components added to the current state through the tokens. On the one hand the information exchanged between consumers, producers and storage components are being visualized through fine grey lines and on the other hand the more important part, the flow of energy between the components, is visualized through a flow of particles. While of course the speed of transporting the energy is always the same, the visualization makes use of particle density within the stream to indicate higher and lower production levels and changes the color of the particles to allow users to differentiate between fossil (orange) and renewable (green) energy (see Figure 4).

Figure 4. Flow of fossil and renewable energy

Figure 4. Flow of fossil and renewable energy

2.3.4 Levels of Information

The whole system consists of several layers of information. The first layer consists of the tokens representing the components and their connections through the visualization of the model. The second layer is visualizing the “state” of the parameters that influence the system. The third layer is a layer of information that can be activated per component on demand, it shows more detailed information on every component (see Figure 5). The users can use the last layer of information to read short texts about every component and learn more about their impact on the energy infrastructure through visualized statistics. Those layers represent levels of information complexity, starting from the lowest level of learning how MSGs work in general. Down to the level of facts e.g. how much energy is produced by a certain power plant and the estimated production throughout the next 20 years. Through this we allow the user to dive deeper into the system and thereby allowing a deeper engagement (Hornecker, 2008).

Figure 5. Detailed information layer with graphs

Figure 5. Detailed information layer with graphs

2.3.5 Interaction

The user can start her journey of exploring the system with a blank plate or with a template that works like a puzzle game, in which the user sees 2D tokens on the screen and needs to place the 3D markers on top of it and by that assembling a basic setup to further explore the system. Through those two modes the user can receive different levels of guidance.

By placing a token on the table, a visual 2D representation of the token shows up below the token, the shape is corresponding to the shape of the token to create a visual connection between token and visualization. Furthermore, the two-dimensional representation behaves according to the category it represents: producers are generating energy particles and distributing those to available consumers; consumers are aggregating energy particles and consuming them; storage components are aggregating unused energy to store them. The storage components differ from the other components as their 2D representation have a visual indicator of the amount of energy that is stored in the individual component. During the design process the responsiveness and visual correspondence between tokens and visualization played an important role, as we tried to achieve a high “perceived coupling” effect to create an intuitive interaction with a feeling of “direct haptic manipulation” (Hornecker, 2006; Hornecker & Buur, 2006).

The MSG-Controller plays a significant role, as it is essential to understanding the workings of MSGs. If no MSG-Controller is present on the table, the components almost behave as if everything is connected to everything. As soon as the MSG-Controller is added to the mix, the new token adds a sense of smartness and structure to the relationships and connections between the components. Through the interaction of adding and removing the MSG-Controller token, the user can instantly observe how the visualization and the structure in the underlying model beneath changes.

In order to create a more realistic setting, the user can modify the parameters described in 2.3.2, allowing for the audience to observe changes in the energy system according to changes in the environment. Again, similar to the effect of the MSG-controller, the instant modification of the model through the parameters allows the users to change quickly between different states e.g. night and day and thereby observe and learn what this means e.g. for solar energy production.

If the user is interested in learning more about a specific component, she can click on info buttons that float along the 2D representation of the components. A small window will pop up allowing the user to discover more information on that component.

In order to create a non-fragmented view of the visualization and the interactions happening, we had to create interfaces and visualizations that were accessible from every side of the table. While the main interaction through tangibles is possible from every side and the observations as well, the manipulation of properties is only possible from the two long sides of the table due to the limited space on the screen.

2.4 Theoretical Framing of the Interaction

In recent years, several descriptive frameworks for tangible interaction and tangible interfaces have been developed (Hornecker, 2006; Hornecker & Buur, 2006; Mazalek & van den Hoven, 2009; Shaer & Hornecker, 2009). In the following section we build upon the framework by Hornecker et al, because in our context a specific focus lies upon the learning experience by means of the interaction. This has also been covered by Hornecker’s work, which extends beyond the framework itself into the area of learning through tangible interaction or rather tangible interfaces. Horneckers framework builds upon four main pillars: tangible manipulation, spatial interaction, embodied facilitation and expressive representation. Those categories are not exclusive, which means that applications that embed those properties span across multiple pillars.

Through the visual correlation of tokens and visualization on the screen and the different visualization schemes we created a strong coupling between the physical and the digital. We were able to establish a consistent visual storytelling and an intuitive and seamless interaction, following the pillars of tangible manipulation and expressive representations. In terms of expressiveness, our approach sees the tokens as essential parts of the construction of the system through the users, even though they don’t represent a change within the system as it would be required according to the definition of expressiveness by Ullmer and Ishii (Ullmer & Ishii, 2000). The theme of expressiveness is further more picked up by Marshall et al in the area of learning through tangibles, which is essential for our approach (Marshall, Price, & Rogers, 2003). From their point of view, our approach is not expressive; instead it fulfills the requirements for what they call an exploratory system. As we try to use the tangibles to help users understand the underlying model and make use of the tangibles as “present-at-hand , the user will be more likely to focus on the way the system works, rather than reflecting on the history of their own interaction with it” (Marshall et al., 2003 p3).


Papers that focus on the interaction with tangibles often only briefly explain the actual technology used for the experiments. This makes it hard for other researchers and practitioners to build upon the experience gained on the technology side. This is why we will spend the next section on elaborating the technological side of our project as well as the pros and cons.

For the multitouch table we employed a large LCD system as a display. Like most common multitouch systems that don’t use capacitive touch technology, the system uses multiple HD infrared-enabled cameras to track touch events as well as fiducials (printed 2D codes). Using infrared tracking systems has the advantage of being able to use touch events as well as tangible objects both in combination with printed fiducials. Then again, the infrared technology has several downsides which become present in an exhibition context. Even though the technology uses the infrared light spectrum, it is still sensitive to other spectrums of the light. Changing light intensity in the surrounding sometimes calls for readjustment of the system, the same is true for light sources that heat up throughout the day or, even worse, direct sunlight. Sources of light and/or heat can create noise on the infrared image. In order to achieve very precise tracking results, which are required for tracking fiducials, the trackers need to be adjusted carefully. This sometimes conflicts with exhibition spaces being lively spaces. An interactive piece build for group interaction will be under a lot of physical friction. Sometimes exhibits additionally need to be relocated e.g. for rearranging or special events. All those factors have an impact on the system and often create need for readjustments.

The design of the tangible objects is quite limited by the required integration of the printed fiducials. A big problem of tangible tokens for interfaces is visual or tactile feedback, as Ishii and Ullmer illustrate “unlike malleable ‘bits’, ‘atoms’ are relatively inflexible” (Ishii & Ullmer, 2012 p469). Our first attempt was to insert a solid light-reinforcing material into the black tokens to allow us to use the emitted light from the screen and make it become visible at the sides of the token. This confronted us with two problems: for one, light reinforcing plastics only achieve really good results with low ambient light, additionally we were required to use special infrared see-through material for the 2D codes. The latter was the reason we were unable to pursue the plan of creating responsive tokens as the see-through 2D codes didn’t meet our requirements for precise tracking results. In the end, black and white 2D codes on solid black tokens were used.


Our interactive system stands in a line of projects dealing with tangible interfaces that visualize flow and relationship. Most projects from the category of what Ishii and Ullmer call “interactive surfaces” or “workbench surfaces” (Ishii & Ullmer, 2012) that are similar to our project fall into two subcategories: one category focuses on visualizing the flow of real world entities like wind, light or in our case energy. The other category contains systems that visualize relationships of objects through a flow- and network-like visualization.

4.1 Real world entities

The first category consists of projects that create tangible interfaces, or rather tangible interactive visualizations, which build upon real-world models. These projects use attributes that exist in the real world and map them onto the interface or surface. The projects try to keep the abstraction between the real-world model and the artificial model as small as possible in order to create an exploratory tangible system which, according to Marshal et al, allows for the learner to explore the system through practical exploration and thereby learn more about the underlying structure (Marshall et al., 2003).

The most prominent example is Urp — the urban planning workbench (Underkoffler & Ishii, 1999) which “allows physical architectural models [to be] placed on an ordinary table surface to cast shadows accurate for arbitrary times of day; to throw reflections off glass facade surfaces; to affect a real-time and visually coincident simulation of pedestrian-level wind-flow”(Underkoffler & Ishii, 1999 p1). In this example, the real-world model of wind and light can be explored through tangible tokens that represent buildings and interact with the projection, allowing the user to directly manipulate the virtual model and simulation through the tokens.

Illuminating Light, published one year earlier by the same research group at MIT (Underkoffler & Ishii, 1998) is a “rapid prototyping [system] of laser-based optical and holographic layouts” (Underkoffler & Ishii, 1998 p1). The tool uses tangible tokens to enable users to set up a system of light rays and objects that redirect, concentrate or burst the beams, which is visualized in a projected overlay, similar to Urp.

4.2 Relationships

The second category consists of projects, that similar to the first category, build upon real-world models, but rely on a more abstract visualization, as the real-world representation is too complex to visualize. Instead of showing the real connections between the components of the model, the visualization focuses on a representation that displays the relationship between components and their influence on each other, allowing the user to manipulate those influences and relationships and thereby foster deeper understanding.

In the area of sound- or music-interfaces the most cited case study is the Reactable by Reactivision (Jordà, Geiger, Alonso, & Kaltenbrunner, 2007), which allows the creation of electronic music through tangible tokens, that are visually connected to each other by the underlying display. The user can manipulate the music by using different tokens, changing orientation of the tokens, or modifying the distance between objects.

The IP network simulation is using a similar approach for visualizing IP networks (Kobayashi, Hirano, Narita, & Ishii, 2003). The set of tokens allow the user to create new nodes and modify the parameters, creating a virtual representation of an IP network and thereby explore the inner workings of such.

The last project from the subcategory of projects that focus on visualizing relationships between components is the Maeve project (Nagel et al., 2009). Maeve is an interactive multitouch installation that is enriched with tangible cards, which can be placed on the multitouch installation. Maeve uses architectural metadata collected by the research project Mace (Stefaner et al., 2007). Each card represents an item from the database. Placing a card onto the table allows the user to explore connections and relationships between the item and other items in the database.


Our reflections derive from the observation of users interacting with the system. The evaluation was collected through interviews with three designers who were involved in the development and the deployment, as well as two instructors who work with the table in the showroom.

5.1 Still a WOW-Effect

Even though tabletop multitouch systems are frequently used e.g. in exhibitions or trade fairs, those systems are still able to create a WOW-effect among visitors. At the same time, the widespread use of multitouch technology in smartphones, tablets and even household appliances creates similar expectations towards big multitouch systems in regards to interactions. A good example to illustrate this is the design of the information popups. In one of the first prototypes, those windows were programmatically floating elements, but the tests showed that users were trying to apply common multitouch interaction patterns, like “pinch” to zoom and “drag” to move the window (see Figure 6). In the next iteration we implemented those interactions, which helped creating a more fluent interaction.

Figure 6. User trying to pinch-zoom an information window

Figure 6. User trying to pinch-zoom an information window

5.2 Social Interaction

An observation reported by all interviewed persons was the tabletop’s function as a catalyst for social interaction, especially fostering discussions among the visitors. The interaction was not only between visitors and instructor but also among the groups themselves. Beyond verbal discussions that arose, common observations were the physical collaborations while using the table, originating from the “non-fragmented” visibility of the visualization, giving it an overall performative quality (Hornecker & Buur, 2006), a phenomenon often described in similar settings (Huang, Mynatt, Russell, & Sue, 2006; Nagel et al., 2009).

5.3 Differences between adults and children

As intended by the design, the physical tokens were not only an eye-catcher, but also attracted attention and interest leading to an immediate interaction with the tokens and thereby the system. The tokens had this effect on children and young people as well as on adults. Nonetheless, it was reported that the intuitive usage and playful exploration was more powerful on the younger generations. They seemed to understand the workings of the model a lot faster than adults through their more playful interaction with the table.

5.4 Learning

It is hard to elaborate on the long-time learning effect triggered by the table as the groups visiting the space are only using the table for a limited time. Accordingly, the envisioned deeper layers of information were not accessed in many cases. Most users concentrated on the basic structure of the MSG. Beyond the factor of available time, we believe that the user’s limited use of access to the detailed information also depends on the fact that the process of accessing the detailed information is a very focused interaction that in turn is hard to share with a bigger group. In contrast to the focused interaction the token-based interaction can be executed in a collaborative manner and the results can easily be visually shared with a larger group.


The MSG tabletop allows users to explore a complex real-world model through a playful and explorative interaction. The results from the observation show that the system is a good case study to highlight some of the remarkable features of tangible interfaces. As other research underlines, we were able to observe that large tangible interactive surfaces provide fertile ground for social interaction and the exploration of real-world models. Furthermore we were able to observe that large tangible interfaces can foster discussions on the topic visualized in the interface. On the other hand we also observed that more focused single-user interactions were not well received by the users.

6.1 Further Research

The area of learning through tangible interfaces in regards to children is widely covered in the research community (O’Malley & Fraser, 2004), while this topic lacks the same level of detail in regards to adults. In some regards, similar effects with adults were observed by the related works mentioned above, while other researchers point out that some tactile thinking disappears while we grow up (e.g. finger counting) (Goswami, 2004). This might lead to other results in terms of learning through tangible interfaces. Our reflection is only looking at the overall experience of the tool, anyhow we discovered a lack of information on the difference between the interaction of children and adults with tangible interfaces throughout our literary research. Consequently, we believe that more research on this topic could help to apply the knowledge from the vast amount of research on learning through tangible interfaces with children to the interaction of adults.


The project was put to life by the IXDS team (Jonathan Cohen, Andre Knörig, Felix Lange, Sebastian Meier, Dimitar Ruszev, Julia Werner and Reto Wettach) in cooperation with the prototype – Moers Peter Sailer GbR who helped with the theoretical framework as well as an in-depth data aggregation. The technology, especially the display unit by, and furniture was assembled by werk5 GmbH.

In a recent project we were able to use the latest multitouch and fiducial tracking technology and we were pleased to see that the dependency from ambient light was a lot better than with the technology we used for the system described in this paper. Nothing the less, the described problems remain, if only less severe.


  • Abras, C., Maloney-Krichmar, D., & Preece, J. (2004). User-centered design. In Encyclopedia of Human-Computer Interaction.
  • Goswami, U. (2004). Neuroscience and education. British Journal of Educational Psychology, 74(Pt 1), 1–14. doi:10.1348/000709904322848798
  • Hornecker, E. (2006). An Encompassing View on Tangible Interaction: A Framework. CHI 2006 (pp. 1–4).
  • Hornecker, E. (2008). “I don’t understand it either, but it is cool” – Visitor Interactions with a Multi-Touch Table in a Museum (pp. 1–8). Presented at the IEEE Tabletop.
  • Hornecker, E., & Buur, J. (2006). Getting a Grip on Tangible Interaction: A Framework on Physical Space and Social Interaction (pp. 1–10). Presented at the CHI 2006.
  • Huang, E. M., Mynatt, E. D., Russell, D. M., & Sue, A. E. (2006). Secrets to success and fatal flaws: the design of large-display groupware. IEEE Computer Graphics and Applications, 26(1), 37–45.
  • Ishii, H., & Ullmer, B. (2012). Tangible User Interfaces. In J. Jacko, The Human-Computer Interaction Handbook. CRC Press.
  • Jordà, S., Geiger, G., Alonso, M., & Kaltenbrunner, M. (2007). The reacTable: Exploring the Synergy between Live MusicPerformance and Tabletop Tangible Interfaces. Presented at the TEI ’07: Proceedings of the 1st international conference on Tangible and embedded interaction.
  • Kazue Kobayashi, Mitsunori Hirano, Atsunobu Narita, and Hiroshi Ishii (2003) A tangible interface for IP network simulation. In CHI ’03 Extended Abstracts on Human Factors in Computing Systems (CHI EA ’03). ACM, New York, NY, USA, 800-801. DOI=10.1145/765891.766000
  • Marshall, P., Price, S., & Rogers, Y. (2003). Conceptualising tangibles to support learning (pp. 101–109). Presented at the IDC ’03: Proceedings of the 2003 conference on Interaction design and children, New York, New York, USA: ACM. doi:10.1145/953536.953551
  • Mazalek, A., & van den Hoven, E. (2009). Framing tangible interaction frameworks. Artificial Intelligence for Engineering Design, Analysis and Manufacturing, 23(03), 225–235. doi:10.1017/S0890060409000201
  • Nagel, T., Pschetz, L., Stefaner, M., Halkia, M., & Müller, B. (2009). mæve – An Interactive Tabletop Installation for Exploring Background Information in Exhibitions. In Human-Computer Interaction. Ambient, Ubiquitous and Intelligent Interaction (Vol. 5612, pp. 483–491). Berlin, Heidelberg: Springer Berlin Heidelberg. doi:10.1007/978-3-642-02580-8_53
  • O’Malley, C., & Fraser, D. S. (2004). Literature Review in Learning with Tangible Technologies.
  • Shaer, O., & Hornecker, E. (2009). Tangible User Interfaces: Past, Present, and Future Directions. Foundations and Trends® in Human–Computer Interaction, 3(1-2), 1–137. doi:10.1561/1100000026
  • Smith, P. J., Beatty, R., Hayes, C. C., Larson, A., Geddes, N. D., & Dorneich, M. C. (2012). Human-Centered Design of Decision Support Systems. In J. Jacko, The Human-Computer Interaction Handbook. CRC Press.
  • Stefaner, M., Vecchia, E. D., Condotta, M., Wolpers, M., Specht, M., Apelt, S., & Duval, E. (2007). MACE – enriching architectural learning objects for experience multiplication (Vol. 4753, pp. 322–336). Presented at the EC-TEL’07: Proceedings of the Second European conference on Technology Enhanced Learning: creating new learning experiences on a global scale, Berlin, Heidelberg: Springer-Verlag. doi:10.1007/978-3-540-75195-3_23
  • Ullmer, B., & Ishii, H. (2000). Emerging frameworks for tangible user interfaces. IBM Systems Journal, 39(3), 915–931. doi:10.1147/sj.393.0915
  • Underkoffler, J., & Ishii, H. (1998). Illuminating Light: An Optical Design Tool with a Luminous-Tangible Interface (pp. 1–8). Presented at the CHI 2006.
  • Underkoffler, J., & Ishii, H. (1999). Urp: A Luminous-Tangible Workbench for Urban Planning and Design (pp. 1–8). Presented at the CHI 2006.
  • Wakkary, R., & Hatala, M. (2006). Situated play in a tangible interface and adaptive audio museum guide. Personal and Ubiquitous Computing, 11(3), 171–191. doi:10.1007/s00779-006-0101-8
  • Wolter, D. F. (2014). InnoZ: Schwerpunkte. Innoz.De. Retrieved September 9, 2014, from