Meine Rolle
Design und Konfiguration des Grid-Features
Teammitglieder
4
Entstanden
Im Rahmen des Projektmoduls Mixed Reality im 7. Semester 2024/25
Methodik
What?
Im Rahmen des Projektes Mixed Reality sollte in Gruppen eine Mixed Reality Anwendung für die Meta Quest mit Unity entwickelt werden: MetaQuest & Draw ist eine Mixed-Reality-Anwendung, die es Nutzerinnen und Nutzern ermöglicht, digitale Vorlagen (Templates) in der realen Umgebung zu platzieren und als Zeichenhilfe zu nutzen. Das Projekt richtet sich sowohl an Kinder, um spielerisch Kreativität zu fördern, als auch an Erwachsene, die sich ans Zeichnen heranwagen möchten.
How?
Mit der mit Unity umgesetzten Anwendung kannst du vorgefertigte Templates durch die MetaQuest-Brille in deiner realen Umgebung sehen und nach Belieben platzieren – sei es auf einer Leinwand, einer Wand oder einem anderen Untergrund. Die Anwendung bietet eine intuitive Benutzeroberfläche, mit der Templates ausgewählt, positioniert, skaliert und verschoben werden können. Ein dynamisches Grid unterstützt die genaue Ausrichtung der Vorlagen. Die Interaktion erfolgt über Hand-Tracking, Raycast oder Controller-Steuerung, um eine flexible Bedienung zu ermöglichen.
Why?
In einer zunehmend digitalen Welt verlieren viele Menschen den Zugang zu kreativem, haptischem Schaffen wie dem Malen. Unser Ziel ist es, das Zeichnen durch Mixed Reality interaktiver, zugänglicher und inspirierender zu gestalten. Kinder entdecken so spielerisch und innovativ den Zugang zum Kunsthandwerk. Kreativität und handwerkliches Schaffen wird dadurch auch bei Erwachsenen gefördert. Und es reduziert den Frust bei Anfängern und steigert die künstlerische Lernkurve. In Zukunft könnte die Anwendung um Farb- und Zeichenwerkzeuge, KI-gestützte Vorlagen und AR-gestütztes Lernen erweitert werden, um noch mehr kreative Möglichkeiten zu bieten.
Insights
Wie können wir also Kunstinteressierten helfen malen zu lernen? Aus der Beantwortung der Frage ergaben sich folgende Insights:
Kreativität erleben
Digitale Inhalte intuitiv und spielerisch in die reale Welt integrieren.
Einfach zu erreichen
Eine benutzerfreundliche Steuerung, die ohne technisches Vorwissen leicht verständlich ist.
Fördern und inspirieren
Kreativität und Produktivität durch Mixed Reality neu denken und Menschen ermutigen, sich auszuprobieren und kreativ zu werden.
Idee
Eine Mixed-Reality-Anwendung, entwickelt mit Unity für die Meta Quest. Mixed Reality kombiniert die reale Umgebung mit virtuellen Elementen, die über das Headset in die physische Welt integriert werden. In dieser Anwendung werden Raster und Vorlagen digital in die echte Umgebung projiziert – beispielsweise auf eine Wand oder Leinwand, die bemalt werden soll. Das Raster kann individuell angepasst werden: Nutzer:innen können festlegen, wie viele Kästchen angezeigt werden und wie stark oder transparent das Raster sichtbar ist. Ebenso lassen sich die Vorlagen in Größe und Transparenz variieren, sodass sie optimal zur realen Zeichenfläche passen, ohne den kreativen Prozess zu stören. So entsteht ein intuitives Hilfsmittel, das analoge Kunst mit digitalen Werkzeugen verbindet.
MetaQuest & Draw
Umsetzung
Um den Nutzungskontext und die geplante User Experience von MetaQuest & Draw zu visualisieren, entwickelte das Team ein Storyboard, das den typischen Ablauf einer Interaktion zeigt. Es beschreibt den Weg einer Person, die gerne malen möchte, sich aber unsicher fühlt oder bisher keine Erfahrung hat. Das Storyboard half dem Team, die Emotionen, Motivation und Nutzerziele besser zu verstehen und das Interface so zu gestalten, dass es intuitiv, unterstützend und ermutigend wirkt – besonders für Anfänger:innen oder Personen, die sich künstlerisch ausprobieren möchten.
Im frühen Stadium der Entwicklung von MetaQuest & Draw erstellte das Team ein Project Design Document (PDD), um die Idee zu strukturieren, Zielgruppen zu definieren und Kernfunktionen festzuhalten. Dieses Dokument diente als gemeinsame Grundlage für Konzept, Interaktionsdesign und technische Umsetzung in Unity für die Meta Quest 3. Das PDD fasst alle wesentlichen Designentscheidungen zusammen – von der Zielsetzung bis zu konkreten Nutzerinteraktionen. Das Dokument gliederte sich in mehrere Abschnitte: App Info & Pitch: Definition des Projektnamens, Themenbereichs (Art & Creativity) und Zielsetzung. Basics: Beschreibung des Nutzungskontexts – das Malen vor physischen Flächen mit natürlicher Bewegung in der realen Umgebung. Events & Interactions: Planung zentraler Interaktionen wie das Platzieren, Verschieben und Entfernen von Vorlagen sowie haptische und auditive Feedbacks beim Zeichnen. UI & Menüs: Skizzierung eines intuitiven Interface-Konzepts mit einem zentralen Menü („Burger Menu“), über das Vorlagen und Rastergrößen ausgewählt oder Transparenzen angepasst werden können. Timeline: Definition erster Meilensteine für den Prototypen, einschließlich Menüstruktur, dynamischer Rastergröße und Zeichenmodus. Durch das Ausfüllen des Project Design Documents konnte das Team den Funktionsumfang klar priorisieren und ein gemeinsames Verständnis über den User Flow, Interaktionslogik und technische Anforderungen entwickeln. Es diente als entscheidender Schritt, um Ideen aus der Konzeptphase in eine umsetzbare technische Planung zu überführen.
Prototyping
Im nächsten Schritt entwickelte das Team in Figma ein interaktives Prototyping der Benutzeroberfläche für die Menüs der Anwendung. Ziel war es, eine intuitive und leicht verständliche Navigation zu gestalten, die sich in der Mixed-Reality-Umgebung der Meta Quest 3 natürlich anfühlt. Der Prototyp umfasste das Hauptmenü (Burger Menu/Bubble) sowie verschiedene UI-Elemente zur Auswahl und Anpassung von Vorlagen und Rastern. Dabei wurde besonderer Wert auf gute Lesbarkeit, klare Symbole und einfache Bedienbarkeit gelegt – auch für Nutzer:innen, die wenig Erfahrung mit MR-Anwendungen haben. Das Figma-Prototyping ermöglichte es, Interaktionsabläufe zu simulieren, Layouts zu testen und frühzeitig Feedback einzuholen, bevor die Designs in Unity umgesetzt wurden. So entstand ein konsistentes und benutzerfreundliches Interface, das die kreative Erfahrung in Mixed Reality optimal unterstützt.
Zeichen Vorlagen
Im Anschluss an das Interface-Prototyping entwarf das Team drei eigene Zeichenvorlagen, die später in der Anwendung verwendet wurden. Diese Vorlagen dienten als erste Inhalte für das Testen des Projektions- und Zeichenprozesses in der Mixed-Reality-Umgebung. Die Motive wurden bewusst einfach und klar strukturiert gewählt – ideal, um den Einstieg für Nutzer:innen ohne Vorkenntnisse zu erleichtern. Ziel war es, unterschiedliche Schwierigkeitsstufen und Formen zu erproben und zu verstehen, wie Linien, Raster und Transparenzen in der realen Umgebung wirken. Die erstellten Vorlagen bildeten die Grundlage für die ersten praktischen Tests in Unity, bei denen überprüft wurde, wie präzise und natürlich die Projektionen auf reale Flächen übertragen werden konnten.
Technische Umsetzung
Im Rahmen der technischen Entwicklung von MetaQuest & Draw war ich für die Implementierung des Grid-Systems verantwortlich. Das Grid bildet eine zentrale Funktion der Anwendung, da es als visuelle Orientierungshilfe für Nutzer:innen dient und direkt auf reale Wände oder Leinwände projiziert wird. Die Entwicklung erfolgte schrittweise in Unity – von der ersten visuellen Darstellung bis hin zur interaktiven Steuerung in der Mixed-Reality-Umgebung der Meta Quest 3.
Erste Implementierung des Grids
Zu Beginn wurde das Grid-System mit grundlegenden Funktionen umgesetzt. Die Steuerung erfolgte zunächst über Skripte direkt in Unity, da noch keine Benutzeroberfläche integriert war. Anpassungen wie Zellengröße, Abstände (Padding) und Farbe konnten in diesem Stadium ausschließlich im Editor vorgenommen werden. Das Grid wurde erfolgreich auf einer Plane visualisiert, was die technische Basis für die spätere Integration in die Anwendung bildete.
Erweiterung und UI
Im nächsten Schritt entwickelte ich eine erste Benutzeroberfläche, um die Grid-Parameter dynamisch anzupassen. So konnten Zellgröße und Abstände über Regler verändert werden. Da zu diesem Zeitpunkt noch keine Verbindung zur Meta Quest 3 bestand, erfolgten alle Tests im Game-Modus von Unity. Eine direkte Interaktion über die VR-Controller war noch nicht möglich. Anschließend wurde das Interface um zusätzliche Optionen erweitert: Nutzer:innen konnten nun die Farbe des Grids ändern sowie das Raster ein- oder ausblenden. Dies erleichtert die Anpassung an unterschiedliche Hintergründe und verbessert die Lesbarkeit. Mangels funktionierender Verbindung zur Brille erfolgte das Testen weiterhin im Editor.
Interaktives Menü mit Poke Interaction
Nach erfolgreicher Verbindung mit der Meta Quest 3 konnte das Grid-Einstellungsmenü vollständig in die VR-Umgebung integriert werden. Über die Poke Interaction lässt sich das Menü nun intuitiv direkt in Mixed Reality bedienen. Zudem wurde eine Funktion zur Anpassung der Linienstärke ergänzt, um die Sichtbarkeit und Ästhetik des Grids individuell zu gestalten. Parallel erfolgte eine Fehleranalyse und Optimierung der bestehenden Logik. Um die Benutzeroberfläche klarer zu strukturieren, wurde die Padding-Funktion entfernt und die darunterliegende Plane transparent gestaltet, sodass die Projektion natürlicher in der realen Umgebung wirkt. Diese Optimierungen verbesserten sowohl die Usability als auch die visuelle Integration des Grids.
Scan-Funktionalität & Projektion
Zum Abschluss wurde eine Raumscan-Funktion implementiert, basierend auf einem nachgebauten Tutorial aus der Unity-Community. Dabei ersetzte ich Debug-Texte durch eine projizierte Plane, die sich automatisch an reale Wände anpasst. So konnten Informationen direkt im Raum dargestellt werden – ein weiterer Schritt hin zu einer immersiven Mixed-Reality-Erfahrung.
Zusammenfügen aller Szenen
Im letzten Schritt des Projekts wurden alle einzeln entwickelten Komponenten in Unity zu einer gemeinsamen Anwendung zusammengeführt. Jedes Teammitglied hatte zuvor in einer eigenen Scene an einem spezifischen Feature gearbeitet – darunter das Grid-System, die Vorlagen-Projektion und das Hauptmenü, sowie das Handmenü. Beim Zusammenbau lag der Fokus darauf, die einzelnen Funktionen technisch zu verbinden und ein konsistentes Benutzererlebnis zu schaffen. Das Grid-System wurde erfolgreich mit dem Einstellungsmenü und den übrigen UI-Elementen verknüpft, sodass alle Anpassungen nun direkt innerhalb der VR-Anwendung vorgenommen werden konnten. Zudem wurden gemeinsame Tests durchgeführt, um Interaktionen, Performance und visuelle Stabilität in der Meta Quest 3 zu überprüfen. Durch diesen finalen Integrationsschritt entstand eine voll funktionsfähige Mixed-Reality-Anwendung, die alle Kernfunktionen – Vorlagenprojektion, Rastersteuerung und intuitive Menüinteraktion – miteinander vereint. So konnte das Projekt MetaQuest & Draw erfolgreich in eine kohärente, immersive Benutzererfahrung überführt werden.
Testing
Zur Überprüfung der Benutzerfreundlichkeit von MetaQuest & Draw wurde eine Usability-Evaluation mit fünf Testpersonen durchgeführt. Die Teilnehmenden unterschieden sich in Alter, Geschlecht und Vorerfahrung mit Virtual Reality, um ein breites Spektrum an Perspektiven zu erhalten.
Was gut funktioniert hat
Das Ein- und Ausblenden der Vorlagen war einfach und intuitiv. Die Platzierung und Skalierung der Templates wurden von fast allen Testpersonen als angenehm und leicht verständlich empfunden. Das Grid-System erwies sich als stabil und funktional – das „Ankleben“ des Grids an der Wand funktionierte zuverlässig.
Welche Probleme aufgetreten sind
Navigation: Wechsel zwischen Controller-, Hand- und Raycast-Interaktion führte zu Verwirrung. Menüstruktur: Buttons und Menüs waren nicht immer eindeutig oder konsistent. Menüposition: Das Menü erschien teilweise an unerwarteten Orten im Raum. Slider-Steuerung: Einstellungen für Grid- und Plane-Größe waren zu empfindlich. Handerkennung: Nach der Nutzung des Controllers wurden Hände nicht immer sofort erkannt. Templates: Fehlende Transparenz erschwerte das gleichzeitige Sehen und Nachzeichnen. Grid-Einblendung: Keine Möglichkeit, das Grid auszublenden, was beim Malen störend wirkte.
Austellung & Präsentation
Zum Abschluss des Projekts wurde MetaQuest & Draw im Rahmen einer öffentlichen Ausstellung präsentiert. Hier hatten Besucher:innen die Möglichkeit, die Mixed-Reality-Anwendung selbst auszuprobieren und den kreativen Zeichenprozess mit der Meta Quest 3 live zu erleben. Um das Konzept verständlich zu vermitteln, gestaltete das Team ein begleitendes Informationsplakat, das den Projektverlauf, die Funktionsweise der Anwendung sowie zentrale Designentscheidungen veranschaulichte. Das Poster diente als visueller Leitfaden für Interessierte und half, den technologischen Ansatz hinter der Anwendung leicht zugänglich zu machen.
Während der Ausstellung konnten die Gäste die Anwendung direkt testen und ihre eigenen Erfahrungen mit dem Projektion- und Zeichensystem sammeln. Viele zeigten sich besonders beeindruckt von der Möglichkeit, digitale Raster und Vorlagen nahtlos in die reale Umgebung zu integrieren. Das Feedback fiel durchweg positiv aus und bestätigte die intuitive Nutzung und das kreative Potenzial des Projekts. Die Ausstellung markierte den abschließenden Höhepunkt der Projektarbeit – ein Moment, in dem Konzept, Technik und Gestaltung zu einer erlebbaren Erfahrung zusammenfanden. Sie bot zudem wertvolle Einblicke in die Reaktionen realer Nutzer:innen.
Fazit
Die Evaluation zeigte, dass die Kernfunktionen der Anwendung – insbesondere Template-Projektion, Skalierung und Grid-System – technisch stabil und leicht verständlich umgesetzt wurden. Gleichzeitig wurde deutlich, dass Usability und Interaktionsdesign noch verbessert werden können, um eine konsistentere und intuitivere Benutzererfahrung zu schaffen. Mit den gewonnenen Erkenntnissen bietet MetaQuest & Draw eine solide Grundlage für zukünftige Weiterentwicklungen. Die Tests bestätigten das große Potenzial der Anwendung, kreatives Arbeiten in Mixed Reality zu erleichtern und traditionelle Kunst durch digitale Werkzeuge zu erweitern.
Reflektion
Für zukünftige Iterationen ergaben sich mehrere Optimierungsansätze: Konsistentes UI: Vereinheitlichte Menüstruktur und klarere visuelle Hierarchien. Direkte Interaktion: Auswahl der Malfläche per Raycast, ohne Menüumwege. Einheitliche Interaktionsmethode: Einheitliche Steuerung (z. B. ausschließlich Hand-Raycast) für bessere Orientierung. Einblendoption für das Grid: Flexibles Ein- und Ausblenden des Rasters, um den kreativen Prozess zu unterstützen. Optimierte Slider: Feinere Steuerung bei Größenänderungen. Template-Transparenz: Einstellbare Transparenz zur besseren Sichtbarkeit während des Malens.
