Asymmetrisches Timing der Animation

bookmark_border Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Durch das Brechen der Symmetrie erhalten Ihre Projekte Kontrast und Attraktivität. Hier erfahren Sie, wann und wie Sie diese Erkenntnisse auf Ihre Projekte anwenden können.

Ein asymmetrisches Animationstiming verbessert die Nutzerfreundlichkeit, da Sie so Ihre Persönlichkeit ausdrücken und gleichzeitig schnell auf Nutzerinteraktionen reagieren können. Außerdem sorgt er für einen Kontrast zum Erscheinungsbild, was die Benutzeroberfläche optisch ansprechender macht.

• Mit asymmetrischen Animationszeiten können Sie Ihren Designs Persönlichkeit und Kontrast verleihen.
• Die Interaktion des Nutzers sollte immer im Vordergrund stehen. Verwenden Sie kürzere Zeiträume, wenn Sie auf Tippen oder Klicks reagieren, und längere Zeiträume, wenn Sie nicht reagieren.

Wie bei den meisten „Regeln“ der Animation sollten Sie experimentieren, um herauszufinden, was für Ihre Anwendung funktioniert. Bei der Nutzerfreundlichkeit sind Nutzer jedoch notorisch ungeduldig. Als Faustregel gilt: Reagieren Sie immer schnell auf eine Nutzerinteraktion. Die Aktion des Nutzers ist jedoch in den meisten Fällen asymmetrisch und daher kann auch die Animation asymmetrisch sein.

Wenn ein Nutzer beispielsweise auf eine Seitenleiste tippt, sollte sie so schnell wie möglich angezeigt werden, mit einer Dauer von etwa 100 Millisekunden. Wenn der Nutzer das Menü jedoch schließt, können Sie die Ansicht etwas langsamer animieren, z. B. nach etwa 300 Millisekunden.

Wenn Sie dagegen eine modale Ansicht öffnen, wird normalerweise eine Fehler- oder andere wichtige Nachricht angezeigt. In solchen Fällen sollten Sie die Ansicht etwas langsamer einblenden, also wieder etwa 300 Millisekunden lang. Das Schließen, das der Nutzer auslöst, sollte jedoch sehr schnell erfolgen.

Die allgemeine Faustregel lautet also:

• UI-Animationen, die durch die Interaktion eines Nutzers ausgelöst werden, z. B. Ansichtsübergänge oder das Einblenden eines Elements, sollten einen schnellen Einstieg (kurze Dauer) und einen langsamen Ausstieg (längere Dauer) haben.
• Bei UI-Animationen, die durch Ihren Code ausgelöst werden, z. B. Fehler oder modale Ansichten, sollten Sie ein langsameres Intro (längere Dauer) und einen schnellen Outro (kurze Dauer) verwenden.