Functionality vs Emotions in Mobile Interface Animation
Let’s start off by pointing out that we’ll be talking about the practical applications of animation in terms of the effort and expediency its use entails. Creating an animation design is obviously much easier than transforming it into reality, and programming animations can seriously lengthen the time spent on app development. This is exactly why most animations get stuck in the concept phase and stagnate unrealized in a designer’s portfolio.
We separate interface animations into two types:
- Functional UX animation
- Emotional UI animation
Functional UX animation improves an app’s responsiveness.
These animations undoubtedly enhance usability, purposefully contributing to some specific action. Typically, they don’t require more time than a user’s particular action sequence lasts. For example, Pull to Refresh, Loading Indicators, the action button, or swipe…
Unique takes on spinners renew content. The animation ends as soon as data has been received. These examples bridge the gap between functional and emotional animation, but developing this species of spinner isn’t as easy as it looks.
Here we see a scroll bar which changes colors when you move it. It’s a functional element since it provides a tactile and “thermal” feel to changes in the discount’s “temperature.” Hot or cold. As far as the effort it requires, it’s a pretty difficult effect for programming to achieve.
Different examples of horizontal swiping with smooth transition between screens. If this animation doesn’t outlast the interaction and can be controlled by finger, then it’s a superb example of functional animation. Interfaces with smooth transitions make a first-rate impression, and not just because they’re rare.
This is an example of a complicated animation which slows down the user’s action. The cards’ additional twitching is unnecessary, delaying us by several seconds. The twitching effect will take about 6–8 hours of development time frame.
Overall, it’s essential to take functional animation into account when planning schedules and budgets. It goes without saying that the interface has to be dynamic and responsive since that boosts interactivity. But keeping in mind the extra time and effort animation demands is key, even if you’re only designing it. This ensures your portfolio contains only fully realized projects which were developed by third-party devs and for which your design is the foundational component.
Emotional UI animation is the interface’s garnish.
Most of the time, these kinds of animations have only the wow factor going for them and the aim of their appeal is to promote the application. Improving UX is put on the back burner so these animations are super complicated and elaborate, limited only by the designer’s imagination. Here are a few examples:
I bet most designers have something along those lines in their portfolio, but it tends to remain in the idea stage. When it comes to development, both the contractor and the client understand that it’s not a major deal and that they can live without it. After all, the effort required for these animations is colossal and reflects directly on development’s budget and scheduling.
So who can afford to embed these animations?
- Companies who’ve been around the market forever and aren’t struggling for survival. They can polish their most popular products. Since they’re long past the stage of hyping their products and have resolved tons of UX issues, they have the opportunity to invest extra time, money, and effort for emotional animations. Great examples are: Twitter, Uber, Airbnb, Things 3, and others.
- Startups that have a clear cut plan for how it will advance their marketing strategy. They might be aiming for an award like Apple Design Awards, Tappawards, The Webby Awards, Global Mobile Awards, Driven x Design Awards, and others. So it might be a competitive advantage, but turning an animation into an advantage isn’t so straightforward. Some good examples might be these apps:
Others do this for various reasons, such as:
- Everyone else is doing it.
- It’s fun or impressive for the designers and the client. How will this affect the app’s promotability? No clue.
- It’s what the client wants because it’s cool.
- It comes from inexperience and ignorance of the challenges that may come up in the development phase.
- Lack of marketing strategy, as a client doesn’t understand what animation for or how it’ll help move the product.
Final Result
When developing an application from an idea to reality, it’s necessary to clearly gauge every step of the way. Animating is a totally separate part of the process which must be acknowledged right away when evaluating the overall project. After all, animations can take up to 100% of the entire development process.
Functional animations serve a definite purpose and it’s important to take them into account when preparing timelines and budgets. First of all, they improve usability. The intricacy and realization of these animations depends entirely on the creator.
Emotional animations aren’t paramount, so it’s best to consider the circumstances in which you or the client want to embed them into the app. Most of the time, emotional animations aren’t worth the effort and it’s much more effective to invest the cash into promoting the product, something which it’s easy to forget about or neglect, figuring that a stellar idea will “promote itself.”
