Custom animations in a mobile application


    Modern mobile audience every year imposes ever-higher demands on the quality of applications and services. And first of all it concerns the design of interactions and mobile animations.

    Every day we exchange messages, use social networks, instant messengers, and many of these services contain dozens of custom-made thoughtful animations.

    Custom (non-standard) animations are a big field for experiments and application development. What kind of knowledge will a designer need and what problems may await during the development process? Let's look at these issues with the iFunny app.

    The basics


    Documentation


    Let's start with the theory. The following three documents will help us better understand what animations are in mobile interfaces:

    • Material Design by Google. It mainly describes animations from a mathematical and engineering point of view. This is a basic document for any designers who work with interfaces. There are many recommendations for defaulting “safe” values ​​of speed and accelerations, basic principles of choreography of movement of objects, examples and much more.
    • Apple Human Interfaces Guidelines . In this document, animations are described from an emotional point of view. That is, what kind of sensations and impressions should the user leave animation in the interfaces.
    • 12 principles of Disney animation. Animators Frank Thomas and Ollie Johnston in 1981 published the book “The Illusion of Life: Disney Animation”, which talked about 12 basic principles of realistic animation. Despite the fact that these rules were created for animations, many of them directly moved to modern interfaces.

    Appointment


    Each animation should clearly fulfill its function. Therefore, it is important to understand which group it belongs to and what will be the limitations in terms of design.

    Conventionally, all animations can be divided into 3 large groups:

    1. Auxiliary . The most voluminous group. These animations simplify navigation, reflect the position of an object in the system, demonstrate the hierarchy of application objects, focus attention and make the interface as a whole intuitive for the user.

      grid

      One example of such an animation is the smooth exit of a picture from a common gallery, which shows the hierarchy of objects and simulates action in the real world when we take a picture and bring it closer to view it.
    2. Transmitting system status and user feedback indicators . The main task of this group of animations is to show the user in real time where he is located, what is happening with the application, and display the reaction of the system to the action performed by the user.

      pull-to-refresh

      An example is a spinner that appears when a profile page is refreshed.
    3. Entertaining . This includes any animations whose main purpose is to entertain the user. In iFunny, there are such animations when evaluating a meme or repost in the Featured and Collective feeds.

      smile

      Despite the fact that this group imposes minimal restrictions on the designer, it’s worth introducing it in a very metered way and only where it is appropriate, since each such animation takes time from the user and can become an obstacle in achieving the ultimate goal.

    Duration


    By default, Android offers three basic animation durations:

    • 200 ms - short;
    • 400 ms - average;
    • 500 ms is long.

    Of course, this does not mean that you cannot use other values. It is possible and necessary to experiment, but at the initial stage, these values ​​can protect against errors in choosing the best option.

    If we talk about the recommended range of animation durations in mobile interfaces, then this is from about 100 to 700 ms. These figures are based on the peculiarities of human visual perception of information, namely saccade and fixation .

    Acceleration


    No matter how optimal the speed and duration are, the linear movement of objects always looks unnatural, false and will annoy your users.

    Consider the main types of acceleration curves used in mobile development.

    linear

    Linear : driving at uniform speed. Such an animation always looks bad and artificial, since in the physical world all objects move at an uneven speed.

    ease-in

    Ease-in : slow start and fast finish. This curve is rarely used in interfaces, because the animation seems to be slowed down due to long overclocking.

    ease-out

    Ease-out : quick start and braking. Used often enough. The quick appearance of an object at the beginning of movement does not make the user wait, and smooth braking imitates the behavior of moving objects in the physical world. It looks natural and nice.

    ease-in-out

    Ease, ease-in-out : slow start, acceleration, and braking. These acceleration curves are used most often. They look neat, natural and comply with the principles of Disney animation: a smooth start and a smooth finish.

    But when using ease and ease-in-out curves in a program such as After Effects, you should carefully change the shape of the curve so that the animation does not become very sharp.

    IFunny Experience


    Let's move from theory to practice using iFunny as an example. We will analyze the difficulties and problems that we had to face, and see the final versions of some animations.

    Main menu


    Since iFunny decided to abandon the usual “hamburger”, custom animation was also needed for a non-standard menu.

    One of the initial prototypes looked like this:

    menu

    Everything about him was good: a smooth appearance, and a well-developed general choreography of the movement. The ease-in-out acceleration curve was used.
    The animation was as smooth as possible and the overall timing was 700 ms.

    But any decision in animation, as well as in design as a whole, must be balanced and justified. Some time later, it became noticeable that we had to wait longer and longer until all the elements took their final position with a new menu call. An attempt to speed up the entire animation made it sharp and even less enjoyable.

    menu

    In this case, the time remembered the purpose of the animation. Since calling the navigation menu is an action performed by users hundreds of times a day, its main task is to provide fast and comfortable navigation between sections.

    The obvious and right decision came to the rescue - to simplify. The final animation of the navigation menu looked like this:

    menu

    The overall coordinated movement was replaced by the successive appearance of elements from transparency.

    Because the feeling that the menu fell out remained, the background was simplified as much as possible. Now he, like all menu items, appeared through alpha.

    The final version retained the original idea and allowed to reduce the timing to 250 ms (against 700 ms in the original version). The animation remained attractive and began to fulfill the task assigned to it.

    Gallery of memes


    Another major animation of the iFunny app is scrolling through the meme gallery.

    I wanted to support the general concept of multi-layer application.
    The first version looked like this:

    gallery

    But it turned out that while scrolling through the gallery, memes ran into each other and distracted attention from the newcomer. The user experience problem also surfaced. The classic view of the gallery is horizontal or vertical. In our version, there was a feeling that memes were stacking in a large stack, and returning to previous memes was no longer as natural as swiping to the right, in which the meme moves after the movement of the finger.

    The flaws were eliminated by returning to the classic gallery with a slight downscaling of the leaving meme.

    gallery

    There is still worth paying attention to an interesting point in terms of development. The animation did not become easier - there was an offset and a decrease in the scale of the leaving meme. But visually the gallery became lighter, neater and retained the look familiar to users.

    Other animations


    The designer spends most of the design time developing much less noticeable and massive animations. Such work is also very important: it is from the details that the general feeling of working with the interface is formed.

    For example, the sequential appearance of memes when moving to a vertical gallery , which conducts the user’s view from top to bottom, setting the vector of the subsequent movement.

    explore

    Removing a response to a comment . Thanks to this decision, after deleting a comment, the user's gaze returns to the same place where he was before the context menu was called.

    comments

    On the screen of the user's personal profile, his nickname was located under the avatar, and when scrolling, he moved to the toolbar. Thus, the user could at any time see whose profile it is.

    comments

    This solution, by the way, was spied on Twitter. In fact, there is nothing wrong with borrowing some good ideas.

    Tabs . To preserve the airiness and accuracy of the appearance, the signatures of inactive tabs are hidden. The name appears only in the active state.

    comments

    The designer's work does not end with the transfer of animation metrics and a description of the general principles of the element's behavior. Sometimes the task requires the preparation of small algorithms that provide for the correct display of elements in non-standard situations. For example, disclosing a response to a comment.

    Initially, the spinner was shown immediately from the moment of tap on the icon of disclosure of answers to the moment of their appearance. But with fast internet, it looked untidy.

    comments

    For this case, simple rules were invented that made it possible to handle situations with slow and fast Internet separately.

    At the beginning, it was already said that the lower limit of the duration of the animation for a comfortable perception by the human eye is 100-200 ms. That is why we introduced a delay in the appearance of the spinner. That is, if the answers managed to load faster than 200 ms, then the spinner was not displayed.

    comments

    If the responses did not have time to load in 200 ms, the spinner was displayed from the 201st millisecond. Additionally, in order to prevent short-term blinking, the minimum spinner display time was set.

    comments

    It’s obvious that animations in mobile interfaces are an important and necessary part of the interaction design. Carefully thought out mobile animation facilitates the consumption of content, positively affects brand loyalty and even increases the amount of time a user spends in the application. And development in this area is an integral part of any strong and progressive team.

    Are you experimenting with mobile animations? Share your experiences and solutions with us in the comments!

    Also popular now: