Ausgangslage

Einfluss von Animationen in User Interfaces ist eine kombinierte Bachelorarbeit und ein begleitendes Lehrprojekt, das sich mit dem gezielten Einsatz von Animationen in digitalen Benutzeroberflächen auseinandersetzt. Ziel des Projekts war es, zu untersuchen, wie Animationen die Effizienz und Orientierung in User Interfaces beeinflussen können und wie sich theoretische Erkenntnisse praxisnah in einer Webanwendung umsetzen lassen.

Forschung

Im Rahmen der Bachelorarbeit wurde ein Online-Experiment konzipiert und durchgeführt, das eine animierte mit einer statischen Version einer Webanwendung vergleicht. Die Teilnehmenden bearbeiteten definierte Aufgaben innerhalb eines fiktiven Interfaces, während Bearbeitungszeiten und Interaktionen erfasst und statistisch ausgewertet wurden. Der Fokus lag darauf, den funktionalen Nutzen von Animationen jenseits rein ästhetischer Aspekte empirisch zu überprüfen.

Lehrprojekt

Parallel dazu entstand ein Lehrprojekt, das die theoretischen Grundlagen in eine konkrete, interaktive Anwendung überführt. Entwickelt wurde eine Website, die verschiedene animierte UI-Komponenten zeigt und deren Verhalten direkt im Browser erlebbar macht. Die einzelnen Komponenten – darunter Drawer, Filter-Buttons und Accordions – wurden so gestaltet, dass Animationen gezielt zur Strukturierung von Inhalten, zur Aufmerksamkeitslenkung und zur Verbesserung der Orientierung eingesetzt werden. Ergänzend dazu wird der zugrunde liegende Code offengelegt, um die Umsetzung nachvollziehbar zu machen.

Umsetzung

Die technische Realisierung erfolgte mit React, Next.js und Tailwind CSS. Für die Animationen kam die Library Motion zum Einsatz. Der Entwicklungsprozess war stark iterativ geprägt: von ersten Skizzen und Wireframes in Figma über Prototyping bis hin zur schrittweisen Umsetzung im Code. Besonderes Augenmerk lag dabei auf Timing, Easing und dem Zusammenspiel einzelner Komponenten im Interface.

Fazit

Das Projekt diente mir dazu, mein Verständnis für UX-orientierte Animationen, Frontend-Architektur und die Verbindung von Forschung und Gestaltung zu vertiefen. Es zeigt, wie sich theoretische Konzepte aus Human-Centered Design und User Experience in funktionale, interaktive Interfaces übersetzen lassen und welche Rolle Animationen dabei als unterstützendes Gestaltungsmittel einnehmen können.