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 unrealised in a designer’s portfolio

We separate interface animations into two types:

  1. Functional UX animation
  2. 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…

Ramotion
Sergii Ganushchak

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.

Stan Yakusevich

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.

Aurélien Salomon

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.

Lukas Horak

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:

https://dribbble.com/shots/1936758-GIF-of-the-Tap-Bar-Concept
https://dribbble.com/shots/3208361-Plus-expanded
https://dribbble.com/shots/2232385-Pull-Down-to-Refresh
https://dribbble.com/shots/1692646-Splash-screen-animation
https://dribbble.com/shots/1701001-GIF-Exercise
https://dribbble.com/shots/3247394-Delivery-app-design

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?

  1. 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.
  2. 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:
Clear Path Robinhood City Guides

Who else makes UI animations and what are their reasons?

  1. Everyone else is doing it.
  2. It’s fun or impressive for the designers and the client. How will this affect the app’s promotability? No clue.
  3. It’s what the client wants because it’s cool.
  4. It comes from inexperience and ignorance of the challenges that may come up in the development phase.

Final Result

When developing an application from idea to reality, it’s necessary to clearly gauge every step of the way. Animations shouldn’t be used to push the design onto the client or for marketability. Trust me, it’s a totally separate part of the work which must be acknowledged when evaluating the project. When it comes to UX or UI, animations can take up to 100% of the entire development process.

Sure, you can impress the client with your design and badass animations, but once you reach the development phase it’ll just work against you. You’ll need extra resources and cash to make the deadline. It’ll make the project unprofitable. Besides, if you don’t have highly skilled developers on board, then you’ll be in the hot seat justifying to the client why you bother to design animations if you can’t make them happen in reality.

On the other hand, sometimes the client is ready for the extra expense and can invest into any animation without wondering what it’s for or how it’ll help move the product. Maybe he thinks that a super cool, high-end product will market itself. Sorry, but that theory is full of holes since every product requires serious promoting.

 

Story via prototypr.io