After creating my first visual, I wanted to experiment more with TouchDesigner and come up with different visuals.
Mirror Effect on the First Visual
First, I changed the initial visual by applying a mirror effect. I aimed to create clear lines that resemble an audio wave. I liked that it looks like a mouth, and I am happy with the result. However, I wanted to try more variations.
Second Visual with Particles
For the second visual, I followed a tutorial on working with particles. While I enjoyed this process, the result felt too random for my project. I realized that I need more control over the particle movements to fit my theme better.
Mirror Effect on the Second Visual
Lastly, I mirrored the second visual. This resulted in too many mirrored sections and small particles. Despite this, I loved the outcomes and really enjoyed experimenting with TouchDesigner.
Next Step
In next step, I plan to make all of these visuals audio-reactive and then choose the one that fits my project best. I am having a lot of fun experimenting with TouchDesigner, I love itttt!
In my previous research, I focused heavily on virtual reality (VR). After my talk, I realized I could start with a more physical approach and explore the broader topic of gamification.
To begin, I want to start with something smaller in scope. I will look at physiotherapy exercises, setting aside mental health therapy for now, and explore existing exercises and how one might create a simple gamified prototype.
I delved into the field of physiotherapy. Personally, I have little experience with this field, except for some physiotherapy sessions for my lower back condition, which I’ve had since birth. During these sessions, I noticed a recurring problem: after each meeting, I had a short burst of motivation to do the exercises, but this motivation faded after a few days. There were no disciplinary structures in place to keep me doing the exercises. This seems to be a common issue that medical professionals can hardly control outside of therapy sessions. Gamification could promote discipline outside of these sessions. Even during sessions, gamification could make the experience more enjoyable, especially for target groups such as children.
Statistics show that in our sedentary society, physiotherapy is on the rise. In Austria, 21.8% of the population has consulted a physiotherapist. Given the increasing numbers, we can infer that the figures for 2024 could be even higher.
I looked into specific physiotherapy exercises, focusing on the upper body. I chose this region because the exercises are potentially easy to measure, mostly simple, and could be combined with VR in the future, as VR is traditionally controlled via hand gestures or hand controllers. Although it’s hard to assess their effectiveness, these exercises were recommended by several sources, so I believe they are effective. For the prototype, I will pick one or several basic exercises.
In the next prototype, I want to explore what gamification is and which gamified approaches to therapy already exist.
Der Übergang von den Figma-Designs zu einem funktionsfähigen Ionic-Prototypen war ein spannender und lehrreicher Prozess. Nachdem ich meine Screens in Figma fertiggestellt hatte, begann ich zunächst damit, ein neues Ionic-Projekt zu erstellen und darin mehrere leere Tabs zu erstellen, welche ich später dann mit Inhalt füllen wollte. Zudem exportierte ich mir meine Logos, Bilder und Grafiken aus Figma, um sie dann während der Entwicklung in mein Projekt einbinden zu können. Nach und nach füllten sich die Tabs der App mit den Inhalten, die ich zuvor in Figma gestaltet hatte.
Basierend auf den Wireframes wurden die ersten Designs für die Benutzeroberfläche (UI) entwickelt. Dabei lag der Fokus auf einer intuitiven und benutzerfreundlichen Gestaltung, die den Nutzern eine einfache Navigation ermöglicht. Farbgebung, Schriftarten und Icons wurden sorgfältig ausgewählt, um eine ansprechende und konsistente Optik zu gewährleisten.
Die einzelnen Screens wurden Schritt für Schritt erstellt, beginnend mit dem Startbildschirm und der Registrierung, gefolgt von den Hauptfunktionen wie dem Lebensmittelscanner, der Rezeptvorschläge und den Chat-Funktionen. Jeder Screen wurde mehrfach getestet und optimiert, um eine reibungslose Benutzererfahrung zu gewährleisten.
Zum Schluss wurden die Screens in einem interaktiven Prototypen zusammengeführt. Dieser Prototyp ermöglicht es, die App in einer frühen Phase zu testen und Feedback von potenziellen Nutzern einzuholen. Interaktive Elemente wie Buttons und Navigation wurden integriert, um ein realistisches Nutzungserlebnis zu simulieren.
Der erste Schritt nach dem zeichnen von groben Skizzen und Informationsarchitekturen war es, einen Styleguide festzulegen, an dem ich mich für die weitere Ausarbeitung orientieren wollte. Schon bald stellte ich jedoch fest, dass besonders die Farben nicht gut gewählt waren, da sie in den verschiedenen Größen nicht miteinander harmonierten und auch für Überschriften zu hell gewählt waren. Daher habe ich diesen Teil später noch einmal überarbeitet und mich auf die unten liegenden Farben festgelegt.
Ich hatte zudem zu Beginn verschiedene elevations (Schatten-stärken) definiert, welche ich später jedoch fast komplett aus meinen Designs wieder entfernt habe.
Zusätzlich habe ich mir Gedanken darüber gemacht, wie ein mögliches Logo aussehen könnte.
Nach eingehender Überlegung und weiterer Recherche entschied ich mich, die Idee einer App zu entwickeln, die Personen mit Lebensmittelunverträglichkeiten unterstützt. Diese App soll es den Nutzern ermöglichen, Lebensmittel zu scannen und auf ihre Verträglichkeit zu analysieren. Außerdem soll sie geeignete Rezepte vorschlagen und die Möglichkeit bieten, sich mit anderen Betroffenen sowie mit Ernährungsexperten auszutauschen.
Entscheidungsprozess und Funktionen der App
Die Entscheidung, eine App zu entwickeln, basierte auf mehreren Überlegungen. Erstens ist die mobile Technologie heutzutage weit verbreitet und leicht zugänglich. Zweitens ermöglicht eine App eine direkte und personalisierte Unterstützung, die jederzeit verfügbar ist. Die Hauptfunktionen der App sollen sein:
Lebensmittelscanner: Nutzer können Lebensmittel scannen und sofort erfahren, ob sie diese vertragen.
Rezeptvorschläge: Basierend auf den Unverträglichkeiten der Nutzer werden passende Rezepte vorgeschlagen.
Community und Experten-Chat: Nutzer können sich mit anderen Betroffenen austauschen und Fragen an Ernährungsexperten stellen.
Fazit
Die Entwicklung dieser App ist das Ergebnis meiner intensiven Auseinandersetzung mit den Bedürfnissen von Menschen mit Lebensmittelunverträglichkeiten und den technischen Möglichkeiten, diese Bedürfnisse zu erfüllen. Mein Besuch bei FH-Prof. DI Dr.-Ing. Simon Berner und die Erkenntnisse aus meinen Recherchen haben mich dazu inspiriert, eine Lösung zu finden, die nicht nur technisch innovativ ist, sondern auch einen echten Unterschied im Leben der Betroffenen machen kann.
Ich freue mich darauf, dieses Projekt weiterzuverfolgen und bin gespannt auf die nächsten Schritte in der Entwicklung dieser App, die vielen Menschen helfen könnte, ihre Ernährung besser zu gestalten und ihre Lebensqualität zu verbessern.
Während meiner Analyse wurde mir klar, dass die reine Produktion von Lebensmitteln oft nicht ausreicht, um den komplexen Anforderungen von Menschen mit Unverträglichkeiten gerecht zu werden. Es bedarf einer gezielten Hilfestellung, die über die bloße Herstellung hinausgeht. Ich fragte mich: Wie kann ich Menschen unterstützen, die aufgrund von Allergien, Intolleranzen oder anderen unfreiwilligen Diätformen in der Zukunft Gefahr laufen, einen Mangel zu entwickeln?
Eingeschränkte Lebensmittelauswahl → Einkaufshilfe zur richtigen Auswahl an Lebensmitteln
Unausgewogene Ernährung → Rezeptideen und -vorschläge
Mangel an Aufklärung und Wissen → ausgebildete Ernährungsberater/ Ärzte nur einen Chat entfernt
Soziale und praktische Hindernisse → eine Community, die unter anderem auch dabei helfen kann, geeignete Lokale zu finden
Brainstorming zu den Inhalten, die enthalten sein sollten
In meinen bisherigen Recherchen hatte ich mich intensiv mit verschiedenen Problemen im Zusammenhang mit Mikronährstoffen und deren Mängeln beschäftigt und auch wenn es in diesem Themenbereich viele Probleme gab, war es doch schwer, ein Problem herauszupicken, welches insbesondere die Diätolog:innen, welche ich als Zielgruppe definiert hatte, auch gelöst haben wollten.
Nach meinem Interview mit FH-Prof. Berner und den Erkenntnissen aus meiner bisherigen Recherche beschloss ich, meinen Fokus zu erweitern. Ich begann, verschiedene Zielgruppen zu analysieren, die von optimierten Lebensmitteln profitieren könnten. Insbesondere interessierten mich Personengruppen mit spezifischen Ernährungsbedürfnissen, wie Kinder, ältere Menschen und sportlich aktive Personen. Diese Gruppen haben unterschiedliche Anforderungen an ihre Ernährung, und ihre Bedürfnisse werden oft nicht ausreichend berücksichtigt.
Daher bin ich im Folgenden und vor allem auch nach meinem Interview mit FH-Prof. DI Dr.-Ing. Simon Berner noch einmal einen Schritt zurückgegangen und habe mir die verschiedenen Zielgruppen noch einmal genauer angeschaut. Wen habe ich möglicherweise übersehen? Gibt es Zielgruppen, welche ebenfalls Probleme mit Mikronährstoffen haben könnten, auf die ich bislang noch (zu) wenig geachtet habe?
Personen mit Lebensmittelunverträglichkeiten
Eine Zielgruppe, die mir während meiner Recherche besonders ins Auge fiel, sind Personen mit Lebensmittelunverträglichkeiten. Diese Menschen haben oft große Schwierigkeiten, geeignete Lebensmittel zu finden, die ihre Unverträglichkeiten berücksichtigen und gleichzeitig alle notwendigen Nährstoffe liefern. Lebensmittelunverträglichkeiten können das Leben erheblich erschweren, da sie nicht nur die Lebensmittelauswahl einschränken, sondern auch das Risiko gesundheitlicher Probleme erhöhen, wenn nicht die richtigen Nährstoffe zugeführt werden.
Mikronährstoffe und Lebensmittelunverträglichkeiten: Warum Betroffene oft Schwierigkeiten haben
Menschen mit Lebensmittelunverträglichkeiten und Allergien stehen häufig vor besonderen Herausforderungen, wenn es darum geht, eine ausgewogene Ernährung sicherzustellen. Diese Schwierigkeiten können zu einem Mangel an wichtigen Mikronährstoffen führen.
Eingeschränkte Lebensmittelauswahl: Viele Betroffene müssen bestimmte Lebensmittelgruppen meiden, um allergische Reaktionen oder Unverträglichkeitsbeschwerden zu vermeiden. Dies schränkt die Auswahl an verfügbaren Lebensmitteln erheblich ein und kann dazu führen, dass bestimmte Mikronährstoffe, die in den gemiedenen Lebensmitteln enthalten sind, nicht in ausreichender Menge aufgenommen werden.
Unausgewogene Ernährung: Da bestimmte Lebensmittel vermieden werden müssen, kann die Ernährung unausgewogen werden. Beispielsweise könnten Personen, die auf Milchprodukte verzichten müssen, Schwierigkeiten haben, genügend Kalzium und Vitamin D aufzunehmen. Ähnliches gilt für Menschen, die glutenhaltige Getreide meiden und möglicherweise weniger Ballaststoffe, B-Vitamine und Eisen zu sich nehmen.
Mangel an Aufklärung und Wissen: Nicht alle Betroffenen sind sich der potenziellen Mikronährstoffmängel bewusst oder wissen, wie sie diese ausgleichen können. Ohne das richtige Wissen und die richtigen Ressourcen ist es schwierig, eine vollständig ausgewogene Ernährung zu gewährleisten.
Soziale und praktische Hindernisse: Essen außer Haus, Reisen oder gesellschaftliche Ereignisse können zusätzliche Herausforderungen darstellen. Die Verfügbarkeit geeigneter Lebensmittel ist oft eingeschränkt, was dazu führt, dass Betroffene Kompromisse eingehen müssen, die ihre Nährstoffaufnahme beeinträchtigen können.
Zusammengefasst erfordert die Ernährung für Menschen mit Lebensmittelunverträglichkeiten und Allergien besondere Aufmerksamkeit und Planung, um sicherzustellen, dass alle notwendigen Mikronährstoffe in ausreichender Menge aufgenommen werden. Eine gezielte Unterstützung könnte Betroffenen helfen, diese Herausforderungen besser zu meistern und ihre Ernährung optimal zu gestalten. Diese Erkenntnis führte mich zu der Frage, wie Menschen unterstützt werden können, die nicht unbedingt bestehende Mängeln haben, sondern vielmehr Gefahr laufen, durch „Krankheiten“ und unfreiwillige Diätformen in der Zukunft einen Mangel zu entwickeln.
Obwohl ich die technische Präzision und die Methoden beeindruckend fand, die im Department für Engineering an der FH Joanneum ihren Einsatz finden, musste ich feststellen, dass diese Ansätze für mein Forschungsthema wenig Anhaltspunkte boten. Insbesondere, weil die Projekte und Arbeiten, die mir vorgestellt wurden bereits sehr ausgereift und selbst die Prototypen beinahe Marktreif ausgearbeitet waren, empfinde ich es als äußerst schwer, direkt für dieses Institut, bzw. einen der im Interview besprochenen Projekte einen Low Fidelity Prototypen umzusetzen.
Die ingenieurmäßigen Ansätze waren zwar faszinierend, aber sie schienen sich hauptsächlich auf die technologische Optimierung und industrielle Produktion zu konzentrieren, ohne tiefere nutzerzentrierte Analysen der spezifischen Bedürfnisse verschiedener Zielgruppen zu bieten. Dennoch war das Interview äußerst spannend und aufschlussreich für mich, da es mir noch einmal vor Augen geführt hat, wie vielfältig und breit mein Themenbereich ist und wie viel sich in diesem Thema machen lässt. So kam es insbesondere dazu, dass ich mir die möglichen Zielgruppen und deren Bedürfnisse und Probleme noch einmal genauer angeschaut habe.
After conducting a thorough analysis of different research papers and exploring various existing authoring tools, I embarked on the journey of developing my own prototype. This process involved the examination of the strengths and weaknesses of each tool, as well as an in-depth understanding of the theories and methodologies presented in each research paper. With this knowledge, I then proceeded to apply what I had learned to the creation of my prototype. The objective of this blogpost is to document the process that I underwent during the prototyping phase.
Methodology
I began by listing all the sections I wanted to reimplement from StoryTec, including the G-Flash card system and Story Curve Visualization mode.
Story Editor: This is a free canvas where users can drag, resize, move, and zoom in and out of elements.
Scenes: These contain characters, interactive elements, and behaviors such as actions, dialogue, and events.
Complex Scenes (which I’ll refer to as Stages): These are the environments where scenes take place. They contain stage-specific elements and, of course, the scenes themselves.
Stage Editor: In StoryTec, this was a pluggable framework capable of constructing scenes in various ways. For ease of use, I will integrate this as a function of the Story Editor, utilizing a toolbar with drag-and-drop flashcards, similar to G-Flash. In my version, the cards will be fully customizable through the Property Editor.
Property Editor: This is a separate tab that adapts based on the selected item. It can add any kind of property to any element.
Action Set Editor: In StoryTec, this was a separate editor for setting the logic between element interactions. In my prototype, it will become a button in the Tool tab, connecting elements similarly to how Figma handles prototyping.
Asset Manager: A separate tab where uploaded assets can be dragged and dropped either onto the open canvas as images, videos, or sound, or onto elements as properties.
Story Curve Visualization: This is an option in the top bar that changes how the scenes are displayed, toggling from the free canvas to a double-axis view of the Story Curve.
After identifying the core features and buttons for my tool, I sketched a basic information architecture on paper. Following this, I created preliminary wireframes to visualize the page’s layout.
Pages, tabs and cards
Starting from the sketches, I prototyped a low-fidelity version of the main pages for my authoring tool.
The home page displays all the stories that a user might want to create, presented in a straightforward gallery.
Each Story file features an „infinite“ zoom canvas where elements, cards, and assets can be dragged and dropped, resized, opened, and minimized. This design maximizes flexibility of thought.
When an element is clicked, the Properties tab displays all details of that specific instance, and allows the creation of new properties if necessary. These properties can be used and referenced as logic variables when establishing connections between elements.
The Stage button in the Bottom Tool Bar offers two main interactions: the New Stage card and the Element card. Both can be dragged onto the canvas and resized to create the desired composition.
Similarly, the Scene button in the Bottom Tool Bar enables the user to draw a new scene or select one of the cards for characters, elements, or behaviors.
Finally, the Story Curve View visualizes different scenes on the Narration order/Story order axis. You can personalize this visualization using the settings tab.
Goals & Conclusion
The main goal of this prototype is to thoroughly test the usability of various complex features, particularly for beginners and new storytellers. I aim to conduct an extensive user test to gain insights into whether the basic principles of User Experience (UX) are being followed and function as intended.
After initial testing and result analysis, I’ll create a higher fidelity prototype. This version will focus more on the user interface, using feedback from the initial tests to ensure a smoother, more intuitive user experience.
In my next blog post, I’ll show the main features of this prototype through a detailed demo video. This will help me show the tool’s functionality and potential.
