This thesis presents the design and implementation of an application for a large interactive public display. The role of the application is to visualize and control the sensor systems that are located in the Human Health and Activity Laboratory, a smart home research facility at Luleå University of Technology. These sensor systems work independently from each other and present different kinds of data while there is no easy way to find out if the systems are active or if there are any problems. There is also a need to be able to present the laboratory, displaying images for public users with descriptions. The project had two main phases, where the first one was to choose frameworks and database while also plan a user interface for the application that was useful for people using the laboratory. This was done by first drawing the application on paper to define functionality and appearance and then in Power Point where two people got to test the application and use their feedback as a result for the implementation. The second phase was to implement the application and integrate the systems, which included figuring out how to do this in the best possible way and lessons learned from it. It also included figuring out how to create a real dynamic menu depending on URL location and rewriting and rethinking a lot of CSS styling to create the design that was wanted. As a conclusion, the project was a success and it is a very good and easily extendable solution for the problem stated and it has a potential to be a very useful tool in the future.

Brainstorming ist eine weit verbreitete Technik zur Ideengenerierung, die dazu dient, in kurzer Zeit möglichst viele verschiedene Ideen zu sammeln. Diese Technik wird zur Problemlösung, Entscheidungsfindung oder zur Erstellung neuer Konzepte verwendet. Entstandene Ideen können in Form eines Affinitätsdiagramms auf separaten Notizzetteln dargestellt werden. Für die kollaborative Erstellung eines Affinitätsdiagramms eignen sich wegen der Größe und der Fähigkeit der direkten Manipulation interaktive Displaywände. So können die Nutzer in der ersten Phase des Brainstormings individuell und simultan Ideen sammeln, bevor diese in der zweiten Phase gut übersichtlich auf dem großen Display sortiert und bewertet werden. In dieser Arbeit geht es um die Anforderungen, die eine Brainstorming-Anwendung besitzen muss, damit an einer interaktiven Displaywand ein Affinitätsdiagramm erstellt werden kann. Dabei liegt der Fokus zunächst auf grundlegenden Funktionalitäten, die basierend auf der Analyse von kommerziellen Brainstorming-Anwendungen ausgewählt werden. Aus dieser Analyse und weiterer verwandter Arbeiten zu den Themen Brainstorming und Kollaboration an interaktiven Displaywänden werden Konzepte für eine Brainstorming-Anwendung vorgestellt. Ausgewählte Konzepte wurden daraufhin prototypisch implementiert. Diese werden basierend auf Nutzer-Tests untersucht und ausgewertet, um daraus Schlüsse für die weitere Herangehensweise zu ziehen.:1 Einleitung 1 2 Verwandte Arbeiten 3 2.1 Interaktive Displaywände 3 2.1.1 Interaktion an Displaywänden 3 2.1.2 Kollaboration 6 2.2 Brainstorming 8 2.2.1 Analoges Brainstorming 8 2.2.2 Digitales Brainstorming 10 2.3 Designempfehlungen für eine Brainstorming-Anwendung an einer interaktiven Displaywand 15 3 Konzepte zur kollaborativen Erstellung eines Affinitätsdiagramms an interaktiven Displaywänden 19 3.1 Aufteilung der Funktionalitäten in verschiedene Menüs 20 3.1.1 Globales Menü 20 3.1.2 Lokales Menü 21 3.1.3 Kontextmenü 23 3.2 Erstellen, Bearbeiten und Löschen von Notizen 23 3.2.1 Erstellen von Notizen 24 3.2.2 Öffnen des Kontextmenüs 25 3.2.3 Bearbeiten und Löschen einer Notiz und dessen Inhalt 26 3.3 Sortieren und Gruppieren der Notizen 27 3.4 Kollaborative Funktionalitäten 28 3.5 Fingermenü als Ergänzung der bestehenden Menüs 33 4 Prototypische Implementierung 37 4.1 Technische Rahmenbedingungen 37 4.2 Implementierungsgrundlage 38 4.3 Umgesetzte Konzepte 39 4.4 Resultate 42 5 Auswertung und Ausblick 45 5.1 Auswertung der vorgestellten Konzepte und des implementierten Prototypen 45 5.2 Ausblick 49 5.2.1 Evaluation mit gut funktionierendem Prototypen 49 5.2.2 Erweiterung bestehender Funktionalitäten 49 5.2.3 Weitere Möglichkeiten der Interaktion an Displaywänden 51 5.3 Zusammenfassung 53 A Anhang 55 Literatur 57 / Brainstorming is a widely used technique aiming to collect as many different ideas as possible in a brief amount of time. This technique is used for problem solving, decision making or the creation of new concepts. Emerged ideas can be represented in the form of an affinity diagram on sticky notes. For the collaborative creation of an affinity diagram, interactive display walls are a suitable medium because of their size and the possibility of direct manipulation. In the first phase of brainstorming, users can collect ideas individually and simultaneously. These ideas can be sorted and evaluated on the large display in a clearly arranged manner in the second phase. This work deals with requirements, that a brainstorming application has to offer to create an affinity diagram on an interactive display wall. Initially, the focus will be on basic functionality based on the analysis of commercial brainstorming tools. From this analysis and other related works on the topic of brainstorming and collaboration on interactive display walls, concepts for a brainstorming application are presented. Selected concepts were then prototypically implemented. Based on user tests, the concepts will be examined and evaluated.:1 Einleitung 1 2 Verwandte Arbeiten 3 2.1 Interaktive Displaywände 3 2.1.1 Interaktion an Displaywänden 3 2.1.2 Kollaboration 6 2.2 Brainstorming 8 2.2.1 Analoges Brainstorming 8 2.2.2 Digitales Brainstorming 10 2.3 Designempfehlungen für eine Brainstorming-Anwendung an einer interaktiven Displaywand 15 3 Konzepte zur kollaborativen Erstellung eines Affinitätsdiagramms an interaktiven Displaywänden 19 3.1 Aufteilung der Funktionalitäten in verschiedene Menüs 20 3.1.1 Globales Menü 20 3.1.2 Lokales Menü 21 3.1.3 Kontextmenü 23 3.2 Erstellen, Bearbeiten und Löschen von Notizen 23 3.2.1 Erstellen von Notizen 24 3.2.2 Öffnen des Kontextmenüs 25 3.2.3 Bearbeiten und Löschen einer Notiz und dessen Inhalt 26 3.3 Sortieren und Gruppieren der Notizen 27 3.4 Kollaborative Funktionalitäten 28 3.5 Fingermenü als Ergänzung der bestehenden Menüs 33 4 Prototypische Implementierung 37 4.1 Technische Rahmenbedingungen 37 4.2 Implementierungsgrundlage 38 4.3 Umgesetzte Konzepte 39 4.4 Resultate 42 5 Auswertung und Ausblick 45 5.1 Auswertung der vorgestellten Konzepte und des implementierten Prototypen 45 5.2 Ausblick 49 5.2.1 Evaluation mit gut funktionierendem Prototypen 49 5.2.2 Erweiterung bestehender Funktionalitäten 49 5.2.3 Weitere Möglichkeiten der Interaktion an Displaywänden 51 5.3 Zusammenfassung 53 A Anhang 55 Literatur 57

Mind-Mapping ist eine effiziente und universelle Kreativitätstechnik, die es ermöglicht, in einer Gruppe ein komplexes Thema aufzuschlüsseln. Dabei wird eine Assoziation verschiedener Schlüsselwörter, Notizen und Grafiken zu einem zentralen Begriff vorgenommen und dadurch eine Möglichkeit zur schrittweisen kompakten Visualisierung eines Themengebietes geschaffen. Große interaktive Display Walls erlauben durch ihre Fläche und ihre interaktiven Möglichkeiten das kollaborative Erstellen von Mind-Maps, so dass jeder Nutzer individuell Teile kreieren und der gemeinsamen Mind-Map beifügen kann. In dieser Ausarbeitung werden geeignete Interaktionskonzepte zur Erstellung von Mind-Maps an interaktiven Display Walls vorgestellt. Dabei liegt der Fokus auf den Möglichkeiten der Erkennung der Nutzerposition vor der Display Wall, um jedem Benutzer eine persönliche Linse und damit Zugriff auf persönliche Werkzeuge zu ermöglichen, sowie der Interaktion mittels Stift und Touch zum Zwecke der Erstellung und Platzierung von Mind-Map Elementen. Dafür werden zunächst verwandte Arbeiten aus den Bereichen: Mind-Maps, Kollaboration und Interaktion mit interaktiven Display Walls und Magische Linsen analysiert. Basierend auf einem Grundverständnis dieser drei Domänen wurden Konzepte zur kollaborativen Erstellung von Mind-Maps an interaktiven Display Walls mit persönlichen Linsen präsentiert. Ausgewählte Konzepte wurden dabei in einer prototypischen Implementierung umgesetzt und boten erste aussichtsreiche Einblicke, wie das Mind-Mapping der Zukunft erfolgen könnte. Dabei wurde insbesondere der Nutzen einer persönlichen Linse, als individuelle Visualisierungs- und Interaktions-Schnittstelle erkannt. / Mind-mapping is an effective and universal creativity technique, which allows to break down complex topics in a group activity. Therefore keywords, notes or images are being associated to a superordinate topic, in order to gradually create a compact visualization of a topic. Large interactive display walls allow the collaborative creation of mind-maps due to their size and options for interaction so that the users can individually create parts and integrate them into the collective mind-map. As part of this thesis, suitable concepts for the creation of mind-maps on interactive display walls are being presented. In this context, the emphasis is lying on the possibilities of using the position of the user in front the display wall, in order to offer every user a personal lens and thus access to personal tools, as well as the interaction with pen and touch in order to create and move mind-map-elements. Therefore related work of the topic areas: mind-maps, collaboration and interaction at interactive display walls and Magic Lenses will be analysed at first. Based on a fundamental understanding of these three domains, concepts for the collaborative creation of mind-maps on interactive display walls using personal lenses are being presented. Selected concepts were prototypically implemented and offered first promising insights on how the mind-mapping of the future could be done. In the process the particular benefit of a personal lens as an individual visualization- and interaction-interface has been recognized.

Mind-Mapping ist eine effiziente und universelle Kreativitätstechnik, die es ermöglicht, in einer Gruppe ein komplexes Thema aufzuschlüsseln. Dabei wird eine Assoziation verschiedener Schlüsselwörter, Notizen und Grafiken zu einem zentralen Begriff vorgenommen und dadurch eine Möglichkeit zur schrittweisen kompakten Visualisierung eines Themengebietes geschaffen. Große interaktive Display Walls erlauben durch ihre Fläche und ihre interaktiven Möglichkeiten das kollaborative Erstellen von Mind-Maps, so dass jeder Nutzer individuell Teile kreieren und der gemeinsamen Mind-Map beifügen kann. In dieser Ausarbeitung werden geeignete Interaktionskonzepte zur Erstellung von Mind-Maps an interaktiven Display Walls vorgestellt. Dabei liegt der Fokus auf den Möglichkeiten der Erkennung der Nutzerposition vor der Display Wall, um jedem Benutzer eine persönliche Linse und damit Zugriff auf persönliche Werkzeuge zu ermöglichen, sowie der Interaktion mittels Stift und Touch zum Zwecke der Erstellung und Platzierung von Mind-Map Elementen. Dafür werden zunächst verwandte Arbeiten aus den Bereichen: Mind-Maps, Kollaboration und Interaktion mit interaktiven Display Walls und Magische Linsen analysiert. Basierend auf einem Grundverständnis dieser drei Domänen wurden Konzepte zur kollaborativen Erstellung von Mind-Maps an interaktiven Display Walls mit persönlichen Linsen präsentiert. Ausgewählte Konzepte wurden dabei in einer prototypischen Implementierung umgesetzt und boten erste aussichtsreiche Einblicke, wie das Mind-Mapping der Zukunft erfolgen könnte. Dabei wurde insbesondere der Nutzen einer persönlichen Linse, als individuelle Visualisierungs- und Interaktions-Schnittstelle erkannt.:Einleitung Verwandte Arbeiten Konzepte zur kollaborativen Erstellung von Mind-Maps mit persönlichen Linsen an interaktiven Display Walls Prototypische Implementierung Fazit und Ausblick / Mind-mapping is an effective and universal creativity technique, which allows to break down complex topics in a group activity. Therefore keywords, notes or images are being associated to a superordinate topic, in order to gradually create a compact visualization of a topic. Large interactive display walls allow the collaborative creation of mind-maps due to their size and options for interaction so that the users can individually create parts and integrate them into the collective mind-map. As part of this thesis, suitable concepts for the creation of mind-maps on interactive display walls are being presented. In this context, the emphasis is lying on the possibilities of using the position of the user in front the display wall, in order to offer every user a personal lens and thus access to personal tools, as well as the interaction with pen and touch in order to create and move mind-map-elements. Therefore related work of the topic areas: mind-maps, collaboration and interaction at interactive display walls and Magic Lenses will be analysed at first. Based on a fundamental understanding of these three domains, concepts for the collaborative creation of mind-maps on interactive display walls using personal lenses are being presented. Selected concepts were prototypically implemented and offered first promising insights on how the mind-mapping of the future could be done. In the process the particular benefit of a personal lens as an individual visualization- and interaction-interface has been recognized.:Einleitung Verwandte Arbeiten Konzepte zur kollaborativen Erstellung von Mind-Maps mit persönlichen Linsen an interaktiven Display Walls Prototypische Implementierung Fazit und Ausblick