Eine brechende Symmetrie schafft einen Kontrast und Attraktivität für Ihre Projekte. Hier erfahren Sie, wann und wie Sie dies auf Ihre Projekte anwenden können.
Asymmetrisches Timing von Animationen verbessert die User Experience, da Sie damit Ihre Persönlichkeit zum Ausdruck bringen und gleichzeitig schnell auf Nutzerinteraktionen reagieren können. Außerdem schafft er einen Kontrast zur Bedienung, was die Benutzeroberfläche optisch ansprechender macht.
- Verwenden Sie asymmetrisches Animations-Timing, um Ihrer Arbeit eine Persönlichkeit und einen Kontrast zu verleihen.
- Bevorzugen Sie immer die Interaktion des Nutzers. Verwenden Sie kürzere Zeitspannen, wenn Sie auf Tippen oder Klicks reagieren, und reservieren Sie längere Zeiträume für Zeiten, in denen Sie es nicht sind.
Wie bei den meisten Animationsregeln sollten Sie experimentieren, um herauszufinden, was für Ihre Anwendung funktioniert, aber was die Nutzererfahrung betrifft, so sind die Nutzer bekanntermaßen ungeduldig. Als Faustregel gilt: Reagieren Sie auf Nutzerinteraktionen immer schnell. Allerdings ist die Aktion des Nutzers meistens asymmetrisch, sodass die Animation auch sein kann.
Wenn ein Nutzer beispielsweise tippt, um eine Seitenleistennavigation anzuzeigen, sollte diese so schnell wie möglich angezeigt werden. Die Dauer beträgt etwa 100 ms. Schließt der Nutzer das Menü jedoch, können Sie es sich leisten, die Ansicht etwas langsamer zu animieren, beispielsweise nach etwa 300 ms.
Im Gegensatz dazu wird in einer modalen Ansicht normalerweise ein Fehler oder eine andere wichtige Meldung angezeigt. In solchen Fällen sollten Sie die Ansicht etwas langsamer aktivieren, wieder etwa bei der 300-ms-Marke. Das Schließen, das der Nutzer auslöst, sollte jedoch sehr schnell erfolgen.
Als Faustregel gilt dann folgende allgemeine Faustregel:
- UI-Animationen, die durch eine Nutzerinteraktion ausgelöst werden, z. B. das Ansehen von Übergängen oder das Anzeigen eines Elements, sollten ein schnelles Intro (kurze Dauer), aber ein langsames Outro (längere Dauer) haben.
- Verwenden Sie für UI-Animationen, die durch Ihren Code ausgelöst werden, wie Fehler oder modale Ansichten, ein langsameres Intro (längere Dauer), aber ein schnelles Outro (kurze Dauer).