Transitions
User orientation in the interface is significantly improved by creating a flowing, comprehensible transition between two views. Individual elements can be transformed or entire views animated. Here, key importance is attached to the arrangement of elements, the timing of the appearance of an element and the duration of an animation. These parameters are considered individually for each element of a page.
On mobile devices, certain motion patterns are covered by native functions (e.g. when changing between two apps) and should therefore not be applied at these points.
Show and Hide
In order to make it easier for the user to grasp content, views should be structured in a particular order. When changing into another view, the content that is no longer relevant to the context is hidden and the new content is shown.
- Elements in the viewport appear from bottom to top with a slight delay.
- All other elements do not appear until the user scrolls them in the viewport. The animation should not take up much time so that the user does not have to wait for the content to appear.
- All elements are only animated once. They are no longer hidden once they have been scrolled out of the viewport.
- Instead of images not yet loaded, a colour block appears in the dimensions of the image.
- Background areas or large images are excluded from the animation.
- Asynchronous loading is used for the animations; alternatively, fade-in transitions are also possible.
- Elements disappear by means of a fade-out.
When the image is clicked, it appears as large as possible and is transformed to screen size in a transition. Other examples are modals and form fields.
Content push is used to go deeper into a hierarchy. The movement here should be either horizontal or vertical. When returning to the previous level, the movement is always in the reverse direction. Another example is to be found in the showing and hiding of notifications and tooltips or the slideshow.
Dialogues and layers are superimposed on the current content so as to display additional information without leaving the current process. Other examples are tooltips and notifications.
