Interactive design doesn't have to be complicated
- Transfer
Interactivity helps to make user interfaces expressive and easy to use. Despite the great potential, interactivity is perhaps the least understood of all design disciplines. This may be due to the fact that interactivity is one of the new members of the user interface family. Visual design and interaction design go back to early graphic interfaces, but the interactive design had to wait for more modern equipment for a smooth animation render. Layering interactivity of the user interface on traditional animation contributes to misunderstanding. A lifetime can be spent on mastering the 12 basic principles of DisneyDoes this mean that user interface interactivity is also difficult? People often tell me that designing interactivity is difficult or that choosing the right values is ambiguous. I argue that in the areas most important to the user interface, interactive design can and should be simple.
Where to begin?
The main objective of interactive design is to help users navigate the application, illustrating the relationship between user interface elements. Interactive design also has the ability to add a character to the application with animated icons, logos and illustrations; however, usability should take precedence over expressive elements. Before demonstrating the animation skills of a character, let's start by creating basic interactivity, focusing on navigation transitions.
Transition patterns
When designing a navigation transition, simplicity and consistency are key. To do this, we will choose two types of movements:
- Container based transitions
- Transitions without container.
Container based transitions
Elements such as text, icons, and images are grouped inside containers.
If the composition includes a container, such as a button, card, or list, then the transition project is based on the animation of the container. Containers are usually easily detected based on their visible borders, but remember that they may also be invisible before the transition, as a list item without separators. This template is divided into three stages:
- Animate the container using standard animation mitigation (this means that it accelerates quickly and then slows down gently). In this example, the container dimensions and corner radii are animated from a round button to a rectangle, completely filling the screen.
- Масштабируйте элементы в контейнере, чтобы они соответствовали ширине. Элементы прикреплены к верхней части и замаскированы внутри контейнера. Это создает четкую связь между контейнером и элементами внутри.
* Animation is slowed down to illustrate the appearance and disappearance of elements.
Applying this pattern to all transitions with a container sets a consistent style. It also makes clear the connection between the initial and final compositions, as they are linked by an animated container. To demonstrate the flexibility of this pattern, five different compositions are shown here:
* The animation is slowed down to illustrate how the initial and final compositions are connected by the container.
Some containers simply appear behind the screen using standard softening. The direction of its movement is determined by the location of the component with which it is associated. For example, clicking the navigation menu icon in the upper left corner will cause the container to move to the left.
If the container is out of the screen, it appears smoothly and zooms in. Instead of animating from 0%, he starts the animation from 95% to avoid undue attention to the transition. Scale animation uses easing easing , that is, it starts at maximum speed and gently slows down. To disappear, the container simply fades without scaling. The end of the animation should be less pronounced than the beginning in order to focus the user's attention on the new content.
* Animation is slowed down to illustrate how containers can emerge due to a gradual change in the element (scaling, appearing and disappearing)
Transitions without container
Some compositions do not have a container on which the transition is based, for example, by clicking the icon in the lower navigation, which takes the user to a new destination. In these cases, a two-step pattern is used:
- The composition begins by a smooth decay, ends with a smooth appearance.
- As the final composition disappears, it also scales slightly using the softening reduction of elements. Again, scaling is applied only at the moment the composition appears, in order to emphasize the new content in comparison with the old one.
* Animation is slowed down to illustrate how transitions without a container occur using scaling, appearance and disappearance of elements.
If the beginning and end of the composition have a clear spatial or phased relationship, then joint movement can be used to enhance it. For example, when navigating a stepping component, the beginning and end of a composition scrolls vertically as they gradually fade out or appear. This enhances their vertical layout. When you press the next button to view further material, the composition scrolls horizontally. Moving from left to right enhances the understanding of the subsequent event. Joint motion uses elements of standard mitigation.
* Animation is slowed down to illustrate how vertical and horizontal movement occurs.
Best practics
The simpler the better
Given their high frequency and close links with usability, navigation transitions should generally support style functionality. This does not mean that they should never be stylized, just make sure that the choice of style is justified by the brand. Eye movement is usually best delayed by elements such as small icons, logos, downloaders, or a free state. A simple example below may not attract so much attention to Dribbble, but this will make the application more convenient.
* Animation slowed down to illustrate various movement styles.
Choose the right duration and mitigation
Navigation transitions should use durations that prioritize functionality, being fast, but not so fast that they do not become a disorienting factor. The duration is selected depending on what percentage of the screen animation takes. Since navigation transitions usually take up most of the screen, a duration of 300 ms is a proven method. In contrast, small components, such as switches, use a short duration of 100 ms. If the transition is too fast or slow, adjust its duration in 25 ms increments until it reaches the right balance.
Softening describes the speed at which an animation accelerates and slows down. Most navigation transitions use standard element mitigation, which is an asymmetric type of mitigation. This means that elements accelerate quickly and then slowly slow down to focus on the end of the transition. This type of softening gives the animation a natural quality, since objects in the real world cannot suddenly start and stop moving. If the transition seems hard or robotic, then most likely symmetrical or linear softening was chosen erroneously.
* Animation slowed down to illustrate various types of mitigation.
The patterns and best practices outlined in this article are designed to create a practical and unobtrusive style of movement. This is suitable for most applications, however some brands may require more intense style expressions. To learn more about motion styling, read our customization instructions here .
After the navigation transitions are implemented, the task of adding a character to your application begins. It is here that simple patterns do not work, and here you can fully realize your animation skills ...
Personal animation can add ease to a serious mistake.
If you are interested in learning more about the possibility of movement, be sure to read our guides on the interactivity of elements .