Principles
Categories of illustrations:
1. Informative
Represent information without requiring any input from the user.
If it’s purely informational, we consider to not animate them, to maintain simplicity and avoid overcomplicating user flows.
2. Actionable
Illustrations that reflect the current state of a process.
To emphasize the state itself, we use animation as a complement. In such cases, we follow the previously specified standards, which include Entry, Feedback State, Change State, and Loading.
Animation parts
Animations of illustrations is broken down into tree parts: intro, idle and states.
By incorporating these parts, illustrations become more dynamic and responsive, enhancing both the aesthetic and functional aspects of the app.
1. Intro
Intro animations occur when an element, such as an illustration, first appears on the screen. Their primary purpose is to capture the user's attention and establish the tone for the interaction. Intro animations are crucial for smoothly introducing visuals, enhancing the overall user experience right from the start.
In this case, the coins become activated, rising up, to transition from a static state to action. Once the intro part concludes, the animation smoothly progresses into the loading state.
2. Loading
Different states refer to how an illustration behaves based on user interactions or changes in app context. These state animations enhance the user experience by providing clear, immediate feedback during key moments, facilitating smoother interactions within the app.
In the loading state, the animation is designed as a loop. Duration depends on the backend processing time. Once the data are received, the animation sequence should smoothly conclude and transition to the next state.
3. Outro - Success
The success state begins with the final frame of the loading state to ensure a smooth transition. It is a one-shot animation that concludes with an outro, marking the completion of the process.
3. Outro - Error
The error state begins with the final frame of the loading state for a seamless transition. It features a brief, one-shot animation that communicates the error, followed by an outro to signal the end of the process.
Animations of illustrations
Golden rules
1. Give control to users
While prominent motion can be appropriate from a design perspective, providing an alternative view or control over animations significantly helps users sensitive to motion.
2. Focus on purpose
Use motion purposefully to enhance the experience without overwhelming it. Avoid adding motion just for the sake of it—excessive animation can distract users and cause discomfort.
Alternative indication of state
Avoid relying on an animations as the sole way to convey important information; use haptics and audio to ensure all users can fully engage.
- If an animation visually indicates an important change (e.g., a shaking form field to show an error), offer a static cue as well (like a clear label or text error message).
- This ensures no crucial information relies solely on motion.
General recommendations (motion reduction)
Avoid adding motion to UI elements used very often.
Use animated SF Symbols when it genuinely enhances the experience.
Prioritize smooth, efficient user interactions.
Evaluate whether an animation is essential (e.g., crucial to a feature’s functionality) before deciding if it can be turned off.
Supplement animations with other feedback methods, such as audio cues or haptic feedback, when possible.
Not recommended
Amount of screens
We don’t recommend using animations, because of the amount of screens using illustration following each other. The screens are informational for the user, and adding animations would make them feel overwhelming and not accessible.
*The animation should not be used because of the amount of screens using illustration following each other
Multiple animations
We don’t recommend using animations when a screen contains multiple illustrations, such as an products list. These screens are visually dense, and their primary function is to convey information. Animating all elements would make the screen feel overwhelming and less accessible, as in previous examples.
* We don’t recommend using animations for multiple illustrations on a single screen.
Decorative function
The illustration serves a secondary, decorative role, and in this case, animation is not recommended. The screens are purely informative and don’t require additional visual emphasis through animation.
* Don't use animations for secondary, decorative role of illustration.
Animating objects
We don’t recommend animating all elements within an illustration. It's important to focus on animating only the key parts that we want to highlight. Faded ones should remain static except initial movement when they appear. Animating too many elements could make the design feel cluttered and overwhelm the user.
* Don’t animate all elements at the same time.
Empty state
Animating the empty state is not necessary. In this specific case, where the user has no control over the number of incoming messages and no action is expected from user, we do not recommend animating this state.
* Don’t use animation if no action is expected from user.
Recommended
Bottom sheet
Since the bottom sheet already has its own transition from the bottom, combining this with animations of illustrations could overwhelm the user and cause confusion about the intended action.
*TBD
Entry & Feedback
Our focus is on key signature moments that can be enriched through motion. By introducing animation at specific points in the flow, user engagement is significantly enhanced. Animations are especially recommended for feedback states, like celebrations, or at entry points into the app. These animations should be seamless, natural, and create memorable moments that evoke emotions and leave a lasting impact on the user.
* Animation usage at feedback state and entry position.
Loading & Change
Animations in loading states and screens where changes occur enhance user experience by indicating ongoing processes and maintaining engagement during updates. The animation will play until the backend processes terminate.
* Animation usage at loading state and screens where comes to changes.
Change state
Animations during state changes provide seamless visual feedback, helping users understand how their input affects other processes.
* TBD (when the illustration showing representative content)