Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions _works/2026-timm-ricardo/01-resarch-area-analysis/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Themenfeldanalyse

Bitte legen Sie Ihre Concept Map zur Themenfeldanalyse hier als PDF ab. Die Datei sollte nicht größer als 2 Mbyte sein.
Binary file not shown.
48 changes: 48 additions & 0 deletions _works/2026-timm-ricardo/02-titles-and-research-questions.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# Titel und Forschungsfrage

# Titelvorschläge

## Konzeptuell / Theoretisch

1. Bewegungssemantik in User Interfaces – Ein Framework zur wahrnehmungspsychologischen und semiotischen Klassifikation von UI-Animationen
2. Meaningful Motion – Semiotische Grundlagen bedeutungsbasierter Animationen in digitalen Benutzeroberflächen
3. Motion Patterns als Designsprache – Konzeption eines semantischen Frameworks für UI-Verhalten und Microinteractions

## Ausgewogen Theorie und Praxis

1. Semantic Motion in User Interfaces – Konzeption eines bedeutungsbasierten Animation Frameworks und prototypische Umsetzung
2. Meaningful Motion Design – Entwicklung eines semiotisch fundierten Frameworks und Editors für UX Animation
3. Interface Dynamics durch Bedeutung – Ein Motion-Pattern-Framework und Werkzeug für semantisch kohärentes UI-Verhalten
4. Bewegungssemantik im Interaction Design – Klassifikation von Motion Patterns und werkzeuggestützte Anwendung in modernen Web-UIs

## Praxisorientiert / Tool-fokussiert

1. Meaningful Motion by Design – Entwurf und Implementierung eines regelbasierten Editors für bedeutungsbasierte UI Animation
2. Motion Patterns operationalisiert – Design und Entwicklung einer Mapping-Datenbank und eines Editors für semantische UX Animation
3. UI Motion als Bedeutungsträger – Konzeption und Implementierung eines Frameworks und Editors für semantische Interface Dynamics

---

# Zielbilder

## Zielbild A – Theorie-First, Editor als Demonstration

Der Schwerpunkt der Arbeit liegt auf der Entwicklung eines wissenschaftlich fundierten semantischen Frameworks für UI-Animationen. Auf Basis von Semiotik, Wahrnehmungspsychologie und etablierten Animation Principles entsteht ein Klassifikationsmodell, das Animationen systematisch nach Bedeutungsdimension (Feedback, Hierarchie, State Change, Direction), Nutzungskontext und Interaktionsparadigma beschreibt. Dieses Framework wird in einer Mapping-Datenbank formalisiert, die regelbasiert dokumentiert, welche Animation in welchem semantischen Kontext angemessen ist.

Der Semantic Motion Editor ergänzt die Arbeit als interaktiver Prototyp: Er macht das Framework unmittelbar erfahrbar, indem er Animationsvorschläge auf Basis der Datenbank generiert und per CSS bzw. Framer Motion exportiert. Der Fokus liegt dabei auf der Demonstration der Kernidee – nicht auf produktionsreifer Implementierung.

## Zielbild B – Framework und Editor im Gleichgewicht

Die Arbeit entwickelt parallel zwei gleichwertige Artefakte: ein theoretisch fundiertes semantisches Framework und einen darauf aufbauenden, funktionsfähigen Semantic Motion Editor.

Das Framework klassifiziert UI-Animationen systematisch entlang der Dimensionen Bedeutung, Kontext und Interaktionsparadigma und wird in einer strukturierten Mapping-Datenbank formalisiert. Der Editor setzt dieses Framework technisch um – als React-Anwendung mit Framer Motion, die reale UI-Komponenten wie Button, Modal und Toast abdeckt und direkt exportierbaren Code erzeugt.

Den Abschluss bildet eine strukturierte Eigenevaluation: Der Editor wird anhand definierter Designkriterien – Konsistenz, semantische Kohärenz, Praxistauglichkeit – systematisch reflektiert und eingeordnet. Das Ergebnis ist ein vollständiger, in sich geschlossener Proof of Concept.

## Zielbild C – Framework, Editor und Designrichtlinien

Die Arbeit versteht sich als Grundlage für semantisch kohärentes Motion Design in der Praxis und liefert drei aufeinander aufbauende Artefakte.

Das semantische Framework klassifiziert UI-Animationen auf Basis von Semiotik, Wahrnehmungspsychologie und Animation Principles und wird in einer Mapping-Datenbank operationalisiert. Der Semantic Motion Editor implementiert dieses System als interaktiver React-Prototyp mit Framer-Motion-Integration und Code-Export.

Als drittes Artefakt entsteht ein Katalog konkreter Designrichtlinien – eine praxisnahe Aufbereitung des Frameworks, die über die technische Datenbank hinausgeht und direkt als Entscheidungshilfe im Designprozess eingesetzt werden kann. Zusammen bilden die drei Artefakte ein geschlossenes Werkzeugset: von der wissenschaftlichen Theorie über das digitale Tool bis zur anwendbaren Handlungsempfehlung.
40 changes: 40 additions & 0 deletions _works/2026-timm-ricardo/03-expose.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Exposé

## Semantic Motion in User Interfaces

*Bedeutung Transport durch animierte UI-Zustände - Framework und Editor-Prototyp*

| **Typ** Framework + Tool | **Stack** React, TypeScript, Framer Motion | **Theoriebasis** Semiotik, Wahrnehmungspsychologie |
|---|---|---|

---

**KONTEXT & PROBLEM**

Animationen in modernen User Interfaces sind allgegenwärtig und werden dabei überwiegend intuitiv oder rein ästhetisch eingesetzt. Existierende Motion-Guidelines großer Design Systeme (Material Design 3, Apple HIG, IBM Carbon, Fluent) beschreiben, welche Animationen verwendet werden sollen, liefern jedoch keine theoretisch begründete Antwort darauf, warum eine bestimmte Bewegung eine bestimmte Bedeutung transportiert. Eine Fehlermeldung, die nach links schlägt, kommuniziert Ablehnung, aber auf welcher theoretischen Grundlage? Diese Frage ist bislang nicht systematisch beantwortet.

---

**ZIELSETZUNG**

Ziel der Arbeit ist die Entwicklung eines theorie-gestützten Frameworks, das UI-Animationen nach ihrer semantischen Bedeutung klassifiziert. Grundlage bilden drei Theoriebereiche: Semiotik (Zeichentheorie nach Peirce und Saussure), Wahrnehmungspsychologie (präattentive Verarbeitung, Direction Bias, Object Continuity) sowie Motion-Design-Prinzipien (Disney-Prinzipien, Easing als semantischer Träger). Das Framework mündet in einem interaktiven Prototyp, dem Semantic Motion Editor, der das Mapping von Animationen auf Bedeutungen visuell erfahrbar macht.

| **Forschungsfrage** Wie lässt sich ein theorie-gestütztes Framework zur semantischen Klassifikation von UI-Animationen konzipieren, und wie kann dieses Framework in einem interaktiven Werkzeug prototypisch demonstriert werden? |
|---|

---

**PROTOTYP**

Der Semantic Motion Editor ist ein browserbasiertes Tool, in dem Nutzer eine UI-Komponente (Button, Toggle, Toast, Modal) und ein Motion-Pattern auswählen. Das Tool zeigt die Animation in Echtzeit, erklärt die semantische Bedeutung mit theoretischer Begründung und exportiert den fertigen Animations-Code (Framer Motion oder CSS). Kern des Tools ist eine strukturierte Mapping-Datenbank, die das Framework direkt implementiert.

---

**ABGRENZUNG**

Die Arbeit führt keine empirische Nutzerstudie durch. Der wissenschaftliche Beitrag liegt in der theoretischen Herleitung und Systematisierung des Frameworks. Der Prototyp ist Demonstration, nicht Evaluation.

---

| **Schluesselquellen** **Peirce, C. S. (1931).** *Collected Papers.* Harvard University Press. - Grundlage der Zeichentypologie (Ikon, Index, Symbol) als theoretisches Rückgrat des Mappings. **Johnston, O. & Thomas, F. (1981).** *The Illusion of Life: Disney Animation.* Abbeville Press. - Die 12 Animationsprinzipien als Basis fuer semantisch aufgeladene Bewegungsqualitäten im UI-Kontext. **Treisman, A. & Gelade, G. (1980).** *A feature-integration theory of attention.* Cognitive Psychology, 12(1). - Präattentive Verarbeitung als wissenschaftliche Grundlage dafür, warum Bewegung Bedeutung vor bewusster Wahrnehmung transportiert. |
|---|
3 changes: 3 additions & 0 deletions _works/2026-timm-ricardo/04-results/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Ergebnisse

Bitte legen Sie Ihre Ergebnisse hier ab. Achten Sie bitte auf moderate Dateigrößen. Bitte legen Sie nur geschlossene Dokument, z.B. PDF statt *.doc ab.