Can you power every city?

This interactive installation was developed in collaboration with 100%FAT B.V. as my Master's thesis for my double degree programme M.Sc. Human Computer Interaction and Design. 100%FAT is an interactive installations company based in Enschede, the Netherlands, focusing on projects that combine art and technology in creative ways. While working on this thesis, 100%FAT supported with valuable feedback, provided technical resources and offered participants for research methods.

While a Tangible User Interface (TUI) is a Post-WIMP approach featuring physical objects (tokens) that act as an interface and serve as input and output devices, a Tangible Tabletop is a digital, table-sized (touch)screen usually using a small number of tokens.

100%FAT wanted to know whether a tangible tabletop interaction with a large number of tokens is feasible and, if yes, how this interaction would have to be designed, as this could provide them with a USP.

As they often design installations for museums, they chose this setting for this project and decided to base the underlying game simulation on the topic of the energy grid.

The technical feasibility of the project was not part of this thesis, putting the focus on the interaction design and user experience of the installation by highlighting the factors of:

• Usability
• Engagement
• Learning

The concept created should therefore clearly communicate how and when to use the tokens, bringing joy to users and motivating them to learn more about the energy grid while teaching them the basics. To achieve this, I applied the Design Thinking and Co-Design framework.

In the first phase of the Design Thinking cycle, I applied user research methods to empathise with the problem, the user and their needs. I used the following methods: (1) Literature Review, (2) Stakeholder Interviews in combination with a Co-Design Activity, and (3) Competitive Analysis.

During the literature review, I looked at books, articles, dissertations, conference proceedings, and other available resources to get an understanding of the designing for and prototyping of tangible tabletops, as well as related and important interaction design principles. It also informed on how to measure the different variables of usability, engagement and learning for an effective evaluation.

The findings of the literature review were collected, grouped and analysed using Miro.

I combined stakeholder interviews with a co-design activity to get a better understanding of the users' needs and expectations regarding the installation. While I conducted the interviews solely for my own research, I collaborated for the co-design activity with a fellow thesis student who focused on the technical implementation of the tangible tabletop for their thesis.

Based on the developed Actors Map (see below), two main categories of stakeholders got invited to these one-by-one sessions: Users and experts. The users were represented by the target group of museum visitors, while the expert interviews were conducted with experts from the fields of game design and/or physical and digital installation building and/or with a museum background.

To recruit both types of participants, we used convenience sampling. To identify suitable end users, a verbal screener needed to be passed, while the recruited experts were either from the case company 100%FAT, the University of Twente, or from a museum with which the case company had links. In total, we conducted 6 sessions with experts and 5 with users, all of which in person.

During the sessions, I collected qualitative data through notes, observations, photographs, and voice- and video-recordings. To analyse it, I first familiarised myself with the data before organising it by question. The created documents were then imported into Atlas.ti and coded with preset and emergent categories, before importing the findings into Miro and interpreting them for the analysis.

For both types of participants, I created a guideline which covered an introduction, demographic questions, a set of key questions specific to the participant’s role, a summary and a wrap-up.

For the users, the main goal with the interview was to understand their familiarity with tangible or interactive tabletops and their expectations towards the setup and use. For the experts on the other hand, the main goal was to learn from their area of expertise regarding creating games that encourage usability, engagement, and learning, prototyping for digital and physical installations, and what makes a successful museum installation.

The stakeholder interviews got combined with a bodystorming and rough prototyping Co-Design session. The goal of this activity was to actively involve the stakeholders in the design process by roleplaying and drafting themselves, and to get a better understanding of their expectations towards the interaction with multiple available tokens on a tangible tabletop.

The setup of this activity included simulating the screen of the tangible tabletop through paper on a table and offering representations of tokens such as paper cups alongside prototyping tools such as pens and scissors. On the wall, a second screen was simulated through paper as well.

The participants were instructed to try to use 20 tokens and to think out loud. They were also given background information about the energy grid and the scenario about being in a museum exhibition about the Dutch energy grid. They were asked to show what they notice, what makes them want to interact with such an installation and what they expect to happen.

All created tables can be seen here:

Analysing all the literature research and the stakeholder interviews with the co-design activity led to the following findings.

Some of the already known design considerations towards tangible tabletops include e.g. that the installation should support walk up and use, bimanual interaction of using both hands at the same time can be allowed to improve performance, and the token's shape should support the user in grabbing the token.

More other general design considerations are summarised in the following figure.

Combined with the stakeholders' point of views, the challenges with multiple tokens are mainly:

While the expectations on the interaction with multiple tokens are:

The target group of museum visitors includes specific characteristics and behaviours that should be considered in the design process.

For designing an intuitive experience, some of the design guidelines and interaction principles important for this type of interaction are ‘Visibility of System Status’ (Nielsen’s 10 Usability Heuristics for User Interface Design) ‘Affordance’ (Norman’s Principles of Interaction Design) and ‘Learnability’ (Tog’s Principles).

To design for engagment, mainly motivation and reward should be addressed by creating a feeling of competition and achievement but also incorporating accomplishments and progression. Collaboration can also support this together with a simple and understandable game setup.

For reaching a learning effect, the installation should support trial and error and direct the user's attention to the most important elements.

To get a deeper understanding about the user expectations and how the current market designs and develops games about the energy grid and/or in general for tangible tabletops, two feature comparison matrices were created. This was mainly used to identify possible design choices for the simulation (content feature comparison matrix on the left) and the interaction (interaction feature comparison matrix on the right).

With the help of a MoSCoW Analysis, the user requirements were prioritised and grouped into the following categories: (1) Must haves, (2) Should haves, (3) Could haves, and (4) Will not haves. This was done based on the empathising stage and the primary persona’s goals.

The most important requirements are the Must Haves, which are essential for the product to be successful:

At this stage, storyboards were created based on the three concepts from the morphological chart method. They visualised more in detail how Tanja Tangible would have interacted with them. See below the first page of the storyboard for concept A, which is based on the morphological idea of concept 1.

To measure how well the concepts and storyboards fulfilled the set requirements, a weighted table listed all requirements, their category within the MoSCoW spectrum, their weight, and the storyboards A, B, and C.

This finally resulted in the selection of the most viable concept for further development (Storyboard B based on Concept 2).

The final concept includes the following features:

• The setup places all tokens in holders around three sides of the tabletop, while the screen is being placed closely on the forth long side
• The tokens are divided in supply and demand tokens
• To encourage lifting and grabbing of the tokens, as well as a sturdy token design, the object that the token represents should be visually represented on the token itself
• To incorporate signifiers, the material, which the suppliers need to generate energy, should be used and repeated as icons
• The interface of the table shows various landmarks that can be unlocked through gained coins
• The second screen is used to display the current system status
• Different scenarios, such as wind changes, stronger or weaker currents or clouds blocking the sun, will affect how well renewable energy sources work and how much fossil fuel is needed
• The general goal of the simulation is to connect all energy demanders (houses) successfully to energy

Some of the findings that could inform the high-fidelity prototype were for example that there were a few minor logic issues during gameplay. Also, the areas in which tokens could be placed needed to be smaller, but the tokens should be placed closer together to enhance the feeling of grouping and provide a clearer overview despite the number of objects on the table.

Additionally, I was able to check whether active instead of passive tokens would benefit the user experience by simulating adding lights and/or physical buttons to the tokens. However, as neither were categorised as must requirements and neither addition seemed to add enough value to justify adding these functionalities, that idea was disregarded.

Based on the findings of testing the low-fi prototype, the high-fidelity prototype was supposed to be highly interactive and have a polished look and feel.

Taking into account the game’s features, the time restrictions for building the prototype, and the limitations of common design tools, it was decided to create a Wizard of Oz (WoZ) prototype

All screens were designed in Figma to be imported into ProtoPie to add high-fidelity (WoZ) interactions. ProtoPie was ideal for this project, as it allows cross-device interaction between different ProtoPie files. In that way, I could have the tabletop and second screen interface react to each other.

For the UI design, colour coding was used to create a clean and aesthetic design while maintaining an attractive gaming look and feel:

The base of the underlying background image (a grass field with trees and a river in the top left corner as seen below) was prompted in and generated by ChatGPT’s image generator. With Photoshop, trees were cut into the desired position.

After all components, animations and screens were designed in Figma, I could import them into ProtoPie and start adding the high-fidelity interactions. As the tangible tabletop that 100%FAT provided had an underlying Duplex system that could not detect and react to 20 tokens, this interaction was simulated through the ‘Key’ trigger in ProtoPie, which allows for actions to happen as a reaction to a key being pressed on a keyboard. Hence, a Bluetooth keyboard was connected, on which keys could be pressed from a distance to the table without the person interacting with the prototype noticing. Whenever a token was placed on the table, pressing the key ‘A’ by the wizard could trigger the correct reaction.

3D modelling and printing was used to design and create the tokens and their placeholders in Autodesk Fusion. With time constraints, no iteration of the tokens was possible.

The two ProtoPie files together with the 3D printed tokens and the underlying gameplay put the final setup in place.

Watch the following video to see the full interaction: