Transitions
Durch die Gestaltung einer flüssigen, nachvollziehbaren Transition zwischen zwei Views wird die Orientierung des Nutzers im Interface deutlich verbessert. Dabei können einzelne Elemente transformiert oder ganze Views animiert werden. Die Anordnung von Elementen, der Zeitpunkt der Einblendung eines Elements und die Dauer der Animation spielen dabei eine wichtige Rolle. Diese Parameter werden für jedes Element auf der Seite einzeln betrachtet.
Auf mobilen Devices sind bestimmte Bewegungsmuster durch native Funktionen belegt (z. B. beim Wechsel zwischen zwei Apps) und sollten deswegen dort nicht eingesetzt werden.
Ein- und Ausblenden
Um dem Nutzer das Erfassen von Inhalten zu erleichtern sollten Views in einer bestimmten Reihenfolge aufgebaut werden. Beim Wechsel in eine andere View werden die für den Kontext nicht mehr relevanten Inhalte ausgeblendet und neue Inhalte eingeblendet.
- Elemente im Viewport werden mit einer leichten Verzögerung zueinander von unten nach oben eingeblendet.
- Alle weiteren Elemente werden erst eingeblendet, sobald der Nutzer diese in den Viewport scrollt. Die Animation sollte nicht viel Zeit in Anspruch nehmen, damit der Nutzer nicht auf Inhalte warten muss.
- Alle Elemente werden nur einmal animiert. Sie blenden nicht mehr aus, nachdem sie aus dem Viewport gescrollt wurden.
- An Stelle noch nicht geladener Bilder wird eine Farbfläche in den Dimensionen des Bildes angezeigt.
- Hintergrundflächen oder große Bilder werden von der Animation ausgeschlossen.
- Für die Animationen wird asynchrones Laden eingesetzt, alternativ sind auch Fade-in-Übergänge möglich.
- Elemente werden über ein Ausfaden ausgeblendet.
Bei Klick auf ein Bild wird es so groß wie möglich dargestellt und in einem Übergang auf die Screengröße transformiert. Weitere Beispiele sind Modals oder Formularfelder.
Content Push wird verwendet, um tiefer in eine Hierarchie zu gelangen. Dabei sollte die Bewegung entweder horizontal oder vertikal ablaufen. Zurück auf die vorherige Ebene findet die Bewegung immer in entgegengesetzter Richtung statt. Ein weiteres Beispiel findet man beim Ein- und Ausblenden der Notifications und Tooltips oder der Slideshow.
Dialoge und Layer blenden sich über dem aktuellen Inhalt ein, um Zusatzinformationen anzuzeigen, ohne den aktuellen Prozess zu verlassen. Weitere Beispiele sind Tooltips und Notifications.
