Mit viel Schwung die Nutzererfahrung optimieren Das Animationstool Motion-UI

Anbieter zum Thema

Kentix GmbH

Penta Infra

ConSysTech GmbH

Motion-UI ist eine Stylesheet-Bibliothek, mit der sich flexible und vielseitige UI-Übergänge und UI-Animationen einfach und schnell erstellen lassen. Bei richtiger Anwendung fühlt sich die Verwendung von Technologie für den User viel natürlicher, reaktionsschneller und angenehmer an.

Bei der Gestaltung von Webseiten oder einer Smartphone-App kommt es nicht nur auf das gesamte Erscheinungsbild, sondern vor allem auch auf die digitale Infrastruktur an. Letztlich sollte sich alles darum drehen, die Interaktion der Benutzerinnen und Benutzern zu vereinfachen und ansprechend zu gestalten.

Da sich die Zahl der Websites und Apps jeden Tag vervielfacht, erwarten die User funktionale, leistungsstarke und vielleicht sogar einzigartige Schnittstellen, die überdies einfach zu navigieren sind. Die digitalen Produkte von heute müssen daher benutzerzentriert, intuitiv und reaktionsschnell sein. Eine der Möglichkeiten, wie Designer all dies erreichen, ist die Animation.

Animationen verleihen digitalen Schnittstellen eine gewisse menschliche Note, indem sie die Erfahrung der Interaktion mit einem physischen Objekt im wirklichen Leben simulieren. Dies erleichtert dem User ein natürlicheres Erlebnis und verringert kognitive Überlastungen. Von einem Punkt A nach Punkt B fungieren User-Interface-, kurz UI-Animationen quasi als Orientierung – oft subtil, so dass die Nutzergruppe nicht einmal bemerkt, dass sie überhaupt da sind.

Animationen reduzieren für den User zudem auch Stress, indem sie Echtzeit-Updates und Feedback bereitstellen und ihn jederzeit auf dem Laufenden halten. Dabei spielt Motion-UI eine entscheidende Rolle, wie ein User mit einer digitalen Plattform interagiert. Denn Augen folgen Bewegungen und suchen instinktiv nach visuellen Hinweisen und Informationen, nach denen sie sich richten können.

Performance von Motion-UI

Motion-UI ist eine Sass-, sprich Syntactically-Awesome-Stylesheets-Bibliothek zum schnellen Erstellen flexibler UI-Übergänge und UI-Animationen. Sie steuert Transformationseffekte, die in einer Vielzahl von Foundation-Komponenten enthalten sind, darunter Toggler, Reveal und Orbit. Motion-UI ermöglicht ein einfaches Prototyping und passt die Wirkung der Website auf den User an.

Mit Motion-UI müssen sich Developer bzw. Designer nicht auf Plug-ins, Videoplayer oder Schnittstellen verlassen, die von Drittanbietern erstellt wurden. Denn solche Plattformen können bekanntlich im Laufe der Zeit veralten. Zum Beispiel dominierte einst Flash den Bereich der Online-Animation und wurde dann auf Grund erheblicher Sicherheitsrisiken vom Markt genommen.

Vielseitig und sofort einsatzbereit

Eine Sass-Datei enthält die grundlegende Funktionalität eines Effekts, was bedeutet, dass Entwickler ihn für ihre eigenen Zwecke optimieren und personalisieren können. Diese Basiskomponenten sind in der Mixin-Bibliothek von Motion-UI enthalten. Hier finden Entwicklerinnen und Entwickler eine Vielzahl anpassbarer Dateien. Das heißt, dass sie die Kontrolle über jedes Element ihrer Animationen behalten und Geschwindigkeiten sowie Farbschattierungen fein abstimmen können, während sie das Motion-UI-Paket für ihre Projekte auswählen.

Dadurch sind die gewünschten Übergangseffekte und UI-Animationen sofort einsatzbereit, ohne dass Drittanbieter oder Plug-ins erforderlich sind. Nutzende sind dadurch in der Lage, Produkte mit einer verbesserten und funktionalen User Experience (UX) schneller auf den Markt zu bringen. Eine eigenständige Bibliothek mit flexiblen UI-Übergängen erleichtert ferner die Erstellung von CSS-Animationen und verbessert überdies Ästhetik und Funktionalitäten. Die Kunst besteht letztlich nur noch darin, zu wissen, wann und zu welchem Zweck Motion-Design-Effekte eingesetzt werden sollen.

Arten der UI-Animationen

Es gibt eine Vielzahl an Möglichkeiten, Animationen in Anwendungen, Websites und Handy-Apps zu verwenden. In der Folge sind ein paar Beispiele für praktische Einsatzbereiche skizziert:

Übergänge erleichtern

Nimmt der Übergang zwischen den Bildschirmen viel Zeit in Anspruch, verlieren User nicht selten ihr Interesse an den Inhalten. Motion-UI hilft ihnen dabei, den App-Fluss zwischen den Bildschirmen zu verstehen, wodurch die Navigation einfacher und ansprechender wird. Ein weiterer Einsatzbereich liegt im Bereich der Ladezeiten. Auch hier wird die Übergangsdauer mit interessanten Animationen angenehm verkürzt.

Fesselnde Mikro-Animationen

Diese Art der UI-Animationen wird vielleicht am häufigsten verwendet. Mikro-Animationen informieren das Gegenüber, ob eine Aktion erfolgreich oder nicht erfolgreich abgeschlossen wurde. Das Drücken einer Taste, das Bewegen eines Umschalters, das Herunterscrollen einer Seite oder das Anzeigen eines „Stumm“-Symbols – all dies sind Beispiele für Mikro-Animationen.

Anweisungen geben

Auf statischen Seiten sind mehrere Elemente zu verwenden, um Aufrufende Schritt für Schritt durch Anweisungen zum Abschließen eines Prozesses oder einer Aufgabe zu führen. Gutes Motion-UI-Design ermöglicht es jedoch, den User per Animationen zuverlässig durch die notwendigen sequentiellen Abläufe zu führen, sei es beim Aufgeben einer Bestellung oder beim Öffnen eines Schließfachs an einer Abholstation.

Darstellung von Daten

Das farbenfrohste Diagramm kann auf einer Webseite leblos erscheinen. Motion-UI ermöglicht eine dynamischere Darstellung der Visualisierung von Daten. Wobei sie auch interaktiv sein können, indem der User die Diagramme und Tabellen beispielsweise drehen und untersuchen kann. Seine Aufmerksamkeit kann ebenfalls durch Schattierungs- und Hervorhebungseffekte auf bestimmte Schlüsselbereiche der Daten gelenkt werden.

Just-for-fun-Animationen

Sicherlich können Animationen auch einfach nur dekorativ sein. Dies gilt, solange sie die User Experience nicht negativ beeinflussen. Dekorative Animationen sind per se kein wichtiges Merkmal, aber sie machen eine an sich neutrale Seite etwas ansprechender.

(ID:49035683)