Visual Scripting Tool

Ein intuitives Visual Scripting Tool für 3D-Artists und Marketing-Teams zur Erstellung eigener Automatisierungen auf reiner No-Code-Basis.

Rolle

UX/UI Designer

Research, Workshop

Kontext

INNEO Solutions

B.Eng. Thesis

Timeline

Feb – Mai 2024

4 Monate Zeit

Zielgruppe

Artists & Marketing

Non-Technical

Finales HiFi Interface des Visual Scripting Tools

Das Problem: Der Entwickler-Flaschenhals

Die 3D-Software NeoSpace wird intensiv von Marketing-Teams und 3D-Artists genutzt. Für individuelle Automatisierungen waren diese Nutzer bisher jedoch komplett auf die internen Entwickler angewiesen – ein massiver zeitlicher Flaschenhals.

Das Ziel meiner Arbeit war es, diese Abhängigkeit aufzulösen: Ein Tool-Konzept, das es den Nutzern ermöglicht, ihre Logiken intuitiv selbst zu bauen, ohne eine einzige Zeile Code schreiben zu müssen.

Von der Theorie zum physischen Test

Visual Scripting ist ein komplexes Feld. Um das Rad nicht neu zu erfinden, aber die beste Lösung für unsere spezifische Zielgruppe zu finden, wählte ich einen stark methodengetriebenen Ansatz.

1. Literatur & Heuristiken

Ich startete mit einer umfangreichen Literaturrecherche zu bestehenden Visual Scripting Ansätzen. Unter Berücksichtigung von Stakeholder-Anforderungen und gängigen UX-Heuristiken destillierte ich zwei vielversprechende Pfade heraus: Einen Puzzle-Ansatz (ähnlich Scratch) und einen sequenziellen Block-Ansatz (inspiriert von "7 Billion Humans").

Frühes Lo-Fi Wireframe Konzept

2. Co-Creation Workshops

Anstatt direkt in Figma zu gehen, habe ich "Knoten" und "Verbindungen" ausgedruckt und ausgeschnitten. In interaktiven Workshops ließen wir Probanden die Logik physisch zusammenbauen. Das half enorm, Fehler im Workflow aufzudecken, bevor Code oder Pixel existierten.

Paper Prototyping Workshop

Error Prevention by Design

Das resultierende HiFi-Konzept fokussiert sich massiv auf Fehlervermeidung (Poka-Yoke) und visuelle Führung, um Nicht-Programmierern die Angst vor Logik-Brüchen zu nehmen.

HiFi Interface Drag & Drop

Visuelles Feedback beim Drag & Drop

Es lassen sich nur kompatible Bausteine miteinander verbinden. Bereits während des Ziehens eines Elements erkennt der Nutzer anhand von Form-Aussparungen (Puzzle-Logik) und aufleuchtenden "Light-Background"-Platzhaltern sofort, wo ein Baustein legal angedockt werden darf.

Semantische Farbkodierung

Um die kognitive Last zu reduzieren, sind alle Funktionen strikt farblich kodiert. Imports teilen sich eine Farbe, Exports eine andere. Aktionen wie Rotation/Bewegung heben sich deutlich von Material-Änderungen ab. So lässt sich die Skript-Logik beim bloßen Scannen erfassen.

Impact & Feedback

Go for Implementation

Das Konzept war ein voller Erfolg auf Business-Seite: INNEO hat mir bestätigt, dass das entworfene Visual Scripting Tool in genau dieser Form umgesetzt wird.

Developer Approved

Durch den stetig engen Austausch mit der Entwicklung bescheinigte der Head of Software Engineering dem Konzept eine sehr gute technische Machbarkeit.

Learnings & Takeaways

  • Scope Management vs. UCD-Prozess Wenn ich das Projekt heute wiederholen würde, hätte ich anstelle eines pixelperfekten HiFi-Prototyps einen detaillierten Mid-Fi-Prototyp gebaut. Das hätte mir den nötigen zeitlichen Puffer verschafft, um innerhalb des knappen Bachelor-Zeitrahmens noch ein abschließendes Usability-Testing durchzuführen.
  • Interner vs. Externer Bias Die Tests mit INNEO-Mitarbeitern waren hochgradig wertvoll. Dennoch hätte ich mir retrospektiv gewünscht, komplett externe Nutzer in die Workshops einzubeziehen, um "Betriebsblindheit" zu umschiffen.
  • Umgang mit Stakeholder-Entscheidungen Ein Node-basiertes System wurde im Vorfeld ausgeschlossen. Es war eine gute Übung, den UX-Fokus innerhalb harter Business-Restriktionen voll auf die Puzzle- und Block-Ansätze zu legen.