Why do mobile apps use animated transitions?

Question

So many mobile apps are using animated transitions (much like the web was using flash animations in the early 2000s). In a desktop internet browser, clicking a link on a web page takes you to the the next page while a lot of mobile apps will fly screens from different directions. When is it okay to use animated transitions and do mobile apps need these transitions?

(For context, Snapchat uses almost no animation transitions successfully and creates a quick and responsive experience. I wonder if this will become the norm.)

Answer 1

To not lose context. At least according to Adrian Zumbrunnen, who wrote the article Smart Transitions in User Experience design. He ment that on a single page, which on mobile, can be very long if three columns are made to one, user suffer from the loss of context. If a user clicks a link and you imediately jump to another anchor, without showing the way, user can get confused. But if you animate scrolling, user would benefit from knowing where on the page they actually are. To enforce his argument, Adrian cites Steve Jobs on design:

It’s not just what it looks like and feels like. Design is how it works.

But this is tricky, and you have to be careful on implementation. Too much animations will scare your users, and have the opposite effect of what you're trying to accomplish. Use sublime animated transitions, and always picture you users experience when designing.

Answer 2

I think you're wrong when you compare transitions in mobile to the animations to the early 2000's flash "episode".

These animations where more like "we can do it", while the transitions in mobile apps actually serve a good purpose.

If a link is clicked that navigates horizontally (e.g. a "next page" link) a nice and well-known slide-in animation from the right (at least in left-to-right reading countries) supports the overall user experience by

• providing an additional hint on where in the app he is
• shadowing possible loading times

If a link leads to a different application, it uses a "new window" transition, wich helps the user to understand that he is now somewhere else.

This can also work for new windows in the same app. On android, this animation kind of indicates that the user can return to the previous screen by hitting the "back" button, what isn't neccesary true for paging or tabs.

Another example for a supporting animation can be used in combination with the Responsive Disclosure pattern. Depending on the data that‘s about to appear, a decent animation can support the mental connection of the different data sets.

Stick to the platform standards and keep it consistent.

Answer 3

Animations are okay to be used provided that the processing power that is required to perform animation doesn't slow down the completion of what user is trying to achieve. They length of the animations also shouldn't be too long even if it doesn't consume much processing power.

Animations are typically used for two reasons...

1. Ensure that user doesn't loose track of where they came from by sudden appearance of new screen.

2. Some operations take some time to be completed when the device needs to be idle. To ensure that they keep the user engaged.

3. Did I say only two reasons!? well, some put the animations just to make the application look interesting and engaging and flashy.

Answer 4

It appears mobile apps use animated transitions like websites used animated transitions in the early days of the internet for a couple key reasons.

First, technologists are in awe of their ability to create new and interesting interactions. This self-adoration typically leads to creations that are simultaneously both amazing and annoying.

Second, with the relatively new technology, neither developers nor general audience users have defined a "normal" experience. Thus, animations will help provide context until industry navigation standards emerge.

Websites have standardized many activities over time based on experience. Thus, the need for animations and animated transitions in particular has declined to almost be non-existent. They are frequently used in tutorials. The desire to use them elsewhere has declined due to the risk of losing users. On successful websites, you don't want to "invent" an animation that loses users.

So many app animations are essentially a technology transitional necessary evil, in a sense. Until app designers develop industry standards for the new technology (apps and smartphones in general), animations are used in these limited cases:

1. where the app designer is not using standard navigation out of ignorance and is not aware of standard navigational options and techniques, the result of inexperience or limited resources

2. because the designer is challenged with something in their particular app that creates the need for a new type of transition or anchoring mechanism for good UX and animating it makes sense in order to keep users oriented. Because the technology was new a few years ago, there are many cases where this was necessary as described in other answers. This happens with new features like text messaging, which essentially did not exist before apps and vice versa. These will likely recede as the general audience becomes familiar with the technology and activity based expectations emerge.

3. the designer is so absorbed with themselves and their ability to do or create something, that they create and place animations in an app without regard for an existing, successful pattern that should be used. Or worse, they are trying to invent a better mousetrap (animation/transition) because they feel that existing successful patterns still are not good enough. This is just narcissism, but on rare occasion the narcissist is right and takes it to the next level.

Answer 5

Animations in mobile apps become a new norm. It happens because animated transitions and some other moving elements in apps allow users to feel like they interact with real objects. In fact, it gives them a feeling of an intuitively clear behavior of UI elements and helps to understand how user’s actions correspond to the apps reaction.

From our experience in mobile development, we’ve identified eight main types of animations for mobile apps. Take a look to be sure that popularity of animations is going to increase in the nearest future: http://blog.azoft.com/8-main-types-animations-mobile-apps/

Answer 6

On the web, you cannot guarantee smooth 30fps animations in general, so the design preferences went away from animations for those actions where action-start feedback is provided mechanically (such as a mouse click).

For mobile/touch devices without this mechanical feedback, designers are (re)introducing visual feedback mechanisms such as apple's patented over-scroll/elastic scroll/rubber banding feature or google's material design.

Animations for following a link are part of this trend - especially when there is a delay between the touch action and displaying new content, users might get confused visibly during user testing.

I suspect people are a bit more patient waiting after a mouse click so there was no need for such visual feedback on desktop - only when you need loading indicators...